QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 13:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

SPRINT-18: fixed to dashboards, removed and moved around all the things

Browse Source
This commit is contained in:
Tim Chamberlain
2023-01-04 11:40:21 -06:00
parent e49f178738
commit 267580b44b
460 changed files with 9717 additions and 11057 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/qqq/components/DashboardLayout/index.tsx
View File

@ -1,58 +0,0 @@
/*
* 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 <https://www.gnu.org/licenses/>.
*/
import {useEffect, ReactNode} from "react";
import {useLocation} from "react-router-dom";
import {useMaterialUIController, setLayout} from "context";
import MDBox from "qqq/components/Temporary/MDBox";
function DashboardLayout({children}: { children: ReactNode }): JSX.Element
{
const [controller, dispatch] = useMaterialUIController();
const {miniSidenav} = controller;
const {pathname} = useLocation();
useEffect(() =>
{
setLayout(dispatch, "dashboard");
}, [pathname]);
return (
<MDBox
sx={({breakpoints, transitions, functions: {pxToRem}}) => ({
p: 3,
position: "relative",
[breakpoints.up("xl")]: {
marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274),
transition: transitions.create(["margin-left", "margin-right"], {
easing: transitions.easing.easeInOut,
duration: transitions.duration.standard,
}),
},
})}
>
{children}
</MDBox>
);
}
export default DashboardLayout;

66
src/qqq/components/Temporary/Configurator/ConfiguratorRoot.tsx
View File

@ -1,66 +0,0 @@
/*
* 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 <https://www.gnu.org/licenses/>.
*/
import Drawer from "@mui/material/Drawer";
import {styled, Theme} from "@mui/material/styles";
export default styled(Drawer)(({theme, ownerState}: { theme?: Theme; ownerState: any }) =>
{
const {boxShadows, functions, transitions} = theme;
const {openConfigurator} = ownerState;
const configuratorWidth = 360;
const {lg} = boxShadows;
const {pxToRem} = functions;
// drawer styles when openConfigurator={true}
const drawerOpenStyles = () => ({
width: configuratorWidth,
left: "initial",
right: 0,
transition: transitions.create("right", {
easing: transitions.easing.sharp,
duration: transitions.duration.short,
}),
});
// drawer styles when openConfigurator={false}
const drawerCloseStyles = () => ({
left: "initial",
right: pxToRem(-350),
transition: transitions.create("all", {
easing: transitions.easing.sharp,
duration: transitions.duration.short,
}),
});
return {
"& .MuiDrawer-paper": {
height: "100vh",
margin: 0,
padding: `0 ${pxToRem(10)}`,
borderRadius: 0,
boxShadow: lg,
overflowY: "auto",
...(openConfigurator ? drawerOpenStyles() : drawerCloseStyles()),
},
};
});

385
src/qqq/components/Temporary/Configurator/index.tsx
View File

@ -1,385 +0,0 @@
/*
* 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 <https://www.gnu.org/licenses/>.
*/
import FacebookIcon from "@mui/icons-material/Facebook";
import TwitterIcon from "@mui/icons-material/Twitter";
import Divider from "@mui/material/Divider";
import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton";
import Link from "@mui/material/Link";
import {Theme} from "@mui/material/styles";
import Switch from "@mui/material/Switch";
import {useState, useEffect} from "react";
import GitHubButton from "react-github-btn";
import {useMaterialUIController, setOpenConfigurator, setTransparentSidenav, setWhiteSidenav, setMiniSidenav, setFixedNavbar, setSidenavColor, setDarkMode,} from "context";
import ConfiguratorRoot from "qqq/components/Temporary/Configurator/ConfiguratorRoot";
import MDBox from "qqq/components/Temporary/MDBox";
import MDButton from "qqq/components/Temporary/MDButton";
import MDTypography from "qqq/components/Temporary/MDTypography";
function Configurator(): JSX.Element
{
const [controller, dispatch] = useMaterialUIController();
const {
openConfigurator,
miniSidenav,
fixedNavbar,
sidenavColor,
transparentSidenav,
whiteSidenav,
darkMode,
} = controller;
const [disabled, setDisabled] = useState<boolean>(false);
const sidenavColors: (
| "primary"
| "secondary"
| "info"
| "success"
| "warning"
| "error"
| "light"
| "dark"
)[] = ["primary", "dark", "info", "success", "warning", "error"];
// Use the useEffect hook to change the button state for the sidenav type based on window size.
useEffect(() =>
{
// A function that sets the disabled state of the buttons for the sidenav type.
function handleDisabled()
{
return window.innerWidth > 1200 ? setDisabled(false) : setDisabled(true);
}
// The event listener that's calling the handleDisabled function when resizing the window.
window.addEventListener("resize", handleDisabled);
// Call the handleDisabled function to set the state with the initial value.
handleDisabled();
// Remove event listener on cleanup
return () => window.removeEventListener("resize", handleDisabled);
}, []);
const handleCloseConfigurator = () => setOpenConfigurator(dispatch, false);
const handleTransparentSidenav = () =>
{
setTransparentSidenav(dispatch, true);
setWhiteSidenav(dispatch, false);
};
const handleWhiteSidenav = () =>
{
setWhiteSidenav(dispatch, true);
setTransparentSidenav(dispatch, false);
};
const handleDarkSidenav = () =>
{
setWhiteSidenav(dispatch, false);
setTransparentSidenav(dispatch, false);
};
const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
const handleFixedNavbar = () => setFixedNavbar(dispatch, !fixedNavbar);
const handleDarkMode = () => setDarkMode(dispatch, !darkMode);
// sidenav type buttons styles
const sidenavTypeButtonsStyles = ({
functions: {pxToRem},
palette: {white, dark, background},
borders: {borderWidth},
}: Theme | any) => ({
height: pxToRem(39),
background: darkMode ? background.sidenav : white.main,
color: darkMode ? white.main : dark.main,
border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`,
"&:hover, &:focus, &:focus:not(:hover)": {
background: darkMode ? background.sidenav : white.main,
color: darkMode ? white.main : dark.main,
border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`,
},
});
// sidenav type active button styles
const sidenavTypeActiveButtonStyles = ({
functions: {pxToRem, linearGradient},
palette: {white, gradients, background},
}: Theme | any) => ({
height: pxToRem(39),
background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state),
color: darkMode ? background.sidenav : white.main,
"&:hover, &:focus, &:focus:not(:hover)": {
background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state),
color: darkMode ? background.sidenav : white.main,
},
});
return (
<ConfiguratorRoot variant="permanent" ownerState={{openConfigurator}}>
<MDBox
display="flex"
justifyContent="space-between"
alignItems="baseline"
pt={4}
pb={0.5}
px={3}
>
<MDBox>
<MDTypography variant="h5">Material UI Configurator</MDTypography>
<MDTypography variant="body2" color="text">
See our dashboard options.
</MDTypography>
</MDBox>
<Icon
sx={({typography: {size}, palette: {dark, white}}) => ({
fontSize: `${size.lg} !important`,
color: darkMode ? white.main : dark.main,
stroke: "currentColor",
strokeWidth: "2px",
cursor: "pointer",
transform: "translateY(5px)",
})}
onClick={handleCloseConfigurator}
>
close
</Icon>
</MDBox>
<Divider />
<MDBox pt={0.5} pb={3} px={3}>
<MDBox>
<MDTypography variant="h6">Sidenav Colors</MDTypography>
<MDBox mb={0.5}>
{sidenavColors.map((color) => (
<IconButton
key={color}
sx={({
borders: {borderWidth},
palette: {white, dark, background},
transitions,
}: Theme | any) => ({
width: "24px",
height: "24px",
padding: 0,
border: `${borderWidth[1]} solid ${darkMode ? background.sidenav : white.main}`,
borderColor: () =>
{
let borderColorValue = sidenavColor === color && dark.main;
if (darkMode && sidenavColor === color)
{
borderColorValue = white.main;
}
return borderColorValue;
},
transition: transitions.create("border-color", {
easing: transitions.easing.sharp,
duration: transitions.duration.shorter,
}),
backgroundImage: ({functions: {linearGradient}, palette: {gradients}}) =>
linearGradient(gradients[color].main, gradients[color].state),
"&:not(:last-child)": {
mr: 1,
},
"&:hover, &:focus, &:active": {
borderColor: darkMode ? white.main : dark.main,
},
})}
onClick={() => setSidenavColor(dispatch, color)}
/>
))}
</MDBox>
</MDBox>
<MDBox mt={3} lineHeight={1}>
<MDTypography variant="h6">Sidenav Type</MDTypography>
<MDTypography variant="button" color="text">
Choose between different sidenav types.
</MDTypography>
<MDBox
sx={{
display: "flex",
mt: 2,
mr: 1,
}}
>
<MDButton
color="dark"
variant="gradient"
onClick={handleDarkSidenav}
disabled={disabled}
fullWidth
sx={
!transparentSidenav && !whiteSidenav
? sidenavTypeActiveButtonStyles
: sidenavTypeButtonsStyles
}
>
Dark
</MDButton>
<MDBox sx={{mx: 1, width: "8rem", minWidth: "8rem"}}>
<MDButton
color="dark"
variant="gradient"
onClick={handleTransparentSidenav}
disabled={disabled}
fullWidth
sx={
transparentSidenav && !whiteSidenav
? sidenavTypeActiveButtonStyles
: sidenavTypeButtonsStyles
}
>
Transparent
</MDButton>
</MDBox>
<MDButton
color="dark"
variant="gradient"
onClick={handleWhiteSidenav}
disabled={disabled}
fullWidth
sx={
whiteSidenav && !transparentSidenav
? sidenavTypeActiveButtonStyles
: sidenavTypeButtonsStyles
}
>
White
</MDButton>
</MDBox>
</MDBox>
<MDBox
display="flex"
justifyContent="space-between"
alignItems="center"
mt={3}
lineHeight={1}
>
<MDTypography variant="h6">Navbar Fixed</MDTypography>
<Switch checked={fixedNavbar} onChange={handleFixedNavbar} />
</MDBox>
<Divider />
<MDBox display="flex" justifyContent="space-between" alignItems="center" lineHeight={1}>
<MDTypography variant="h6">Sidenav Mini</MDTypography>
<Switch checked={miniSidenav} onChange={handleMiniSidenav} />
</MDBox>
<Divider />
<MDBox display="flex" justifyContent="space-between" alignItems="center" lineHeight={1}>
<MDTypography variant="h6">Light / Dark</MDTypography>
<Switch checked={darkMode} onChange={handleDarkMode} />
</MDBox>
<Divider />
<MDBox mt={3} mb={2}>
<MDBox mb={2}>
<MDButton
component={Link}
href="https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts"
target="_blank"
rel="noreferrer"
color="info"
variant="gradient"
fullWidth
>
buy now
</MDButton>
</MDBox>
<MDBox mb={2}>
<MDButton
component={Link}
href="https://www.creative-tim.com/product/material-dashboard-pro-react"
target="_blank"
rel="noreferrer"
color="dark"
variant="gradient"
fullWidth
>
buy javascript version
</MDButton>
</MDBox>
<MDButton
component={Link}
href="https://www.creative-tim.com/learning-lab/react/quick-start/material-dashboard/"
target="_blank"
rel="noreferrer"
color={darkMode ? "light" : "dark"}
variant="outlined"
fullWidth
>
view documentation
</MDButton>
</MDBox>
<MDBox display="flex" justifyContent="center">
<GitHubButton
href="https://github.com/creativetimofficial/ct-material-dashboard-pro-react"
data-icon="octicon-star"
data-size="large"
data-show-count="true"
aria-label="Star creativetimofficial/ct-material-dashboard-pro-react on GitHub"
>
Star
</GitHubButton>
</MDBox>
<MDBox mt={2} textAlign="center">
<MDBox mb={0.5}>
<MDTypography variant="h6">Thank you for sharing!</MDTypography>
</MDBox>
<MDBox display="flex" justifyContent="center">
<MDBox mr={1.5}>
<MDButton
component={Link}
href="//twitter.com/intent/tweet?text=Check%20Material%20Dashboard%202%20PRO%20React%20made%20by%20%40CreativeTim%20%23webdesign%20%23dashboard%20%23react%20%mui&url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fmaterial-dashboard-2-pro-react-ts"
target="_blank"
rel="noreferrer"
color="dark"
>
<TwitterIcon />
&nbsp; Tweet
</MDButton>
</MDBox>
<MDButton
component={Link}
href="https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts"
target="_blank"
rel="noreferrer"
color="dark"
>
<FacebookIcon />
&nbsp; Share
</MDButton>
</MDBox>
</MDBox>
</MDBox>
</ConfiguratorRoot>
);
}
export default Configurator;

54
src/qqq/components/Temporary/MDAlert/MDAlertRoot.tsx
View File

@ -1,54 +0,0 @@
/*
* 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 <https://www.gnu.org/licenses/>.
*/
import {styled, Theme} from "@mui/material";
import Box from "@mui/material/Box";
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,
};
});

81
src/qqq/components/Temporary/MDAlert/index.tsx
View File

