diff --git a/src/components/MDAlert/MDAlertCloseIcon.tsx b/src/components/MDAlert/MDAlertCloseIcon.tsx deleted file mode 100644 index efe0f2d..0000000 --- a/src/components/MDAlert/MDAlertCloseIcon.tsx +++ /dev/null @@ -1,35 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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"; - -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.tsx b/src/components/MDAlert/MDAlertRoot.tsx deleted file mode 100644 index 7f02ef4..0000000 --- a/src/components/MDAlert/MDAlertRoot.tsx +++ /dev/null @@ -1,48 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, Theme } from "@mui/material"; - -export default styled(Box)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => { - const { palette, typography, borders, functions } = theme; - const { color } = ownerState; - - const { white, gradients } = palette; - const { size, 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: size.md, - fontWeight: fontWeightMedium, - }; -}); diff --git a/src/components/MDAlert/index.tsx b/src/components/MDAlert/index.tsx deleted file mode 100644 index 1777ef8..0000000 --- a/src/components/MDAlert/index.tsx +++ /dev/null @@ -1,77 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode } from "react"; - -// @mui material components -import Fade from "@mui/material/Fade"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; - -// Custom styles for the MDAlert -import MDAlertRoot from "components/MDAlert/MDAlertRoot"; -import MDAlertCloseIcon from "components/MDAlert/MDAlertCloseIcon"; - -// Declaring props types for MDAlert -interface Props { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - dismissible?: boolean; - children: ReactNode; - [key: string]: any; -} - -function MDAlert({ color, dismissible, children, ...rest }: Props): JSX.Element | null { - const [alertStatus, setAlertStatus] = useState("mount"); - - const handleAlertStatus = () => setAlertStatus("fadeOut"); - - // The base template for the alert - const alertTemplate: any = (mount: boolean = 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; -} - -// Declaring default props for MDAlert -MDAlert.defaultProps = { - color: "info", - dismissible: false, -}; - -export default MDAlert; diff --git a/src/examples/Calendar/CalendarRoot.tsx b/src/examples/Calendar/CalendarRoot.tsx deleted file mode 100644 index 2e11d67..0000000 --- a/src/examples/Calendar/CalendarRoot.tsx +++ /dev/null @@ -1,174 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, Theme } from "@mui/material/styles"; - -export default styled(Box)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => { - const { palette, typography, functions, boxShadows } = theme; - const { darkMode } = ownerState; - - const { white, dark, light, grey, gradients, info } = palette; - const { size, fontWeightMedium, fontWeightBold, fontWeightRegular, fontWeightLight } = typography; - const { linearGradient, pxToRem } = functions; - const { md } = boxShadows; - - return { - height: "100%", - - "& .fc-media-screen": { - height: "100%", - color: dark.main, - }, - - "& .fc-theme-standard .fc-scrollgrid": { - border: "none", - }, - - "& .fc-theme-standard thead tr th": { - borderLeft: "none", - borderRight: "none", - }, - - "& .fc-theme-standard td, .fc-theme-standard th": { - borderColor: light.main, - }, - - "& .fc th": { - textAlign: "center", - }, - - "& .fc .fc-col-header-cell-cushion": { - fontSize: size.sm, - fontWeight: fontWeightMedium, - color: darkMode ? white.main : grey[500], - }, - - "& .fc .fc-daygrid-day-number": { - color: darkMode ? white.main : grey[700], - fontSize: size.sm, - fontWeight: fontWeightLight, - width: "100%", - textAlign: "center", - }, - - "& .fc-scrollgrid-section.fc-scrollgrid-section-header > td": { - border: "none", - }, - - "& .fc-scrollgrid-section.fc-scrollgrid-section-body.fc-scrollgrid-section-liquid > td": { - border: "none", - }, - - "& .fc-scrollgrid-sync-table": { - height: "auto !important", - }, - - "& .fc .fc-view-harness-active > .fc-view": { - position: "static", - height: "100%", - }, - - "& .fc .fc-scroller-liquid-absolute": { - position: "static", - }, - - "& .fc-daygrid-event": { - margin: `${pxToRem(0.5)} ${pxToRem(2)}`, - border: "none", - borderRadius: pxToRem(5.6), - fontSize: size.sm, - fontWeight: fontWeightMedium, - }, - - "& .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events": { - minHeight: pxToRem(32), - }, - - "& .fc-event-title": { - fontSize: `${size.xs} !important`, - fontWeight: `${fontWeightRegular} !important`, - padding: `${pxToRem(2)} ${pxToRem(4.8)} ${pxToRem(1.5)} !important`, - }, - - "& .fc-button, .fc-today-button, .fc-button:disabled": { - backgroundColor: `${info.main} !important`, - borderColor: `${info.main} !important`, - fontSize: `${size.sm} !important`, - boxShadow: `${md} !important`, - opacity: "1 !important", - transition: `all 150ms ease-in`, - - "&:hover, &:focus, &:active": { - transform: "scale(1.02)", - boxShadow: `${md} !important`, - backgroundColor: `${info.main} !important`, - borderColor: `${info.main} !important`, - }, - }, - - "& .fc .fc-button .fc-icon": { - fontSize: size.sm, - }, - - "& .fc-toolbar-title": { - fontSize: `${size.lg} !important`, - fontWeight: `${fontWeightBold} !important`, - color: darkMode ? white.main : dark.main, - }, - - "& .event-primary": { - backgroundImage: linearGradient(gradients.primary.main, gradients.primary.state), - "& *": { color: white.main }, - }, - - "& .event-secondary": { - backgroundImage: linearGradient(gradients.secondary.main, gradients.secondary.state), - "& *": { color: white.main }, - }, - - "& .event-info": { - backgroundImage: linearGradient(gradients.info.main, gradients.info.state), - "& *": { color: white.main }, - }, - - "& .event-success": { - backgroundImage: linearGradient(gradients.success.main, gradients.success.state), - "& *": { color: white.main }, - }, - - "& .event-warning": { - backgroundImage: linearGradient(gradients.warning.main, gradients.warning.state), - "& *": { color: white.main }, - }, - - "& .event-error": { - backgroundImage: linearGradient(gradients.error.main, gradients.error.state), - "& *": { color: white.main }, - }, - - "& .event-light": { - backgroundImage: linearGradient(gradients.light.main, gradients.light.state), - - "& *": { color: dark.main }, - }, - - "& .event-dark": { - backgroundImage: linearGradient(gradients.dark.main, gradients.dark.state), - "& *": { color: white.main }, - }, - }; -}); diff --git a/src/examples/Calendar/index.tsx b/src/examples/Calendar/index.tsx deleted file mode 100644 index 0ac243a..0000000 --- a/src/examples/Calendar/index.tsx +++ /dev/null @@ -1,102 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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. -*/ - -// @fullcalendar components -import FullCalendar from "@fullcalendar/react"; -import dayGridPlugin from "@fullcalendar/daygrid"; -import timeGridPlugin from "@fullcalendar/timegrid"; -import interactionPlugin from "@fullcalendar/interaction"; - -// @mui material components -import Card from "@mui/material/Card"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Custom styles for Calendar -import CalendarRoot from "examples/Calendar/CalendarRoot"; - -// Material Dashboard 2 PRO React context -import { useMaterialUIController } from "context"; - -// Declaring props types for the Calender -interface Props { - header?: { - title?: string; - date?: string; - }; - [key: string]: any; -} - -function Calendar({ header, ...rest }: Props): JSX.Element { - const [controller] = useMaterialUIController(); - const { darkMode } = controller; - - const validClassNames = [ - "primary", - "secondary", - "info", - "success", - "warning", - "error", - "light", - "dark", - ]; - - const events = rest.events - ? rest.events.map((el: any) => ({ - ...el, - className: validClassNames.find((item) => item === el.className) - ? `event-${el.className}` - : "event-info", - })) - : []; - - return ( - - - {header.title ? ( - - {header.title} - - ) : null} - {header.date ? ( - - {header.date} - - ) : null} - - - - - - ); -} - -// Declaring default props for Calendar -Calendar.defaultProps = { - header: { - title: "", - date: "", - }, -}; - -export default Calendar; diff --git a/src/examples/Cards/BlogCards/SimpleBlogCard/index.tsx b/src/examples/Cards/BlogCards/SimpleBlogCard/index.tsx deleted file mode 100644 index 09293f6..0000000 --- a/src/examples/Cards/BlogCards/SimpleBlogCard/index.tsx +++ /dev/null @@ -1,105 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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"; - -// @mui material components -import Card from "@mui/material/Card"; -import MuiLink from "@mui/material/Link"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; -import MDButton from "components/MDButton"; - -// Declaring props types for SimpleBlogCard -interface Props { - image: string; - title: string; - description: string; - action: { - type: "external" | "internal"; - route: string; - color: - | "primary" - | "secondary" - | "info" - | "success" - | "warning" - | "error" - | "dark" - | "light" - | "default"; - label: string; - [key: string]: any; - }; -} - -function SimpleBlogCard({ image, title, description, action }: Props): JSX.Element { - return ( - - - - - - - - {title} - - - - {description} - - - {action.type === "external" ? ( - - {action.label} - - ) : ( - - {action.label} - - )} - - - ); -} - -export default SimpleBlogCard; diff --git a/src/examples/Cards/BookingCard/index.tsx b/src/examples/Cards/BookingCard/index.tsx deleted file mode 100644 index 52df2a5..0000000 --- a/src/examples/Cards/BookingCard/index.tsx +++ /dev/null @@ -1,124 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// @mui material components -import Card from "@mui/material/Card"; -import Divider from "@mui/material/Divider"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Declaring props types for BookingCard -interface Props { - image: string; - title: string; - description: string; - price: string; - location: ReactNode; - action?: ReactNode | boolean; - [key: string]: any; -} - -function BookingCard({ image, title, description, price, location, action }: Props): JSX.Element { - return ( - - - - - - - - {action} - - - {title} - - - {description} - - - - - - {price} - - - - place - - - {location} - - - - - ); -} - -// Declaring default props for BookingCard -BookingCard.defaultProps = { - action: false, -}; - -export default BookingCard; diff --git a/src/examples/Cards/ControllerCard/index.tsx b/src/examples/Cards/ControllerCard/index.tsx deleted file mode 100644 index 3c4a3f1..0000000 --- a/src/examples/Cards/ControllerCard/index.tsx +++ /dev/null @@ -1,95 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// @mui material components -import Card from "@mui/material/Card"; -import Switch from "@mui/material/Switch"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Material Dashboard 2 PRO React context -import { useMaterialUIController } from "context"; - -// Declaring props types for ControllerCard -interface Props { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; - state?: boolean; - icon: ReactNode; - title: string; - description?: string; - onChange: () => void; - [key: string]: any; -} - -function ControllerCard({ color, state, icon, title, description, onChange }: Props): JSX.Element { - const [controller] = useMaterialUIController(); - const { darkMode } = controller; - - return ( - - ({ - background: darkMode && !state && background.card, - })} - > - - - {state ? "On" : "Off"} - - - - - - {icon} - - - {title} - - {description ? ( - - {description} - - ) : null} - - - - ); -} - -// Declaring default props for ControllerCard -ControllerCard.defaultProps = { - color: "info", - state: false, - description: "", -}; - -export default ControllerCard; diff --git a/src/examples/Cards/InfoCards/DefaultInfoCard/index.tsx b/src/examples/Cards/InfoCards/DefaultInfoCard/index.tsx deleted file mode 100644 index e83fefd..0000000 --- a/src/examples/Cards/InfoCards/DefaultInfoCard/index.tsx +++ /dev/null @@ -1,83 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// @mui material components -import Card from "@mui/material/Card"; -import Divider from "@mui/material/Divider"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Declaring props types for DefaultInfoCard -interface Props { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; - icon: ReactNode; - title: string; - description?: string; - value?: string | number; - [key: string]: any; -} - -function DefaultInfoCard({ color, icon, title, description, value }: Props): JSX.Element { - return ( - - - - {icon} - - - - - {title} - - {description && ( - - {description} - - )} - {description && !value ? null : } - {value && ( - - {value} - - )} - - - ); -} - -// Declaring default props for DefaultInfoCard -DefaultInfoCard.defaultProps = { - color: "info", - value: "", - description: "", -}; - -export default DefaultInfoCard; diff --git a/src/examples/Cards/InfoCards/MiniInfoCard/index.tsx b/src/examples/Cards/InfoCards/MiniInfoCard/index.tsx deleted file mode 100644 index 631be55..0000000 --- a/src/examples/Cards/InfoCards/MiniInfoCard/index.tsx +++ /dev/null @@ -1,70 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// @mui material components -import Card from "@mui/material/Card"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -interface Props { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; - icon: ReactNode; - title: ReactNode; - description: string; - [key: string]: any; -} - -function MiniInfoCard({ color, icon, title, description }: Props): JSX.Element { - return ( - - - - {icon} - - - - {title} - - - {description} - - - - - ); -} - -// Declaring default props for MiniInfoCard -MiniInfoCard.defaultProps = { - color: "info", -}; - -export default MiniInfoCard; diff --git a/src/examples/Cards/MasterCard/index.tsx b/src/examples/Cards/MasterCard/index.tsx deleted file mode 100644 index 8359320..0000000 --- a/src/examples/Cards/MasterCard/index.tsx +++ /dev/null @@ -1,117 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 Card from "@mui/material/Card"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS 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"; - -interface Props { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; - number: number; - holder: string; - expires: string; - [key: string]: any; -} - -function MasterCard({ color, number, holder, expires }: Props): JSX.Element { - const numbers: string[] = [...`${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} - - - - - - - - - - ); -} - -// Declaring default props for MasterCard -MasterCard.defaultProps = { - color: "dark", -}; - -export default MasterCard; diff --git a/src/examples/Cards/PricingCards/DefaultPricingCard/index.tsx b/src/examples/Cards/PricingCards/DefaultPricingCard/index.tsx deleted file mode 100644 index d388977..0000000 --- a/src/examples/Cards/PricingCards/DefaultPricingCard/index.tsx +++ /dev/null @@ -1,189 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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"; - -// @mui material components -import Card from "@mui/material/Card"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; -import MDButton from "components/MDButton"; - -// Declaring props types for DefaultPricingCard -interface Props { - color?: - | "primary" - | "secondary" - | "info" - | "success" - | "warning" - | "error" - | "light" - | "dark" - | "white"; - badge: { - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - label: string; - }; - price: { - currency: string; - value: string; - type: string; - }; - specifications: { - label: string; - includes?: boolean; - }[]; - action: { - type: "external" | "internal"; - route: string; - label: string; - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - }; - shadow?: boolean; - [key: string]: any; -} - -function DefaultPricingCard({ - color, - badge, - price, - specifications, - action, - shadow, -}: Props): JSX.Element { - const renderSpecifications = specifications.map(({ label, includes }) => ( - - - - {includes ? "done" : "remove"} - - - - {label} - - - )); - - return ( - (shadow ? lg : "none") }}> - - - - {badge.label} - - - - - - - {price.currency} - - {price.value} - - /{price.type} - - - - - - {renderSpecifications} - {action.type === "internal" ? ( - - - {action.label}  - arrow_forward - - - ) : ( - - - {action.label}  - arrow_forward - - - )} - - - - ); -} - -// Declaring default props for DefaultPricingCard -DefaultPricingCard.defaultProps = { - color: "white", - shadow: true, -}; - -export default DefaultPricingCard; diff --git a/src/examples/Cards/ProjectCards/ComplexProjectCard/index.tsx b/src/examples/Cards/ProjectCards/ComplexProjectCard/index.tsx deleted file mode 100644 index bd70d69..0000000 --- a/src/examples/Cards/ProjectCards/ComplexProjectCard/index.tsx +++ /dev/null @@ -1,155 +0,0 @@ -/* eslint-disable no-unused-vars */ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// @mui material components -import Card from "@mui/material/Card"; -import Divider from "@mui/material/Divider"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; -import MDAvatar from "components/MDAvatar"; - -// Declaring prop types for the ComplexProjectCard -interface Props { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light"; - image: string; - title: string; - dateTime?: string; - description: ReactNode; - members?: string[]; - dropdown?: { - action?: (...arg: any) => void; - menu?: ReactNode; - }; - [key: string]: any; -} - -// Custom styles for ComplexProjectCard -function ComplexProjectCard({ - color, - image, - title, - dateTime, - description, - members, - dropdown, -}: Props): JSX.Element { - const renderMembers = members.map((member, key) => { - const memberKey = `member-${key}`; - - return ( - ({ - border: `${borderWidth[2]} solid ${white.main}`, - cursor: "pointer", - position: "relative", - - "&:not(:first-of-type)": { - ml: -1.25, - }, - - "&:hover, &:focus": { - zIndex: "10", - }, - })} - /> - ); - }); - - return ( - - - - borderRadius.xl }} - /> - - - {title} - - {members.length > -1 ? {renderMembers} : null} - - {dropdown && ( - - more_vert - - )} - {dropdown.menu} - - - - {description} - - - - - {members.length > -1 ? ( - - - {members.length} - - - Participants - - - ) : null} - {dateTime ? ( - - - {dateTime} - - - Due date - - - ) : null} - - - - ); -} - -// Declaring default props for ComplexProjectCard -ComplexProjectCard.defaultProps = { - color: "dark", - dateTime: "", - members: [], - dropdown: false, -}; - -export default ComplexProjectCard; diff --git a/src/examples/Cards/ProjectCards/DefaultProjectCard/index.tsx b/src/examples/Cards/ProjectCards/DefaultProjectCard/index.tsx index 3a087c8..ec1e844 100644 --- a/src/examples/Cards/ProjectCards/DefaultProjectCard/index.tsx +++ b/src/examples/Cards/ProjectCards/DefaultProjectCard/index.tsx @@ -1,17 +1,23 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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. -*/ +/* + * QQQ - Low-code Application Framework for Engineers. + * Copyright (C) 2021-2022. Kingsrook, LLC + * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States + * contact@kingsrook.com + * https://github.com/Kingsrook/ + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ // react-router-dom components import { Link } from "react-router-dom"; diff --git a/src/examples/Cards/StatisticsCards/ComplexStatisticsCard/index.tsx b/src/examples/Cards/StatisticsCards/ComplexStatisticsCard/index.tsx deleted file mode 100644 index de6a5e0..0000000 --- a/src/examples/Cards/StatisticsCards/ComplexStatisticsCard/index.tsx +++ /dev/null @@ -1,97 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// @mui material components -import Card from "@mui/material/Card"; -import Divider from "@mui/material/Divider"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Declaring props types for CompleStatisticsCard -interface Props { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - title: string; - count: string | number; - percentage?: { - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white"; - amount: string | number; - label: string; - }; - icon: ReactNode; - [key: string]: any; -} - -function ComplexStatisticsCard({ color, title, count, percentage, icon }: Props): JSX.Element { - return ( - - - - - {icon} - - - - - {title} - - {count} - - - - - - - {percentage.amount} - -  {percentage.label} - - - - ); -} - -// Declaring defualt props for ComplexStatisticsCard -ComplexStatisticsCard.defaultProps = { - color: "info", - percentage: { - color: "success", - text: "", - label: "", - }, -}; - -export default ComplexStatisticsCard; diff --git a/src/examples/Cards/StatisticsCards/DefaultStatisticsCard/index.tsx b/src/examples/Cards/StatisticsCards/DefaultStatisticsCard/index.tsx deleted file mode 100644 index dfa4d71..0000000 --- a/src/examples/Cards/StatisticsCards/DefaultStatisticsCard/index.tsx +++ /dev/null @@ -1,114 +0,0 @@ -/* eslint-disable no-unused-vars */ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// @mui material components -import Card from "@mui/material/Card"; -import Grid from "@mui/material/Grid"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Material Dashboard 2 PRO React TS contexts -import { useMaterialUIController } from "context"; - -// Declaring prop types for DefaultStatisticsCard -interface Props { - title: string; - count: string | number; - percentage?: { - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white"; - value: string | number; - label: string; - }; - dropdown?: { - action: (...args: any) => void; - menu: ReactNode; - value: string; - }; - [key: string]: any; -} - -function DefaultStatisticsCard({ title, count, percentage, dropdown }: Props): JSX.Element { - const [controller] = useMaterialUIController(); - const { darkMode } = controller; - - return ( - - - - - - - {title} - - - - - {count} - - - {percentage.value}  - - {percentage.label} - - - - - - {dropdown && ( - - - {dropdown.value} - - {dropdown.menu} - - )} - - - - - ); -} - -// Setting default values for the props of DefaultStatisticsCard -DefaultStatisticsCard.defaultProps = { - percentage: { - color: "success", - value: "", - label: "", - }, - dropdown: false, -}; - -export default DefaultStatisticsCard; diff --git a/src/examples/Cards/StatisticsCards/MiniStatisticsCard/index.tsx b/src/examples/Cards/StatisticsCards/MiniStatisticsCard/index.tsx deleted file mode 100644 index b411413..0000000 --- a/src/examples/Cards/StatisticsCards/MiniStatisticsCard/index.tsx +++ /dev/null @@ -1,161 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// @mui material components -import Card from "@mui/material/Card"; -import Grid from "@mui/material/Grid"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Material Dashboard 2 PRO React context -import { useMaterialUIController } from "context"; - -// Decalaring props types for MiniStatisticsCard -interface Props { - bgColor?: "white" | "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; - title?: { - fontWeight?: "light" | "regular" | "medium" | "bold"; - text?: string; - }; - count: string | number; - percentage?: { - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white"; - text: string | number; - }; - icon: { - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; - component: ReactNode; - }; - direction?: "right" | "left"; - [key: string]: any; -} - -function MiniStatisticsCard({ - bgColor, - title, - count, - percentage, - icon, - direction, -}: Props): JSX.Element { - const [controller] = useMaterialUIController(); - const { darkMode } = controller; - - return ( - - ({ - background: darkMode && background.card, - })} - > - - - {direction === "left" ? ( - - - - {icon.component} - - - - ) : null} - - - - {title.text} - - - {count}{" "} - - {percentage.text} - - - - - {direction === "right" ? ( - - - - {icon.component} - - - - ) : null} - - - - - ); -} - -// Declaring default props for MiniStatisticsCard -MiniStatisticsCard.defaultProps = { - bgColor: "white", - title: { - fontWeight: "light", - text: "", - }, - percentage: { - color: "success", - text: "", - }, - direction: "right", -}; - -export default MiniStatisticsCard; diff --git a/src/examples/Charts/BarCharts/HorizontalBarChart/configs/index.ts b/src/examples/Charts/BarCharts/HorizontalBarChart/configs/index.ts deleted file mode 100644 index db397ed..0000000 --- a/src/examples/Charts/BarCharts/HorizontalBarChart/configs/index.ts +++ /dev/null @@ -1,80 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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: any, datasets: any) { - 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, - padding: 10, - color: "#9ca2b7", - font: { - size: 14, - weight: 300, - family: "Roboto", - style: "normal", - lineHeight: 2, - }, - }, - }, - x: { - grid: { - drawBorder: false, - display: false, - drawOnChartArea: true, - drawTicks: true, - color: "#c1c4ce5c", - }, - ticks: { - display: true, - color: "#9ca2b7", - padding: 10, - font: { - size: 14, - weight: 300, - family: "Roboto", - style: "normal", - lineHeight: 2, - }, - }, - }, - }, - }, - }; -} - -export default configs; diff --git a/src/examples/Charts/BarCharts/HorizontalBarChart/index.tsx b/src/examples/Charts/BarCharts/HorizontalBarChart/index.tsx deleted file mode 100644 index 6346290..0000000 --- a/src/examples/Charts/BarCharts/HorizontalBarChart/index.tsx +++ /dev/null @@ -1,126 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode, useMemo } from "react"; - -// react-chartjs-2 components -import { Bar } from "react-chartjs-2"; - -// @mui material components -import Card from "@mui/material/Card"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// HorizontalBarChart configurations -import configs from "examples/Charts/BarCharts/HorizontalBarChart/configs"; - -// Material Dashboard 2 PRO React TS Base Styles -import colors from "assets/theme/base/colors"; - -// Declaring props types for HorizontalBarChart -interface Props { - icon?: { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - component: ReactNode; - }; - title?: string; - description?: string | ReactNode; - height?: string | number; - chart: { - labels: string[]; - datasets: { - label: string; - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - data: number[]; - }[]; - }; - [key: string]: any; -} - -function HorizontalBarChart({ icon, title, description, height, chart }: Props): JSX.Element { - 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; -} - -// Declaring default props HorizontalBarChart -HorizontalBarChart.defaultProps = { - icon: { color: "info", component: "" }, - title: "", - description: "", - height: "19.125rem", -}; - -export default HorizontalBarChart; diff --git a/src/examples/Charts/BarCharts/ReportsBarChart/configs/index.ts b/src/examples/Charts/BarCharts/ReportsBarChart/configs/index.ts deleted file mode 100644 index 651309a..0000000 --- a/src/examples/Charts/BarCharts/ReportsBarChart/configs/index.ts +++ /dev/null @@ -1,97 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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: any, datasets: any) { - 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/Charts/BarCharts/ReportsBarChart/index.tsx b/src/examples/Charts/BarCharts/ReportsBarChart/index.tsx deleted file mode 100644 index 8b49a1a..0000000 --- a/src/examples/Charts/BarCharts/ReportsBarChart/index.tsx +++ /dev/null @@ -1,100 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode } from "react"; - -// react-chartjs-2 components -import { Bar } from "react-chartjs-2"; - -// @mui material components -import Card from "@mui/material/Card"; -import Divider from "@mui/material/Divider"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// ReportsBarChart configurations -import configs from "examples/Charts/BarCharts/ReportsBarChart/configs"; - -// Declaring props types for ReportsBarChart -interface Props { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; - title: string; - description?: string | ReactNode; - date: string; - chart: { - labels: string[]; - datasets: { - label: string; - data: number[]; - }; - }; - [key: string]: any; -} - -function ReportsBarChart({ color, title, description, date, chart }: Props): JSX.Element { - const { data, options } = configs(chart.labels || [], chart.datasets || {}); - - return ( - - - {useMemo( - () => ( - - - - ), - [chart, color] - )} - - - {title} - - - {description} - - - - - schedule - - - {date} - - - - - - ); -} - -// Setting default values for the props of ReportsBarChart -ReportsBarChart.defaultProps = { - color: "dark", - description: "", -}; - -export default ReportsBarChart; diff --git a/src/examples/Charts/BarCharts/VerticalBarChart/configs/index.ts b/src/examples/Charts/BarCharts/VerticalBarChart/configs/index.ts deleted file mode 100644 index 197d0bd..0000000 --- a/src/examples/Charts/BarCharts/VerticalBarChart/configs/index.ts +++ /dev/null @@ -1,78 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 PRO React TS Base Styles -import typography from "assets/theme/base/typography"; - -function configs(labels: any, datasets: any) { - 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/Charts/BarCharts/VerticalBarChart/index.tsx b/src/examples/Charts/BarCharts/VerticalBarChart/index.tsx deleted file mode 100644 index 9fd1165..0000000 --- a/src/examples/Charts/BarCharts/VerticalBarChart/index.tsx +++ /dev/null @@ -1,126 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode } from "react"; - -// react-chartjs-2 components -import { Bar } from "react-chartjs-2"; - -// @mui material components -import Card from "@mui/material/Card"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// VerticalBarChart configurations -import configs from "examples/Charts/BarCharts/VerticalBarChart/configs"; - -// Material Dashboard 2 PRO React TS Base Styles -import colors from "assets/theme/base/colors"; - -// Declaring props types for HorizontalBarChart -interface Props { - icon?: { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - component: ReactNode; - }; - title?: string; - description?: string | ReactNode; - height?: string | number; - chart: { - labels: string[]; - datasets: { - label: string; - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - data: number[]; - }[]; - }; - [key: string]: any; -} - -function VerticalBarChart({ icon, title, description, height, chart }: Props): JSX.Element { - 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; -} - -// Declaring default props for VerticalBarChart -VerticalBarChart.defaultProps = { - icon: { color: "info", component: "" }, - title: "", - description: "", - height: "19.125rem", -}; - -export default VerticalBarChart; diff --git a/src/examples/Charts/BubbleChart/configs/index.ts b/src/examples/Charts/BubbleChart/configs/index.ts deleted file mode 100644 index d28aba7..0000000 --- a/src/examples/Charts/BubbleChart/configs/index.ts +++ /dev/null @@ -1,78 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 PRO React TS Base Styles -import typography from "assets/theme/base/typography"; - -function configs(labels: any, datasets: any) { - return { - data: { - labels, - datasets: [...datasets], - }, - options: { - responsive: true, - plugins: { - legend: { - display: false, - }, - }, - 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/Charts/BubbleChart/index.tsx b/src/examples/Charts/BubbleChart/index.tsx deleted file mode 100644 index fc0b914..0000000 --- a/src/examples/Charts/BubbleChart/index.tsx +++ /dev/null @@ -1,132 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode } from "react"; - -// react-chartjs-2 components -import { Bubble } from "react-chartjs-2"; - -// @mui material components -import Card from "@mui/material/Card"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// BubbleChart configurations -import configs from "examples/Charts/BubbleChart/configs"; - -// Material Dashboard 2 PRO React TS Base Styles -import colors from "assets/theme/base/colors"; - -// Declaring props types for BubbleChart -interface Props { - icon?: { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - component: ReactNode; - }; - title?: string; - description?: string | ReactNode; - height?: string | number; - chart: { - labels: string[]; - datasets: { - label: string; - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - data: { - x: number; - y: number; - r: number; - }[]; - }[]; - }; - [key: string]: any; -} - -function BubbleChart({ icon, title, description, height, chart }: Props): JSX.Element { - 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; -} - -// Declaring default props for BubbleChart -BubbleChart.defaultProps = { - icon: { color: "info", component: "" }, - title: "", - description: "", - height: "100%", -}; - -export default BubbleChart; diff --git a/src/examples/Charts/DoughnutCharts/DefaultDoughnutChart/configs/index.ts b/src/examples/Charts/DoughnutCharts/DefaultDoughnutChart/configs/index.ts deleted file mode 100644 index 422ec90..0000000 --- a/src/examples/Charts/DoughnutCharts/DefaultDoughnutChart/configs/index.ts +++ /dev/null @@ -1,98 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 PRO React TS Base Styles -import colors from "assets/theme/base/colors"; - -const { gradients, dark } = colors; - -function configs(labels: any, datasets: any, cutout: number = 60) { - const backgroundColors = []; - - if (datasets.backgroundColors) { - datasets.backgroundColors.forEach((color: string) => { - 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", - }, - scales: { - y: { - grid: { - drawBorder: false, - display: false, - drawOnChartArea: false, - drawTicks: false, - }, - ticks: { - display: false, - }, - }, - x: { - grid: { - drawBorder: false, - display: false, - drawOnChartArea: false, - drawTicks: false, - }, - ticks: { - display: false, - }, - }, - }, - }, - }; -} - -export default configs; diff --git a/src/examples/Charts/DoughnutCharts/DefaultDoughnutChart/index.tsx b/src/examples/Charts/DoughnutCharts/DefaultDoughnutChart/index.tsx deleted file mode 100644 index b008de3..0000000 --- a/src/examples/Charts/DoughnutCharts/DefaultDoughnutChart/index.tsx +++ /dev/null @@ -1,110 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode } from "react"; - -// react-chartjs-2 components -import { Doughnut } from "react-chartjs-2"; - -// @mui material components -import Card from "@mui/material/Card"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// DefaultDoughnutChart configurations -import configs from "examples/Charts/DoughnutCharts/DefaultDoughnutChart/configs"; - -// Declaring props types for DefaultDoughnutChart -interface Props { - icon?: { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - component: ReactNode; - }; - title?: string; - description?: string | ReactNode; - height?: string | number; - chart: { - labels: string[]; - datasets: { - label: string; - backgroundColors: string[]; - data: number[]; - }; - cutout?: number; - }; - [key: string]: any; -} - -function DefaultDoughnutChart({ icon, title, description, height, chart }: Props): JSX.Element { - 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; -} - -// Declaring default props DefaultDoughnutChart -DefaultDoughnutChart.defaultProps = { - icon: { color: "info", component: "" }, - title: "", - description: "", - height: "19.125rem", -}; - -export default DefaultDoughnutChart; diff --git a/src/examples/Charts/LineCharts/DefaultLineChart/configs/index.ts b/src/examples/Charts/LineCharts/DefaultLineChart/configs/index.ts deleted file mode 100644 index 54c5c6e..0000000 --- a/src/examples/Charts/LineCharts/DefaultLineChart/configs/index.ts +++ /dev/null @@ -1,84 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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: any, datasets: any) { - 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: "#9ca2b7", - font: { - size: 14, - weight: 300, - family: "Roboto", - style: "normal", - lineHeight: 2, - }, - }, - }, - x: { - grid: { - drawBorder: false, - display: true, - drawOnChartArea: true, - drawTicks: true, - borderDash: [5, 5], - color: "#c1c4ce5c", - }, - ticks: { - display: true, - color: "#9ca2b7", - padding: 10, - font: { - size: 14, - weight: 300, - family: "Roboto", - style: "normal", - lineHeight: 2, - }, - }, - }, - }, - }, - }; -} - -export default configs; diff --git a/src/examples/Charts/LineCharts/DefaultLineChart/index.tsx b/src/examples/Charts/LineCharts/DefaultLineChart/index.tsx deleted file mode 100644 index a8f0690..0000000 --- a/src/examples/Charts/LineCharts/DefaultLineChart/index.tsx +++ /dev/null @@ -1,130 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode } from "react"; - -// react-chartjs-2 components -import { Line } from "react-chartjs-2"; - -// @mui material components -import Card from "@mui/material/Card"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// DefaultLineChart configurations -import configs from "examples/Charts/LineCharts/DefaultLineChart/configs"; - -// Material Dashboard 2 PRO React TS Base Styles -import colors from "assets/theme/base/colors"; - -// Declaring props types for DefaultLineChart -interface Props { - icon?: { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - component: ReactNode; - }; - title?: string; - description?: string | ReactNode; - height?: string | number; - chart: { - labels: string[]; - datasets: { - label: string; - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - data: number[]; - }[]; - }; - [key: string]: any; -} - -function DefaultLineChart({ icon, title, description, height, chart }: Props): JSX.Element { - 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; -} - -// Declaring default props DefaultLineChart -DefaultLineChart.defaultProps = { - icon: { color: "info", component: "" }, - title: "", - description: "", - height: "19.125rem", -}; - -export default DefaultLineChart; diff --git a/src/examples/Charts/LineCharts/GradientLineChart/configs/index.ts b/src/examples/Charts/LineCharts/GradientLineChart/configs/index.ts deleted file mode 100644 index b32f959..0000000 --- a/src/examples/Charts/LineCharts/GradientLineChart/configs/index.ts +++ /dev/null @@ -1,83 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 PRO React TS Base Styles -import typography from "assets/theme/base/typography"; - -function configs(labels: any, datasets: any) { - 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/Charts/LineCharts/GradientLineChart/index.tsx b/src/examples/Charts/LineCharts/GradientLineChart/index.tsx deleted file mode 100644 index a62fcec..0000000 --- a/src/examples/Charts/LineCharts/GradientLineChart/index.tsx +++ /dev/null @@ -1,139 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode } from "react"; - -// react-chartjs-2 components -import { Line } from "react-chartjs-2"; - -// @mui material components -import Card from "@mui/material/Card"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Material Dashboard 2 PRO React TS Helper Functions -import gradientChartLine from "assets/theme/functions/gradientChartLine"; - -// GradientLineChart configurations -import configs from "examples/Charts/LineCharts/GradientLineChart/configs"; - -// Material Dashboard 2 PRO React TS Base Styles -import colors from "assets/theme/base/colors"; - -// Declaring props types for GradientLineChart -interface Props { - icon?: { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - component: ReactNode; - }; - title?: string; - description?: string | ReactNode; - height?: string | number; - chart: { - labels: string[]; - datasets: { - label: string; - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - data: number[]; - }[]; - }; - [key: string]: any; -} - -function GradientLineChart({ icon, title, description, height, chart }: Props): JSX.Element { - const chartRef = useRef(null); - const [chartData, setChartData] = useState({}); - const { data, options }: any = chartData; - - useEffect(() => { - 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( - chartRef.current.children[0], - colors[dataset.color] ? colors[dataset.color || "dark"].main : colors.dark.main - ), - })) - : []; - - setChartData(configs(chart.labels || [], chartDatasets)); - }, [chart]); - - const renderChart = ( - - {title || description ? ( - - {icon.component && ( - - {icon.component} - - )} - - {title && {title}} - - - {description} - - - - - ) : null} - {useMemo( - () => ( - - - - ), - [chartData, height] - )} - - ); - - return title || description ? {renderChart} : renderChart; -} - -// Declaring default props for GradientLineChart -GradientLineChart.defaultProps = { - icon: { color: "info", component: "" }, - title: "", - description: "", - height: "19.125rem", -}; - -export default GradientLineChart; diff --git a/src/examples/Charts/LineCharts/ProgressLineChart/config/index.ts b/src/examples/Charts/LineCharts/ProgressLineChart/config/index.ts deleted file mode 100644 index 71e9d82..0000000 --- a/src/examples/Charts/LineCharts/ProgressLineChart/config/index.ts +++ /dev/null @@ -1,103 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 PRO React TS Base Styles -import colors from "assets/theme/base/colors"; - -const { gradients } = colors; - -function configs(color: string, labels: any, label: any, data: any) { - return { - data: { - labels, - datasets: [ - { - label, - tension: 0, - pointRadius: 3, - pointBackgroundColor: gradients[color] ? gradients[color].main : gradients.info.main, - borderColor: gradients[color] ? gradients[color].main : gradients.info.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: "#9ca2b7", - font: { - size: 14, - weight: 300, - family: "Roboto", - style: "normal", - lineHeight: 2, - }, - }, - }, - x: { - grid: { - drawBorder: false, - display: true, - drawOnChartArea: true, - drawTicks: false, - borderDash: [5, 5], - color: "#c1c4ce5c", - }, - ticks: { - display: true, - padding: 10, - color: "#9ca2b7", - font: { - size: 14, - weight: 300, - family: "Roboto", - style: "normal", - lineHeight: 2, - }, - }, - }, - }, - }, - }; -} - -export default configs; diff --git a/src/examples/Charts/LineCharts/ProgressLineChart/index.tsx b/src/examples/Charts/LineCharts/ProgressLineChart/index.tsx deleted file mode 100644 index 227bb23..0000000 --- a/src/examples/Charts/LineCharts/ProgressLineChart/index.tsx +++ /dev/null @@ -1,119 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode } from "react"; - -// react-chartjs-2 components -import { Line } from "react-chartjs-2"; - -// @mui material components -import Card from "@mui/material/Card"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS 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"; - -// Declaring props types for GradientLineChart -interface Props { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; - icon: ReactNode; - title: string; - count?: string | number; - progress: number; - height?: string | number; - chart: { - labels: string[]; - data: number[]; - }; - [key: string]: any; -} - -function ProgressLineChart({ - color, - icon, - title, - count, - progress, - height, - chart, -}: Props): JSX.Element { - const { data, options } = configs(color, chart.labels || [], title, chart.data || []); - - return ( - - - - {icon} - - - - {title} - - {count ? ( - - {count} - - ) : null} - - - - {progress}% - - - - - - - {useMemo( - () => ( - - - - ), - [chart, height, color] - )} - - ); -} - -// Declaring default props for ProgressLineChart -ProgressLineChart.defaultProps = { - color: "info", - count: 0, - height: "6.25rem", -}; - -export default ProgressLineChart; diff --git a/src/examples/Charts/LineCharts/ReportsLineChart/configs/index.ts b/src/examples/Charts/LineCharts/ReportsLineChart/configs/index.ts deleted file mode 100644 index c071da7..0000000 --- a/src/examples/Charts/LineCharts/ReportsLineChart/configs/index.ts +++ /dev/null @@ -1,97 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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: any, datasets: any) { - 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/Charts/LineCharts/ReportsLineChart/index.tsx b/src/examples/Charts/LineCharts/ReportsLineChart/index.tsx deleted file mode 100644 index 1caf3af..0000000 --- a/src/examples/Charts/LineCharts/ReportsLineChart/index.tsx +++ /dev/null @@ -1,100 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode } from "react"; - -// react-chartjs-2 components -import { Line } from "react-chartjs-2"; - -// @mui material components -import Card from "@mui/material/Card"; -import Divider from "@mui/material/Divider"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// ReportsLineChart configurations -import configs from "examples/Charts/LineCharts/ReportsLineChart/configs"; - -// Declaring props types for ReportsLineChart -interface Props { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; - title: string; - description?: string | ReactNode; - date: string; - chart: { - labels: string[]; - datasets: { - label: string; - data: number[]; - }; - }; - [key: string]: any; -} - -function ReportsLineChart({ color, title, description, date, chart }: Props): JSX.Element { - const { data, options } = configs(chart.labels || [], chart.datasets || {}); - - return ( - - - {useMemo( - () => ( - - - - ), - [chart, color] - )} - - - {title} - - - {description} - - - - - schedule - - - {date} - - - - - - ); -} - -// Declaring default props for ReportsLineChart -ReportsLineChart.defaultProps = { - color: "dark", - description: "", -}; - -export default ReportsLineChart; diff --git a/src/examples/Charts/MixedChart/configs/index.ts b/src/examples/Charts/MixedChart/configs/index.ts deleted file mode 100644 index 83628c2..0000000 --- a/src/examples/Charts/MixedChart/configs/index.ts +++ /dev/null @@ -1,83 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 PRO React TS Base Styles -import typography from "assets/theme/base/typography"; - -function configs(labels: any, datasets: any) { - 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/Charts/MixedChart/index.tsx b/src/examples/Charts/MixedChart/index.tsx deleted file mode 100644 index 2c69271..0000000 --- a/src/examples/Charts/MixedChart/index.tsx +++ /dev/null @@ -1,198 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode } from "react"; - -// react-chartjs-2 components -import { Line } from "react-chartjs-2"; - -// @mui material components -import Card from "@mui/material/Card"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Material Dashboard 2 PRO React TS Helper Functions -import gradientChartLine from "assets/theme/functions/gradientChartLine"; - -// MixedChart configurations -import configs from "examples/Charts/MixedChart/configs"; - -// Material Dashboard 2 PRO React TS Base Styles -import colors from "assets/theme/base/colors"; - -// Declaring props types for MixedChart -interface Props { - icon?: { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - component: ReactNode; - }; - title?: string; - description?: string | ReactNode; - height?: string | number; - chart: { - labels: string[]; - datasets: { - chartType: string; - label: string; - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - data: number[]; - }[]; - }; - [key: string]: any; -} - -function MixedChart({ icon, title, description, height, chart }: Props): JSX.Element { - const chartRef = useRef(null); - const [chartData, setChartData] = useState({}); - const { data, options }: any = chartData; - - useEffect(() => { - 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( - chartRef.current.children[0], - 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 renderChart = ( - - {title || description ? ( - - {icon.component && ( - - {icon.component} - - )} - - {title && {title}} - - - {description} - - - - - ) : null} - {useMemo( - () => ( - - - - ), - [chartData, height] - )} - - ); - - return title || description ? {renderChart} : renderChart; -} - -// Declaring default props for MixedChart -MixedChart.defaultProps = { - icon: { color: "info", component: "" }, - title: "", - description: "", - height: "19.125rem", -}; - -export default MixedChart; diff --git a/src/examples/Charts/PieChart/configs/index.ts b/src/examples/Charts/PieChart/configs/index.ts deleted file mode 100644 index d1fb916..0000000 --- a/src/examples/Charts/PieChart/configs/index.ts +++ /dev/null @@ -1,92 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 PRO React TS Base Styles -import colors from "assets/theme/base/colors"; - -const { gradients, dark } = colors; - -function configs(labels: any, datasets: any) { - const backgroundColors = []; - - if (datasets.backgroundColors) { - datasets.backgroundColors.forEach((color: string) => - 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", - }, - scales: { - y: { - grid: { - drawBorder: false, - display: false, - drawOnChartArea: false, - drawTicks: false, - }, - ticks: { - display: false, - }, - }, - x: { - grid: { - drawBorder: false, - display: false, - drawOnChartArea: false, - drawTicks: false, - }, - ticks: { - display: false, - }, - }, - }, - }, - }; -} - -export default configs; diff --git a/src/examples/Charts/PieChart/index.tsx b/src/examples/Charts/PieChart/index.tsx deleted file mode 100644 index 9646849..0000000 --- a/src/examples/Charts/PieChart/index.tsx +++ /dev/null @@ -1,109 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode } from "react"; - -// react-chartjs-2 components -import { Pie } from "react-chartjs-2"; - -// @mui material components -import Card from "@mui/material/Card"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// PieChart configurations -import configs from "examples/Charts/PieChart/configs"; - -// Declaring props types for PieChart -interface Props { - icon?: { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - component: ReactNode; - }; - title?: string; - description?: string | ReactNode; - height?: string | number; - chart: { - labels: string[]; - datasets: { - label: string; - backgroundColors: string[]; - data: number[]; - }; - }; - [key: string]: any; -} - -function PieChart({ icon, title, description, height, chart }: Props): JSX.Element { - 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; -} - -// Declaring default props for PieChart -PieChart.defaultProps = { - icon: { color: "info", component: "" }, - title: "", - description: "", - height: "19.125rem", -}; - -export default PieChart; diff --git a/src/examples/Charts/PolarChart/configs/index.ts b/src/examples/Charts/PolarChart/configs/index.ts deleted file mode 100644 index 4da07f6..0000000 --- a/src/examples/Charts/PolarChart/configs/index.ts +++ /dev/null @@ -1,56 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 PRO React TS Base Styles -import colors from "assets/theme/base/colors"; - -const { gradients, dark } = colors; - -function configs(labels: any, datasets: any) { - const backgroundColors = []; - - if (datasets.backgroundColors) { - datasets.backgroundColors.forEach((color: string) => - 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: { - plugins: { - legend: { - display: false, - }, - }, - }, - }; -} - -export default configs; diff --git a/src/examples/Charts/PolarChart/index.tsx b/src/examples/Charts/PolarChart/index.tsx deleted file mode 100644 index bde005b..0000000 --- a/src/examples/Charts/PolarChart/index.tsx +++ /dev/null @@ -1,107 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode } from "react"; - -// react-chartjs-2 components -import { PolarArea } from "react-chartjs-2"; - -// @mui material components -import Card from "@mui/material/Card"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// PolarChart configurations -import configs from "examples/Charts/PolarChart/configs"; - -// Declaring props types for PolarChart -interface Props { - icon?: { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - component: ReactNode; - }; - title?: string; - description?: string | ReactNode; - chart: { - labels: string[]; - datasets: { - label: string; - backgroundColors: string[]; - data: number[]; - }; - }; - [key: string]: any; -} - -function PolarChart({ icon, title, description, chart }: Props): JSX.Element { - 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; -} - -// Declaring default props for PolarChart -PolarChart.defaultProps = { - icon: { color: "info", component: "" }, - title: "", - description: "", -}; - -export default PolarChart; diff --git a/src/examples/Charts/RadarChart/configs/index.ts b/src/examples/Charts/RadarChart/configs/index.ts deleted file mode 100644 index ae6d0ae..0000000 --- a/src/examples/Charts/RadarChart/configs/index.ts +++ /dev/null @@ -1,32 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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: any, datasets: any) { - return { - data: { - labels, - datasets: [...datasets], - }, - options: { - plugins: { - legend: { - display: false, - }, - }, - }, - }; -} - -export default configs; diff --git a/src/examples/Charts/RadarChart/index.tsx b/src/examples/Charts/RadarChart/index.tsx deleted file mode 100644 index a94b87c..0000000 --- a/src/examples/Charts/RadarChart/index.tsx +++ /dev/null @@ -1,123 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode } from "react"; - -// react-chartjs-2 components -import { Radar } from "react-chartjs-2"; - -// @mui material components -import Card from "@mui/material/Card"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// RadarChart configurations -import configs from "examples/Charts/RadarChart/configs"; - -// Material Dashboard 2 PRO React TS Base Styles -import colors from "assets/theme/base/colors"; - -// Material Dashboard 2 PRO React TS Helper Functions -import rgba from "assets/theme/functions/rgba"; - -// Declaring props types for RadarChart -interface Props { - icon?: { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - component: ReactNode; - }; - title?: string; - description?: string | ReactNode; - chart: { - labels: string[]; - datasets: { - label: string; - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - data: number[]; - borderDash?: number[]; - }[]; - }; - [key: string]: any; -} - -function RadarChart({ icon, title, description, chart }: Props): JSX.Element { - 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; -} - -// Declaring default props for RadarChart -RadarChart.defaultProps = { - icon: { color: "info", component: "" }, - title: "", - description: "", -}; - -export default RadarChart; diff --git a/src/examples/Items/DefaultItem/index.tsx b/src/examples/Items/DefaultItem/index.tsx deleted file mode 100644 index bc47915..0000000 --- a/src/examples/Items/DefaultItem/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, FC, ReactNode } from "react"; - -// @mui material components -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// custom styles for the DefaultItem -import defaultItemIconBox from "examples/Items/DefaultItem/styles"; - -// Declaring props types for DefaultItem -interface Props { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; - icon: ReactNode; - title: string; - description: string; - [key: string]: any; -} - -const DefaultItem: FC = forwardRef(({ color, icon, title, description, ...rest }, ref) => ( - - defaultItemIconBox(theme, { color })}> - {icon} - - - - {title} - - - {description} - - - -)); - -// Declaring default props for DefaultItem -DefaultItem.defaultProps = { - color: "info", -}; - -export default DefaultItem; diff --git a/src/examples/Items/DefaultItem/styles.ts b/src/examples/Items/DefaultItem/styles.ts deleted file mode 100644 index 2330476..0000000 --- a/src/examples/Items/DefaultItem/styles.ts +++ /dev/null @@ -1,25 +0,0 @@ -// @mui material components -import { Theme } from "@mui/material/styles"; - -function defaultItemIconBox(theme: Theme, ownerState: any) { - const { functions, palette, borders } = theme; - const { color } = ownerState; - - const { pxToRem, linearGradient } = functions; - const { gradients, dark, white } = palette; - const { borderRadius } = borders; - - return { - display: "grid", - placeItems: "center", - width: pxToRem(48), - height: pxToRem(48), - borderRadius: borderRadius.md, - color: color === "light" ? dark.mian : white.main, - background: gradients[color] - ? linearGradient(gradients[color].main, gradients[color].state) - : linearGradient(gradients.info.main, gradients.info.state), - }; -} - -export default defaultItemIconBox; diff --git a/src/examples/LayoutContainers/PageLayout/index.tsx b/src/examples/LayoutContainers/PageLayout/index.tsx deleted file mode 100644 index fe8104c..0000000 --- a/src/examples/LayoutContainers/PageLayout/index.tsx +++ /dev/null @@ -1,59 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode } from "react"; - -// react-router-dom components -import { useLocation } from "react-router-dom"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; - -// Material Dashboard 2 PRO React context -import { useMaterialUIController, setLayout } from "context"; - -// Declaring props types for PageLayout -interface Props { - background?: "white" | "light" | "default"; - children: ReactNode; -} - -function PageLayout({ background, children }: Props): JSX.Element { - const [, dispatch] = useMaterialUIController(); - const { pathname } = useLocation(); - - useEffect(() => { - setLayout(dispatch, "page"); - }, [pathname]); - - return ( - - {children} - - ); -} - -// Declaring default props for PageLayout -PageLayout.defaultProps = { - background: "default", -}; - -export default PageLayout; diff --git a/src/examples/Lists/CategoriesList/index.tsx b/src/examples/Lists/CategoriesList/index.tsx deleted file mode 100644 index 0a7a264..0000000 --- a/src/examples/Lists/CategoriesList/index.tsx +++ /dev/null @@ -1,126 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// react-router-dom components -import { Link } from "react-router-dom"; - -// @mui material components -import Card from "@mui/material/Card"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Declaring props types for CategoriesList -interface Props { - title: string; - categories: { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - icon: ReactNode | string; - name: string; - description: ReactNode; - route: string; - }[]; - [key: string]: any; -} - -function CategoriesList({ title, categories }: Props): JSX.Element { - const renderItems = categories.map(({ color, icon, name, description, route }, key) => ( - - - - - {icon} - - - - - {name} - - - {description} - - - - - - chevron_right - - - - )); - - return ( - - - - {title} - - - - - {renderItems} - - - - ); -} - -export default CategoriesList; diff --git a/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.tsx b/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.tsx deleted file mode 100644 index 5b5c11f..0000000 --- a/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.tsx +++ /dev/null @@ -1,121 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// react-router-dom components -import { Link } from "react-router-dom"; - -// @mui material components -import Collapse from "@mui/material/Collapse"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Declaring props types for DefaultNavbarDropdown -interface Props { - name: string; - icon?: ReactNode; - children?: ReactNode; - collapseStatus?: boolean; - light?: boolean; - href?: string; - route?: string; - collapse: boolean; - [key: string]: any; -} - -function DefaultNavbarDropdown({ - name, - icon, - children, - collapseStatus, - light, - href, - route, - collapse, - ...rest -}: Props): JSX.Element { - const linkComponent = { - component: "a", - href, - target: "_blank", - rel: "noreferrer", - }; - - const routeComponent: any = { - component: Link, - to: route, - }; - - return ( - <> - - - {icon} - - - {name} - - - - {collapse && "keyboard_arrow_down"} - - - - {children && ( - - {children} - - )} - - ); -} - -// Declaring default props for DefaultNavbarDropdown -DefaultNavbarDropdown.defaultProps = { - icon: false, - children: false, - collapseStatus: false, - light: false, - href: "", - route: "", -}; - -export default DefaultNavbarDropdown; diff --git a/src/examples/Navbars/DefaultNavbar/DefaultNavbarMobile.tsx b/src/examples/Navbars/DefaultNavbar/DefaultNavbarMobile.tsx deleted file mode 100644 index 966d5b8..0000000 --- a/src/examples/Navbars/DefaultNavbar/DefaultNavbarMobile.tsx +++ /dev/null @@ -1,165 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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"; - -// react-router components -import { Link } from "react-router-dom"; - -// @mui material components -import Collapse from "@mui/material/Collapse"; -import MuiLink from "@mui/material/Link"; -import { Theme } from "@mui/material/styles"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Material Dashboard 2 PRO React TS exampless -import DefaultNavbarDropdown from "examples/Navbars/DefaultNavbar/DefaultNavbarDropdown"; - -// Declaring props types for DefaultNavbarMobile -interface Props { - routes: any; - open: any; -} - -function DefaultNavbarMobile({ routes, open }: Props): JSX.Element { - const [collapse, setCollapse] = useState(""); - - const handleSetCollapse = (name: string) => - collapse === name ? setCollapse(false) : setCollapse(name); - - const renderNavbarItems = routes.map( - ({ name, icon, collapse: routeCollapses, href, route, collapse: navCollapse }: any) => ( - handleSetCollapse(name)} - href={href} - route={route} - collapse={Boolean(navCollapse)} - > - - {routeCollapses && - routeCollapses.map((item: any) => ( - - {item.collapse ? ( - <> - - {item.name} - - {item.collapse.map((el: any) => ( - ({ - borderRadius: borderRadius.md, - cursor: "pointer", - transition: "all 300ms linear", - - "&:hover": { - backgroundColor: grey[200], - color: dark.main, - }, - })} - > - {el.name} - - ))} - - ) : ( - ({ - borderRadius: borderRadius.md, - cursor: "pointer", - transition: "all 300ms linear", - py: 1, - px: 1.625, - - "&:hover": { - backgroundColor: grey[200], - color: dark.main, - - "& *": { - color: dark.main, - }, - }, - })} - > - - {item.name} - - - {item.description} - - - )} - - ))} - - - ) - ); - - return ( - - - {renderNavbarItems} - - - ); -} - -export default DefaultNavbarMobile; diff --git a/src/examples/Navbars/DefaultNavbar/index.tsx b/src/examples/Navbars/DefaultNavbar/index.tsx deleted file mode 100644 index 2d7646a..0000000 --- a/src/examples/Navbars/DefaultNavbar/index.tsx +++ /dev/null @@ -1,609 +0,0 @@ -/* eslint-disable no-param-reassign */ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode, Fragment } from "react"; - -// react-router components -import { Link } from "react-router-dom"; - -// @mui material components -import Icon from "@mui/material/Icon"; -import Popper from "@mui/material/Popper"; -import Grow, { GrowProps } from "@mui/material/Grow"; -import Grid from "@mui/material/Grid"; -import Divider from "@mui/material/Divider"; -import MuiLink from "@mui/material/Link"; -import Container from "@mui/material/Container"; -import { Theme } from "@mui/material/styles"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; -import MDButton from "components/MDButton"; - -// Material Dashboard 2 PRO React TS examples components -import DefaultNavbarDropdown from "examples/Navbars/DefaultNavbar/DefaultNavbarDropdown"; -import DefaultNavbarMobile from "examples/Navbars/DefaultNavbar/DefaultNavbarMobile"; - -// Material Dashboard 2 PRO React TS Base Styles -import breakpoints from "assets/theme/base/breakpoints"; - -// Material Dashboard 2 PRO React context -import { useMaterialUIController } from "context"; - -// Declaring props types for DefaultNavbar -interface Props { - routes: { - [key: string]: - | ReactNode - | string - | { - [key: string]: string | any; - }[]; - }[]; - brand?: string; - transparent?: boolean; - light?: boolean; - action?: { - type: "external" | "internal"; - route: string; - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light"; - label: string; - }; -} - -interface NewGrowTypes extends GrowProps { - sx: any; - [key: string]: any; -} - -function NewGrow(props: NewGrowTypes) { - return ; -} - -function DefaultNavbar({ routes, brand, transparent, light, action }: Props): JSX.Element { - const [controller] = useMaterialUIController(); - const { darkMode } = controller; - - const [dropdown, setDropdown] = useState(""); - const [dropdownEl, setDropdownEl] = useState(""); - const [dropdownName, setDropdownName] = useState(""); - const [nestedDropdown, setNestedDropdown] = useState(""); - const [nestedDropdownEl, setNestedDropdownEl] = useState(""); - const [nestedDropdownName, setNestedDropdownName] = useState(""); - const [arrowRef, setArrowRef] = useState(null); - const [mobileNavbar, setMobileNavbar] = useState(false); - const [mobileView, setMobileView] = useState(false); - - const openMobileNavbar = () => setMobileNavbar(!mobileNavbar); - - 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); - }, []); - - const renderNavbarItems = routes.map(({ name, icon, href, route, collapse }: any) => ( - { - if (collapse) { - setDropdown(currentTarget); - setDropdownEl(currentTarget); - setDropdownName(name); - } - }} - onMouseLeave={() => collapse && setDropdown(null)} - light={light} - /> - )); - - // Render the routes on the dropdown menu - const renderRoutes = routes.map(({ name, collapse, columns, rowsPerColumn }: any) => { - let template; - - // Render the dropdown menu that should be display as columns - if (collapse && columns && name === dropdownName) { - const calculateColumns = collapse.reduce((resultArray: any, item: any, index: any) => { - const chunkIndex = Math.floor(index / rowsPerColumn); - - if (!resultArray[chunkIndex]) { - resultArray[chunkIndex] = []; - } - - resultArray[chunkIndex].push(item); - - return resultArray; - }, []); - - template = ( - - {calculateColumns.map((cols: any, key: any) => { - const gridKey = `grid-${key}`; - const dividerKey = `divider-${key}`; - - return ( - - {cols.map((col: any, index: any) => ( - - - - {col.icon} - - - {col.name} - - - {col.collapse.map((item: any) => ( - e.preventDefault()} - target={item.href ? "_blank" : ""} - rel={item.href ? "noreferrer" : "noreferrer"} - minWidth="11.25rem" - display="block" - variant="button" - color="text" - textTransform="capitalize" - fontWeight="regular" - py={0.625} - px={2} - sx={({ palette: { grey, dark }, borders: { borderRadius } }: Theme) => ({ - borderRadius: borderRadius.md, - cursor: "pointer", - transition: "all 300ms linear", - - "&:hover": { - backgroundColor: grey[200], - color: dark.main, - }, - })} - > - {item.name} - - ))} - - ))} - {key !== 0 && ( - - )} - - ); - })} - - ); - - // Render the dropdown menu that should be display as list items - } else if (collapse && name === dropdownName) { - template = collapse.map((item: any) => { - const linkComponent = { - component: MuiLink, - href: item.href, - target: "_blank", - rel: "noreferrer", - }; - - const routeComponent = { - component: Link, - to: item.route, - }; - - return ( - ({ - borderRadius: borderRadius.md, - cursor: "pointer", - transition: "all 300ms linear", - - "&:hover": { - backgroundColor: grey[200], - color: dark.main, - - "& *": { - color: dark.main, - }, - }, - })} - onMouseEnter={({ currentTarget }: any) => { - if (item.dropdown) { - setNestedDropdown(currentTarget); - setNestedDropdownEl(currentTarget); - setNestedDropdownName(item.name); - } - }} - onMouseLeave={() => { - if (item.dropdown) { - setNestedDropdown(null); - } - }} - > - {item.description ? ( - - {typeof item.icon === "string" ? ( - {item.icon} - ) : ( - {item.icon} - )} - - - {item.name} - - - {item.description} - - - - ) : ( - - {item.icon} - {item.name} - - )} - {item.collapse && ( - - keyboard_arrow_right - - )} - - ); - }); - } - - return template; - }); - - // Routes dropdown menu - const dropdownMenu = ( - setDropdown(dropdownEl)} - onMouseLeave={() => { - if (!nestedDropdown) { - setDropdown(null); - setDropdownName(""); - } - }} - > - {({ TransitionProps }) => ( - white.main, - }} - > - - - - arrow_drop_up - - - - {renderRoutes} - - - - )} - - ); - - // Render routes that are nested inside the dropdown menu routes - const renderNestedRoutes = routes.map(({ collapse, columns }: any) => - collapse && !columns - ? collapse.map(({ name: parentName, collapse: nestedCollapse }: any) => { - let template; - - if (parentName === nestedDropdownName) { - template = - nestedCollapse && - nestedCollapse.map((item: any) => { - const linkComponent = { - component: MuiLink, - href: item.href, - target: "_blank", - rel: "noreferrer", - }; - - const routeComponent = { - component: Link, - to: item.route, - }; - - return ( - ({ - borderRadius: borderRadius.md, - cursor: "pointer", - transition: "all 300ms linear", - - "&:hover": { - backgroundColor: grey[200], - color: dark.main, - - "& *": { - color: dark.main, - }, - }, - })} - > - {item.description ? ( - - {item.name} - - {item.description} - - - ) : ( - item.name - )} - {item.collapse && ( - - keyboard_arrow_right - - )} - - ); - }); - } - - return template; - }) - : null - ); - - // Dropdown menu for the nested dropdowns - const nestedDropdownMenu = ( - { - setNestedDropdown(nestedDropdownEl); - }} - onMouseLeave={() => { - setNestedDropdown(null); - setNestedDropdownName(""); - setDropdown(null); - }} - > - {({ TransitionProps }) => ( - white.main, - }} - > - - - {renderNestedRoutes} - - - - )} - - ); - - return ( - - ({ - backgroundColor: transparent - ? transparentColor.main - : rgba(darkMode ? background.sidenav : white.main, 0.8), - backdropFilter: transparent ? "none" : `saturate(200%) blur(30px)`, - })} - > - - - {brand} - - - - {renderNavbarItems} - - {action && - (action.type === "internal" ? ( - - - {action.label} - - - ) : ( - - - {action.label} - - - ))} - - {mobileView && } - - - {dropdownMenu} - {nestedDropdownMenu} - - ); -} - -// Declaring default props for DefaultNavbar -DefaultNavbar.defaultProps = { - brand: "Material Dashboard PRO", - transparent: false, - light: false, - action: false, -}; - -export default DefaultNavbar; diff --git a/src/examples/Sidenav/SidenavCollapse.tsx b/src/examples/Sidenav/SidenavCollapse.tsx deleted file mode 100644 index 2427104..0000000 --- a/src/examples/Sidenav/SidenavCollapse.tsx +++ /dev/null @@ -1,128 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// @mui material components -import Collapse from "@mui/material/Collapse"; -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 PRO React TS components -import MDBox from "components/MDBox"; - -// Custom styles for the SidenavCollapse -import { - collapseItem, - collapseIconBox, - collapseIcon, - collapseText, - collapseArrow, -} from "examples/Sidenav/styles/sidenavCollapse"; - -// Material Dashboard 2 PRO React context -import { useMaterialUIController } from "context"; - -// Declaring props types for SidenavCollapse -interface Props { - icon: ReactNode; - name: string; - children?: ReactNode; - active?: Boolean; - noCollapse?: Boolean; - open?: Boolean; - [key: string]: any; -} - -function SidenavCollapse({ - icon, - name, - children, - active, - noCollapse, - open, - ...rest -}: Props): JSX.Element { - const [controller] = useMaterialUIController(); - const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller; - - return ( - <> - - - collapseItem(theme, { active, transparentSidenav, whiteSidenav, darkMode }) - } - > - collapseIconBox(theme, { transparentSidenav, whiteSidenav, darkMode })} - > - {typeof icon === "string" ? ( - collapseIcon(theme, { active })}>{icon} - ) : ( - icon - )} - - - - collapseText(theme, { - miniSidenav, - transparentSidenav, - whiteSidenav, - active, - }) - } - /> - - - collapseArrow(theme, { - noCollapse, - transparentSidenav, - whiteSidenav, - miniSidenav, - open, - active, - darkMode, - }) - } - > - expand_less - - - - {children && ( - - {children} - - )} - - ); -} - -// Declaring default props for SidenavCollapse -SidenavCollapse.defaultProps = { - active: false, - noCollapse: false, - children: false, - open: false, -}; - -export default SidenavCollapse; diff --git a/src/examples/Sidenav/SidenavItem.tsx b/src/examples/Sidenav/SidenavItem.tsx deleted file mode 100644 index aa8db2a..0000000 --- a/src/examples/Sidenav/SidenavItem.tsx +++ /dev/null @@ -1,101 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// @mui material components -import Collapse from "@mui/material/Collapse"; -import ListItem from "@mui/material/ListItem"; -import ListItemText from "@mui/material/ListItemText"; -import Icon from "@mui/material/Icon"; -import { Theme } from "@mui/material/styles"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; - -// Custom styles for the SidenavItem -import { item, itemContent, itemArrow } from "examples/Sidenav/styles/sidenavItem"; - -// Material Dashboard 2 PRO React TS contexts -import { useMaterialUIController } from "context"; - -// Declaring props types for SidenavCollapse -interface Props { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; - name: string; - active?: boolean | string; - nested?: boolean; - children?: ReactNode; - open?: boolean; - [key: string]: any; -} - -function SidenavItem({ color, name, active, nested, children, open, ...rest }: Props): JSX.Element { - const [controller] = useMaterialUIController(); - const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller; - - return ( - <> - item(theme, { active, color, transparentSidenav, whiteSidenav, darkMode })} - > - - itemContent(theme, { - active, - miniSidenav, - name, - open, - nested, - transparentSidenav, - whiteSidenav, - darkMode, - }) - } - > - - {children && ( - - itemArrow(theme, { open, miniSidenav, transparentSidenav, whiteSidenav, darkMode }) - } - > - expand_less - - )} - - - {children && ( - - {children} - - )} - - ); -} - -// Declaring default props for SidenavItem -SidenavItem.defaultProps = { - color: "info", - active: false, - nested: false, - children: false, - open: false, -}; - -export default SidenavItem; diff --git a/src/examples/Sidenav/SidenavList.tsx b/src/examples/Sidenav/SidenavList.tsx deleted file mode 100644 index 7cbd202..0000000 --- a/src/examples/Sidenav/SidenavList.tsx +++ /dev/null @@ -1,34 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// @mui material components -import List from "@mui/material/List"; - -function SidenavList({ children }: { children: ReactNode }): JSX.Element { - return ( - - {children} - - ); -} - -export default SidenavList; diff --git a/src/examples/Sidenav/SidenavRoot.tsx b/src/examples/Sidenav/SidenavRoot.tsx deleted file mode 100644 index 3f177e4..0000000 --- a/src/examples/Sidenav/SidenavRoot.tsx +++ /dev/null @@ -1,92 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, Theme } from "@mui/material/styles"; - -export default styled(Drawer)(({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => { - 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/Sidenav/index.tsx b/src/examples/Sidenav/index.tsx deleted file mode 100644 index 99b9a57..0000000 --- a/src/examples/Sidenav/index.tsx +++ /dev/null @@ -1,334 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, useState, ReactNode, useReducer } from 'react'; - -// react-router-dom components -import { useLocation, NavLink } from "react-router-dom"; - -// @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 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Material Dashboard 2 PRO React TS examples components -import SidenavCollapse from "examples/Sidenav/SidenavCollapse"; -import SidenavList from "examples/Sidenav/SidenavList"; -import SidenavItem from "examples/Sidenav/SidenavItem"; - -// Custom styles for the Sidenav -import SidenavRoot from "examples/Sidenav/SidenavRoot"; -import sidenavLogoLabel from "examples/Sidenav/styles/sidenav"; - -// Material Dashboard 2 PRO React context -import { - useMaterialUIController, - setMiniSidenav, - setTransparentSidenav, - setWhiteSidenav, -} from "context"; -import AuthenticationButton from "qqq/components/Buttons/AuthenticationButton"; - -// Declaring props types for Sidenav -interface Props { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; - brand?: string; - brandName: string; - routes: { - [key: string]: - | ReactNode - | string - | { - [key: string]: - | ReactNode - | string - | { - [key: string]: - | ReactNode - | string - | { - [key: string]: ReactNode | string; - }[]; - }[]; - }[]; - }[]; - [key: string]: any; -} - -function Sidenav({ color, brand, brandName, routes, ...rest }: Props): JSX.Element { - const [openCollapse, setOpenCollapse] = useState(false); - const [openNestedCollapse, setOpenNestedCollapse] = useState(false); - const [controller, dispatch] = useMaterialUIController(); - const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller; - const location = useLocation(); - const { pathname } = location; - const collapseName = pathname.split("/").slice(1)[0]; - const items = pathname.split("/").slice(1); - const itemParentName = items[1]; - const itemName = items[items.length - 1]; - const [, forceUpdate] = useReducer((x) => x + 1, 0); - - let textColor: - | "primary" - | "secondary" - | "info" - | "success" - | "warning" - | "error" - | "dark" - | "white" - | "inherit" - | "text" - | "light" = "white"; - - if (transparentSidenav || (whiteSidenav && !darkMode)) { - textColor = "dark"; - } else if (whiteSidenav && darkMode) { - textColor = "inherit"; - } - - const closeSidenav = () => setMiniSidenav(dispatch, true); - - useEffect(() => { - setOpenCollapse(collapseName); - setOpenNestedCollapse(itemParentName); - }, []); - - 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); - window.onload = () => { - forceUpdate(); - }; - - // 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 nested collapse items from the routes.js - const renderNestedCollapse = (collapse: any) => { - const template = collapse.map(({ name, route, key, href }: any) => - href ? ( - - - - ) : ( - - - - ) - ); - - return template; - }; - // Render the all the collpases from the routes.js - const renderCollapse = (collapses: any) => - collapses.map(({ name, collapse, route, href, key }: any) => { - let returnValue; - - if (collapse) { - returnValue = ( - - openNestedCollapse === key && currentTarget.classList.contains("MuiListItem-root") - ? setOpenNestedCollapse(false) - : setOpenNestedCollapse(key) - } - > - {renderNestedCollapse(collapse)} - - ); - } else { - returnValue = href ? ( - - - - ) : ( - - - - ); - } - return {returnValue}; - }); - - // Render all the routes from the routes.js (All the visible items on the Sidenav) - const renderRoutes = routes.map( - ({ type, name, icon, title, collapse, noCollapse, key, href, route }: any) => { - let returnValue; - - if (type === "collapse") { - if (href) { - returnValue = ( - - - - ); - } else if (noCollapse && route) { - returnValue = ( - - - {collapse ? renderCollapse(collapse) : null} - - - ); - } else { - returnValue = ( - (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key))} - > - {collapse ? renderCollapse(collapse) : null} - - ); - } - } else if (type === "title") { - returnValue = ( - - {title} - - ); - } else if (type === "divider") { - returnValue = ( - - ); - } - - return returnValue; - } - ); - - return ( - - - - - close - - - - {brand && } - sidenavLogoLabel(theme, { miniSidenav })} - > - - {brandName} - - - - - - {renderRoutes} - - - ); -} - -// Declaring default props for Sidenav -Sidenav.defaultProps = { - color: "info", - brand: "", -}; - -export default Sidenav; diff --git a/src/examples/Tables/DataTable/DataTableBodyCell.tsx b/src/examples/Tables/DataTable/DataTableBodyCell.tsx deleted file mode 100644 index cbd40c6..0000000 --- a/src/examples/Tables/DataTable/DataTableBodyCell.tsx +++ /dev/null @@ -1,61 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// @mui material components -import { Theme } from "@mui/material/styles"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; - -// Declaring prop types for DataTableBodyCell -interface Props { - children: ReactNode; - noBorder?: boolean; - align?: "left" | "right" | "center"; -} - -function DataTableBodyCell({ noBorder, align, children }: Props): JSX.Element { - return ( - ({ - fontSize: size.sm, - borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${light.main}`, - })} - > - - {children} - - - ); -} - -// Declaring default props for DataTableBodyCell -DataTableBodyCell.defaultProps = { - noBorder: false, - align: "left", -}; - -export default DataTableBodyCell; diff --git a/src/examples/Tables/DataTable/DataTableHeadCell.tsx b/src/examples/Tables/DataTable/DataTableHeadCell.tsx deleted file mode 100644 index f3012c8..0000000 --- a/src/examples/Tables/DataTable/DataTableHeadCell.tsx +++ /dev/null @@ -1,105 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// @mui material components -import Icon from "@mui/material/Icon"; -import { Theme } from "@mui/material/styles"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; - -// Material Dashboard 2 PRO React TS contexts -import { useMaterialUIController } from "context"; - -// Declaring props types for DataTableHeadCell -interface Props { - width?: string | number; - children: ReactNode; - sorted?: false | "none" | "asce" | "desc"; - align?: "left" | "right" | "center"; -} - -function DataTableHeadCell({ width, children, sorted, align, ...rest }: Props): JSX.Element { - 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 - - - )} - - - ); -} - -// Declaring default props for DataTableHeadCell -DataTableHeadCell.defaultProps = { - width: "auto", - sorted: "none", - align: "left", -}; - -export default DataTableHeadCell; diff --git a/src/examples/Tables/DataTable/index.tsx b/src/examples/Tables/DataTable/index.tsx deleted file mode 100644 index 83a29b3..0000000 --- a/src/examples/Tables/DataTable/index.tsx +++ /dev/null @@ -1,306 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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"; - -// 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 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; -import MDInput from "components/MDInput"; -import MDPagination from "components/MDPagination"; - -// Material Dashboard 2 PRO React TS examples components -import DataTableHeadCell from "examples/Tables/DataTable/DataTableHeadCell"; -import DataTableBodyCell from "examples/Tables/DataTable/DataTableBodyCell"; - -// Declaring props types for DataTable -interface Props { - entriesPerPage?: - | false - | { - defaultValue: number; - entries: number[]; - }; - canSearch?: boolean; - showTotalEntries?: boolean; - table: { - columns: { [key: string]: any }[]; - rows: { [key: string]: any }[]; - }; - pagination?: { - variant: "contained" | "gradient"; - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light"; - }; - isSorted?: boolean; - noEndBorder?: boolean; -} - -function DataTable({ - entriesPerPage, - canSearch, - showTotalEntries, - table, - pagination, - isSorted, - noEndBorder, -}: Props): JSX.Element { - let defaultValue: any; - let entries: any[]; - - if (entriesPerPage) { - defaultValue = entriesPerPage.defaultValue ? entriesPerPage.defaultValue : "10"; - entries = entriesPerPage.entries ? entriesPerPage.entries : ["10", "25", "50", "100"]; - } - - 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 }, - }: any = 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: any) => setPageSize(value); - - // Render the paginations - const renderPagination = pageOptions.map((option: any) => ( - gotoPage(Number(option))} - active={pageIndex === option} - > - {option + 1} - - )); - - // Handler for the input to set the pagination index - const handleInputPagination = ({ target: { value } }: any) => - value > pageOptions.length || value < 0 ? gotoPage(0) : gotoPage(Number(value)); - - // Customized page options starting from 1 - const customizedPageOptions = pageOptions.map((option: any) => option + 1); - - // Setting value for the pagination input - const handleInputPaginationValue = ({ target: value }: any) => 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: any) => { - 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: any) => ( - - {headerGroup.headers.map((column: any) => ( - - {column.render("Header")} - - ))} - - ))} - - - {page.map((row: any, key: any) => { - prepareRow(row); - return ( - - {row.cells.map((cell: any) => ( - - {cell.render("Cell")} - - ))} - - ); - })} - -
- - - {showTotalEntries && ( - - - Showing {entriesStart} to {entriesEnd} of {rows.length} entries - - - )} - {pageOptions.length > 1 && ( - - {canPreviousPage && ( - previousPage()}> - chevron_left - - )} - {renderPagination.length > 6 ? ( - - { - handleInputPagination(event); - handleInputPaginationValue(event); - }} - /> - - ) : ( - renderPagination - )} - {canNextPage && ( - nextPage()}> - chevron_right - - )} - - )} - - - ); -} - -// Declaring default props for 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, -}; - -export default DataTable; diff --git a/src/examples/Tables/SalesTable/SalesTableCell.tsx b/src/examples/Tables/SalesTable/SalesTableCell.tsx deleted file mode 100644 index 87ed15f..0000000 --- a/src/examples/Tables/SalesTable/SalesTableCell.tsx +++ /dev/null @@ -1,91 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 TableCell from "@mui/material/TableCell"; - -// Material Dashboard 2 PRO React TS components -import MDTypography from "components/MDTypography"; -import MDBox from "components/MDBox"; - -// Declaring prop types for SalesTableCell -interface Props { - title: string; - content?: string | number; - image?: string; - noBorder?: boolean; - [key: string]: any; -} - -function SalesTableCell({ title, content, image, noBorder, ...rest }: Props): JSX.Element { - let template; - - if (image) { - template = ( - - - {" "} - - - {title}: - - - {content} - - - - - ); - } else { - template = ( - - - - {title}: - - - {content} - - - - ); - } - - return template; -} - -// Declaring default props for SalesTableCell -SalesTableCell.defaultProps = { - image: "", - noBorder: false, -}; - -export default SalesTableCell; diff --git a/src/examples/Tables/SalesTable/index.tsx b/src/examples/Tables/SalesTable/index.tsx deleted file mode 100644 index 267381c..0000000 --- a/src/examples/Tables/SalesTable/index.tsx +++ /dev/null @@ -1,97 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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"; - -// @mui material components -import Table from "@mui/material/Table"; -import TableBody from "@mui/material/TableBody"; -import TableContainer from "@mui/material/TableContainer"; -import TableHead from "@mui/material/TableHead"; -import TableRow from "@mui/material/TableRow"; - -// Material Dashboard 2 PRO React TS components -import MDTypography from "components/MDTypography"; -import MDBox from "components/MDBox"; - -// Material Dashboard 2 PRO React TS examples components -import SalesTableCell from "examples/Tables/SalesTable/SalesTableCell"; - -// Declaring props types for SalesTable -interface Props { - title?: string; - rows?: { - [key: string]: string | number | (string | number)[]; - }[]; - shadow?: boolean; -} - -function SalesTable({ title, rows, shadow }: Props): JSX.Element { - const renderTableCells = rows.map( - (row: { [key: string]: string | number | (string | number)[] }, key: any) => { - const tableRows: any = []; - const rowKey = `row-${key}`; - - Object.entries(row).map(([cellTitle, cellContent]: any) => - Array.isArray(cellContent) - ? tableRows.push( - - ) - : tableRows.push( - - ) - ); - - return {tableRows}; - } - ); - - return ( - - - {title ? ( - - - - {title} - - - - ) : null} - {useMemo(() => renderTableCells, [rows])} -
- - ); -} - -// Declaring default props for SalesTable -SalesTable.defaultProps = { - title: "", - rows: [{}], - shadow: true, -}; - -export default SalesTable; diff --git a/src/examples/Timeline/TimelineItem/index.tsx b/src/examples/Timeline/TimelineItem/index.tsx deleted file mode 100644 index 259d966..0000000 --- a/src/examples/Timeline/TimelineItem/index.tsx +++ /dev/null @@ -1,96 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// @mui material components -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Timeline context -import { useTimeline } from "examples/Timeline/context"; - -// Custom styles for the TimelineItem -import timelineItem from "examples/Timeline/TimelineItem/styles"; - -// Declaring prop types for TimelineItem -interface Props { - color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light"; - icon: ReactNode; - title: string; - dateTime: string; - description?: string; - lastItem?: boolean; - [key: string]: any; -} - -function TimelineItem({ color, icon, title, dateTime, description, lastItem }: Props): JSX.Element { - const isDark = useTimeline(); - - return ( - timelineItem(theme, { lastItem, isDark })} - > - size.sm }} - > - {icon} - - - - {title} - - - - {dateTime} - - - - {description ? ( - - {description} - - ) : null} - - - - ); -} - -// Declaring default props for TimelineItem -TimelineItem.defaultProps = { - color: "info", - lastItem: false, - description: "", -}; - -export default TimelineItem; diff --git a/src/examples/Timeline/TimelineItem/styles.ts b/src/examples/Timeline/TimelineItem/styles.ts deleted file mode 100644 index e6fcb14..0000000 --- a/src/examples/Timeline/TimelineItem/styles.ts +++ /dev/null @@ -1,23 +0,0 @@ -// @mui material components -import { Theme } from "@mui/material/styles"; - -function timelineItem(theme: Theme, ownerState: any) { - 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/Timeline/TimelineList/index.tsx b/src/examples/Timeline/TimelineList/index.tsx deleted file mode 100644 index 81b1050..0000000 --- a/src/examples/Timeline/TimelineList/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 { ReactNode } from "react"; - -// @mui material components -import Card from "@mui/material/Card"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Material Dashboard 2 PRO React TS components -import { useMaterialUIController } from "context"; - -// Timeline context -import { TimelineProvider } from "examples/Timeline/context"; - -// Declaring props types for TimelineList -interface Props { - title: string; - dark?: boolean; - children: ReactNode; -} - -function TimelineList({ title, dark, children }: Props): JSX.Element { - const [controller] = useMaterialUIController(); - const { darkMode } = controller; - - return ( - - - darkMode && background.card }} - > - - - {title} - - - {children} - - - - ); -} - -// Declaring default props for TimelineList -TimelineList.defaultProps = { - dark: false, -}; - -export default TimelineList; diff --git a/src/examples/Timeline/context/index.tsx b/src/examples/Timeline/context/index.tsx deleted file mode 100644 index 912655e..0000000 --- a/src/examples/Timeline/context/index.tsx +++ /dev/null @@ -1,42 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, ReactNode } from "react"; - -// The Timeline main context -const Timeline = createContext(null); - -// Declaring props types for TimelineProvider -interface Props { - children: ReactNode; - value: boolean; -} - -// Timeline context provider -function TimelineProvider({ children, value }: Props): JSX.Element { - return {children}; -} - -// Timeline custom hook for using context -function useTimeline() { - return useContext(Timeline); -} - -export { TimelineProvider, useTimeline }; diff --git a/src/layouts/applications/calendar/components/Header/index.tsx b/src/layouts/applications/calendar/components/Header/index.tsx deleted file mode 100644 index 9275042..0000000 --- a/src/layouts/applications/calendar/components/Header/index.tsx +++ /dev/null @@ -1,86 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 Divider from "@mui/material/Divider"; -import Icon from "@mui/material/Icon"; -import Tooltip from "@mui/material/Tooltip"; -import { Theme } from "@mui/material/styles"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; -import MDAvatar from "components/MDAvatar"; -import MDButton from "components/MDButton"; - -// Image -import team1 from "assets/images/team-1.jpg"; -import team2 from "assets/images/team-2.jpg"; -import team3 from "assets/images/team-3.jpg"; -import team4 from "assets/images/team-4.jpg"; -import team5 from "assets/images/team-5.jpg"; - -function Header(): JSX.Element { - const avatarStyles: { [key: string]: any } = { - border: ({ borders: { borderWidth }, palette: { white } }: Theme) => - `${borderWidth[2]} solid ${white.main}`, - cursor: "pointer", - position: "relative", - ml: -1.5, - - "&:hover, &:focus": { - zIndex: "10", - }, - }; - - return ( - - - - - Team members: - - - - - - - - - - - - - - - - - - - - - - - - - - add - - - - ); -} - -export default Header; diff --git a/src/layouts/applications/calendar/components/NextEvents/index.tsx b/src/layouts/applications/calendar/components/NextEvents/index.tsx deleted file mode 100644 index 884173d..0000000 --- a/src/layouts/applications/calendar/components/NextEvents/index.tsx +++ /dev/null @@ -1,78 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 Card from "@mui/material/Card"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Material Dashboard 2 PRO React TS examples components -import DefaultItem from "examples/Items/DefaultItem"; - -function NextEvents(): JSX.Element { - return ( - - - - Next events - - - - - - - - - - - - - - - - - - - ); -} - -export default NextEvents; diff --git a/src/layouts/applications/calendar/components/ProductivityChart/configs/index.ts b/src/layouts/applications/calendar/components/ProductivityChart/configs/index.ts deleted file mode 100644 index d2646a4..0000000 --- a/src/layouts/applications/calendar/components/ProductivityChart/configs/index.ts +++ /dev/null @@ -1,79 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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 PRO React TS Base Styles -import colors from "assets/theme/base/colors"; - -const { white } = colors; - -function configs(backgroundColor?: "string"): any { - return { - data: { - labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], - datasets: [ - { - label: "Visitors", - tension: 0.5, - pointRadius: 0, - borderColor: white.main, - borderWidth: 2, - backgroundColor, - data: [50, 45, 60, 60, 80, 65, 90, 80, 100], - maxBarThickness: 6, - fill: true, - }, - ], - }, - options: { - responsive: true, - maintainAspectRatio: false, - plugins: { - legend: { - display: false, - }, - }, - interaction: { - intersect: false, - mode: "index", - }, - scales: { - y: { - grid: { - drawBorder: false, - display: false, - drawOnChartArea: false, - drawTicks: false, - }, - ticks: { - display: false, - }, - }, - x: { - grid: { - drawBorder: false, - display: false, - drawOnChartArea: false, - drawTicks: false, - }, - ticks: { - display: false, - }, - }, - }, - }, - }; -} - -export default configs; diff --git a/src/layouts/applications/calendar/components/ProductivityChart/index.tsx b/src/layouts/applications/calendar/components/ProductivityChart/index.tsx deleted file mode 100644 index 1c07374..0000000 --- a/src/layouts/applications/calendar/components/ProductivityChart/index.tsx +++ /dev/null @@ -1,104 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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, useState, useMemo, useEffect } from "react"; - -// react-chartjs-2 components -import { Line } from "react-chartjs-2"; - -// @mui material components -import Card from "@mui/material/Card"; -import Menu from "@mui/material/Menu"; -import MenuItem from "@mui/material/MenuItem"; -import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Chart configurations -import configs from "layouts/applications/calendar/components/ProductivityChart/configs"; - -// Material Dashboard 2 PRO React TS Base Styles -import typography from "assets/theme/base/typography"; - -function ProductivityChart(): JSX.Element { - const { size } = typography; - const chartRef = useRef(null); - const [openMenu, setOpenMenu] = useState(null); - const [chart, setChart] = useState([]); - const { data, options }: any = chart; - - const handleOpenMenu = ({ currentTarget }: { currentTarget: HTMLSpanElement }) => - setOpenMenu(currentTarget); - const handleCloseMenu = () => setOpenMenu(null); - - useEffect(() => setChart(configs()), []); - - const renderMenu = () => ( - - Action - Anoter action - Something else here - - ); - - return ( - - - - - - - Productivity - - - - arrow_upward - - - 4% more{" "} - - in 2021 - - - - - - more_horiz - - {renderMenu()} - - - {useMemo( - () => ( - - - - ), - [chart] - )} - - - ); -} - -export default ProductivityChart; diff --git a/src/layouts/applications/calendar/data/calendarEventsData.ts b/src/layouts/applications/calendar/data/calendarEventsData.ts deleted file mode 100644 index e4e826a..0000000 --- a/src/layouts/applications/calendar/data/calendarEventsData.ts +++ /dev/null @@ -1,74 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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. -*/ - -const calendarEventsData = [ - { - title: "All day conference", - start: "2021-08-01", - end: "2021-08-01", - className: "success", - }, - - { - title: "Meeting with Mary", - start: "2021-08-03", - end: "2021-08-03", - className: "info", - }, - - { - title: "Cyber Week", - start: "2021-08-04", - end: "2021-08-04", - className: "warning", - }, - - { - title: "Winter Hackaton", - start: "2021-08-05", - end: "2021-08-05", - className: "error", - }, - - { - title: "Digital event", - start: "2021-08-09", - end: "2021-08-11", - className: "warning", - }, - - { - title: "Marketing event", - start: "2021-08-12", - end: "2021-08-12", - className: "primary", - }, - - { - title: "Dinner with Family", - start: "2021-08-21", - end: "2021-08-21", - className: "error", - }, - - { - title: "Black Friday", - start: "2021-08-25", - end: "2021-08-25", - className: "info", - }, -]; - -export default calendarEventsData; diff --git a/src/layouts/applications/calendar/index.tsx b/src/layouts/applications/calendar/index.tsx deleted file mode 100644 index 6d210e9..0000000 --- a/src/layouts/applications/calendar/index.tsx +++ /dev/null @@ -1,75 +0,0 @@ -/** -========================================================= -* Material Dashboard 2 PRO React TS - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts -* Copyright 2022 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"; - -// @mui material components -import Grid from "@mui/material/Grid"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; - -// Material Dashboard 2 PRO React TS examples components -import DashboardLayout from "examples/LayoutContainers/DashboardLayout"; -import DashboardNavbar from "examples/Navbars/DashboardNavbar"; -import Footer from "examples/Footer"; -import EventCalendar from "examples/Calendar"; - -// Calendar application components -import Header from "layouts/applications/calendar/components/Header"; -import NextEvents from "layouts/applications/calendar/components/NextEvents"; -import ProductivityChart from "layouts/applications/calendar/components/ProductivityChart"; - -// Data -import calendarEventsData from "layouts/applications/calendar/data/calendarEventsData"; - -function Calendar(): JSX.Element { - return ( - - - - -
- - - - {useMemo( - () => ( - - ), - [calendarEventsData] - )} - - - - - - - - - - - -