reformatted all relevant files to new style

src/qqq/components/BaseLayout/index.tsx

@@ -13,15 +13,16 @@
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  */
 
-import { useState, useEffect, ReactNode } from "react";
+import {useState, useEffect, ReactNode} from "react";
 
 // Material Dashboard 2 PRO React TS Base Styles
 import breakpoints from "assets/theme/base/breakpoints";
 
 // Material Dashboard 2 PRO React TS examples components
 import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
-import DashboardNavbar from "examples/Navbars/DashboardNavbar";
+import Navbar from "qqq/components/Navbar";
 import Footer from "qqq/components/Footer";
+import DashboardNavbar from "examples/Navbars/DashboardNavbar";
 import MDBox from "../../../components/MDBox";
 
 // Declaring props types for BaseLayout
@@ -30,7 +31,7 @@ interface Props {
   children: ReactNode;
 }
 
-function BaseLayout({ stickyNavbar, children }: Props): JSX.Element
+function BaseLayout({stickyNavbar, children}: Props): JSX.Element
 {
    const [tabsOrientation, setTabsOrientation] = useState<"horizontal" | "vertical">("horizontal");
 

src/qqq/components/EntityForm/components/CustomerCell/index.tsx

@@ -34,14 +34,14 @@ interface Props {
     | "dark";
 }
 
-function CustomerCell({ image, name, color }: Props): JSX.Element
+function CustomerCell({image, name, color}: Props): JSX.Element
 {
    return (
       <MDBox display="flex" alignItems="center">
          <MDBox mr={1}>
             <MDAvatar bgColor={color} src={image} alt={name} size="xs" />
          </MDBox>
-         <MDTypography variant="caption" fontWeight="medium" color="text" sx={{ lineHeight: 0 }}>
+         <MDTypography variant="caption" fontWeight="medium" color="text" sx={{lineHeight: 0}}>
             {name}
          </MDTypography>
       </MDBox>

src/qqq/components/EntityForm/components/DefaultCell/index.tsx

@@ -22,7 +22,7 @@ interface Props {
   suffix?: string | boolean;
 }
 
-function DefaultCell({ value, suffix }: Props): JSX.Element
+function DefaultCell({value, suffix}: Props): JSX.Element
 {
    return (
       <MDTypography variant="caption" fontWeight="medium" color="text">

src/qqq/components/EntityForm/components/IdCell/index.tsx

@@ -27,7 +27,7 @@ interface Props {
   checked?: boolean;
 }
 
-function IdCell({ id, checked }: Props): JSX.Element
+function IdCell({id, checked}: Props): JSX.Element
 {
    const pathParts = window.location.pathname.split("/");
    const tableName = pathParts[1];

src/qqq/components/EntityForm/components/StatusCell/index.tsx

@@ -38,16 +38,16 @@ interface Props {
   status: string;
 }
 
-function StatusCell({ icon, color, status }: Props): JSX.Element
+function StatusCell({icon, color, status}: Props): JSX.Element
 {
    return (
       <MDBox display="flex" alignItems="center">
          <MDBox mr={1}>
             <MDButton variant="outlined" color={color} size="small" iconOnly circular>
-               <Icon sx={{ fontWeight: "bold" }}>{icon}</Icon>
+               <Icon sx={{fontWeight: "bold"}}>{icon}</Icon>
             </MDButton>
          </MDBox>
-         <MDTypography variant="caption" fontWeight="medium" color="text" sx={{ lineHeight: 0 }}>
+         <MDTypography variant="caption" fontWeight="medium" color="text" sx={{lineHeight: 0}}>
             {status}
          </MDTypography>
       </MDBox>

src/qqq/components/EntityForm/index.tsx

@@ -1,21 +1,21 @@
 // react components
-import { useParams, useSearchParams } from "react-router-dom";
-import React, { useReducer, useState } from "react";
+import {useParams, useSearchParams} from "react-router-dom";
+import React, {useReducer, useState} from "react";
 
 // misc components
 import * as Yup from "yup";
-import { Form, Formik } from "formik";
+import {Form, Formik} from "formik";
 
 // qqq components
-import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
+import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
 import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
 import QDynamicForm from "qqq/components/QDynamicForm";
-import { QFieldMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
 
 // @material-ui core components
 import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
-import { Alert } from "@mui/material";
+import {Alert} from "@mui/material";
 
 // Material Dashboard 2 PRO React TS components
 import MDBox from "components/MDBox";
@@ -28,10 +28,10 @@ interface Props
   id?: string;
 }
 
-function EntityForm({ id }: Props): JSX.Element
+function EntityForm({id}: Props): JSX.Element
 {
    const qController = new QController("");
-   const { tableName } = useParams();
+   const {tableName} = useParams();
 
    const [validations, setValidations] = useState({});
    const [initialValues, setInitialValues] = useState({} as { [key: string]: string });
@@ -154,7 +154,7 @@ function EntityForm({ id }: Props): JSX.Element
                ) : (
                   ""
                )}
-               <Card id="edit-form-container" sx={{ overflow: "visible" }}>
+               <Card id="edit-form-container" sx={{overflow: "visible"}}>
                   <MDBox p={3}>
                      <MDTypography variant="h5">{formTitle}</MDTypography>
                   </MDBox>

src/qqq/components/Footer/index.tsx

@@ -37,10 +37,10 @@ interface Props {
   [key: string]: any;
 }
 
-function Footer({ company, links }: Props): JSX.Element
+function Footer({company, links}: Props): JSX.Element
 {
-   const { href, name } = company;
-   const { size } = typography;
+   const {href, name} = company;
+   const {size} = typography;
 
    const renderLinks = () => links.map((link) => (
       <MDBox key={link.name} component="li" px={2} lineHeight={1}>
@@ -56,7 +56,7 @@ function Footer({ company, links }: Props): JSX.Element
       <MDBox
          width="100%"
          display="flex"
-         flexDirection={{ xs: "column", lg: "row" }}
+         flexDirection={{xs: "column", lg: "row"}}
          justifyContent="space-between"
          alignItems="center"
          px={1.5}
@@ -84,7 +84,7 @@ function Footer({ company, links }: Props): JSX.Element
          </MDBox>
          <MDBox
             component="ul"
-            sx={({ breakpoints }) => ({
+            sx={({breakpoints}) => ({
                display: "flex",
                flexWrap: "wrap",
                alignItems: "center",
@@ -107,7 +107,7 @@ function Footer({ company, links }: Props): JSX.Element
 
 // Declaring default props for Footer
 Footer.defaultProps = {
-   company: { href: "https://www.nutrifreshservices.com/", name: "Nutrifresh Services" },
+   company: {href: "https://www.nutrifreshservices.com/", name: "Nutrifresh Services"},
    links: [],
 };
 

src/qqq/components/Navbar/index.tsx

@@ -0,0 +1,214 @@
+import {useState, useEffect} from "react";
+
+// react-router components
+import {useLocation, Link} from "react-router-dom";
+
+// @material-ui core components
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Menu from "@mui/material/Menu";
+import Icon from "@mui/material/Icon";
+
+// Material Dashboard 2 PRO React TS components
+import MDBox from "components/MDBox";
+import MDInput from "components/MDInput";
+import MDBadge from "components/MDBadge";
+
+// Material Dashboard 2 PRO React TS examples components
+import Breadcrumbs from "examples/Breadcrumbs";
+import NotificationItem from "examples/Items/NotificationItem";
+
+// Custom styles for Navbar
+import {
+   navbar,
+   navbarContainer,
+   navbarRow,
+   navbarIconButton,
+   navbarDesktopMenu,
+   navbarMobileMenu,
+} from "qqq/components/Navbar/styles";
+
+// Material Dashboard 2 PRO React context
+import {
+   useMaterialUIController,
+   setTransparentNavbar,
+   setMiniSidenav,
+   setOpenConfigurator,
+} from "context";
+
+// qqq
+import AuthenticationButton from "qqq/components/buttons/AuthenticationButton";
+
+// Declaring prop types for Navbar
+interface Props
+{
+   absolute?: boolean;
+   light?: boolean;
+   isMini?: boolean;
+}
+
+function Navbar({absolute, light, isMini}: Props): JSX.Element
+{
+   const [navbarType, setNavbarType] = useState<"fixed" | "absolute" | "relative" | "static" | "sticky">();
+   const [controller, dispatch] = useMaterialUIController();
+   const {
+      miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode,
+   } = controller;
+   const [openMenu, setOpenMenu] = useState<any>(false);
+   const route = useLocation().pathname.split("/").slice(1);
+
+   useEffect(() =>
+   {
+      // Setting the navbar type
+      if (fixedNavbar)
+      {
+         setNavbarType("sticky");
+      }
+      else
+      {
+         setNavbarType("static");
+      }
+
+      // A function that sets the transparent state of the navbar.
+      function handleTransparentNavbar()
+      {
+         setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar);
+      }
+
+      /**
+       The event listener that's calling the handleTransparentNavbar function when
+       scrolling the window.
+       */
+      window.addEventListener("scroll", handleTransparentNavbar);
+
+      // Call the handleTransparentNavbar function to set the state with the initial value.
+      handleTransparentNavbar();
+
+      // Remove event listener on cleanup
+      return () => window.removeEventListener("scroll", handleTransparentNavbar);
+   }, [dispatch, fixedNavbar]);
+
+   const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
+   const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
+   const handleOpenMenu = (event: any) => setOpenMenu(event.currentTarget);
+   const handleCloseMenu = () => setOpenMenu(false);
+
+   // Render the notifications menu
+   const renderMenu = () => (
+      <Menu
+         anchorEl={openMenu}
+         anchorReference={null}
+         anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "left",
+         }}
+         open={Boolean(openMenu)}
+         onClose={handleCloseMenu}
+         sx={{mt: 2}}
+      >
+         <NotificationItem icon={<Icon>email</Icon>} title="Check new messages" />
+         <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
+   const iconsStyle = ({
+      palette: {dark, white, text},
+      functions: {rgba},
+   }: {
+      palette: any;
+      functions: any;
+   }) => ({
+      color: () =>
+      {
+         let colorValue = light || darkMode ? white.main : dark.main;
+
+         if (transparentNavbar && !light)
+         {
+            colorValue = darkMode ? rgba(text.main, 0.6) : text.main;
+         }
+
+         return colorValue;
+      },
+   });
+
+   return (
+      <AppBar
+         position={absolute ? "absolute" : navbarType}
+         color="inherit"
+         sx={(theme) => navbar(theme, {
+            transparentNavbar, absolute, light, darkMode,
+         })}
+      >
+         <Toolbar sx={navbarContainer}>
+            <MDBox color="inherit" mb={{xs: 1, md: 0}} sx={(theme) => navbarRow(theme, {isMini})}>
+               <Breadcrumbs icon="home" title={route[route.length - 1]} route={route} light={light} />
+               <IconButton sx={navbarDesktopMenu} onClick={handleMiniSidenav} size="small" disableRipple>
+                  <Icon fontSize="medium" sx={iconsStyle}>
+                     {miniSidenav ? "menu_open" : "menu"}
+                  </Icon>
+               </IconButton>
+            </MDBox>
+            {isMini ? null : (
+               <MDBox sx={(theme) => navbarRow(theme, {isMini})}>
+                  <MDBox pr={1}>
+                     <MDInput label="Search here" />
+                  </MDBox>
+                  <MDBox color={light ? "white" : "inherit"}>
+                     <AuthenticationButton />
+                     { /*
+                     <Link to="/authentication/sign-in/basic">
+                        <IconButton sx={navbarIconButton} size="small" disableRipple>
+                           <Icon sx={iconsStyle}>account_circle</Icon>
+                        </IconButton>
+                     </Link>
+                     */ }
+                     <IconButton
+                        size="small"
+                        disableRipple
+                        color="inherit"
+                        sx={navbarMobileMenu}
+                        onClick={handleMiniSidenav}
+                     >
+                        <Icon sx={iconsStyle} fontSize="medium">
+                           {miniSidenav ? "menu_open" : "menu"}
+                        </Icon>
+                     </IconButton>
+                     <IconButton
+                        size="small"
+                        disableRipple
+                        color="inherit"
+                        sx={navbarIconButton}
+                        onClick={handleConfiguratorOpen}
+                     >
+                        <Icon sx={iconsStyle}>settings</Icon>
+                     </IconButton>
+                     <IconButton
+                        size="small"
+                        color="inherit"
+                        sx={navbarIconButton}
+                        onClick={handleOpenMenu}
+                     >
+                        <MDBadge badgeContent={9} color="error" size="xs" circular>
+                           <Icon sx={iconsStyle}>notifications</Icon>
+                        </MDBadge>
+                     </IconButton>
+                     {renderMenu()}
+                  </MDBox>
+               </MDBox>
+            )}
+         </Toolbar>
+      </AppBar>
+   );
+}
+
+// Declaring default props for Navbar
+Navbar.defaultProps = {
+   absolute: false,
+   light: false,
+   isMini: false,
+};
+
+export default Navbar;

src/qqq/components/Navbar/styles.ts

@@ -0,0 +1,167 @@
+/**
+ =========================================================
+ * Material Dashboard 2 PRO React TS - v1.0.0
+ =========================================================
+
+ * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+ * Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+ Coded by www.creative-tim.com
+
+ =========================================================
+
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ */
+
+// @mui material components
+import {Theme} from "@mui/material/styles";
+
+function navbar(theme: Theme | any, ownerState: any)
+{
+   const {
+      palette, boxShadows, functions, transitions, breakpoints, borders,
+   } = theme;
+   const {
+      transparentNavbar, absolute, light, darkMode,
+   } = ownerState;
+
+   const {
+      dark, white, text, transparent, background,
+   } = palette;
+   const {navbarBoxShadow} = boxShadows;
+   const {rgba, pxToRem} = functions;
+   const {borderRadius} = borders;
+
+   return {
+      boxShadow: transparentNavbar || absolute ? "none" : navbarBoxShadow,
+      backdropFilter: transparentNavbar || absolute ? "none" : `saturate(200%) blur(${pxToRem(30)})`,
+      backgroundColor:
+         transparentNavbar || absolute
+            ? `${transparent.main} !important`
+            : rgba(darkMode ? background.default : white.main, 0.8),
+
+      color: () =>
+      {
+         let color;
+
+         if (light)
+         {
+            color = white.main;
+         }
+         else if (transparentNavbar)
+         {
+            color = text.main;
+         }
+         else
+         {
+            color = dark.main;
+         }
+
+         return color;
+      },
+      top: absolute ? 0 : pxToRem(12),
+      minHeight: pxToRem(75),
+      display: "grid",
+      alignItems: "center",
+      borderRadius: borderRadius.xl,
+      paddingTop: pxToRem(8),
+      paddingBottom: pxToRem(8),
+      paddingRight: absolute ? pxToRem(8) : 0,
+      paddingLeft: absolute ? pxToRem(16) : 0,
+
+      "& > *": {
+         transition: transitions.create("all", {
+            easing: transitions.easing.easeInOut,
+            duration: transitions.duration.standard,
+         }),
+      },
+
+      "& .MuiToolbar-root": {
+         display: "flex",
+         justifyContent: "space-between",
+         alignItems: "center",
+
+         [breakpoints.up("sm")]: {
+            minHeight: "auto",
+            padding: `${pxToRem(4)} ${pxToRem(16)}`,
+         },
+      },
+   };
+}
+
+const navbarContainer = ({breakpoints}: Theme): any => ({
+   flexDirection: "column",
+   alignItems: "flex-start",
+   justifyContent: "space-between",
+   pt: 0.5,
+   pb: 0.5,
+
+   [breakpoints.up("md")]: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingTop: "0",
+      paddingBottom: "0",
+   },
+});
+
+const navbarRow = ({breakpoints}: Theme, {isMini}: any) => ({
+   display: "flex",
+   alignItems: "center",
+   justifyContent: "space-between",
+   width: "100%",
+
+   [breakpoints.up("md")]: {
+      justifyContent: isMini ? "space-between" : "stretch",
+      width: isMini ? "100%" : "max-content",
+   },
+
+   [breakpoints.up("xl")]: {
+      justifyContent: "stretch !important",
+      width: "max-content !important",
+   },
+});
+
+const navbarIconButton = ({typography: {size}, breakpoints}: Theme) => ({
+   px: 1,
+
+   "& .material-icons, .material-icons-round": {
+      fontSize: `${size.xl} !important`,
+   },
+
+   "& .MuiTypography-root": {
+      display: "none",
+
+      [breakpoints.up("sm")]: {
+         display: "inline-block",
+         lineHeight: 1.2,
+         ml: 0.5,
+      },
+   },
+});
+
+const navbarDesktopMenu = ({breakpoints}: Theme) => ({
+   display: "none !important",
+   cursor: "pointer",
+
+   [breakpoints.up("xl")]: {
+      display: "inline-block !important",
+   },
+});
+
+const navbarMobileMenu = ({breakpoints}: Theme) => ({
+   display: "inline-block",
+   lineHeight: 0,
+
+   [breakpoints.up("xl")]: {
+      display: "none",
+   },
+});
+
+export {
+   navbar,
+   navbarContainer,
+   navbarRow,
+   navbarIconButton,
+   navbarDesktopMenu,
+   navbarMobileMenu,
+};

src/qqq/components/QDynamicForm/index.tsx

@@ -22,7 +22,7 @@ import MDTypography from "components/MDTypography";
 
 // NewUser page components
 import FormField from "layouts/pages/users/new-user/components/FormField";
-import { QFrontendStepMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
+import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
 
 interface Props {
   formLabel?: string;
@@ -32,7 +32,7 @@ interface Props {
 
 function QDynamicForm(props: Props): JSX.Element
 {
-   const { formData, formLabel, primaryKeyId } = props;
+   const {formData, formLabel, primaryKeyId} = props;
    const {
       formFields, values, errors, touched,
    } = formData;

src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts

@@ -23,8 +23,8 @@
 import * as Yup from "yup";
 
 // qqq imports
-import { QFieldMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
-import { QFieldType } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 
 /*******************************************************************************
  ** Meta-data to represent a single field in a table.
@@ -42,23 +42,23 @@ class DynamicFormUtils
          let fieldType: string;
          switch (field.type.toString())
          {
-         case QFieldType.DECIMAL:
-         case QFieldType.INTEGER:
-            fieldType = "number";
-            break;
-         case QFieldType.DATE_TIME:
-            fieldType = "datetime-local";
-            break;
-         case QFieldType.PASSWORD:
-         case QFieldType.TIME:
-         case QFieldType.DATE:
-            fieldType = field.type.toString();
-            break;
-         case QFieldType.TEXT:
-         case QFieldType.HTML:
-         case QFieldType.STRING:
-         default:
-            fieldType = "text";
+            case QFieldType.DECIMAL:
+            case QFieldType.INTEGER:
+               fieldType = "number";
+               break;
+            case QFieldType.DATE_TIME:
+               fieldType = "datetime-local";
+               break;
+            case QFieldType.PASSWORD:
+            case QFieldType.TIME:
+            case QFieldType.DATE:
+               fieldType = field.type.toString();
+               break;
+            case QFieldType.TEXT:
+            case QFieldType.HTML:
+            case QFieldType.STRING:
+            default:
+               fieldType = "text";
          }
 
          let label = field.label ? field.label : field.name;
@@ -78,7 +78,7 @@ class DynamicFormUtils
          }
       });
 
-      return { dynamicFormFields, formValidations };
+      return {dynamicFormFields, formValidations};
    }
 }
 

src/qqq/components/buttons/AuthenticationButton/index.tsx

@@ -0,0 +1,17 @@
+import {useAuth0} from "@auth0/auth0-react";
+import React from "react";
+import {Button} from "@mui/material";
+
+function AuthenticationButton()
+{
+   const {loginWithRedirect, logout, isAuthenticated} = useAuth0();
+
+   if (isAuthenticated)
+   {
+      return <Button onClick={() => logout({returnTo: window.location.origin})}>Log Out</Button>;
+   }
+
+   return <Button onClick={() => loginWithRedirect()}>Log In</Button>;
+}
+
+export default AuthenticationButton;