@ -1,81 +0,0 @@
/*
* 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 <https://www.gnu.org/licenses/>.
*/
import Fade from "@mui/material/Fade";
import {useState, ReactNode} from "react";
import MDAlertCloseIcon from "qqq/components/Temporary/MDAlert/MDAlertCloseIcon";
import MDAlertRoot from "qqq/components/Temporary/MDAlert/MDAlertRoot";
import MDBox from "qqq/components/Temporary/MDBox";
// 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) => (
<Fade in={mount} timeout={300}>
<MDAlertRoot ownerState={{color}} {...rest}>
<MDBox display="flex" alignItems="center" color="white">
{children}
</MDBox>
{dismissible ? (
<MDAlertCloseIcon onClick={mount ? handleAlertStatus : undefined}>
&times;
</MDAlertCloseIcon>
) : null}
</MDAlertRoot>
</Fade>
);
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;

138
src/qqq/components/Temporary/MDBox/MDBoxRoot.tsx
View File

@ -1,138 +0,0 @@
/*
* 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 <https://www.gnu.org/licenses/>.
*/
import Box from "@mui/material/Box";
import {styled, Theme} from "@mui/material/styles";
export default styled(Box)(({theme, ownerState}: { theme?: Theme | any; ownerState: any }) =>
{
const {palette, functions, borders, boxShadows} = theme;
const {variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow} = ownerState;
const {gradients, grey, white} = palette;
const {linearGradient} = functions;
const {borderRadius: radius} = borders;
const {colored} = boxShadows;
const greyColors: { [key: string]: string } = {
"grey-100": grey[100],
"grey-200": grey[200],
"grey-300": grey[300],
"grey-400": grey[400],
"grey-500": grey[500],
"grey-600": grey[600],
"grey-700": grey[700],
"grey-800": grey[800],
"grey-900": grey[900],
};
const validGradients = [
"primary",
"secondary",
"info",
"success",
"warning",
"error",
"dark",
"light",
];
const validColors = [
"transparent",
"white",
"black",
"primary",
"secondary",
"info",
"success",
"warning",
"error",
"light",
"dark",
"text",
"grey-100",
"grey-200",
"grey-300",
"grey-400",
"grey-500",
"grey-600",
"grey-700",
"grey-800",
"grey-900",
];
const validBorderRadius = ["xs", "sm", "md", "lg", "xl", "xxl", "section"];
const validBoxShadows = ["xs", "sm", "md", "lg", "xl", "xxl", "inset"];
// background value
let backgroundValue = bgColor;
if (variant === "gradient")
{
backgroundValue = validGradients.find((el) => el === bgColor)
? linearGradient(gradients[bgColor].main, gradients[bgColor].state)
: white.main;
}
else if (validColors.find((el) => el === bgColor))
{
backgroundValue = palette[bgColor] ? palette[bgColor].main : greyColors[bgColor];
}
else
{
backgroundValue = bgColor;
}
// color value
let colorValue = color;
if (validColors.find((el) => el === color))
{
colorValue = palette[color] ? palette[color].main : greyColors[color];
}
// borderRadius value
let borderRadiusValue = borderRadius;
if (validBorderRadius.find((el) => el === borderRadius))
{
borderRadiusValue = radius[borderRadius];
}
// boxShadow value
let boxShadowValue = "none";
if (validBoxShadows.find((el) => el === shadow))
{
boxShadowValue = boxShadows[shadow];
}
else if (coloredShadow)
{
boxShadowValue = colored[coloredShadow] ? colored[coloredShadow] : "none";
}
return {
opacity,
background: backgroundValue,
color: colorValue,
borderRadius: borderRadiusValue,
boxShadow: boxShadowValue,
};
});

60
src/qqq/components/Temporary/MDBox/index.tsx
View File

@ -1,60 +0,0 @@
/*
* 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 <https://www.gnu.org/licenses/>.
*/
import {BoxProps} from "@mui/material";
import {forwardRef, FC} from "react";
import MDBoxRoot from "qqq/components/Temporary/MDBox/MDBoxRoot";
// declaring props types for MDBox
interface Props extends BoxProps {
variant?: "contained" | "gradient";
bgColor?: string;
color?: string;
opacity?: number;
borderRadius?: string;
shadow?: string;
coloredShadow?: string;
[key: string]: any;
}
const MDBox: FC<Props> = forwardRef(
({variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow, ...rest}, ref) => (
<MDBoxRoot
{...rest}
ref={ref}
ownerState={{variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow}}
/>
)
);
// Declaring default props for MDBox
MDBox.defaultProps = {
variant: "contained",
bgColor: "transparent",
color: "dark",
opacity: 1,
borderRadius: "none",
shadow: "none",
coloredShadow: "none",
};
export default MDBox;

50
src/qqq/components/Temporary/NotificationItem/index.tsx
View File

@ -1,50 +0,0 @@
/*
* 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 <https://www.gnu.org/licenses/>.
*/
import {MenuItemProps} from "@mui/material";
import Link from "@mui/material/Link";
import MenuItem from "@mui/material/MenuItem";
import {forwardRef, FC, ReactNode} from "react";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import menuItem from "qqq/components/Temporary/NotificationItem/styles";
// Declaring props types for NotificationItem
interface Props extends MenuItemProps {
icon: ReactNode;
title: string;
[key: string]: any;
}
const NotificationItem : FC<Props> = forwardRef(({icon, title, ...rest}, ref) => (
<MenuItem {...rest} ref={ref} sx={(theme) => menuItem(theme)}>
<MDBox component={Link} py={0.5} display="flex" alignItems="center" lineHeight={1}>
<MDTypography variant="body1" color="secondary" lineHeight={0.75}>
{icon}
</MDTypography>
<MDTypography variant="button" fontWeight="regular" sx={{ml: 1}}>
{title}
</MDTypography>
</MDBox>
</MenuItem>
));
export default NotificationItem;

159
src/qqq/components/Temporary/Theme.ts
View File

@ -1,159 +0,0 @@
/*
* 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 <https://www.gnu.org/licenses/>.
*/
import {createTheme} from "@mui/material";
import borders from "assets/theme/base/borders";
import boxShadows from "assets/theme/base/boxShadows";
import breakpoints from "assets/theme/base/breakpoints";
import colors from "assets/theme/base/colors";
import globals from "assets/theme/base/globals";
import typography from "assets/theme/base/typography";
import appBar from "assets/theme/components/appBar";
import avatar from "assets/theme/components/avatar";
import breadcrumbs from "assets/theme/components/breadcrumbs";
import button from "assets/theme/components/button";
import buttonBase from "assets/theme/components/buttonBase";
import card from "assets/theme/components/card";
import cardContent from "assets/theme/components/card/cardContent";
import cardMedia from "assets/theme/components/card/cardMedia";
import container from "assets/theme/components/container";
import dialog from "assets/theme/components/dialog";
import dialogActions from "assets/theme/components/dialog/dialogActions";
import dialogContent from "assets/theme/components/dialog/dialogContent";
import dialogContentText from "assets/theme/components/dialog/dialogContentText";
import dialogTitle from "assets/theme/components/dialog/dialogTitle";
import divider from "assets/theme/components/divider";
import flatpickr from "assets/theme/components/flatpickr";
import autocomplete from "assets/theme/components/form/autocomplete";
import checkbox from "assets/theme/components/form/checkbox";
import formControlLabel from "assets/theme/components/form/formControlLabel";
import formLabel from "assets/theme/components/form/formLabel";
import input from "assets/theme/components/form/input";
import inputLabel from "assets/theme/components/form/inputLabel";
import inputOutlined from "assets/theme/components/form/inputOutlined";
import radio from "assets/theme/components/form/radio";
import select from "assets/theme/components/form/select";
import switchButton from "assets/theme/components/form/switchButton";
import textField from "assets/theme/components/form/textField";
import icon from "assets/theme/components/icon";
import iconButton from "assets/theme/components/iconButton";
import linearProgress from "assets/theme/components/linearProgress";
import link from "assets/theme/components/link";
import list from "assets/theme/components/list";
import listItem from "assets/theme/components/list/listItem";
import listItemText from "assets/theme/components/list/listItemText";
import menu from "assets/theme/components/menu";
import menuItem from "assets/theme/components/menu/menuItem";
import popover from "assets/theme/components/popover";
import sidenav from "assets/theme/components/sidenav";
import slider from "assets/theme/components/slider";
import stepper from "assets/theme/components/stepper";
import step from "assets/theme/components/stepper/step";
import stepConnector from "assets/theme/components/stepper/stepConnector";
import stepIcon from "assets/theme/components/stepper/stepIcon";
import stepLabel from "assets/theme/components/stepper/stepLabel";
import svgIcon from "assets/theme/components/svgIcon";
import tableCell from "assets/theme/components/table/tableCell";
import tableContainer from "assets/theme/components/table/tableContainer";
import tableHead from "assets/theme/components/table/tableHead";
import tabs from "assets/theme/components/tabs";
import tab from "assets/theme/components/tabs/tab";
import tooltip from "assets/theme/components/tooltip";
import boxShadow from "assets/theme/functions/boxShadow";
import hexToRgb from "assets/theme/functions/hexToRgb";
import linearGradient from "assets/theme/functions/linearGradient";
import pxToRem from "assets/theme/functions/pxToRem";
import rgba from "assets/theme/functions/rgba";
export default createTheme({
breakpoints: {...breakpoints},
palette: {...colors},
typography: {...typography},
boxShadows: {...boxShadows},
borders: {...borders},
functions: {
boxShadow,
hexToRgb,
linearGradient,
pxToRem,
rgba,
},
components: {
MuiCssBaseline: {
styleOverrides: {
...globals,
...flatpickr,
...container,
},
},
MuiDrawer: {...sidenav},
MuiList: {...list},
MuiListItem: {...listItem},
MuiListItemText: {...listItemText},
MuiCard: {...card},
MuiCardMedia: {...cardMedia},
MuiCardContent: {...cardContent},
MuiButton: {...button},
MuiIconButton: {...iconButton},
MuiInput: {...input},
MuiInputLabel: {...inputLabel},
MuiOutlinedInput: {...inputOutlined},
MuiTextField: {...textField},
MuiMenu: {...menu},
MuiMenuItem: {...menuItem},
MuiSwitch: {...switchButton},
MuiDivider: {...divider},
MuiTableContainer: {...tableContainer},
MuiTableHead: {...tableHead},
MuiTableCell: {...tableCell},
MuiLinearProgress: {...linearProgress},
MuiBreadcrumbs: {...breadcrumbs},
MuiSlider: {...slider},
MuiAvatar: {...avatar},
MuiTooltip: {...tooltip},
MuiAppBar: {...appBar},
MuiTabs: {...tabs},
MuiTab: {...tab},
MuiStepper: {...stepper},
MuiStep: {...step},
MuiStepConnector: {...stepConnector},
MuiStepLabel: {...stepLabel},
MuiStepIcon: {...stepIcon},
MuiSelect: {...select},
MuiFormControlLabel: {...formControlLabel},
MuiFormLabel: {...formLabel},
MuiCheckbox: {...checkbox},
MuiRadio: {...radio},
MuiAutocomplete: {...autocomplete},
MuiPopover: {...popover},
MuiButtonBase: {...buttonBase},
MuiIcon: {...icon},
MuiSvgIcon: {...svgIcon},
MuiLink: {...link},
MuiDialog: {...dialog},
MuiDialogTitle: {...dialogTitle},
MuiDialogContent: {...dialogContent},
MuiDialogContentText: {...dialogContentText},
MuiDialogActions: {...dialogActions},
},
});

159
src/qqq/components/Temporary/Theme/index.ts
View File

