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: checkpoint commit of deletion of lots of things, updated typescript version in package.json

Browse Source
This commit is contained in:
Tim Chamberlain
2022-12-21 15:02:22 -06:00
parent 0fb24afffd
commit e49f178738
64 changed files with 296 additions and 4795 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/qqq/components/BaseLayout/index.tsx
View File

@ -1,85 +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 {useState, ReactNode, useEffect} from "react";
import DashboardLayout from "qqq/components/DashboardLayout";
import Footer from "qqq/components/Footer";
import Navbar from "qqq/components/Navbar";
import MDBox from "qqq/components/Temporary/MDBox";
interface Props
{
stickyNavbar?: boolean;
children: ReactNode;
}
export const breakpoints = {
values: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1400,
}
};
function BaseLayout({stickyNavbar, children}: Props): JSX.Element
{
const [tabsOrientation, setTabsOrientation] = useState<"horizontal" | "vertical">("horizontal");
useEffect(() =>
{
// A function that sets the orientation state of the tabs.
function handleTabsOrientation()
{
return window.innerWidth < breakpoints.values.sm
? setTabsOrientation("vertical")
: setTabsOrientation("horizontal");
}
/**
The event listener that's calling the handleTabsOrientation function when resizing the window.
*/
window.addEventListener("resize", handleTabsOrientation);
// Call the handleTabsOrientation function to set the state with the initial value.
handleTabsOrientation();
// Remove event listener on cleanup
return () => window.removeEventListener("resize", handleTabsOrientation);
}, [tabsOrientation]);
return (
<DashboardLayout>
<Navbar />
<MDBox mt={stickyNavbar ? 3 : 6}>{children}</MDBox>
<Footer />
</DashboardLayout>
);
}
// Declaring default props for BaseLayout
BaseLayout.defaultProps = {
stickyNavbar: false,
};
export default BaseLayout;

6
src/qqq/components/ScriptComponents/ScriptTestForm.tsx
View File