@ -1,159 +0,0 @@
/**
=========================================================
* Material Dashboard 2 PRO React - v2.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui
* Copyright 2021 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// @mui material components
import { createTheme } from "@mui/material";
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import breakpoints from "assets/theme/base/breakpoints";
import typography from "assets/theme/base/typography";
import boxShadows from "assets/theme/base/boxShadows";
import borders from "assets/theme/base/borders";
import globals from "assets/theme/base/globals";
// Material Dashboard 2 PRO React TS Helper Functions
import boxShadow from "assets/theme/functions/boxShadow";
import hexToRgb from "assets/theme/functions/hexToRgb";
import linearGradient from "assets/theme/functions/linearGradient";
import pxToRem from "assets/theme/functions/pxToRem";
import rgba from "assets/theme/functions/rgba";
// Material Dashboard 2 PRO React TS components base styles for @mui material components
import sidenav from "assets/theme/components/sidenav";
import list from "assets/theme/components/list";
import listItem from "assets/theme/components/list/listItem";
import listItemText from "assets/theme/components/list/listItemText";
import card from "assets/theme/components/card";
import cardMedia from "assets/theme/components/card/cardMedia";
import cardContent from "assets/theme/components/card/cardContent";
import button from "assets/theme/components/button";
import iconButton from "assets/theme/components/iconButton";
import input from "assets/theme/components/form/input";
import inputLabel from "assets/theme/components/form/inputLabel";
import inputOutlined from "assets/theme/components/form/inputOutlined";
import textField from "assets/theme/components/form/textField";
import menu from "assets/theme/components/menu";
import menuItem from "assets/theme/components/menu/menuItem";
import switchButton from "assets/theme/components/form/switchButton";
import divider from "assets/theme/components/divider";
import tableContainer from "assets/theme/components/table/tableContainer";
import tableHead from "assets/theme/components/table/tableHead";
import tableCell from "assets/theme/components/table/tableCell";
import linearProgress from "assets/theme/components/linearProgress";
import breadcrumbs from "assets/theme/components/breadcrumbs";
import slider from "assets/theme/components/slider";
import avatar from "assets/theme/components/avatar";
import tooltip from "assets/theme/components/tooltip";
import appBar from "assets/theme/components/appBar";
import tabs from "assets/theme/components/tabs";
import tab from "assets/theme/components/tabs/tab";
import stepper from "assets/theme/components/stepper";
import step from "assets/theme/components/stepper/step";
import stepConnector from "assets/theme/components/stepper/stepConnector";
import stepLabel from "assets/theme/components/stepper/stepLabel";
import stepIcon from "assets/theme/components/stepper/stepIcon";
import select from "assets/theme/components/form/select";
import formControlLabel from "assets/theme/components/form/formControlLabel";
import formLabel from "assets/theme/components/form/formLabel";
import checkbox from "assets/theme/components/form/checkbox";
import radio from "assets/theme/components/form/radio";
import autocomplete from "assets/theme/components/form/autocomplete";
import flatpickr from "assets/theme/components/flatpickr";
import container from "assets/theme/components/container";
import popover from "assets/theme/components/popover";
import buttonBase from "assets/theme/components/buttonBase";
import icon from "assets/theme/components/icon";
import svgIcon from "assets/theme/components/svgIcon";
import link from "assets/theme/components/link";
import dialog from "assets/theme/components/dialog";
import dialogTitle from "assets/theme/components/dialog/dialogTitle";
import dialogContent from "assets/theme/components/dialog/dialogContent";
import dialogContentText from "assets/theme/components/dialog/dialogContentText";
import dialogActions from "assets/theme/components/dialog/dialogActions";
export default createTheme({
breakpoints: { ...breakpoints },
palette: { ...colors },
typography: { ...typography },
boxShadows: { ...boxShadows },
borders: { ...borders },
functions: {
boxShadow,
hexToRgb,
linearGradient,
pxToRem,
rgba,
},
components: {
MuiCssBaseline: {
styleOverrides: {
...globals,
...flatpickr,
...container,
},
},
MuiDrawer: { ...sidenav },
MuiList: { ...list },
MuiListItem: { ...listItem },
MuiListItemText: { ...listItemText },
MuiCard: { ...card },
MuiCardMedia: { ...cardMedia },
MuiCardContent: { ...cardContent },
MuiButton: { ...button },
MuiIconButton: { ...iconButton },
MuiInput: { ...input },
MuiInputLabel: { ...inputLabel },
MuiOutlinedInput: { ...inputOutlined },
MuiTextField: { ...textField },
MuiMenu: { ...menu },
MuiMenuItem: { ...menuItem },
MuiSwitch: { ...switchButton },
MuiDivider: { ...divider },
MuiTableContainer: { ...tableContainer },
MuiTableHead: { ...tableHead },
MuiTableCell: { ...tableCell },
MuiLinearProgress: { ...linearProgress },
MuiBreadcrumbs: { ...breadcrumbs },
MuiSlider: { ...slider },
MuiAvatar: { ...avatar },
MuiTooltip: { ...tooltip },
MuiAppBar: { ...appBar },
MuiTabs: { ...tabs },
MuiTab: { ...tab },
MuiStepper: { ...stepper },
MuiStep: { ...step },
MuiStepConnector: { ...stepConnector },
MuiStepLabel: { ...stepLabel },
MuiStepIcon: { ...stepIcon },
MuiSelect: { ...select },
MuiFormControlLabel: { ...formControlLabel },
MuiFormLabel: { ...formLabel },
MuiCheckbox: { ...checkbox },
MuiRadio: { ...radio },
MuiAutocomplete: { ...autocomplete },
MuiPopover: { ...popover },
MuiButtonBase: { ...buttonBase },
MuiIcon: { ...icon },
MuiSvgIcon: { ...svgIcon },
MuiLink: { ...link },
MuiDialog: { ...dialog },
MuiDialogTitle: { ...dialogTitle },
MuiDialogContent: { ...dialogContent },
MuiDialogContentText: { ...dialogContentText },
MuiDialogActions: { ...dialogActions },
},
});

161
src/qqq/components/Temporary/Theme/theme-rtl.ts
View File

@ -1,161 +0,0 @@
/**
=========================================================
* Material Dashboard 2 PRO React - v2.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui
* Copyright 2021 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// @mui material components
import { createTheme } from "@mui/material/styles";
// import Fade from "@mui/material/Fade";
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import breakpoints from "assets/theme/base/breakpoints";
import typography from "assets/theme/base/typography";
import boxShadows from "assets/theme/base/boxShadows";
import borders from "assets/theme/base/borders";
import globals from "assets/theme/base/globals";
// Material Dashboard 2 PRO React TS Helper Functions
import boxShadow from "assets/theme/functions/boxShadow";
import hexToRgb from "assets/theme/functions/hexToRgb";
import linearGradient from "assets/theme/functions/linearGradient";
import pxToRem from "assets/theme/functions/pxToRem";
import rgba from "assets/theme/functions/rgba";
// Material Dashboard 2 PRO React TS components base styles for @mui material components
import sidenav from "assets/theme/components/sidenav";
import list from "assets/theme/components/list";
import listItem from "assets/theme/components/list/listItem";
import listItemText from "assets/theme/components/list/listItemText";
import card from "assets/theme/components/card";
import cardMedia from "assets/theme/components/card/cardMedia";
import cardContent from "assets/theme/components/card/cardContent";
import button from "assets/theme/components/button";
import iconButton from "assets/theme/components/iconButton";
import input from "assets/theme/components/form/input";
import inputLabel from "assets/theme/components/form/inputLabel";
import inputOutlined from "assets/theme/components/form/inputOutlined";
import textField from "assets/theme/components/form/textField";
import menu from "assets/theme/components/menu";
import menuItem from "assets/theme/components/menu/menuItem";
import switchButton from "assets/theme/components/form/switchButton";
import divider from "assets/theme/components/divider";
import tableContainer from "assets/theme/components/table/tableContainer";
import tableHead from "assets/theme/components/table/tableHead";
import tableCell from "assets/theme/components/table/tableCell";
import linearProgress from "assets/theme/components/linearProgress";
import breadcrumbs from "assets/theme/components/breadcrumbs";
import slider from "assets/theme/components/slider";
import avatar from "assets/theme/components/avatar";
import tooltip from "assets/theme/components/tooltip";
import appBar from "assets/theme/components/appBar";
import tabs from "assets/theme/components/tabs";
import tab from "assets/theme/components/tabs/tab";
import stepper from "assets/theme/components/stepper";
import step from "assets/theme/components/stepper/step";
import stepConnector from "assets/theme/components/stepper/stepConnector";
import stepLabel from "assets/theme/components/stepper/stepLabel";
import stepIcon from "assets/theme/components/stepper/stepIcon";
import select from "assets/theme/components/form/select";
import formControlLabel from "assets/theme/components/form/formControlLabel";
import formLabel from "assets/theme/components/form/formLabel";
import checkbox from "assets/theme/components/form/checkbox";
import radio from "assets/theme/components/form/radio";
import autocomplete from "assets/theme/components/form/autocomplete";
import flatpickr from "assets/theme/components/flatpickr";
import container from "assets/theme/components/container";
import popover from "assets/theme/components/popover";
import buttonBase from "assets/theme/components/buttonBase";
import icon from "assets/theme/components/icon";
import svgIcon from "assets/theme/components/svgIcon";
import link from "assets/theme/components/link";
import dialog from "assets/theme/components/dialog";
import dialogTitle from "assets/theme/components/dialog/dialogTitle";
import dialogContent from "assets/theme/components/dialog/dialogContent";
import dialogContentText from "assets/theme/components/dialog/dialogContentText";
import dialogActions from "assets/theme/components/dialog/dialogActions";
export default createTheme({
direction: "rtl",
breakpoints: { ...breakpoints },
palette: { ...colors },
typography: { ...typography },
boxShadows: { ...boxShadows },
borders: { ...borders },
functions: {
boxShadow,
hexToRgb,
linearGradient,
pxToRem,
rgba,
},
components: {
MuiCssBaseline: {
styleOverrides: {
...globals,
...flatpickr,
...container,
},
},
MuiDrawer: { ...sidenav },
MuiList: { ...list },
MuiListItem: { ...listItem },
MuiListItemText: { ...listItemText },
MuiCard: { ...card },
MuiCardMedia: { ...cardMedia },
MuiCardContent: { ...cardContent },
MuiButton: { ...button },
MuiIconButton: { ...iconButton },
MuiInput: { ...input },
MuiInputLabel: { ...inputLabel },
MuiOutlinedInput: { ...inputOutlined },
MuiTextField: { ...textField },
MuiMenu: { ...menu },
MuiMenuItem: { ...menuItem },
MuiSwitch: { ...switchButton },
MuiDivider: { ...divider },
MuiTableContainer: { ...tableContainer },
MuiTableHead: { ...tableHead },
MuiTableCell: { ...tableCell },
MuiLinearProgress: { ...linearProgress },
MuiBreadcrumbs: { ...breadcrumbs },
MuiSlider: { ...slider },
MuiAvatar: { ...avatar },
MuiTooltip: { ...tooltip },
MuiAppBar: { ...appBar },
MuiTabs: { ...tabs },
MuiTab: { ...tab },
MuiStepper: { ...stepper },
MuiStep: { ...step },
MuiStepConnector: { ...stepConnector },
MuiStepLabel: { ...stepLabel },
MuiStepIcon: { ...stepIcon },
MuiSelect: { ...select },
MuiFormControlLabel: { ...formControlLabel },
MuiFormLabel: { ...formLabel },
MuiCheckbox: { ...checkbox },
MuiRadio: { ...radio },
MuiAutocomplete: { ...autocomplete },
MuiPopover: { ...popover },
MuiButtonBase: { ...buttonBase },
MuiIcon: { ...icon },
MuiSvgIcon: { ...svgIcon },
MuiLink: { ...link },
MuiDialog: { ...dialog },
MuiDialogTitle: { ...dialogTitle },
MuiDialogContent: { ...dialogContent },
MuiDialogContentText: { ...dialogContentText },
MuiDialogActions: { ...dialogActions },
},
});

0
src/qqq/components/Buttons/AuthenticationButton/index.tsx → src/qqq/components/buttons/AuthenticationButton.tsx
View File

33
src/qqq/components/QButtons/index.tsx → src/qqq/components/buttons/DefaultButtons.tsx
View File

@ -19,11 +19,12 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import Box from "@mui/material/Box";
import Icon from "@mui/material/Icon";
import React from "react";
import {Link} from "react-router-dom";
import MDBox from "qqq/components/Temporary/MDBox";
import MDButton from "qqq/components/Temporary/MDButton";
import MDButton from "qqq/components/legacy/MDButton";
// eslint-disable import/prefer-default-export
@ -32,13 +33,13 @@ const standardWidth = "150px";
export function QCreateNewButton(): JSX.Element
{
return (
<MDBox ml={3} mr={2} width={standardWidth}>
<Box ml={3} mr={2} width={standardWidth}>
<Link to="create">
<MDButton variant="gradient" color="info" fullWidth startIcon={<Icon>add</Icon>}>
Create New
</MDButton>
</Link>
</MDBox>
</Box>
);
}
@ -55,11 +56,11 @@ QSaveButton.defaultProps = {
export function QSaveButton({label, onClickHandler, disabled}: QSaveButtonProps): JSX.Element
{
return (
<MDBox ml={3} width={standardWidth}>
<Box ml={3} width={standardWidth}>
<MDButton type="submit" variant="gradient" color="info" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>save</Icon>} disabled={disabled}>
{label}
</MDButton>
</MDBox>
</Box>
);
}
@ -71,24 +72,24 @@ interface QDeleteButtonProps
export function QDeleteButton({onClickHandler}: QDeleteButtonProps): JSX.Element
{
return (
<MDBox ml={3} width={standardWidth}>
<Box ml={3} width={standardWidth}>
<MDButton variant="gradient" color="primary" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>delete</Icon>}>
Delete
</MDButton>
</MDBox>
</Box>
);
}
export function QEditButton(): JSX.Element
{
return (
<MDBox ml={3} width={standardWidth}>
<Box ml={3} width={standardWidth}>
<Link to="edit">
<MDButton variant="gradient" color="dark" size="small" fullWidth startIcon={<Icon>edit</Icon>}>
Edit
</MDButton>
</Link>
</MDBox>
</Box>
);
}
@ -101,7 +102,7 @@ interface QActionsMenuButtonProps
export function QActionsMenuButton({isOpen, onClickHandler}: QActionsMenuButtonProps): JSX.Element
{
return (
<MDBox width={standardWidth} ml={1}>
<Box width={standardWidth} ml={1}>
<MDButton
variant={isOpen ? "contained" : "outlined"}
color="dark"
@ -111,7 +112,7 @@ export function QActionsMenuButton({isOpen, onClickHandler}: QActionsMenuButtonP
actions&nbsp;
<Icon>keyboard_arrow_down</Icon>
</MDButton>
</MDBox>
</Box>
);
}
@ -128,11 +129,11 @@ export function QCancelButton({
}: QCancelButtonProps): JSX.Element
{
return (
<MDBox ml="auto" width={standardWidth}>
<Box ml="auto" width={standardWidth}>
<MDButton type="button" variant="outlined" color="dark" size="small" fullWidth startIcon={<Icon>{iconName}</Icon>} onClick={onClickHandler} disabled={disabled}>
{label}
</MDButton>
</MDBox>
</Box>
);
}
@ -151,11 +152,11 @@ interface QSubmitButtonProps
export function QSubmitButton({label, iconName, disabled}: QSubmitButtonProps): JSX.Element
{
return (
<MDBox ml={3} width={standardWidth}>
<Box ml={3} width={standardWidth}>
<MDButton type="submit" variant="gradient" color="dark" size="small" fullWidth startIcon={<Icon>{iconName}</Icon>} disabled={disabled}>
{label}
</MDButton>
</MDBox>
</Box>
);
}

15
src/qqq/components/QDynamicFormField/QBooleanFieldSwitch.tsx → src/qqq/components/forms/BooleanFieldSwitch.tsx
View File

@ -19,18 +19,13 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {InputAdornment, InputLabel} from "@mui/material";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import {InputLabel} from "@mui/material";
import Stack from "@mui/material/Stack";
import {styled} from "@mui/material/styles";
import Switch from "@mui/material/Switch";
import Typography from "@mui/material/Typography";
import {ErrorMessage, Field, useFormikContext} from "formik";
import React, {SyntheticEvent, useState} from "react";
import MDBox from "qqq/components/Temporary/MDBox";
import MDInput from "qqq/components/Temporary/MDInput";
import MDTypography from "qqq/components/Temporary/MDTypography";
import {useFormikContext} from "formik";
import React, {SyntheticEvent} from "react";
const AntSwitch = styled(Switch)(({theme}) => ({
width: 28,
@ -83,7 +78,7 @@ interface Props
}
function QBooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Element
function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Element
{
const {setFieldValue} = useFormikContext();
@ -125,4 +120,4 @@ function QBooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Elem
);
}
export default QBooleanFieldSwitch
export default BooleanFieldSwitch

169
src/qqq/components/forms/ChipTextField.tsx Normal file
View File

@ -0,0 +1,169 @@
/*
* 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 <https://www.gnu.org/licenses/>.
*/
import {Chip} from "@mui/material";
import TextField from "@mui/material/TextField";
import {makeStyles} from "@mui/styles";
import Downshift from "downshift";
import {arrayOf, func, string} from "prop-types";
import React, {useEffect, useState} from "react";
const useStyles = makeStyles((theme: any) => ({
chip: {
margin: theme.spacing(0.5, 0.25)
}
}));
function ChipTextField({...props})
{
const classes = useStyles();
const {handleChipChange, label, chipType, disabled, placeholder, chipData, multiline, rows, ...other} = props;
const [inputValue, setInputValue] = useState("");
const [chips, setChips] = useState([]);
useEffect(() =>
{
setChips(chipData);
}, [chipData]);
useEffect(() =>
{
handleChipChange(chips);
}, [chips, handleChipChange]);
function handleKeyDown(event: any)
{
if (event.key === "Enter")
{
const newChipList = [...chips];
const duplicatedValues = newChipList.indexOf(
event.target.value.trim()
);
if (duplicatedValues !== -1)
{
setInputValue("");
return;
}
if (!event.target.value.replace(/\s/g, "").length) return;
newChipList.push(event.target.value.trim());
setChips(newChipList);
setInputValue("");
}
else if (chips.length && !inputValue.length && event.key === "Backspace" )
{
setChips(chips.slice(0, chips.length - 1));
}
}
function handleChange(item: any)
{
let newChipList = [...chips];
if (newChipList.indexOf(item) === -1)
{
newChipList = [...newChipList, item];
}
setInputValue("");
setChips(newChipList);
}
const handleDelete = (item: any) => () =>
{
const newChipList = [...chips];
newChipList.splice(newChipList.indexOf(item), 1);
setChips(newChipList);
};
function handleInputChange(event: { target: { value: React.SetStateAction<string>; }; })
{
setInputValue(event.target.value);
}
return (
<React.Fragment>
<Downshift
id="downshift-multiple"
inputValue={inputValue}
onChange={handleChange}
selectedItem={chips}
>
{({getInputProps}) =>
{
const {onBlur, onChange, onFocus} = getInputProps({
onKeyDown: handleKeyDown,
placeholder
});
// @ts-ignore
return (
<div id="chip-text-field-container" style={{flexWrap: "wrap", display:"flex"}}>
<TextField
sx={{width: "100%"}}
disabled={disabled}
label={label}
InputProps={{
startAdornment:
<div>
{
chips.map((item, i) => (
<Chip
color={(chipType !== "number" || ! Number.isNaN(Number(item))) ? "info" : "error"}
key={`${item}-${i}`}
variant="outlined"
tabIndex={-1}
label={item}
className={classes.chip}
/>
))
}
</div>,
onBlur,
multiline,
rows,
onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
{
handleInputChange(event);
onChange(event);
},
onFocus,
placeholder,
onKeyDown: handleKeyDown
}}
/>
</div>
);
}}
</Downshift>
</React.Fragment>
);
}
ChipTextField.defaultProps = {
chipData: []
};
ChipTextField.propTypes = {
handleChipChange: func.isRequired,
chipData: arrayOf(string)
};
export default ChipTextField

31
src/qqq/components/QDynamicForm/index.tsx → src/qqq/components/forms/DynamicForm.tsx
View File

@ -19,16 +19,15 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {CircularProgress, colors} from "@mui/material";
import {colors} from "@mui/material";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";
import {useFormikContext} from "formik";
import React, {useState} from "react";
import QDynamicFormField from "qqq/components/QDynamicFormField";
import QDynamicSelect from "qqq/components/QDynamicSelect/QDynamicSelect";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import QDynamicFormField from "qqq/components/forms/DynamicFormField";
import DynamicSelect from "qqq/components/forms/DynamicSelect";
import MDTypography from "qqq/components/legacy/MDTypography";
interface Props
{
@ -67,16 +66,16 @@ function QDynamicForm(props: Props): JSX.Element
};
return (
<MDBox>
<MDBox lineHeight={0}>
<Box>
<Box lineHeight={0}>
<MDTypography variant="h5">{formLabel}</MDTypography>
{/* TODO - help text
<MDTypography variant="button" color="text">
Mandatory information
</MDTypography>
*/}
</MDBox>
<MDBox mt={1.625}>
</Box>
<Box mt={1.625}>
<Grid container spacing={3}>
{formFields
&& Object.keys(formFields).length > 0
@ -97,7 +96,7 @@ function QDynamicForm(props: Props): JSX.Element
{
return (
<Grid item xs={12} sm={6} key={fieldName}>
<MDBox mb={1.5}>
<Box mb={1.5}>
<Box display="flex" alignItems="center">
<Button variant="outlined" component="label">
@ -115,12 +114,12 @@ function QDynamicForm(props: Props): JSX.Element
</Box>
</Box>
<MDBox mt={0.75}>
<Box mt={0.75}>
<MDTypography component="div" variant="caption" color="error" fontWeight="regular">
{errors[fieldName] && <span>You must select a file to proceed</span>}
</MDTypography>
</MDBox>
</MDBox>
</Box>
</Box>
</Grid>
);
}
@ -130,7 +129,7 @@ function QDynamicForm(props: Props): JSX.Element
{
return (
<Grid item xs={12} sm={6} key={fieldName}>
<QDynamicSelect
<DynamicSelect
tableName={field.possibleValueProps.tableName}
fieldName={fieldName}
isEditable={field.isEditable}
@ -165,8 +164,8 @@ function QDynamicForm(props: Props): JSX.Element
);
})}
</Grid>
</MDBox>
</MDBox>
</Box>
</Box>
);
}

19
src/qqq/components/QDynamicFormField/index.tsx → src/qqq/components/forms/DynamicFormField.tsx
View File

@ -22,13 +22,12 @@
import {InputAdornment, InputLabel} from "@mui/material";
import Box from "@mui/material/Box";
import Switch from "@mui/material/Switch";
import {ErrorMessage, Field, FieldProps, useFormikContext} from "formik";
import {ErrorMessage, Field, useFormikContext} from "formik";
import React, {useState} from "react";
import AceEditor from "react-ace";
import QBooleanFieldSwitch from "qqq/components/QDynamicFormField/QBooleanFieldSwitch";
import MDBox from "qqq/components/Temporary/MDBox";
import MDInput from "qqq/components/Temporary/MDInput";
import MDTypography from "qqq/components/Temporary/MDTypography";
import BooleanFieldSwitch from "qqq/components/forms/BooleanFieldSwitch";
import MDInput from "qqq/components/legacy/MDInput";
import MDTypography from "qqq/components/legacy/MDTypography";
// Declaring props types for FormField
interface Props
@ -89,7 +88,7 @@ function QDynamicFormField({
if (type === "checkbox")
{
getsBulkEditHtmlLabel = false;
field = (<QBooleanFieldSwitch name={name} label={label} value={value} isDisabled={isDisabled} />);
field = (<BooleanFieldSwitch name={name} label={label} value={value} isDisabled={isDisabled} />);
}
else if (type === "ace")
{
@ -133,11 +132,11 @@ function QDynamicFormField({
}
}}
/>
<MDBox mt={0.75}>
<Box mt={0.75}>
<MDTypography component="div" variant="caption" color="error" fontWeight="regular">
{!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={name} /></div>}
</MDTypography>
</MDBox>
</Box>
</>
);
}
@ -181,9 +180,9 @@ function QDynamicFormField({
else
{
return (
<MDBox mb={1.5}>
<Box mb={1.5}>
{field}
</MDBox>
</Box>
);
}
}

0
src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts → src/qqq/components/forms/DynamicFormUtils.ts
View File

15
src/qqq/components/QDynamicSelect/QDynamicSelect.tsx → src/qqq/components/forms/DynamicSelect.tsx
View File

@ -29,8 +29,7 @@ import Switch from "@mui/material/Switch";
import TextField from "@mui/material/TextField";
import {useFormikContext} from "formik";
import React, {useEffect, useState} from "react";
import MDBox from "qqq/components/Temporary/MDBox";
import QClient from "qqq/utils/QClient";
import Client from "qqq/utils/qqq/Client";
interface Props
{
@ -46,7 +45,7 @@ interface Props
bulkEditSwitchChangeHandler?: any;
}
QDynamicSelect.defaultProps = {
DynamicSelect.defaultProps = {
inForm: true,
initialValue: null,
initialDisplayValue: null,
@ -58,9 +57,9 @@ QDynamicSelect.defaultProps = {
},
};
const qController = QClient.getInstance();
const qController = Client.getInstance();
function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue, initialDisplayValue, onChange, isEditable, bulkEditMode, bulkEditSwitchChangeHandler}: Props)
function DynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue, initialDisplayValue, onChange, isEditable, bulkEditMode, bulkEditSwitchChangeHandler}: Props)
{
const [ open, setOpen ] = useState(false);
const [ options, setOptions ] = useState<readonly QPossibleValue[]>([]);
@ -286,13 +285,13 @@ function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue,
else
{
return (
<MDBox mb={1.5}>
<Box mb={1.5}>
{autocomplete}
</MDBox>
</Box>
);
}
}
export default QDynamicSelect;
export default DynamicSelect;

85
src/qqq/components/EntityForm/index.tsx → src/qqq/components/forms/EntityForm.tsx
View File