@ -20,15 +20,16 @@
*/
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {Map} from "@mui/icons-material";
import {Typography} from "@mui/material";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";
import React, {useEffect, useState} from "react";
import MDTypography from "components/MDTypography";
import React, {useState} from "react";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
import QClient from "qqq/utils/QClient";
import QValueUtils from "qqq/utils/QValueUtils";
@ -75,6 +76,7 @@ function ScriptTestForm({scriptDefinition, tableName, fieldName, recordId, code}
const testScript = () =>
{
// @ts-ignore
const inputValues = new Map<string, any>();
if (scriptDefinition.testInputFields)
{

6
src/qqq/components/Sidenav/index.tsx
View File

@ -25,15 +25,15 @@ 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 MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import {setMiniSidenav, setTransparentSidenav, setWhiteSidenav, useMaterialUIController,} from "context";
import sidenavLogoLabel from "examples/Sidenav/styles/sidenav";
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";
interface Props
{

2
src/qqq/components/Temporary/DefaultCell/index.tsx
View File

@ -14,7 +14,7 @@ Coded by www.creative-tim.com
*/
import {ReactNode} from "react";
import MDTypography from "components/MDTypography";
import MDTypography from "qqq/components/Temporary/MDTypography";
function DefaultCell({children}: { children: ReactNode }): JSX.Element
{

84
src/qqq/components/Temporary/DefaultInfoCard/index.tsx
View File

@ -1,84 +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 Card from "@mui/material/Card";
import Divider from "@mui/material/Divider";
import Icon from "@mui/material/Icon";
import {ReactNode} from "react";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
interface Props {
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
icon: ReactNode;
title: string;
description?: string;
value?: string | number;
[key: string]: any;
}
function DefaultInfoCard({color, icon, title, description, value}: Props): JSX.Element
{
return (
<Card>
<MDBox p={2} mx={3} display="flex" justifyContent="center">
<MDBox
display="grid"
justifyContent="center"
alignItems="center"
bgColor={color}
color="white"
width="4rem"
height="4rem"
shadow="md"
borderRadius="lg"
variant="gradient"
>
<Icon>{icon}</Icon>
</MDBox>
</MDBox>
<MDBox pb={2} px={2} textAlign="center" lineHeight={1.25}>
<MDTypography variant="h6" fontWeight="medium" textTransform="capitalize">
{title}
</MDTypography>
{description && (
<MDTypography variant="caption" color="text" fontWeight="regular">
{description}
</MDTypography>
)}
{description && !value ? null : <Divider />}
{value && (
<MDTypography variant="h5" fontWeight="medium">
{value}
</MDTypography>
)}
</MDBox>
</Card>
);
}
// Declaring default props for DefaultInfoCard
DefaultInfoCard.defaultProps = {
color: "info",
value: "",
description: "",
};
export default DefaultInfoCard;

147
src/qqq/components/Temporary/MDBadge/MDBadgeRoot.tsx
View File

@ -1,147 +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 Badge from "@mui/material/Badge";
import {styled, Theme} from "@mui/material/styles";
export default styled(Badge)(({theme, ownerState}: { theme?: Theme; ownerState: any }) =>
{
const {palette, typography, borders, functions} = theme;
const {color, circular, border, size, indicator, variant, container, children} = ownerState;
const {white, dark, gradients, badgeColors} = palette;
const {size: fontSize, fontWeightBold} = typography;
const {borderRadius, borderWidth} = borders;
const {pxToRem, linearGradient} = functions;
// padding values
const paddings: { [key: string]: string } = {
xs: "0.45em 0.775em",
sm: "0.55em 0.9em",
md: "0.65em 1em",
lg: "0.85em 1.375em",
};
// fontSize value
const fontSizeValue = size === "xs" ? fontSize.xxs : fontSize.xs;
// border value
const borderValue = border ? `${borderWidth[3]} solid ${white.main}` : "none";
// borderRadius value
const borderRadiusValue = circular ? borderRadius.section : borderRadius.md;
// styles for the badge with indicator={true}
const indicatorStyles = (sizeProp: string) =>
{
let widthValue = pxToRem(20);
let heightValue = pxToRem(20);
if (sizeProp === "medium")
{
widthValue = pxToRem(24);
heightValue = pxToRem(24);
}
else if (sizeProp === "large")
{
widthValue = pxToRem(32);
heightValue = pxToRem(32);
}
return {
width: widthValue,
height: heightValue,
display: "grid",
placeItems: "center",
textAlign: "center",
borderRadius: "50%",
padding: 0,
border: borderValue,
};
};
// styles for the badge with variant="gradient"
const gradientStyles = (colorProp: string) =>
{
const backgroundValue = gradients[colorProp]
? linearGradient(gradients[colorProp].main, gradients[colorProp].state)
: linearGradient(gradients.info.main, gradients.info.state);
const colorValue = colorProp === "light" ? dark.main : white.main;
return {
background: backgroundValue,
color: colorValue,
};
};
// styles for the badge with variant="contained"
const containedStyles = (colorProp: string) =>
{
const backgroundValue = badgeColors[colorProp]
? badgeColors[colorProp].background
: badgeColors.info.background;
let colorValue = badgeColors[colorProp] ? badgeColors[colorProp].text : badgeColors.info.text;
if (colorProp === "light")
{
colorValue = dark.main;
}
return {
background: backgroundValue,
color: colorValue,
};
};
// styles for the badge with no children and container={false}
const standAloneStyles = () => ({
position: "static",
marginLeft: pxToRem(8),
transform: "none",
fontSize: pxToRem(9),
});
// styles for the badge with container={true}
const containerStyles = () => ({
position: "relative",
transform: "none",
});
return {
"& .MuiBadge-badge": {
height: "auto",
padding: paddings[size] || paddings.xs,
fontSize: fontSizeValue,
fontWeight: fontWeightBold,
textTransform: "uppercase",
lineHeight: 1,
textAlign: "center",
whiteSpace: "nowrap",
verticalAlign: "baseline",
border: borderValue,
borderRadius: borderRadiusValue,
...(indicator && indicatorStyles(size)),
...(variant === "gradient" && gradientStyles(color)),
...(variant === "contained" && containedStyles(color)),
...(!children && !container && standAloneStyles()),
...(container && containerStyles()),
},
};
});

63
src/qqq/components/Temporary/MDBadge/index.tsx
View File

@ -1,63 +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 {BadgeProps} from "@mui/material";
import {FC, ReactNode, forwardRef} from "react";
import MDBadgeRoot from "qqq/components/Temporary/MDBadge/MDBadgeRoot";
interface Props extends Omit<BadgeProps, "color" | "variant"> {
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
variant?: "gradient" | "contained";
size?: "xs" | "sm" | "md" | "lg";
circular?: boolean;
indicator?: boolean;
border?: boolean;
children?: ReactNode;
container?: boolean;
[key: string]: any;
}
const MDBadge: FC<Props | any> = forwardRef(
({color, variant, size, circular, indicator, border, container, children, ...rest}, ref) => (
<MDBadgeRoot
{...rest}
ownerState={{color, variant, size, circular, indicator, border, container, children}}
ref={ref}
color="default"
>
{children}
</MDBadgeRoot>
)
);
// declaring default props for MDBadge
MDBadge.defaultProps = {
color: "info",
variant: "gradient",
size: "sm",
circular: false,
indicator: false,
border: false,
container: false,
children: false,
};
export default MDBadge;

4
src/qqq/components/Temporary/MDBadgeDot/index.tsx
View File

@ -19,8 +19,8 @@
*/
import {FC, forwardRef} from "react";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
// declaring props types for MDBadgeDot
interface Props

7
src/qqq/components/Temporary/MDProgress/MDProgressRoot.tsx
View File

@ -22,8 +22,9 @@
import LinearProgress from "@mui/material/LinearProgress";
import {styled, Theme} from "@mui/material/styles";
// @ts-ignore
export default styled(LinearProgress)(
({theme, ownerState}: { theme?: Theme | any; ownerState: any }) =>
({theme, ownerState}: { theme?: Theme | any; ownerState: any }) =>
{
const {palette, functions} = theme;
const {color, value, variant} = ownerState;
@ -34,13 +35,13 @@ export default styled(LinearProgress)(
// background value
let backgroundValue;
if (variant === "gradient")
if (variant === "gradient")
{
backgroundValue = gradients[color]
? linearGradient(gradients[color].main, gradients[color].state)
: linearGradient(gradients.info.main, gradients.info.state);
}
else
else
{
backgroundValue = palette[color] ? palette[color].main : palette.info.main;
}

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

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