@ -34,19 +34,18 @@ import Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";
import {Form, Formik} from "formik";
import React, {useContext, useReducer, useState} from "react";
import {useLocation, useNavigate, useParams, useSearchParams} from "react-router-dom";
import {useLocation, useNavigate, useParams} from "react-router-dom";
import * as Yup from "yup";
import QContext from "QContext";
import {QCancelButton, QSaveButton} from "qqq/components/QButtons";
import QDynamicForm from "qqq/components/QDynamicForm";
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
import QRecordSidebar from "qqq/components/QRecordSidebar";
import colors from "qqq/components/Temporary/colors";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import QClient from "qqq/utils/QClient";
import QTableUtils from "qqq/utils/QTableUtils";
import QValueUtils from "qqq/utils/QValueUtils";
import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
import QDynamicForm from "qqq/components/forms/DynamicForm";
import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
import colors from "qqq/components/legacy/colors";
import MDTypography from "qqq/components/legacy/MDTypography";
import QRecordSidebar from "qqq/components/misc/RecordSidebar";
import Client from "qqq/utils/qqq/Client";
import TableUtils from "qqq/utils/qqq/TableUtils";
import ValueUtils from "qqq/utils/qqq/ValueUtils";
interface Props
{
@ -69,7 +68,7 @@ EntityForm.defaultProps = {
function EntityForm(props: Props): JSX.Element
{
const qController = QClient.getInstance();
const qController = Client.getInstance();
const tableNameParam = useParams().tableName;
const tableName = props.table === null ? tableNameParam : props.table.name;
@ -120,7 +119,7 @@ function EntityForm(props: Props): JSX.Element
disabledFields = JSON.parse(decodeURIComponent(parts[1])) as { [key: string]: any };
}
}
catch (e)
catch (e)
{}
}
@ -154,7 +153,7 @@ function EntityForm(props: Props): JSX.Element
/////////////////////////////////////////////////
// define the sections, e.g., for the left-bar //
/////////////////////////////////////////////////
const tableSections = QTableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()]);
const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()]);
setTableSections(tableSections);
const fieldArray = [] as QFieldMetaData[];
@ -248,7 +247,7 @@ function EntityForm(props: Props): JSX.Element
const fieldMetaData = fieldArray[i];
if (fieldMetaData.type == QFieldType.DATE_TIME && initialValues[fieldMetaData.name])
{
initialValues[fieldMetaData.name] = QValueUtils.formatDateTimeValueForForm(initialValues[fieldMetaData.name]);
initialValues[fieldMetaData.name] = ValueUtils.formatDateTimeValueForForm(initialValues[fieldMetaData.name]);
}
}
@ -424,28 +423,28 @@ function EntityForm(props: Props): JSX.Element
if (noCapabilityError)
{
body = (
<MDBox mb={3}>
<Box mb={3}>
<Grid container spacing={3}>
<Grid item xs={12}>
<MDBox mb={3}>
<Box mb={3}>
<Alert severity="error">{noCapabilityError}</Alert>
</MDBox>
</Box>
</Grid>
</Grid>
</MDBox>
</Box>
);
}
else
{
const cardElevation = props.isModal ? 3 : 1;
body = (
<MDBox mb={3}>
<Box mb={3}>
<Grid container spacing={3}>
<Grid item xs={12}>
{alertContent ? (
<MDBox mb={3}>
<Box mb={3}>
<Alert severity="error">{alertContent}</Alert>
</MDBox>
</Box>
) : ("")}
</Grid>
</Grid>
@ -471,52 +470,52 @@ function EntityForm(props: Props): JSX.Element
}) => (
<Form id={formId} autoComplete="off">
<MDBox pb={3} pt={0}>
<Box pb={3} pt={0}>
<Card id={`${t1sectionName}`} sx={{overflow: "visible", pb: 2, scrollMarginTop: "100px"}} elevation={cardElevation}>
<MDBox display="flex" p={3} pb={1}>
<MDBox mr={1.5}>
<Box display="flex" p={3} pb={1}>
<Box mr={1.5}>
<Avatar sx={{bgcolor: colors.info.main}}>
<Icon>
{tableMetaData?.iconName}
</Icon>
</Avatar>
</MDBox>
<MDBox display="flex" alignItems="center">
</Box>
<Box display="flex" alignItems="center">
<MDTypography variant="h5">{formTitle}</MDTypography>
</MDBox>
</MDBox>
</Box>
</Box>
{
t1sectionName && formFields ? (
<MDBox pb={1} px={3}>
<MDBox p={3} width="100%">
<Box pb={1} px={3}>
<Box p={3} width="100%">
{getFormSection(values, touched, formFields.get(t1sectionName), errors)}
</MDBox>
</MDBox>
</Box>
</Box>
) : null
}
</Card>
</MDBox>
</Box>
{formFields && nonT1Sections.length ? nonT1Sections.map((section: QTableSection) => (
<MDBox key={`edit-card-${section.name}`} pb={3}>
<Box key={`edit-card-${section.name}`} pb={3}>
<Card id={section.name} sx={{overflow: "visible", scrollMarginTop: "100px"}} elevation={cardElevation}>
<MDTypography variant="h5" p={3} pb={1}>
{section.label}
</MDTypography>
<MDBox pb={1} px={3}>
<MDBox p={3} width="100%">
<Box pb={1} px={3}>
<Box p={3} width="100%">
{getFormSection(values, touched, formFields.get(section.name), errors)}
</MDBox>
</MDBox>
</Box>
</Box>
</Card>
</MDBox>
</Box>
)) : null}
<MDBox component="div" p={3}>
<Box component="div" p={3}>
<Grid container justifyContent="flex-end" spacing={3}>
<QCancelButton onClickHandler={props.isModal ? props.closeModalHandler : handleCancelClicked} disabled={isSubmitting} />
<QSaveButton disabled={isSubmitting} />
</Grid>
</MDBox>
</Box>
</Form>
)}
@ -524,7 +523,7 @@ function EntityForm(props: Props): JSX.Element
</Grid>
</Grid>
</MDBox>
</Box>
);
}

8
src/qqq/components/QBreadcrumbs/index.tsx → src/qqq/components/horseshoe/Breadcrumbs.tsx
View File

@ -20,12 +20,12 @@
*/
import {Breadcrumbs as MuiBreadcrumbs} from "@mui/material";
import Box from "@mui/material/Box";
import Icon from "@mui/material/Icon";
import {ReactNode, useContext} from "react";
import {Link} from "react-router-dom";
import QContext from "QContext";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import MDTypography from "qqq/components/legacy/MDTypography";
interface Props
{
@ -75,7 +75,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
document.title = `${ucFirst(title)} | ${pageTitle}`;
return (
<MDBox mr={{xs: 0, xl: 8}}>
<Box mr={{xs: 0, xl: 8}}>
<MuiBreadcrumbs
sx={{
"& .MuiBreadcrumbs-separator": {
@ -120,7 +120,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
>
{pageHeader}
</MDTypography>
</MDBox>
</Box>
);
}

22
src/qqq/components/Footer/index.tsx → src/qqq/components/horseshoe/Footer.tsx
View File

@ -19,10 +19,10 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import Box from "@mui/material/Box";
import Link from "@mui/material/Link";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import typography from "qqq/components/Temporary/typography";
import MDTypography from "qqq/components/legacy/MDTypography";
import typography from "qqq/components/legacy/typography";
// Declaring props types for Footer
@ -46,17 +46,17 @@ function Footer({company, links}: Props): JSX.Element
const {size} = typography;
const renderLinks = () => links.map((link) => (
<MDBox key={link.name} component="li" px={2} lineHeight={1}>
<Box key={link.name} component="li" px={2} lineHeight={1}>
<Link href={link.href} target="_blank">
<MDTypography variant="button" fontWeight="regular" color="text">
{link.name}
</MDTypography>
</Link>
</MDBox>
</Box>
));
return (
<MDBox
<Box
width="100%"
display="flex"
flexDirection={{xs: "column", lg: "row"}}
@ -67,7 +67,7 @@ function Footer({company, links}: Props): JSX.Element
position: "fixed", bottom: "0px", zIndex: -1, marginBottom: "10px",
}}
>
<MDBox
<Box
display="flex"
justifyContent="center"
alignItems="center"
@ -87,8 +87,8 @@ function Footer({company, links}: Props): JSX.Element
&nbsp;
</MDTypography>
</Link>
</MDBox>
<MDBox
</Box>
<Box
component="ul"
sx={({breakpoints}) => ({
display: "flex",
@ -106,8 +106,8 @@ function Footer({company, links}: Props): JSX.Element
})}
>
{renderLinks()}
</MDBox>
</MDBox>
</Box>
</Box>
);
}

26
src/qqq/components/Navbar/index.tsx → src/qqq/components/horseshoe/NavBar.tsx
View File

@ -32,14 +32,12 @@ import TextField from "@mui/material/TextField";
import Toolbar from "@mui/material/Toolbar";
import React, {useEffect, useState} from "react";
import {useLocation, useNavigate} from "react-router-dom";
import {boolean} from "yup";
import {setTransparentNavbar, useMaterialUIController,} from "context";
import {navbar, navbarContainer, navbarIconButton, navbarRow,} from "qqq/components/Navbar/styles";
import QBreadcrumbs, {routeToLabel} from "qqq/components/QBreadcrumbs";
import NotificationItem from "qqq/components/Temporary/NotificationItem";
import QBreadcrumbs, {routeToLabel} from "qqq/components/horseshoe/Breadcrumbs";
import {navbar, navbarContainer, navbarIconButton, navbarRow,} from "qqq/components/horseshoe/Styles";
import {setTransparentNavbar, useMaterialUIController,} from "qqq/context";
import HistoryUtils from "qqq/utils/HistoryUtils";
// Declaring prop types for Navbar
// Declaring prop types for NavBar
interface Props
{
absolute?: boolean;
@ -54,7 +52,7 @@ interface HistoryEntry {
iconName?: string;
}
function Navbar({absolute, light, isMini}: Props): JSX.Element
function NavBar({absolute, light, isMini}: Props): JSX.Element
{
const [navbarType, setNavbarType] = useState<"fixed" | "absolute" | "relative" | "static" | "sticky">();
const [controller, dispatch] = useMaterialUIController();
@ -184,13 +182,7 @@ function Navbar({absolute, light, isMini}: Props): JSX.Element
open={Boolean(openMenu)}
onClose={handleCloseMenu}
sx={{mt: 2}}
>
<NotificationItem icon={<Icon>email</Icon>} title="0 messages available" />
{/*
<NotificationItem icon={<Icon>podcasts</Icon>} title="Manage Podcast sessions" />
<NotificationItem icon={<Icon>shopping_cart</Icon>} title="Payment successfully completed" />
*/}
</Menu>
/>
);
// Styles for the navbar icons
@ -253,11 +245,11 @@ function Navbar({absolute, light, isMini}: Props): JSX.Element
);
}
// Declaring default props for Navbar
Navbar.defaultProps = {
// Declaring default props for NavBar
NavBar.defaultProps = {
absolute: false,
light: false,
isMini: false,
};
export default Navbar;
export default NavBar;

0
src/qqq/components/Navbar/styles.ts → src/qqq/components/horseshoe/Styles.ts
View File

63
src/qqq/components/Sidenav/index.tsx → src/qqq/components/horseshoe/sidenav/SideNav.tsx
View File

@ -19,21 +19,22 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import Box from "@mui/material/Box";
import Divider from "@mui/material/Divider";
import Icon from "@mui/material/Icon";
import Link from "@mui/material/Link";
import List from "@mui/material/List";
import {ReactNode, useEffect, useReducer, useState} from "react";
import {NavLink, useLocation} from "react-router-dom";
import {setMiniSidenav, setTransparentSidenav, setWhiteSidenav, useMaterialUIController,} from "context";
import AuthenticationButton from "qqq/components/Buttons/AuthenticationButton";
import SidenavCollapse from "qqq/components/Sidenav/SidenavCollapse";
import SidenavItem from "qqq/components/Sidenav/SidenavItem";
import SidenavList from "qqq/components/Sidenav/SidenavList";
import SidenavRoot from "qqq/components/Sidenav/SidenavRoot";
import sidenavLogoLabel from "qqq/components/Sidenav/styles/sidenav";
import MDTypography from "qqq/components/Temporary/MDTypography";
import MDBox from "../Temporary/MDBox";
import {setMiniSidenav, setTransparentSidenav, setWhiteSidenav, useMaterialUIController,} from "qqq/context";
import AuthenticationButton from "qqq/components/buttons/AuthenticationButton";
import SideNavCollapse from "qqq/components/horseshoe/sidenav/SideNavCollapse";
import SideNavItem from "qqq/components/horseshoe/sidenav/SideNavItem";
import SideNavList from "qqq/components/horseshoe/sidenav/SideNavList";
import SidenavRoot from "qqq/components/horseshoe/sidenav/SideNavRoot";
import sidenavLogoLabel from "qqq/components/horseshoe/sidenav/styles/SideNav";
import MDTypography from "qqq/components/legacy/MDTypography";
interface Props
{
@ -145,11 +146,11 @@ function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.
rel="noreferrer"
sx={{textDecoration: "none"}}
>
<SidenavItem name={name} nested />
<SideNavItem name={name} nested />
</Link>
) : (
<NavLink to={route} key={key} style={{textDecoration: "none"}}>
<SidenavItem name={name} active={route === pathname} nested />
<SideNavItem name={name} active={route === pathname} nested />
</NavLink>
)
);
@ -165,7 +166,7 @@ function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.
if (collapse)
{
returnValue = (
<SidenavItem
<SideNavItem
key={key}
color={color}
name={name}
@ -178,7 +179,7 @@ function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.
}
>
{renderNestedCollapse(collapse)}
</SidenavItem>
</SideNavItem>
);
}
else
@ -191,15 +192,15 @@ function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.
rel="noreferrer"
sx={{textDecoration: "none"}}
>
<SidenavItem color={color} name={name} active={key === itemName} />
<SideNavItem color={color} name={name} active={key === itemName} />
</Link>
) : (
<NavLink to={route} key={key} style={{textDecoration: "none"}}>
<SidenavItem color={color} name={name} active={key === itemName} />
<SideNavItem color={color} name={name} active={key === itemName} />
</NavLink>
);
}
return <SidenavList key={key}>{returnValue}</SidenavList>;
return <SideNavList key={key}>{returnValue}</SideNavList>;
});
// Render all the routes from the routes.js (All the visible items on the Sidenav)
@ -220,7 +221,7 @@ function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.
rel="noreferrer"
sx={{textDecoration: "none"}}
>
<SidenavCollapse
<SideNavCollapse
name={name}
icon={icon}
active={key === collapseName}
@ -233,21 +234,21 @@ function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.
{
returnValue = (
<NavLink to={route} key={key}>
<SidenavCollapse
<SideNavCollapse
name={name}
icon={icon}
noCollapse={noCollapse}
active={key === collapseName}
>
{collapse ? renderCollapse(collapse) : null}
</SidenavCollapse>
</SideNavCollapse>
</NavLink>
);
}
else
{
returnValue = (
<SidenavCollapse
<SideNavCollapse
key={key}
name={name}
icon={icon}
@ -257,7 +258,7 @@ function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.
onClick={() => (! noCollapse ? (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key)) : null) }
>
{collapse ? renderCollapse(collapse) : null}
</SidenavCollapse>
</SideNavCollapse>
);
}
}
@ -303,8 +304,8 @@ function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.
variant="permanent"
ownerState={{transparentSidenav, whiteSidenav, miniSidenav, darkMode}}
>
<MDBox pt={3} mr={1} pb={0} px={4} textAlign="center">
<MDBox
<Box pt={3} mr={1} pb={0} px={4} textAlign="center">
<Box
display={{xs: "block", xl: "none"}}
position="absolute"
top={0}
@ -316,18 +317,18 @@ function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.
<MDTypography variant="h6" color="secondary">
<Icon sx={{fontWeight: "bold"}}>close</Icon>
</MDTypography>
</MDBox>
<MDBox component={NavLink} to="/" display="flex" alignItems="center">
{!miniSidenav && logo && <MDBox component="img" src={logo} alt="Logo" width="100%" />}
{miniSidenav && icon && <MDBox component="img" src={icon} alt="Icon" width="160%" />}
{!miniSidenav && companyName && <MDBox width={!companyName && "100%"} sx={(theme: any) => sidenavLogoLabel(theme, {miniSidenav})}>
</Box>
<Box component={NavLink} to="/" display="flex" alignItems="center">
{!miniSidenav && logo && <Box component="img" src={logo} alt="Logo" width="100%" />}
{miniSidenav && icon && <Box component="img" src={icon} alt="Icon" width="160%" />}
{!miniSidenav && companyName && <Box width={!companyName && "100%"} sx={(theme: any) => sidenavLogoLabel(theme, {miniSidenav})}>
<MDTypography component="h6" variant="button" fontWeight="medium" color={textColor}>
{companyName}
</MDTypography>
</MDBox>
</Box>
}
</MDBox>
</MDBox>
</Box>
</Box>
<Divider
light={
(!darkMode && !whiteSidenav && !transparentSidenav) ||

20
src/qqq/components/Sidenav/SidenavCollapse.tsx → src/qqq/components/horseshoe/sidenav/SideNavCollapse.tsx
View File

@ -19,17 +19,17 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import Box from "@mui/material/Box";
import Collapse from "@mui/material/Collapse";
import Icon from "@mui/material/Icon";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import {ReactNode} from "react";
import {useMaterialUIController} from "context";
import {collapseItem, collapseIconBox, collapseIcon, collapseText, collapseArrow,} from "qqq/components/Sidenav/styles/sidenavCollapse";
import MDBox from "qqq/components/Temporary/MDBox";
import {collapseArrow, collapseIcon, collapseIconBox, collapseItem, collapseText,} from "qqq/components/horseshoe/sidenav/styles/SideNavCollapse";
import {useMaterialUIController} from "qqq/context";
// Declaring props types for SidenavCollapse
// Declaring props types for SideNavCollapse
interface Props {
icon: ReactNode;
name: string;
@ -40,7 +40,7 @@ interface Props {
[key: string]: any;
}
function SidenavCollapse({
function SideNavCollapse({
icon,
name,
children,
@ -56,7 +56,7 @@ function SidenavCollapse({
return (
<>
<ListItem component="li">
<MDBox
<Box
{...rest}
sx={(theme: any) =>
collapseItem(theme, {active, transparentSidenav, whiteSidenav, darkMode})
@ -99,7 +99,7 @@ function SidenavCollapse({
>
expand_less
</Icon>
</MDBox>
</Box>
</ListItem>
{children && (
<Collapse in={Boolean(open)} unmountOnExit>
@ -110,12 +110,12 @@ function SidenavCollapse({
);
}
// Declaring default props for SidenavCollapse
SidenavCollapse.defaultProps = {
// Declaring default props for SideNavCollapse
SideNavCollapse.defaultProps = {
active: false,
noCollapse: false,
children: false,
open: false,
};
export default SidenavCollapse;
export default SideNavCollapse;

20
src/qqq/components/Sidenav/SidenavItem.tsx → src/qqq/components/horseshoe/sidenav/SideNavItem.tsx
View File

@ -19,17 +19,17 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import Box from "@mui/material/Box";
import Collapse from "@mui/material/Collapse";
import Icon from "@mui/material/Icon";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import {Theme} from "@mui/material/styles";
import {ReactNode} from "react";
import {useMaterialUIController} from "context";
import {item, itemContent, itemArrow} from "qqq/components/Sidenav/styles/sidenavItem"
import MDBox from "qqq/components/Temporary/MDBox";
import {useMaterialUIController} from "qqq/context";
import {item, itemArrow, itemContent} from "qqq/components/horseshoe/sidenav/styles/SideNavItem";
// Declaring props types for SidenavCollapse
// Declaring props types for SideNavCollapse
interface Props {
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
name: string;
@ -40,7 +40,7 @@ interface Props {
[key: string]: any;
}
function SidenavItem({color, name, active, nested, children, open, ...rest}: Props): JSX.Element
function SideNavItem({color, name, active, nested, children, open, ...rest}: Props): JSX.Element
{
const [controller] = useMaterialUIController();
const {miniSidenav, transparentSidenav, whiteSidenav, darkMode} = controller;
@ -52,7 +52,7 @@ function SidenavItem({color, name, active, nested, children, open, ...rest}: Pro
component="li"
sx={(theme) => item(theme, {active, color, transparentSidenav, whiteSidenav, darkMode})}
>
<MDBox
<Box
sx={(theme: Theme): any =>
itemContent(theme, {
active,
@ -77,7 +77,7 @@ function SidenavItem({color, name, active, nested, children, open, ...rest}: Pro
expand_less
</Icon>
)}
</MDBox>
</Box>
</ListItem>
{children && (
<Collapse in={open} timeout="auto" unmountOnExit {...rest}>
@ -88,8 +88,8 @@ function SidenavItem({color, name, active, nested, children, open, ...rest}: Pro
);
}
// Declaring default props for SidenavItem
SidenavItem.defaultProps = {
// Declaring default props for SideNavItem
SideNavItem.defaultProps = {
color: "info",
active: false,
nested: false,
@ -97,4 +97,4 @@ SidenavItem.defaultProps = {
open: false,
};
export default SidenavItem;
export default SideNavItem;

4
src/qqq/components/Sidenav/SidenavList.tsx → src/qqq/components/horseshoe/sidenav/SideNavList.tsx
View File

@ -22,7 +22,7 @@
import List from "@mui/material/List";
import {ReactNode} from "react";
function SidenavList({children}: { children: ReactNode }): JSX.Element
function SideNavList({children}: { children: ReactNode }): JSX.Element
{
return (
<List
@ -36,4 +36,4 @@ function SidenavList({children}: { children: ReactNode }): JSX.Element
);
}
export default SidenavList;
export default SideNavList;

0
src/qqq/components/Sidenav/SidenavRoot.tsx → src/qqq/components/horseshoe/sidenav/SideNavRoot.tsx
View File

0
src/qqq/components/Sidenav/styles/sidenav.ts → src/qqq/components/horseshoe/sidenav/styles/SideNav.ts
View File

0
src/qqq/components/Sidenav/styles/sidenavCollapse.ts → src/qqq/components/horseshoe/sidenav/styles/SideNavCollapse.ts
View File

0
src/qqq/components/Sidenav/styles/sidenavItem.ts → src/qqq/components/horseshoe/sidenav/styles/SideNavItem.ts
View File

13
src/qqq/components/Temporary/MDBadgeDot/index.tsx → src/qqq/components/legacy/MDBadgeDot/index.tsx
View File

@ -18,9 +18,9 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import Box from "@mui/material/Box";
import {FC, forwardRef} from "react";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import MDTypography from "qqq/components/legacy/MDTypography";
// declaring props types for MDBadgeDot
interface Props
@ -85,16 +85,15 @@ const MDBadgeDot: FC<Props> = forwardRef(
const validColorIndex = validColors.findIndex((el) => el === color);
return (
<MDBox ref={ref} display="flex" alignItems="center" p={padding} {...rest}>
<MDBox
<Box ref={ref} display="flex" alignItems="center" p={padding} {...rest}>
<Box
component="i"
display="inline-block"
width={finalSize}
height={finalSize}
borderRadius="50%"
bgColor={validColors[validColorIndex]}
variant={variant}
mr={1}
sx={{backgroundColor: validColors[validColorIndex]}}
/>
<MDTypography
variant={fontSize}
@ -104,7 +103,7 @@ const MDBadgeDot: FC<Props> = forwardRef(
>
{badgeContent}
</MDTypography>
</MDBox>
</Box>
);
}
);

0
src/qqq/components/Temporary/MDButton/MDButtonRoot.tsx → src/qqq/components/legacy/MDButton/MDButtonRoot.tsx
View File

6
src/qqq/components/Temporary/MDButton/index.tsx → src/qqq/components/legacy/MDButton/index.tsx
View File

@ -20,9 +20,9 @@
*/
import {ButtonProps} from "@mui/material";
import {FC, ReactNode, forwardRef} from "react";
import {useMaterialUIController} from "context";
import MDButtonRoot from "qqq/components/Temporary/MDButton/MDButtonRoot";
import {FC, forwardRef, ReactNode} from "react";
import MDButtonRoot from "qqq/components/legacy/MDButton/MDButtonRoot";
import {useMaterialUIController} from "qqq/context";
// Declaring props types for MDButton
export interface Props extends Omit<ButtonProps, "color" | "variant"> {

0
src/qqq/components/Temporary/MDInput/MDInputRoot.tsx → src/qqq/components/legacy/MDInput/MDInputRoot.tsx
View File

2
src/qqq/components/Temporary/MDInput/index.tsx → src/qqq/components/legacy/MDInput/index.tsx
View File

@ -21,7 +21,7 @@
import {OutlinedTextFieldProps, StandardTextFieldProps} from "@mui/material";
import {FC, forwardRef} from "react";
import MDInputRoot from "qqq/components/Temporary/MDInput/MDInputRoot";
import MDInputRoot from "qqq/components/legacy/MDInput/MDInputRoot";
interface Props extends Omit<OutlinedTextFieldProps | StandardTextFieldProps, "variant"> {
variant?: "standard" | "outlined";

2
src/qqq/components/Temporary/MDPagination/MDPaginationItemRoot.tsx → src/qqq/components/legacy/MDPagination/MDPaginationItemRoot.tsx
View File

@ -20,7 +20,7 @@
*/
import {styled, Theme} from "@mui/material/styles";
import MDButton from "qqq/components/Temporary/MDButton";
import MDButton from "qqq/components/legacy/MDButton";
// @ts-ignore

8
src/qqq/components/Temporary/MDPagination/index.tsx → src/qqq/components/legacy/MDPagination/index.tsx
View File

@ -19,9 +19,9 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import Box from "@mui/material/Box";
import {createContext, FC, forwardRef, ReactNode, useContext, useMemo} from "react";
import MDBox from "qqq/components/Temporary/MDBox";
import MDPaginationItemRoot from "qqq/components/Temporary/MDPagination/MDPaginationItemRoot";
import MDPaginationItemRoot from "qqq/components/legacy/MDPagination/MDPaginationItemRoot";
// The Pagination main context
const Context = createContext<any>(null);
@ -78,14 +78,14 @@ const MDPagination: FC<Props | any> = forwardRef(
{children}
</MDPaginationItemRoot>
) : (
<MDBox
<Box
display="flex"
justifyContent="flex-end"
alignItems="center"
sx={{listStyle: "none"}}
>
{children}
</MDBox>
</Box>
)}
</Context.Provider>
);

0
src/qqq/components/Temporary/MDProgress/MDProgressRoot.tsx → src/qqq/components/legacy/MDProgress/MDProgressRoot.tsx
View File

4
src/qqq/components/Temporary/MDProgress/index.tsx → src/qqq/components/legacy/MDProgress/index.tsx
View File

@ -20,8 +20,8 @@
*/
import {FC, forwardRef} from "react";
import MDProgressRoot from "qqq/components/Temporary/MDProgress/MDProgressRoot";
import MDTypography from "qqq/components/Temporary/MDTypography";
import MDProgressRoot from "qqq/components/legacy/MDProgress/MDProgressRoot";
import MDTypography from "qqq/components/legacy/MDTypography";
// Delcare props types for MDProgress
interface Props {

0
src/qqq/components/Temporary/MDTypography/MDTypographyRoot.tsx → src/qqq/components/legacy/MDTypography/MDTypographyRoot.tsx
View File

6
src/qqq/components/Temporary/MDTypography/index.tsx → src/qqq/components/legacy/MDTypography/index.tsx
View File

@ -20,9 +20,9 @@
*/
import {TypographyProps} from "@mui/material";
import {FC, ReactNode, forwardRef} from "react";
import {useMaterialUIController} from "context";
import MDTypographyRoot from "qqq/components/Temporary/MDTypography/MDTypographyRoot";
import {FC, forwardRef, ReactNode} from "react";
import {useMaterialUIController} from "qqq/context";
import MDTypographyRoot from "qqq/components/legacy/MDTypography/MDTypographyRoot";
// Declaring props types for MDTypography
interface Props extends TypographyProps

159
src/qqq/components/legacy/Theme.ts Normal file
View File

@ -0,0 +1,159 @@
/*
* 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 <https://www.gnu.org/licenses/>.
*/
import {createTheme} from "@mui/material";
import borders from "qqq/assets/theme/base/borders";
import boxShadows from "qqq/assets/theme/base/boxShadows";
import breakpoints from "qqq/assets/theme/base/breakpoints";
import colors from "qqq/assets/theme/base/colors";
import globals from "qqq/assets/theme/base/globals";
import typography from "qqq/assets/theme/base/typography";
import appBar from "qqq/assets/theme/components/appBar";
import avatar from "qqq/assets/theme/components/avatar";
import breadcrumbs from "qqq/assets/theme/components/breadcrumbs";
import button from "qqq/assets/theme/components/button";
import buttonBase from "qqq/assets/theme/components/buttonBase";
import card from "qqq/assets/theme/components/card";
import cardContent from "qqq/assets/theme/components/card/cardContent";
import cardMedia from "qqq/assets/theme/components/card/cardMedia";
import container from "qqq/assets/theme/components/container";
import dialog from "qqq/assets/theme/components/dialog";
import dialogActions from "qqq/assets/theme/components/dialog/dialogActions";
import dialogContent from "qqq/assets/theme/components/dialog/dialogContent";
import dialogContentText from "qqq/assets/theme/components/dialog/dialogContentText";
import dialogTitle from "qqq/assets/theme/components/dialog/dialogTitle";
import divider from "qqq/assets/theme/components/divider";
import flatpickr from "qqq/assets/theme/components/flatpickr";
import autocomplete from "qqq/assets/theme/components/form/autocomplete";
import checkbox from "qqq/assets/theme/components/form/checkbox";
import formControlLabel from "qqq/assets/theme/components/form/formControlLabel";
import formLabel from "qqq/assets/theme/components/form/formLabel";
import input from "qqq/assets/theme/components/form/input";
import inputLabel from "qqq/assets/theme/components/form/inputLabel";
import inputOutlined from "qqq/assets/theme/components/form/inputOutlined";
import radio from "qqq/assets/theme/components/form/radio";
import select from "qqq/assets/theme/components/form/select";
import switchButton from "qqq/assets/theme/components/form/switchButton";
import textField from "qqq/assets/theme/components/form/textField";
import icon from "qqq/assets/theme/components/icon";
import iconButton from "qqq/assets/theme/components/iconButton";
import linearProgress from "qqq/assets/theme/components/linearProgress";
import link from "qqq/assets/theme/components/link";
import list from "qqq/assets/theme/components/list";
import listItem from "qqq/assets/theme/components/list/listItem";
import listItemText from "qqq/assets/theme/components/list/listItemText";
import menu from "qqq/assets/theme/components/menu";
import menuItem from "qqq/assets/theme/components/menu/menuItem";
import popover from "qqq/assets/theme/components/popover";
import sidenav from "qqq/assets/theme/components/sidenav";
import slider from "qqq/assets/theme/components/slider";
import stepper from "qqq/assets/theme/components/stepper";
import step from "qqq/assets/theme/components/stepper/step";
import stepConnector from "qqq/assets/theme/components/stepper/stepConnector";
import stepIcon from "qqq/assets/theme/components/stepper/stepIcon";
import stepLabel from "qqq/assets/theme/components/stepper/stepLabel";
import svgIcon from "qqq/assets/theme/components/svgIcon";
import tableCell from "qqq/assets/theme/components/table/tableCell";
import tableContainer from "qqq/assets/theme/components/table/tableContainer";
import tableHead from "qqq/assets/theme/components/table/tableHead";
import tabs from "qqq/assets/theme/components/tabs";
import tab from "qqq/assets/theme/components/tabs/tab";
import tooltip from "qqq/assets/theme/components/tooltip";
import boxShadow from "qqq/assets/theme/functions/boxShadow";
import hexToRgb from "qqq/assets/theme/functions/hexToRgb";
import linearGradient from "qqq/assets/theme/functions/linearGradient";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
import rgba from "qqq/assets/theme/functions/rgba";
export default createTheme({
breakpoints: {...breakpoints},
palette: {...colors},
typography: {...typography},
boxShadows: {...boxShadows},
borders: {...borders},
functions: {
boxShadow,
hexToRgb,
linearGradient,
pxToRem,
rgba,
},
components: {
MuiCssBaseline: {
styleOverrides: {
...globals,
...flatpickr,
...container,
},
},
MuiDrawer: {...sidenav},
MuiList: {...list},
MuiListItem: {...listItem},
MuiListItemText: {...listItemText},
MuiCard: {...card},
MuiCardMedia: {...cardMedia},
MuiCardContent: {...cardContent},
MuiButton: {...button},
MuiIconButton: {...iconButton},
MuiInput: {...input},
MuiInputLabel: {...inputLabel},
MuiOutlinedInput: {...inputOutlined},
MuiTextField: {...textField},
MuiMenu: {...menu},
MuiMenuItem: {...menuItem},
MuiSwitch: {...switchButton},
MuiDivider: {...divider},
MuiTableContainer: {...tableContainer},
MuiTableHead: {...tableHead},
MuiTableCell: {...tableCell},
MuiLinearProgress: {...linearProgress},
MuiBreadcrumbs: {...breadcrumbs},
MuiSlider: {...slider},
MuiAvatar: {...avatar},
MuiTooltip: {...tooltip},
MuiAppBar: {...appBar},
MuiTabs: {...tabs},
MuiTab: {...tab},
MuiStepper: {...stepper},
MuiStep: {...step},
MuiStepConnector: {...stepConnector},
MuiStepLabel: {...stepLabel},
MuiStepIcon: {...stepIcon},
MuiSelect: {...select},
MuiFormControlLabel: {...formControlLabel},
MuiFormLabel: {...formLabel},
MuiCheckbox: {...checkbox},
MuiRadio: {...radio},
MuiAutocomplete: {...autocomplete},
MuiPopover: {...popover},
MuiButtonBase: {...buttonBase},
MuiIcon: {...icon},
MuiSvgIcon: {...svgIcon},
MuiLink: {...link},
MuiDialog: {...dialog},
MuiDialogTitle: {...dialogTitle},
MuiDialogContent: {...dialogContent},
MuiDialogContentText: {...dialogContentText},
MuiDialogActions: {...dialogActions},
},
});

4
src/qqq/components/Temporary/Theme/base/borders.ts → src/qqq/components/legacy/Theme/base/borders.ts
View File

@ -20,10 +20,10 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { grey } = colors;

4
src/qqq/components/Temporary/Theme/base/boxShadows.ts → src/qqq/components/legacy/Theme/base/boxShadows.ts
View File

@ -20,10 +20,10 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import boxShadow from "assets/theme/functions/boxShadow";
import boxShadow from "qqq/assets/theme/functions/boxShadow";
const { black, white, tabs, coloredShadows } = colors;

0
src/qqq/components/Temporary/Theme/base/breakpoints.ts → src/qqq/components/legacy/Theme/base/breakpoints.ts
View File

0
src/qqq/components/Temporary/Theme/base/colors.ts → src/qqq/components/legacy/Theme/base/colors.ts
View File

2
src/qqq/components/Temporary/Theme/base/globals.ts → src/qqq/components/legacy/Theme/base/globals.ts
View File

@ -14,7 +14,7 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import colors from "qqq/assets/theme/base/colors";
const { info, dark } = colors;

4
src/qqq/components/Temporary/Theme/base/typography.ts → src/qqq/components/legacy/Theme/base/typography.ts
View File

@ -20,10 +20,10 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { dark } = colors;

0
src/qqq/components/Temporary/Theme/components/appBar.ts → src/qqq/components/legacy/Theme/components/appBar.ts
View File

2
src/qqq/components/Temporary/Theme/components/avatar.ts → src/qqq/components/legacy/Theme/components/avatar.ts
View File

@ -14,7 +14,7 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "assets/theme/base/borders";
import borders from "qqq/assets/theme/base/borders";
const { borderRadius } = borders;

4
src/qqq/components/Temporary/Theme/components/breadcrumbs.ts → src/qqq/components/legacy/Theme/components/breadcrumbs.ts
View File

@ -14,8 +14,8 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import typography from "assets/theme/base/typography";
import colors from "qqq/assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
const { grey } = colors;
const { size } = typography;

6
src/qqq/components/Temporary/Theme/components/button/contained.ts → src/qqq/components/legacy/Theme/components/button/contained.ts
View File

@ -14,11 +14,11 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import typography from "assets/theme/base/typography";
import colors from "qqq/assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { white, text, info, secondary } = colors;
const { size } = typography;

8
src/qqq/components/Temporary/Theme/components/button/index.ts → src/qqq/components/legacy/Theme/components/button/index.ts
View File

@ -14,10 +14,10 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React Button Styles
import root from "assets/theme/components/button/root";
import contained from "assets/theme/components/button/contained";
import outlined from "assets/theme/components/button/outlined";
import text from "assets/theme/components/button/text";
import root from "qqq/assets/theme/components/button/root";
import contained from "qqq/assets/theme/components/button/contained";
import outlined from "qqq/assets/theme/components/button/outlined";
import text from "qqq/assets/theme/components/button/text";
// types
type Types = any;

6
src/qqq/components/Temporary/Theme/components/button/outlined.ts → src/qqq/components/legacy/Theme/components/button/outlined.ts
View File

@ -14,11 +14,11 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import typography from "assets/theme/base/typography";
import colors from "qqq/assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { transparent, light, info, secondary } = colors;
const { size } = typography;

6
src/qqq/components/Temporary/Theme/components/button/root.ts → src/qqq/components/legacy/Theme/components/button/root.ts
View File

@ -14,11 +14,11 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import typography from "assets/theme/base/typography";
import borders from "assets/theme/base/borders";
import typography from "qqq/assets/theme/base/typography";
import borders from "qqq/assets/theme/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { fontWeightBold, size } = typography;
const { borderRadius } = borders;

6
src/qqq/components/Temporary/Theme/components/button/text.ts → src/qqq/components/legacy/Theme/components/button/text.ts
View File

@ -14,11 +14,11 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import typography from "assets/theme/base/typography";
import colors from "qqq/assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { text, info, secondary, transparent } = colors;
const { size } = typography;

0
src/qqq/components/Temporary/Theme/components/buttonBase.ts → src/qqq/components/legacy/Theme/components/buttonBase.ts
View File

2
src/qqq/components/Temporary/Theme/components/card/cardContent.ts → src/qqq/components/legacy/Theme/components/card/cardContent.ts
View File

@ -14,7 +14,7 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
// types
type Types = any;

4
src/qqq/components/Temporary/Theme/components/card/cardMedia.ts → src/qqq/components/legacy/Theme/components/card/cardMedia.ts
View File

@ -14,10 +14,10 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "assets/theme/base/borders";
import borders from "qqq/assets/theme/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { borderRadius } = borders;

8
src/qqq/components/Temporary/Theme/components/card/index.ts → src/qqq/components/legacy/Theme/components/card/index.ts
View File

@ -14,12 +14,12 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import borders from "assets/theme/base/borders";
import boxShadows from "assets/theme/base/boxShadows";
import colors from "qqq/assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
import boxShadows from "qqq/assets/theme/base/boxShadows";
// Material Dashboard 2 PRO React Helper Function
import rgba from "assets/theme/functions/rgba";
import rgba from "qqq/assets/theme/functions/rgba";
const { black, white } = colors;
const { borderWidth, borderRadius } = borders;

4
src/qqq/components/Temporary/Theme/components/container.ts → src/qqq/components/legacy/Theme/components/container.ts
View File

@ -14,10 +14,10 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import breakpoints from "assets/theme/base/breakpoints";
import breakpoints from "qqq/assets/theme/base/breakpoints";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
// types
type Types = any;

2
src/qqq/components/Temporary/Theme/components/dialog/dialogActions.ts → src/qqq/components/legacy/Theme/components/dialog/dialogActions.ts
View File

@ -14,7 +14,7 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
// types
type Types = any;

8
src/qqq/components/Temporary/Theme/components/dialog/dialogContent.ts → src/qqq/components/legacy/Theme/components/dialog/dialogContent.ts
View File

@ -14,12 +14,12 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import typography from "assets/theme/base/typography";
import borders from "assets/theme/base/borders";
import colors from "assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
import borders from "qqq/assets/theme/base/borders";
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { size } = typography;
const { text } = colors;

4
src/qqq/components/Temporary/Theme/components/dialog/dialogContentText.ts → src/qqq/components/legacy/Theme/components/dialog/dialogContentText.ts
View File

@ -14,8 +14,8 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import typography from "assets/theme/base/typography";
import colors from "assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
import colors from "qqq/assets/theme/base/colors";
const { size } = typography;
const { text } = colors;

4
src/qqq/components/Temporary/Theme/components/dialog/dialogTitle.ts → src/qqq/components/legacy/Theme/components/dialog/dialogTitle.ts
View File

@ -14,10 +14,10 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import typography from "assets/theme/base/typography";
import typography from "qqq/assets/theme/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { size } = typography;

4
src/qqq/components/Temporary/Theme/components/dialog/index.ts → src/qqq/components/legacy/Theme/components/dialog/index.ts
View File

@ -14,8 +14,8 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "assets/theme/base/borders";
import boxShadows from "assets/theme/base/boxShadows";
import borders from "qqq/assets/theme/base/borders";
import boxShadows from "qqq/assets/theme/base/boxShadows";
const { borderRadius } = borders;
const { xxl } = boxShadows;

6
src/qqq/components/Temporary/Theme/components/divider.ts → src/qqq/components/legacy/Theme/components/divider.ts
View File

@ -14,11 +14,11 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import rgba from "assets/theme/functions/rgba";
import pxToRem from "assets/theme/functions/pxToRem";
import rgba from "qqq/assets/theme/functions/rgba";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { dark, transparent, white } = colors;

4
src/qqq/components/Temporary/Theme/components/flatpickr.ts → src/qqq/components/legacy/Theme/components/flatpickr.ts
View File

@ -14,10 +14,10 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import rgba from "assets/theme/functions/rgba";
import rgba from "qqq/assets/theme/functions/rgba";
const { info, white, gradients } = colors;

10
src/qqq/components/Temporary/Theme/components/form/autocomplete.ts → src/qqq/components/legacy/Theme/components/form/autocomplete.ts
View File

@ -14,13 +14,13 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import boxShadows from "assets/theme/base/boxShadows";
import typography from "assets/theme/base/typography";
import colors from "assets/theme/base/colors";
import borders from "assets/theme/base/borders";
import boxShadows from "qqq/assets/theme/base/boxShadows";
import typography from "qqq/assets/theme/base/typography";
import colors from "qqq/assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { lg } = boxShadows;
const { size } = typography;

8
src/qqq/components/Temporary/Theme/components/form/checkbox.ts → src/qqq/components/legacy/Theme/components/form/checkbox.ts
View File

@ -14,12 +14,12 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "assets/theme/base/borders";
import colors from "assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import linearGradient from "assets/theme/functions/linearGradient";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
import linearGradient from "qqq/assets/theme/functions/linearGradient";
const { borderWidth, borderColor } = borders;
const { transparent, info } = colors;

6
src/qqq/components/Temporary/Theme/components/form/formControlLabel.ts → src/qqq/components/legacy/Theme/components/form/formControlLabel.ts
View File

@ -14,11 +14,11 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import typography from "assets/theme/base/typography";
import colors from "qqq/assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { dark } = colors;
const { size, fontWeightBold } = typography;

2
src/qqq/components/Temporary/Theme/components/form/formLabel.ts → src/qqq/components/legacy/Theme/components/form/formLabel.ts
View File

@ -14,7 +14,7 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import colors from "qqq/assets/theme/base/colors";
const { text } = colors;

6
src/qqq/components/Temporary/Theme/components/form/input.ts → src/qqq/components/legacy/Theme/components/form/input.ts
View File

@ -14,9 +14,9 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import typography from "assets/theme/base/typography";
import borders from "assets/theme/base/borders";
import colors from "qqq/assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
import borders from "qqq/assets/theme/base/borders";
const { info, inputBorderColor, dark } = colors;
const { size } = typography;

4
src/qqq/components/Temporary/Theme/components/form/inputLabel.ts → src/qqq/components/legacy/Theme/components/form/inputLabel.ts
View File

@ -14,8 +14,8 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import typography from "assets/theme/base/typography";
import colors from "qqq/assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
const { text, info } = colors;
const { size } = typography;

8
src/qqq/components/Temporary/Theme/components/form/inputOutlined.ts → src/qqq/components/legacy/Theme/components/form/inputOutlined.ts
View File

@ -14,12 +14,12 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import borders from "assets/theme/base/borders";
import typography from "assets/theme/base/typography";
import colors from "qqq/assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
import typography from "qqq/assets/theme/base/typography";
// // Material Dashboard 2 PRO React TSUI Dashboard PRO helper functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { inputBorderColor, info, grey, transparent } = colors;
const { borderRadius } = borders;

8
src/qqq/components/Temporary/Theme/components/form/radio.ts → src/qqq/components/legacy/Theme/components/form/radio.ts
View File

@ -14,12 +14,12 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "assets/theme/base/borders";
import colors from "assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import linearGradient from "assets/theme/functions/linearGradient";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
import linearGradient from "qqq/assets/theme/functions/linearGradient";
const { borderWidth, borderColor } = borders;
const { transparent, info } = colors;

4
src/qqq/components/Temporary/Theme/components/form/select.ts → src/qqq/components/legacy/Theme/components/form/select.ts
View File

@ -14,10 +14,10 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { transparent } = colors;

10
src/qqq/components/Temporary/Theme/components/form/switchButton.ts → src/qqq/components/legacy/Theme/components/form/switchButton.ts
View File

@ -14,13 +14,13 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import borders from "assets/theme/base/borders";
import boxShadows from "assets/theme/base/boxShadows";
import colors from "qqq/assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
import boxShadows from "qqq/assets/theme/base/boxShadows";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import linearGradient from "assets/theme/functions/linearGradient";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
import linearGradient from "qqq/assets/theme/functions/linearGradient";
const { white, gradients, grey, transparent } = colors;
const { borderWidth } = borders;

2
src/qqq/components/Temporary/Theme/components/form/textField.ts → src/qqq/components/legacy/Theme/components/form/textField.ts
View File

@ -14,7 +14,7 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import colors from "qqq/assets/theme/base/colors";
const { transparent } = colors;

2
src/qqq/components/Temporary/Theme/components/icon.ts → src/qqq/components/legacy/Theme/components/icon.ts
View File

@ -14,7 +14,7 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
// types
type Types = any;

2
src/qqq/components/Temporary/Theme/components/iconButton.ts → src/qqq/components/legacy/Theme/components/iconButton.ts
View File

@ -14,7 +14,7 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import colors from "qqq/assets/theme/base/colors";
const { transparent } = colors;

6
src/qqq/components/Temporary/Theme/components/linearProgress.ts → src/qqq/components/legacy/Theme/components/linearProgress.ts
View File

@ -14,11 +14,11 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "assets/theme/base/borders";
import colors from "assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { borderRadius } = borders;
const { light } = colors;

0
src/qqq/components/Temporary/Theme/components/link.ts → src/qqq/components/legacy/Theme/components/link.ts
View File

0
src/qqq/components/Temporary/Theme/components/list/index.ts → src/qqq/components/legacy/Theme/components/list/index.ts
View File

0
src/qqq/components/Temporary/Theme/components/list/listItem.ts → src/qqq/components/legacy/Theme/components/list/listItem.ts
View File

0
src/qqq/components/Temporary/Theme/components/list/listItemText.ts → src/qqq/components/legacy/Theme/components/list/listItemText.ts
View File

10
src/qqq/components/Temporary/Theme/components/menu/index.ts → src/qqq/components/legacy/Theme/components/menu/index.ts
View File

@ -14,13 +14,13 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import boxShadows from "assets/theme/base/boxShadows";
import typography from "assets/theme/base/typography";
import colors from "assets/theme/base/colors";
import borders from "assets/theme/base/borders";
import boxShadows from "qqq/assets/theme/base/boxShadows";
import typography from "qqq/assets/theme/base/typography";
import colors from "qqq/assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { lg } = boxShadows;
const { size } = typography;

8
src/qqq/components/Temporary/Theme/components/menu/menuItem.ts → src/qqq/components/legacy/Theme/components/menu/menuItem.ts
View File

@ -14,12 +14,12 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import borders from "assets/theme/base/borders";
import typography from "assets/theme/base/typography";
import colors from "qqq/assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
import typography from "qqq/assets/theme/base/typography";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { light, text, dark } = colors;
const { borderRadius } = borders;

8
src/qqq/components/Temporary/Theme/components/popover.ts → src/qqq/components/legacy/Theme/components/popover.ts
View File

@ -14,12 +14,12 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import boxShadows from "assets/theme/base/boxShadows";
import borders from "assets/theme/base/borders";
import colors from "qqq/assets/theme/base/colors";
import boxShadows from "qqq/assets/theme/base/boxShadows";
import borders from "qqq/assets/theme/base/borders";
const { transparent } = colors;
const { lg } = boxShadows;

6
src/qqq/components/Temporary/Theme/components/sidenav.ts → src/qqq/components/legacy/Theme/components/sidenav.ts
View File

@ -14,11 +14,11 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import borders from "assets/theme/base/borders";
import colors from "qqq/assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { white } = colors;
const { borderRadius } = borders;

10
src/qqq/components/Temporary/Theme/components/slider.ts → src/qqq/components/legacy/Theme/components/slider.ts
View File

@ -14,13 +14,13 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import borders from "assets/theme/base/borders";
import boxShadows from "assets/theme/base/boxShadows";
import colors from "qqq/assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
import boxShadows from "qqq/assets/theme/base/boxShadows";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import boxShadow from "assets/theme/functions/boxShadow";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
import boxShadow from "qqq/assets/theme/functions/boxShadow";
const { grey, white, black, info } = colors;
const { borderRadius, borderWidth } = borders;

10
src/qqq/components/Temporary/Theme/components/stepper/index.ts → src/qqq/components/legacy/Theme/components/stepper/index.ts
View File

@ -14,13 +14,13 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import borders from "assets/theme/base/borders";
import boxShadows from "assets/theme/base/boxShadows";
import colors from "qqq/assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
import boxShadows from "qqq/assets/theme/base/boxShadows";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import linearGradient from "assets/theme/functions/linearGradient";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
import linearGradient from "qqq/assets/theme/functions/linearGradient";
const { transparent, gradients } = colors;
const { borderRadius } = borders;

2
src/qqq/components/Temporary/Theme/components/stepper/step.ts → src/qqq/components/legacy/Theme/components/stepper/step.ts
View File

@ -14,7 +14,7 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
// types
type Types = any;

4
src/qqq/components/Temporary/Theme/components/stepper/stepConnector.ts → src/qqq/components/legacy/Theme/components/stepper/stepConnector.ts
View File

@ -14,8 +14,8 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "assets/theme/base/borders";
import colors from "assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
import colors from "qqq/assets/theme/base/colors";
const { white } = colors;
const { borderWidth } = borders;

6
src/qqq/components/Temporary/Theme/components/stepper/stepIcon.ts → src/qqq/components/legacy/Theme/components/stepper/stepIcon.ts
View File

@ -14,11 +14,11 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import colors from "assets/theme/base/colors";
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import boxShadow from "assets/theme/functions/boxShadow";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
import boxShadow from "qqq/assets/theme/functions/boxShadow";
const { white } = colors;

8
src/qqq/components/Temporary/Theme/components/stepper/stepLabel.ts → src/qqq/components/legacy/Theme/components/stepper/stepLabel.ts
View File

@ -14,12 +14,12 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import typography from "assets/theme/base/typography";
import colors from "assets/theme/base/colors";
import typography from "qqq/assets/theme/base/typography";
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import rgba from "assets/theme/functions/rgba";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
import rgba from "qqq/assets/theme/functions/rgba";
const { size, fontWeightRegular } = typography;
const { white } = colors;

2
src/qqq/components/Temporary/Theme/components/svgIcon.ts → src/qqq/components/legacy/Theme/components/svgIcon.ts
View File

@ -14,7 +14,7 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
// types
type Types = any;

6
src/qqq/components/Temporary/Theme/components/table/tableCell.ts → src/qqq/components/legacy/Theme/components/table/tableCell.ts
View File

@ -14,11 +14,11 @@ Coded by www.creative-tim.com
*/
// Material Dashboard 2 PRO React TS Base Styles
import borders from "assets/theme/base/borders";
import colors from "assets/theme/base/colors";
import borders from "qqq/assets/theme/base/borders";
import colors from "qqq/assets/theme/base/colors";
// Material Dashboard 2 PRO React TS Helper Functions
import pxToRem from "assets/theme/functions/pxToRem";
import pxToRem from "qqq/assets/theme/functions/pxToRem";
const { borderWidth } = borders;
const { light } = colors;

Some files were not shown because too many files have changed in this diff Show More