diff --git a/.eslintrc.json b/.eslintrc.json index d9b248b..2379874 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -5,7 +5,8 @@ }, "extends": [ "plugin:react/recommended", - "airbnb" + "plugin:import/recommended", + "plugin:import/typescript" ], "globals": { "JSX": true @@ -27,7 +28,8 @@ }, "plugins": [ "react", - "@typescript-eslint" + "@typescript-eslint", + "import" ], "rules": { "brace-style": [ @@ -56,7 +58,27 @@ "devDependencies": true } ], - "import/order": "off", + "import/order": [ + "error", + { + "groups": [ + "builtin", // Built-in imports (come from NodeJS native) go first + "external", // <- External imports + "internal", // <- Absolute imports + ["sibling", "parent"], // <- Relative imports, the sibling and parent types they can be mingled together + "index", // <- index imports + "unknown" + ], + "newlines-between": "never", + "alphabetize": { + /* sort in ascending order. Options: ["ignore", "asc", "desc"] */ + "order": "asc", + /* ignore case. Options: [true, false] */ + "caseInsensitive": true + } + } + ], + "jsx-one-expression-per-line": "off", "max-len": "off", "no-console": "off", "no-constant-condition": "off", @@ -66,6 +88,7 @@ "no-plusplus": "off", "no-underscore-dangle": "off", "no-else-return": "off", + "react/display-name": "off", "spaced-comment": "off", "object-curly-spacing": [ "error", @@ -81,10 +104,7 @@ ] } ], - "react/jsx-indent": [ - "error", - 3 - ], + "react/jsx-indent": "off", "react/jsx-indent-props": [ "error", 3 @@ -94,6 +114,15 @@ "quotes": [ "error", "double" + ], + "sort-imports": [ + "error", + { + "ignoreCase": false, + "ignoreDeclarationSort": true, + "ignoreMemberSort": true, + "allowSeparatedGroups": false + } ] }, "settings": { diff --git a/package.json b/package.json index b332395..afe3d21 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "@fullcalendar/interaction": "5.10.0", "@fullcalendar/react": "5.10.0", "@fullcalendar/timegrid": "5.10.0", - "@kingsrook/qqq-frontend-core": "1.0.12", + "@kingsrook/qqq-frontend-core": "1.0.14", "@mui/icons-material": "5.4.1", "@mui/material": "5.4.1", "@mui/styled-engine": "5.4.1", @@ -21,6 +21,7 @@ "@mui/x-data-grid-pro": "5.13.0", "@mui/x-license-pro": "5.12.3", "@react-jvectormap/core": "1.0.1", + "@react-jvectormap/unitedstates": "1.0.1", "@react-jvectormap/world": "1.0.0", "@testing-library/jest-dom": "5.16.2", "@testing-library/react": "12.1.2", diff --git a/public/apple-icon.png b/public/apple-icon.png index 59c68b9..c0fd815 100644 Binary files a/public/apple-icon.png and b/public/apple-icon.png differ diff --git a/public/favicon.png b/public/favicon.png index 59c68b9..c0fd815 100644 Binary files a/public/favicon.png and b/public/favicon.png differ diff --git a/public/index.html b/public/index.html index c998e21..b353a6b 100644 --- a/public/index.html +++ b/public/index.html @@ -18,7 +18,7 @@ Coded by www.creative-tim.com - + Nutrifresh One diff --git a/public/manifest.json b/public/manifest.json index 9d6b42e..b73bd4e 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -10,6 +10,6 @@ ], "start_url": ".", "display": "standalone", - "theme_color": "#1A73E8", + "theme_color": "#04aaef", "background_color": "#ffffff" } diff --git a/src/App.tsx b/src/App.tsx index 9508ad8..19e625d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,56 +1,55 @@ -import React, { - JSXElementConstructor, Key, ReactElement, useEffect, useState, -} from "react"; - -// react-router components -import { - Navigate, Route, Routes, useLocation, -} from "react-router-dom"; +/* + * 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 . + */ import {useAuth0} from "@auth0/auth0-react"; - -// @mui material components -import {LicenseInfo} from "@mui/x-license-pro"; -import {ThemeProvider} from "@mui/material/styles"; +import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType"; +import {QAppTreeNode} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppTreeNode"; +import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance"; import CssBaseline from "@mui/material/CssBaseline"; import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; - -// Material Dashboard 2 PRO React TS exampless -import Sidenav from "examples/Sidenav"; -import Configurator from "examples/Configurator"; - -// Material Dashboard 2 PRO React TS themes -import theme from "assets/theme"; - -// Material Dashboard 2 PRO React TS Dark Mode themes -import themeDark from "assets/theme-dark"; - -// Material Dashboard 2 PRO React TS contexts -import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "context"; - -// Images -import nfLogo from "assets/images/nutrifresh_one_icon_white.png"; -import {Md5} from "ts-md5/dist/md5"; +import {ThemeProvider} from "@mui/material/styles"; +import {LicenseInfo} from "@mui/x-license-pro"; +import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react"; import {useCookies} from "react-cookie"; -import EntityCreate from "./qqq/pages/entity-create"; -import EntityList from "./qqq/pages/entity-list"; -import EntityView from "./qqq/pages/entity-view"; -import EntityEdit from "./qqq/pages/entity-edit"; -import ProcessRun from "./qqq/pages/process-run"; +import {Navigate, Route, Routes, useLocation,} from "react-router-dom"; +import {Md5} from "ts-md5/dist/md5"; +import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "context"; +import Settings from "layouts/pages/account/settings"; +import ProfileOverview from "layouts/pages/profile/profile-overview"; +import Sidenav from "qqq/components/Sidenav"; +import Configurator from "qqq/components/Temporary/Configurator"; +import MDAvatar from "qqq/components/Temporary/MDAvatar"; +import MDBox from "qqq/components/Temporary/MDBox"; +import theme from "qqq/components/Temporary/Theme" +import Logo from "qqq/images/logo-blue.png"; import AppHome from "qqq/pages/app-home"; -import MDAvatar from "./components/MDAvatar"; -import ProfileOverview from "./layouts/pages/profile/profile-overview"; -import Settings from "./layouts/pages/account/settings"; -import Analytics from "./layouts/dashboards/analytics"; -import Sales from "./layouts/dashboards/sales"; -import QClient from "./qqq/utils/QClient"; -import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType"; -import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance"; +import CarrierPerformance from "qqq/pages/dashboards/CarrierPerformance"; +import Overview from "qqq/pages/dashboards/Overview"; +import EntityCreate from "qqq/pages/entity-create"; +import EntityEdit from "qqq/pages/entity-edit"; +import EntityList from "qqq/pages/entity-list"; +import EntityView from "qqq/pages/entity-view"; +import ProcessRun from "qqq/pages/process-run"; +import QClient from "qqq/utils/QClient"; import QProcessUtils from "qqq/utils/QProcessUtils"; -import {QAppTreeNode} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppTreeNode"; /////////////////////////////////////////////////////////////////////////////////////////////// // define the parts of the nav that are static - before the qqq tables etc get dynamic added // @@ -66,16 +65,16 @@ function getStaticRoutes() icon: dashboard, collapse: [ { - name: "Analytics", - key: "analytics", - route: "/dashboards/analytics", - component: , + name: "Overview", + key: "overview", + route: "/dashboards/overview", + component: , }, { - name: "Sales", - key: "sales", - route: "/dashboards/sales", - component: , + name: "Carrier Performance", + key: "carrierPerformance", + route: "/dashboards/carrierPerformance", + component: , }, ], }, @@ -129,7 +128,6 @@ export default function App() layout, openConfigurator, sidenavColor, - darkMode, } = controller; const [onMouseEnter, setOnMouseEnter] = useState(false); const {pathname} = useLocation(); @@ -430,14 +428,13 @@ export default function App() return ( appRoutes && ( - + {layout === "dashboard" && ( <> )} - } /> + } /> {appRoutes && getRoutes(appRoutes)} {getRoutes(getStaticRoutes())} {profileRoutes && getRoutes([profileRoutes])} diff --git a/src/HandleAuthorizationError.tsx b/src/HandleAuthorizationError.tsx index ede41e3..6abbaf0 100644 --- a/src/HandleAuthorizationError.tsx +++ b/src/HandleAuthorizationError.tsx @@ -1,6 +1,27 @@ +/* + * 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 . + */ + import React, {useEffect} from "react"; -import {SESSION_ID_COOKIE_NAME} from "App"; import {useCookies} from "react-cookie"; +import {SESSION_ID_COOKIE_NAME} from "App"; interface Props { diff --git a/src/assets/images/favicon.png b/src/assets/images/favicon.png index 59c68b9..d594bc6 100644 Binary files a/src/assets/images/favicon.png and b/src/assets/images/favicon.png differ diff --git a/src/assets/theme-dark/base/colors.ts b/src/assets/theme-dark/base/colors.ts index 36105c2..09d8272 100644 --- a/src/assets/theme-dark/base/colors.ts +++ b/src/assets/theme-dark/base/colors.ts @@ -183,7 +183,7 @@ const colors: Types = { }, info: { - main: "#1A73E8", + main: "#04aaef", focus: "#1662C4", }, @@ -237,7 +237,7 @@ const colors: Types = { info: { main: "#49a3f1", - state: "#1A73E8", + state: "#04aaef", }, success: { diff --git a/src/assets/theme/base/colors.ts b/src/assets/theme/base/colors.ts index 5334376..ee6fae7 100644 --- a/src/assets/theme/base/colors.ts +++ b/src/assets/theme/base/colors.ts @@ -181,7 +181,7 @@ const colors: Types = { }, info: { - main: "#1A73E8", + main: "#04aaef", focus: "#1662C4", }, @@ -235,7 +235,7 @@ const colors: Types = { info: { main: "#49a3f1", - state: "#1A73E8", + state: "#04aaef", }, success: { diff --git a/src/index.tsx b/src/index.tsx index 4f978af..86cf484 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,16 +1,34 @@ -import ReactDOM from "react-dom"; -import {BrowserRouter, useNavigate, useSearchParams} from "react-router-dom"; +/* + * 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 . + */ + import {Auth0Provider} from "@auth0/auth0-react"; -import App from "App"; - -// Material Dashboard 2 PRO React TS Context Provider -import {MaterialUIControllerProvider} from "context"; -import "./qqq/styles/qqq-override-styles.css"; -import ProtectedRoute from "qqq/auth0/protected-route"; import React from "react"; +import {render} from "react-dom"; +import {BrowserRouter, useNavigate, useSearchParams} from "react-router-dom"; +import App from "App"; +import "qqq/styles/qqq-override-styles.css"; +import {MaterialUIControllerProvider} from "context"; import HandleAuthorizationError from "HandleAuthorizationError"; +import ProtectedRoute from "qqq/auth0/protected-route"; -// Auth0 params from env const domain = process.env.REACT_APP_AUTH0_DOMAIN; const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID; @@ -43,12 +61,12 @@ function Auth0ProviderWithRedirectCallback({children, ...props}) } } -ReactDOM.render( +render( diff --git a/src/page.routes.tsx b/src/page.routes.tsx index 01cefc6..f208cc9 100644 --- a/src/page.routes.tsx +++ b/src/page.routes.tsx @@ -49,8 +49,8 @@ const pageRoutes = [ icon: dashboard, collapse: [ { - name: "analytics", - route: "/dashboards/analytics", + name: "overview", + route: "/dashboards/overview", }, { name: "sales", diff --git a/src/qqq/components/BaseLayout/index.tsx b/src/qqq/components/BaseLayout/index.tsx index 8b450b3..25fdd81 100644 --- a/src/qqq/components/BaseLayout/index.tsx +++ b/src/qqq/components/BaseLayout/index.tsx @@ -19,23 +19,29 @@ * along with this program. If not, see . */ -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 Navbar from "qqq/components/Navbar"; +import {useState, ReactNode, useEffect} from "react"; +import DashboardLayout from "qqq/components/DashboardLayout"; import Footer from "qqq/components/Footer"; -import MDBox from "../../../components/MDBox"; +import Navbar from "qqq/components/Navbar"; +import MDBox from "qqq/components/Temporary/MDBox"; -// Declaring props types for BaseLayout -interface Props { - stickyNavbar?: boolean; - children: ReactNode; +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"); @@ -51,8 +57,8 @@ function BaseLayout({stickyNavbar, children}: Props): JSX.Element } /** - The event listener that's calling the handleTabsOrientation function when resizing the window. - */ + 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. diff --git a/src/qqq/components/Buttons/AuthenticationButton/index.tsx b/src/qqq/components/Buttons/AuthenticationButton/index.tsx index f8e89f0..d7b27c4 100644 --- a/src/qqq/components/Buttons/AuthenticationButton/index.tsx +++ b/src/qqq/components/Buttons/AuthenticationButton/index.tsx @@ -20,8 +20,8 @@ */ import {useAuth0} from "@auth0/auth0-react"; -import React from "react"; import {Button} from "@mui/material"; +import React from "react"; function AuthenticationButton() { diff --git a/src/qqq/components/DashboardLayout/index.tsx b/src/qqq/components/DashboardLayout/index.tsx new file mode 100644 index 0000000..210cd44 --- /dev/null +++ b/src/qqq/components/DashboardLayout/index.tsx @@ -0,0 +1,58 @@ +/* + * 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 . + */ + +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 ( + ({ + 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} + + ); +} + +export default DashboardLayout; diff --git a/src/qqq/components/EntityForm/index.tsx b/src/qqq/components/EntityForm/index.tsx index 2a2329a..cd6a0a2 100644 --- a/src/qqq/components/EntityForm/index.tsx +++ b/src/qqq/components/EntityForm/index.tsx @@ -1,36 +1,46 @@ -// react components -import {useParams, useNavigate, useLocation} from "react-router-dom"; -import React, {useReducer, useState} from "react"; +/* + * 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 . + */ -// misc components -import * as Yup from "yup"; -import { - Form, Formik, useFormik, useFormikContext, -} from "formik"; - -// qqq components -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"; - -// @material-ui core components +import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection"; +import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData"; +import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord"; +import {Alert} from "@mui/material"; +import Avatar from "@mui/material/Avatar"; import Card from "@mui/material/Card"; import Grid from "@mui/material/Grid"; -import {Alert} from "@mui/material"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; -import QClient from "qqq/utils/QClient"; -import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData"; -import {QCancelButton, QSaveButton} from "qqq/components/QButtons"; -import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord"; -import Avatar from "@mui/material/Avatar"; import Icon from "@mui/material/Icon"; +import {Form, Formik} from "formik"; +import React, {useReducer, useState} from "react"; +import {useParams, useNavigate, useLocation} from "react-router-dom"; +import * as Yup from "yup"; +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 colors from "assets/theme/base/colors"; -import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection"; interface Props { @@ -334,8 +344,8 @@ function EntityForm({table, id}: Props): JSX.Element - - + + diff --git a/src/qqq/components/Footer/index.tsx b/src/qqq/components/Footer/index.tsx index e976520..1a09955 100644 --- a/src/qqq/components/Footer/index.tsx +++ b/src/qqq/components/Footer/index.tsx @@ -19,28 +19,25 @@ * along with this program. If not, see . */ -// @mui material components import Link from "@mui/material/Link"; -import Icon from "@mui/material/Icon"; +import MDBox from "qqq/components/Temporary/MDBox"; +import MDTypography from "qqq/components/Temporary/MDTypography"; +import typography from "qqq/components/Temporary/typography"; -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Material Dashboard 2 PRO React TS Base Styles -import typography from "assets/theme/base/typography"; // Declaring props types for Footer -interface Props { - company?: { - href: string; - name: string; - }; - links?: { - href: string; - name: string; - }[]; - [key: string]: any; +interface Props +{ + company?: { + href: string; + name: string; + }; + links?: { + href: string; + name: string; + }[]; + + [key: string]: any; } function Footer({company, links}: Props): JSX.Element @@ -85,9 +82,9 @@ function Footer({company, links}: Props): JSX.Element , -   +   {name} -  +   diff --git a/src/qqq/components/Navbar/index.tsx b/src/qqq/components/Navbar/index.tsx index 3b4ac40..6142174 100644 --- a/src/qqq/components/Navbar/index.tsx +++ b/src/qqq/components/Navbar/index.tsx @@ -19,46 +19,20 @@ * along with this program. If not, see . */ -import {useState, useEffect} from "react"; - -// react-router components -import {useLocation} from "react-router-dom"; - -// @material-ui core components import AppBar from "@mui/material/AppBar"; -import Toolbar from "@mui/material/Toolbar"; +import Icon from "@mui/material/Icon"; 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 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 Toolbar from "@mui/material/Toolbar"; +import {useState, useEffect} from "react"; +import {useLocation} from "react-router-dom"; +import {useMaterialUIController, setTransparentNavbar, setMiniSidenav, setOpenConfigurator,} from "context"; +import {navbar, navbarContainer, navbarRow, navbarIconButton, navbarDesktopMenu, navbarMobileMenu,} from "qqq/components/Navbar/styles"; import QBreadcrumbs, {routeToLabel} from "qqq/components/QBreadcrumbs"; +import MDBadge from "qqq/components/Temporary/MDBadge"; +import MDBox from "qqq/components/Temporary/MDBox"; +import MDInput from "qqq/components/Temporary/MDInput"; +import NotificationItem from "qqq/components/Temporary/NotificationItem"; // Declaring prop types for Navbar interface Props diff --git a/src/qqq/components/Navbar/styles.ts b/src/qqq/components/Navbar/styles.ts index 7fa3afc..999c130 100644 --- a/src/qqq/components/Navbar/styles.ts +++ b/src/qqq/components/Navbar/styles.ts @@ -19,7 +19,6 @@ * along with this program. If not, see . */ -// @mui material components import {Theme} from "@mui/material/styles"; function navbar(theme: Theme | any, ownerState: any) diff --git a/src/qqq/components/ProcessLinkCard/index.tsx b/src/qqq/components/ProcessLinkCard/index.tsx index 0be3bd4..390269d 100644 --- a/src/qqq/components/ProcessLinkCard/index.tsx +++ b/src/qqq/components/ProcessLinkCard/index.tsx @@ -18,16 +18,13 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -import {ReactNode} from "react"; -// @mui material components import Card from "@mui/material/Card"; import Divider from "@mui/material/Divider"; import Icon from "@mui/material/Icon"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; +import {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" | "light" | "dark"; diff --git a/src/qqq/components/QBreadcrumbs/index.tsx b/src/qqq/components/QBreadcrumbs/index.tsx index 248cfa1..ad67706 100644 --- a/src/qqq/components/QBreadcrumbs/index.tsx +++ b/src/qqq/components/QBreadcrumbs/index.tsx @@ -19,13 +19,12 @@ * along with this program. If not, see . */ -import {ReactNode} from "react"; - -import {Link} from "react-router-dom"; import {Breadcrumbs as MuiBreadcrumbs} from "@mui/material"; import Icon from "@mui/material/Icon"; -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; +import {ReactNode} from "react"; +import {Link} from "react-router-dom"; +import MDBox from "qqq/components/Temporary/MDBox"; +import MDTypography from "qqq/components/Temporary/MDTypography"; interface Props { icon: ReactNode; @@ -125,7 +124,6 @@ function QBreadcrumbs({ color={light ? "white" : "dark"} noWrap > - {routeToLabel(title)} ); diff --git a/src/qqq/components/QButtons/index.tsx b/src/qqq/components/QButtons/index.tsx index 867ee66..2b9ce69 100644 --- a/src/qqq/components/QButtons/index.tsx +++ b/src/qqq/components/QButtons/index.tsx @@ -19,11 +19,11 @@ * along with this program. If not, see . */ -import MDBox from "components/MDBox"; -import {Link} from "react-router-dom"; -import MDButton from "components/MDButton"; 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"; // eslint-disable import/prefer-default-export @@ -42,11 +42,16 @@ export function QCreateNewButton(): JSX.Element ); } -export function QSaveButton(): JSX.Element +interface QSaveButtonProps +{ + disabled: boolean +} + +export function QSaveButton({disabled}: QSaveButtonProps): JSX.Element { return ( - save}> + save} disabled={disabled}> Save @@ -108,15 +113,48 @@ export function QActionsMenuButton({isOpen, onClickHandler}: QActionsMenuButtonP interface QCancelButtonProps { onClickHandler: any; + disabled: boolean; + label?: string; + iconName?: string } -export function QCancelButton({onClickHandler}: QCancelButtonProps): JSX.Element +export function QCancelButton({ + onClickHandler, disabled, label, iconName, +}: QCancelButtonProps): JSX.Element { return ( - cancel} onClick={onClickHandler}> - Cancel + {iconName}} onClick={onClickHandler} disabled={disabled}> + {label} ); } + +QCancelButton.defaultProps = { + label: "cancel", + iconName: "cancel", +}; + +interface QSubmitButtonProps +{ + label?: string + iconName?: string + disabled: boolean +} + +export function QSubmitButton({label, iconName, disabled}: QSubmitButtonProps): JSX.Element +{ + return ( + + {iconName}} disabled={disabled}> + {label} + + + ); +} + +QSubmitButton.defaultProps = { + label: "Submit", + iconName: "check", +}; diff --git a/src/qqq/components/QDynamicForm/index.tsx b/src/qqq/components/QDynamicForm/index.tsx index 71c5d17..34aa5d6 100644 --- a/src/qqq/components/QDynamicForm/index.tsx +++ b/src/qqq/components/QDynamicForm/index.tsx @@ -19,23 +19,19 @@ * along with this program. If not, see . */ -// @mui material components import Grid from "@mui/material/Grid"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// NewUser page components import {useFormikContext} from "formik"; import React from "react"; import QDynamicFormField from "qqq/components/QDynamicFormField"; +import MDBox from "qqq/components/Temporary/MDBox"; +import MDTypography from "qqq/components/Temporary/MDTypography"; -interface Props { - formLabel?: string; - formData: any; - bulkEditMode?: boolean; - bulkEditSwitchChangeHandler?: any +interface Props +{ + formLabel?: string; + formData: any; + bulkEditMode?: boolean; + bulkEditSwitchChangeHandler?: any; } function QDynamicForm(props: Props): JSX.Element @@ -72,55 +68,55 @@ function QDynamicForm(props: Props): JSX.Element {formFields - && Object.keys(formFields).length > 0 - && Object.keys(formFields).map((fieldName: any) => - { - const field = formFields[fieldName]; - if (values[fieldName] === undefined) - { - values[fieldName] = ""; - } + && Object.keys(formFields).length > 0 + && Object.keys(formFields).map((fieldName: any) => + { + const field = formFields[fieldName]; + if (values[fieldName] === undefined) + { + values[fieldName] = ""; + } - if (field.type === "file") - { - return ( - - - + + ) => fileChanged(event, field)} + /> + + + {errors[fieldName] && You must select a file to proceed} + + + + + ); + } + + // todo? inputProps={{ autoComplete: "" }} + // todo? placeholder={password.placeholder} + return ( + + ) => fileChanged(event, field)} + displayFormat={field.displayFormat} + value={values[fieldName]} + error={errors[fieldName] && touched[fieldName]} + bulkEditMode={bulkEditMode} + bulkEditSwitchChangeHandler={bulkEditSwitchChanged} + success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]} /> - - - {errors[fieldName] && You must select a file to proceed} - - - - - ); - } - - // todo? inputProps={{ autoComplete: "" }} - // todo? placeholder={password.placeholder} - return ( - - - - ); - })} + + ); + })} @@ -131,7 +127,8 @@ QDynamicForm.defaultProps = { formLabel: undefined, bulkEditMode: false, bulkEditSwitchChangeHandler: () => - {}, + { + }, }; export default QDynamicForm; diff --git a/src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts b/src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts index 812fd77..dbdead7 100644 --- a/src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts +++ b/src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts @@ -19,12 +19,9 @@ * along with this program. If not, see . */ -// misc imports -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 * as Yup from "yup"; /******************************************************************************* ** Meta-data to represent a single field in a table. diff --git a/src/qqq/components/QDynamicFormField/index.tsx b/src/qqq/components/QDynamicFormField/index.tsx index b521445..1240fc9 100644 --- a/src/qqq/components/QDynamicFormField/index.tsx +++ b/src/qqq/components/QDynamicFormField/index.tsx @@ -19,17 +19,14 @@ * along with this program. If not, see . */ -// formik components -import {ErrorMessage, Field} from "formik"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; -import MDInput from "components/MDInput"; -import React, {useState} from "react"; +import {InputAdornment} from "@mui/material"; import Grid from "@mui/material/Grid"; import Switch from "@mui/material/Switch"; -import {InputAdornment} from "@mui/material"; +import {ErrorMessage, Field} from "formik"; +import React, {useState} from "react"; +import MDBox from "qqq/components/Temporary/MDBox"; +import MDInput from "qqq/components/Temporary/MDInput"; +import MDTypography from "qqq/components/Temporary/MDTypography"; // Declaring props types for FormField interface Props diff --git a/src/qqq/components/QRecordSidebar/index.tsx b/src/qqq/components/QRecordSidebar/index.tsx index 85c5b04..e599d18 100644 --- a/src/qqq/components/QRecordSidebar/index.tsx +++ b/src/qqq/components/QRecordSidebar/index.tsx @@ -19,16 +19,13 @@ * along with this program. If not, see . */ -import React, {ReactNode} from "react"; - -import {Link} from "react-router-dom"; -import {Breadcrumbs as MuiBreadcrumbs} from "@mui/material"; -import Icon from "@mui/material/Icon"; -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; -import Card from "@mui/material/Card"; -import {Theme} from "@mui/material/styles"; import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection"; +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; +import {Theme} from "@mui/material/styles"; +import React from "react"; +import MDBox from "qqq/components/Temporary/MDBox"; +import MDTypography from "qqq/components/Temporary/MDTypography"; interface Props { tableSections: QSection[]; diff --git a/src/qqq/components/Sidenav/SidenavCollapse.tsx b/src/qqq/components/Sidenav/SidenavCollapse.tsx new file mode 100644 index 0000000..8cde802 --- /dev/null +++ b/src/qqq/components/Sidenav/SidenavCollapse.tsx @@ -0,0 +1,121 @@ +/* + * 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 . + */ + +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"; + +// Declaring props types for SidenavCollapse +interface Props { + icon: ReactNode; + name: string; + children?: ReactNode; + active?: Boolean; + noCollapse?: Boolean; + open?: Boolean; + [key: string]: any; +} + +function SidenavCollapse({ + icon, + name, + children, + active, + noCollapse, + open, + ...rest +}: Props): JSX.Element +{ + const [controller] = useMaterialUIController(); + const {miniSidenav, transparentSidenav, whiteSidenav, darkMode} = controller; + + return ( + <> + + + collapseItem(theme, {active, transparentSidenav, whiteSidenav, darkMode}) + } + > + collapseIconBox(theme, {transparentSidenav, whiteSidenav, darkMode})} + > + {typeof icon === "string" ? ( + collapseIcon(theme, {active})}>{icon} + ) : ( + icon + )} + + + + collapseText(theme, { + miniSidenav, + transparentSidenav, + whiteSidenav, + active, + }) + } + /> + + + collapseArrow(theme, { + noCollapse, + transparentSidenav, + whiteSidenav, + miniSidenav, + open, + active, + darkMode, + }) + } + > + expand_less + + + + {children && ( + + {children} + + )} + + ); +} + +// Declaring default props for SidenavCollapse +SidenavCollapse.defaultProps = { + active: false, + noCollapse: false, + children: false, + open: false, +}; + +export default SidenavCollapse; diff --git a/src/qqq/components/Sidenav/SidenavItem.tsx b/src/qqq/components/Sidenav/SidenavItem.tsx new file mode 100644 index 0000000..099cfe8 --- /dev/null +++ b/src/qqq/components/Sidenav/SidenavItem.tsx @@ -0,0 +1,100 @@ +/* + * 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 . + */ + +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"; + +// Declaring props types for SidenavCollapse +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + name: string; + active?: boolean | string; + nested?: boolean; + children?: ReactNode; + open?: boolean; + [key: string]: any; +} + +function SidenavItem({color, name, active, nested, children, open, ...rest}: Props): JSX.Element +{ + const [controller] = useMaterialUIController(); + const {miniSidenav, transparentSidenav, whiteSidenav, darkMode} = controller; + + return ( + <> + item(theme, {active, color, transparentSidenav, whiteSidenav, darkMode})} + > + + itemContent(theme, { + active, + miniSidenav, + name, + open, + nested, + transparentSidenav, + whiteSidenav, + darkMode, + }) + } + > + + {children && ( + + itemArrow(theme, {open, miniSidenav, transparentSidenav, whiteSidenav, darkMode}) + } + > + expand_less + + )} + + + {children && ( + + {children} + + )} + + ); +} + +// Declaring default props for SidenavItem +SidenavItem.defaultProps = { + color: "info", + active: false, + nested: false, + children: false, + open: false, +}; + +export default SidenavItem; diff --git a/src/qqq/components/Sidenav/SidenavList.tsx b/src/qqq/components/Sidenav/SidenavList.tsx new file mode 100644 index 0000000..3ab8e57 --- /dev/null +++ b/src/qqq/components/Sidenav/SidenavList.tsx @@ -0,0 +1,39 @@ +/* + * 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 . + */ + +import List from "@mui/material/List"; +import {ReactNode} from "react"; + +function SidenavList({children}: { children: ReactNode }): JSX.Element +{ + return ( + + {children} + + ); +} + +export default SidenavList; diff --git a/src/qqq/components/Sidenav/SidenavRoot.tsx b/src/qqq/components/Sidenav/SidenavRoot.tsx new file mode 100644 index 0000000..7f67dac --- /dev/null +++ b/src/qqq/components/Sidenav/SidenavRoot.tsx @@ -0,0 +1,101 @@ +/* + * 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 . + */ + +import Drawer from "@mui/material/Drawer"; +import {styled, Theme} from "@mui/material/styles"; + +export default styled(Drawer)(({theme, ownerState}: { theme?: Theme | any; ownerState: any }) => +{ + const {palette, boxShadows, transitions, breakpoints, functions} = theme; + const {transparentSidenav, whiteSidenav, miniSidenav, darkMode} = ownerState; + + const sidebarWidth = 250; + const {transparent, gradients, white, background} = palette; + const {xxl} = boxShadows; + const {pxToRem, linearGradient} = functions; + + let backgroundValue = darkMode + ? background.sidenav + : linearGradient(gradients.dark.main, gradients.dark.state); + + if (transparentSidenav) + { + backgroundValue = transparent.main; + } + else if (whiteSidenav) + { + backgroundValue = white.main; + } + + // styles for the sidenav when miniSidenav={false} + const drawerOpenStyles = () => ({ + background: backgroundValue, + transform: "translateX(0)", + transition: transitions.create("transform", { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + + [breakpoints.up("xl")]: { + boxShadow: transparentSidenav ? "none" : xxl, + marginBottom: transparentSidenav ? 0 : "inherit", + left: "0", + width: sidebarWidth, + transform: "translateX(0)", + transition: transitions.create(["width", "background-color"], { + easing: transitions.easing.sharp, + duration: transitions.duration.enteringScreen, + }), + }, + }); + + // styles for the sidenav when miniSidenav={true} + const drawerCloseStyles = () => ({ + background: backgroundValue, + transform: `translateX(${pxToRem(-320)})`, + transition: transitions.create("transform", { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + + [breakpoints.up("xl")]: { + boxShadow: transparentSidenav ? "none" : xxl, + marginBottom: transparentSidenav ? 0 : "inherit", + left: "0", + width: pxToRem(96), + overflowX: "hidden", + transform: "translateX(0)", + transition: transitions.create(["width", "background-color"], { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + }, + }); + + return { + "& .MuiDrawer-paper": { + boxShadow: xxl, + border: "none", + + ...(miniSidenav ? drawerCloseStyles() : drawerOpenStyles()), + }, + }; +}); diff --git a/src/qqq/components/Sidenav/index.tsx b/src/qqq/components/Sidenav/index.tsx new file mode 100644 index 0000000..b377897 --- /dev/null +++ b/src/qqq/components/Sidenav/index.tsx @@ -0,0 +1,345 @@ +/* + * 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 . + */ + +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 {useEffect, useState, ReactNode, useReducer} from "react"; +import {useLocation, NavLink} from "react-router-dom"; +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import {useMaterialUIController, setMiniSidenav, setTransparentSidenav, setWhiteSidenav,} 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"; + +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + brand?: string; + brandName?: string; + routes: { + [key: string]: + | ReactNode + | string + | { + [key: string]: + | ReactNode + | string + | { + [key: string]: + | ReactNode + | string + | { + [key: string]: ReactNode | string; + }[]; + }[]; + }[]; + }[]; + [key: string]: any; +} + +function Sidenav({color, brand, brandName, routes, ...rest}: Props): JSX.Element +{ + const [openCollapse, setOpenCollapse] = useState(false); + const [openNestedCollapse, setOpenNestedCollapse] = useState(false); + const [controller, dispatch] = useMaterialUIController(); + const {miniSidenav, transparentSidenav, whiteSidenav, darkMode} = controller; + const location = useLocation(); + const {pathname} = location; + const collapseName = pathname.split("/").slice(1)[0]; + const items = pathname.split("/").slice(1); + const itemParentName = items[1]; + const itemName = items[items.length - 1]; + const [, forceUpdate] = useReducer((x) => x + 1, 0); + + let textColor: + | "primary" + | "secondary" + | "info" + | "success" + | "warning" + | "error" + | "dark" + | "white" + | "inherit" + | "text" + | "light" = "white"; + + if (transparentSidenav || (whiteSidenav && !darkMode)) + { + textColor = "dark"; + } + else if (whiteSidenav && darkMode) + { + textColor = "inherit"; + } + + const closeSidenav = () => setMiniSidenav(dispatch, true); + + useEffect(() => + { + setOpenCollapse(collapseName); + setOpenNestedCollapse(itemParentName); + }, []); + + useEffect(() => + { + // A function that sets the mini state of the sidenav. + function handleMiniSidenav() + { + setMiniSidenav(dispatch, window.innerWidth < 1200); + setTransparentSidenav(dispatch, window.innerWidth < 1200 ? false : transparentSidenav); + setWhiteSidenav(dispatch, window.innerWidth < 1200 ? false : whiteSidenav); + } + + /** + The event listener that's calling the handleMiniSidenav function when resizing the window. + */ + window.addEventListener("resize", handleMiniSidenav); + window.onload = () => + { + forceUpdate(); + }; + + // Call the handleMiniSidenav function to set the state with the initial value. + handleMiniSidenav(); + + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleMiniSidenav); + }, [dispatch, location]); + + // Render all the nested collapse items from the routes.js + const renderNestedCollapse = (collapse: any) => + { + const template = collapse.map(({name, route, key, href}: any) => + href ? ( + + + + ) : ( + + + + ) + ); + + return template; + }; + // Render the all the collpases from the routes.js + const renderCollapse = (collapses: any) => + collapses.map(({name, collapse, route, href, key}: any) => + { + let returnValue; + + if (collapse) + { + returnValue = ( + + openNestedCollapse === key && currentTarget.classList.contains("MuiListItem-root") + ? setOpenNestedCollapse(false) + : setOpenNestedCollapse(key) + } + > + {renderNestedCollapse(collapse)} + + ); + } + else + { + returnValue = href ? ( + + + + ) : ( + + + + ); + } + return {returnValue}; + }); + + // Render all the routes from the routes.js (All the visible items on the Sidenav) + const renderRoutes = routes.map( + ({type, name, icon, title, collapse, noCollapse, key, href, route}: any) => + { + let returnValue; + + if (type === "collapse") + { + if (href) + { + returnValue = ( + + + + ); + } + else if (noCollapse && route) + { + returnValue = ( + + + {collapse ? renderCollapse(collapse) : null} + + + ); + } + else + { + returnValue = ( + (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key))} + > + {collapse ? renderCollapse(collapse) : null} + + ); + } + } + else if (type === "title") + { + returnValue = ( + + {title} + + ); + } + else if (type === "divider") + { + returnValue = ( + + ); + } + + return returnValue; + } + ); + + return ( + + + + + close + + + + {brand && } + {brandName && sidenavLogoLabel(theme, {miniSidenav})}> + + {brandName} + + + } + + + + {renderRoutes} + + + ); +} + +// Declaring default props for Sidenav +Sidenav.defaultProps = { + color: "info", + brand: "", + brandName: "", +}; + +export default Sidenav; diff --git a/src/qqq/components/Sidenav/styles/sidenav.ts b/src/qqq/components/Sidenav/styles/sidenav.ts new file mode 100644 index 0000000..dcbf6f7 --- /dev/null +++ b/src/qqq/components/Sidenav/styles/sidenav.ts @@ -0,0 +1,46 @@ +/* + * 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 . + */ + +// @mui material components +import {Theme} from "@mui/material/styles"; + +export default function sidenavLogoLabel(theme: Theme, ownerState: any) +{ + const {functions, transitions, typography, breakpoints} = theme; + const {miniSidenav} = ownerState; + + const {pxToRem} = functions; + const {fontWeightMedium} = typography; + + return { + ml: 0.5, + fontWeight: fontWeightMedium, + wordSpacing: pxToRem(-1), + transition: transitions.create("opacity", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + + [breakpoints.up("xl")]: { + opacity: miniSidenav ? 0 : 1, + }, + }; +} diff --git a/src/qqq/components/Sidenav/styles/sidenavCollapse.ts b/src/qqq/components/Sidenav/styles/sidenavCollapse.ts new file mode 100644 index 0000000..c426cbb --- /dev/null +++ b/src/qqq/components/Sidenav/styles/sidenavCollapse.ts @@ -0,0 +1,193 @@ +/* + * 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 . + */ + +import {Theme} from "@mui/material/styles"; + +function collapseItem(theme: Theme, ownerState: any) +{ + const {palette, transitions, breakpoints, boxShadows, borders, functions} = theme; + const {active, transparentSidenav, whiteSidenav, darkMode} = ownerState; + + const {white, transparent, dark, grey} = palette; + const {md} = boxShadows; + const {borderRadius} = borders; + const {pxToRem, rgba} = functions; + + return { + background: () => + { + let backgroundValue; + + if (transparentSidenav && darkMode) + { + backgroundValue = active ? rgba(white.main, 0.2) : transparent.main; + } + else if (transparentSidenav && !darkMode) + { + backgroundValue = active ? grey[300] : transparent.main; + } + else if (whiteSidenav) + { + backgroundValue = active ? grey[200] : transparent.main; + } + else + { + backgroundValue = active ? rgba(white.main, 0.2) : transparent.main; + } + + return backgroundValue; + }, + color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main, + display: "flex", + alignItems: "center", + width: "100%", + padding: `${pxToRem(8)} ${pxToRem(16)}`, + margin: `${pxToRem(1.5)} ${pxToRem(16)}`, + borderRadius: borderRadius.md, + cursor: "pointer", + userSelect: "none", + whiteSpace: "nowrap", + boxShadow: active && !whiteSidenav && !darkMode && !transparentSidenav ? md : "none", + [breakpoints.up("xl")]: { + transition: transitions.create(["box-shadow", "background-color"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + }, + + "&:hover, &:focus": { + backgroundColor: + transparentSidenav && !darkMode + ? grey[300] + : rgba(whiteSidenav ? grey[400] : white.main, 0.2), + }, + }; +} + +function collapseIconBox(theme: Theme, ownerState: any) +{ + const {palette, transitions, borders, functions} = theme; + const {transparentSidenav, whiteSidenav, darkMode} = ownerState; + + const {white, dark} = palette; + const {borderRadius} = borders; + const {pxToRem} = functions; + + return { + minWidth: pxToRem(32), + minHeight: pxToRem(32), + color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main, + borderRadius: borderRadius.md, + display: "grid", + placeItems: "center", + transition: transitions.create("margin", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + + "& svg, svg g": { + color: transparentSidenav || whiteSidenav ? dark.main : white.main, + }, + }; +} + +const collapseIcon = ({palette: {white, gradients}}: Theme, {active}: any) => ({ + color: active ? white.main : gradients.dark.state, +}); + +function collapseText(theme: any, ownerState: any) +{ + const {typography, transitions, breakpoints, functions} = theme; + const {miniSidenav, transparentSidenav, active} = ownerState; + + const {size, fontWeightRegular, fontWeightLight} = typography; + const {pxToRem} = functions; + + return { + marginLeft: pxToRem(10), + + [breakpoints.up("xl")]: { + opacity: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : 1, + maxWidth: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : "100%", + marginLeft: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : pxToRem(10), + transition: transitions.create(["opacity", "margin"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + + "& span": { + fontWeight: active ? fontWeightRegular : fontWeightLight, + fontSize: size.sm, + lineHeight: 0, + }, + }; +} + +function collapseArrow(theme: Theme, ownerState: any) +{ + const {palette, typography, transitions, breakpoints, functions} = theme; + const {noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode} = + ownerState; + + const {white, dark} = palette; + const {size} = typography; + const {pxToRem, rgba} = functions; + + return { + fontSize: `${size.lg} !important`, + fontWeight: 700, + marginBottom: pxToRem(-1), + transform: open ? "rotate(0)" : "rotate(-180deg)", + color: () => + { + let colorValue; + + if (transparentSidenav && darkMode) + { + colorValue = open || active ? white.main : rgba(white.main, 0.25); + } + else if (transparentSidenav || whiteSidenav) + { + colorValue = open || active ? dark.main : rgba(dark.main, 0.25); + } + else + { + colorValue = open || active ? white.main : rgba(white.main, 0.5); + } + + return colorValue; + }, + transition: transitions.create(["color", "transform", "opacity"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + + [breakpoints.up("xl")]: { + display: + noCollapse || (transparentSidenav && miniSidenav) || miniSidenav + ? "none !important" + : "block !important", + }, + }; +} + +export {collapseItem, collapseIconBox, collapseIcon, collapseText, collapseArrow}; diff --git a/src/qqq/components/Sidenav/styles/sidenavItem.ts b/src/qqq/components/Sidenav/styles/sidenavItem.ts new file mode 100644 index 0000000..4e2a973 --- /dev/null +++ b/src/qqq/components/Sidenav/styles/sidenavItem.ts @@ -0,0 +1,180 @@ +/* + * 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 . + */ + +import {Theme} from "@mui/material/styles"; + +function item(theme: Theme | any, ownerState: any) +{ + const {palette, borders, functions, transitions} = theme; + const {active, color, transparentSidenav, whiteSidenav, darkMode} = ownerState; + + const {transparent, white, grey} = palette; + const {borderRadius} = borders; + const {rgba} = functions; + + return { + pl: 3, + mt: 0.375, + mb: 0.3, + width: "100%", + borderRadius: borderRadius.md, + cursor: "pointer", + backgroundColor: () => + { + let backgroundValue = transparent.main; + + if ( + (active === "isParent" && !transparentSidenav && !whiteSidenav) || + (active === "isParent" && transparentSidenav && darkMode) + ) + { + backgroundValue = rgba(white.main, 0.2); + } + else if (active === "isParent" && transparentSidenav) + { + backgroundValue = grey[300]; + } + else if (active === "isParent" && whiteSidenav) + { + backgroundValue = grey[200]; + } + else if (active) + { + backgroundValue = palette[color].main; + } + + return backgroundValue; + }, + transition: transitions.create("background-color", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + + "&:hover, &:focus": { + backgroundColor: + !active && + rgba((transparentSidenav && !darkMode) || whiteSidenav ? grey[400] : white.main, 0.2), + }, + }; +} + +function itemContent(theme: Theme, ownerState: any) +{ + const {palette, typography, transitions, functions} = theme; + const {miniSidenav, name, active, transparentSidenav, whiteSidenav, darkMode} = ownerState; + + const {white, dark} = palette; + const {size, fontWeightRegular, fontWeightLight} = typography; + const {pxToRem} = functions; + + return { + display: "flex", + alignItems: "center", + justifyContent: "space-between", + width: "100%", + padding: `${pxToRem(12)} ${pxToRem(16)}`, + marginLeft: pxToRem(18), + userSelect: "none", + position: "relative", + + "& span": { + color: + ((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active) + ? dark.main + : white.main, + fontWeight: active ? fontWeightRegular : fontWeightLight, + fontSize: size.sm, + opacity: miniSidenav ? 0 : 1, + transition: transitions.create(["opacity", "color"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + + "&::before": { + content: `"${name[0]}"`, + color: + ((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active) + ? dark.main + : white.main, + fontWeight: fontWeightRegular, + display: "flex", + alignItems: "center", + position: "absolute", + top: "50%", + transform: "translateY(-50%)", + left: pxToRem(-15), + opacity: 1, + borderRadius: "50%", + fontSize: size.sm, + }, + }; +} + +function itemArrow(theme: Theme, ownerState: any) +{ + const {palette, typography, transitions, breakpoints, functions} = theme; + const {noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode} = + ownerState; + + const {white, dark} = palette; + const {size} = typography; + const {pxToRem, rgba} = functions; + + return { + fontSize: `${size.lg} !important`, + fontWeight: 700, + marginBottom: pxToRem(-1), + transform: open ? "rotate(0)" : "rotate(-180deg)", + color: () => + { + let colorValue; + + if (transparentSidenav && darkMode) + { + colorValue = open || active ? white.main : rgba(white.main, 0.25); + } + else if (transparentSidenav || whiteSidenav) + { + colorValue = open || active ? dark.main : rgba(dark.main, 0.25); + } + else + { + colorValue = open || active ? white.main : rgba(white.main, 0.5); + } + + return colorValue; + }, + transition: transitions.create(["color", "transform", "opacity"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + + [breakpoints.up("xl")]: { + display: + noCollapse || (transparentSidenav && miniSidenav) || miniSidenav + ? "none !important" + : "block !important", + }, + }; +} + +export {item, itemContent, itemArrow}; diff --git a/src/qqq/components/Temporary/Configurator/ConfiguratorRoot.tsx b/src/qqq/components/Temporary/Configurator/ConfiguratorRoot.tsx new file mode 100644 index 0000000..72bf01a --- /dev/null +++ b/src/qqq/components/Temporary/Configurator/ConfiguratorRoot.tsx @@ -0,0 +1,66 @@ +/* + * 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 . + */ + +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()), + }, + }; +}); diff --git a/src/qqq/components/Temporary/Configurator/index.tsx b/src/qqq/components/Temporary/Configurator/index.tsx new file mode 100644 index 0000000..e9eb9f4 --- /dev/null +++ b/src/qqq/components/Temporary/Configurator/index.tsx @@ -0,0 +1,385 @@ +/* + * 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 . + */ + +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(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 ( + + + + Material UI Configurator + + See our dashboard options. + + + + ({ + fontSize: `${size.lg} !important`, + color: darkMode ? white.main : dark.main, + stroke: "currentColor", + strokeWidth: "2px", + cursor: "pointer", + transform: "translateY(5px)", + })} + onClick={handleCloseConfigurator} + > + close + + + + + + + + Sidenav Colors + + + {sidenavColors.map((color) => ( + ({ + width: "24px", + height: "24px", + padding: 0, + border: `${borderWidth[1]} solid ${darkMode ? background.sidenav : white.main}`, + borderColor: () => + { + let borderColorValue = sidenavColor === color && dark.main; + + if (darkMode && sidenavColor === color) + { + borderColorValue = white.main; + } + + return borderColorValue; + }, + transition: transitions.create("border-color", { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + backgroundImage: ({functions: {linearGradient}, palette: {gradients}}) => + linearGradient(gradients[color].main, gradients[color].state), + + "&:not(:last-child)": { + mr: 1, + }, + + "&:hover, &:focus, &:active": { + borderColor: darkMode ? white.main : dark.main, + }, + })} + onClick={() => setSidenavColor(dispatch, color)} + /> + ))} + + + + + Sidenav Type + + Choose between different sidenav types. + + + + + Dark + + + + Transparent + + + + White + + + + + Navbar Fixed + + + + + + Sidenav Mini + + + + + + Light / Dark + + + + + + + + buy now + + + + + buy javascript version + + + + view documentation + + + + + Star + + + + + Thank you for sharing! + + + + + + +   Tweet + + + + +   Share + + + + + + ); +} + +export default Configurator; diff --git a/src/qqq/components/Temporary/DefaultInfoCard/index.tsx b/src/qqq/components/Temporary/DefaultInfoCard/index.tsx new file mode 100644 index 0000000..1a6ed3d --- /dev/null +++ b/src/qqq/components/Temporary/DefaultInfoCard/index.tsx @@ -0,0 +1,84 @@ +/* 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 . + */ + +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 ( + + + + {icon} + + + + + {title} + + {description && ( + + {description} + + )} + {description && !value ? null : } + {value && ( + + {value} + + )} + + + ); +} + +// Declaring default props for DefaultInfoCard +DefaultInfoCard.defaultProps = { + color: "info", + value: "", + description: "", +}; + +export default DefaultInfoCard; diff --git a/src/qqq/components/Temporary/MDAlert/MDAlertCloseIcon.tsx b/src/qqq/components/Temporary/MDAlert/MDAlertCloseIcon.tsx new file mode 100644 index 0000000..ce172dc --- /dev/null +++ b/src/qqq/components/Temporary/MDAlert/MDAlertCloseIcon.tsx @@ -0,0 +1,41 @@ +/* + * 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 . + */ + +import {styled} from "@mui/material"; + +export default styled("span")(({theme}) => +{ + const {palette, typography, functions} = theme; + + const {white} = palette; + const {size, fontWeightMedium} = typography; + const {pxToRem} = functions; + + return { + color: white.main, + fontSize: size.xl, + padding: `${pxToRem(9)} ${pxToRem(6)} ${pxToRem(8)}`, + marginLeft: pxToRem(40), + fontWeight: fontWeightMedium, + cursor: "pointer", + lineHeight: 0, + }; +}); diff --git a/src/qqq/components/Temporary/MDAlert/MDAlertRoot.tsx b/src/qqq/components/Temporary/MDAlert/MDAlertRoot.tsx new file mode 100644 index 0000000..cce6cb1 --- /dev/null +++ b/src/qqq/components/Temporary/MDAlert/MDAlertRoot.tsx @@ -0,0 +1,54 @@ +/* + * 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 . + */ + +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, + }; +}); diff --git a/src/qqq/components/Temporary/MDAlert/index.tsx b/src/qqq/components/Temporary/MDAlert/index.tsx new file mode 100644 index 0000000..32ef0be --- /dev/null +++ b/src/qqq/components/Temporary/MDAlert/index.tsx @@ -0,0 +1,81 @@ +/* + * 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 . + */ + +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) => ( + + + + {children} + + {dismissible ? ( + + × + + ) : null} + + + ); + + switch (true) + { + case alertStatus === "mount": + return alertTemplate(); + case alertStatus === "fadeOut": + setTimeout(() => setAlertStatus("unmount"), 400); + return alertTemplate(false); + default: + alertTemplate(); + break; + } + + return null; +} + +// Declaring default props for MDAlert +MDAlert.defaultProps = { + color: "info", + dismissible: false, +}; + +export default MDAlert; diff --git a/src/qqq/components/Temporary/MDAvatar/MDAvatarRoot.tsx b/src/qqq/components/Temporary/MDAvatar/MDAvatarRoot.tsx new file mode 100644 index 0000000..ecacf3f --- /dev/null +++ b/src/qqq/components/Temporary/MDAvatar/MDAvatarRoot.tsx @@ -0,0 +1,96 @@ +/* + * 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 . + */ + +import Avatar from "@mui/material/Avatar"; +import {styled, Theme} from "@mui/material/styles"; + +export default styled(Avatar)(({theme, ownerState}: { theme?: Theme | any; ownerState: any }) => +{ + const {palette, functions, typography, boxShadows} = theme; + const {shadow, bgColor, size} = ownerState; + + const {gradients, transparent, white} = palette; + const {pxToRem, linearGradient} = functions; + const {size: fontSize, fontWeightRegular} = typography; + + // backgroundImage value + const backgroundValue = + bgColor === "transparent" + ? transparent.main + : linearGradient(gradients[bgColor].main, gradients[bgColor].state); + + // size value + let sizeValue; + + switch (size) + { + case "xs": + sizeValue = { + width: pxToRem(24), + height: pxToRem(24), + fontSize: fontSize.xs, + }; + break; + case "sm": + sizeValue = { + width: pxToRem(36), + height: pxToRem(36), + fontSize: fontSize.sm, + }; + break; + case "lg": + sizeValue = { + width: pxToRem(58), + height: pxToRem(58), + fontSize: fontSize.sm, + }; + break; + case "xl": + sizeValue = { + width: pxToRem(74), + height: pxToRem(74), + fontSize: fontSize.md, + }; + break; + case "xxl": + sizeValue = { + width: pxToRem(110), + height: pxToRem(110), + fontSize: fontSize.md, + }; + break; + default: { + sizeValue = { + width: pxToRem(48), + height: pxToRem(48), + fontSize: fontSize.md, + }; + } + } + + return { + background: backgroundValue, + color: white.main, + fontWeight: fontWeightRegular, + boxShadow: boxShadows[shadow], + ...sizeValue, + }; +}); diff --git a/src/qqq/components/Temporary/MDAvatar/index.tsx b/src/qqq/components/Temporary/MDAvatar/index.tsx new file mode 100644 index 0000000..f1e6a44 --- /dev/null +++ b/src/qqq/components/Temporary/MDAvatar/index.tsx @@ -0,0 +1,54 @@ +/* + * 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 . + */ + +import {AvatarProps} from "@mui/material"; +import {FC, forwardRef} from "react"; +import MDAvatarRoot from "qqq/components/Temporary/MDAvatar/MDAvatarRoot"; + +// declare props types for MDAvatar +interface Props extends AvatarProps { + bgColor?: + | "transparent" + | "primary" + | "secondary" + | "info" + | "success" + | "warning" + | "error" + | "light" + | "dark"; + size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl"; + shadow?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "inset"; + [key: string]: any; +} + +const MDAvatar: FC = forwardRef(({bgColor, size, shadow, ...rest}, ref) => ( + +)); + +// Declaring default props for MDAvatar +MDAvatar.defaultProps = { + bgColor: "transparent", + size: "md", + shadow: "none", +}; + +export default MDAvatar; diff --git a/src/qqq/components/Temporary/MDBadge/MDBadgeRoot.tsx b/src/qqq/components/Temporary/MDBadge/MDBadgeRoot.tsx new file mode 100644 index 0000000..e06d305 --- /dev/null +++ b/src/qqq/components/Temporary/MDBadge/MDBadgeRoot.tsx @@ -0,0 +1,147 @@ +/* + * 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 . + */ + +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()), + }, + }; +}); diff --git a/src/qqq/components/Temporary/MDBadge/index.tsx b/src/qqq/components/Temporary/MDBadge/index.tsx new file mode 100644 index 0000000..eb21f40 --- /dev/null +++ b/src/qqq/components/Temporary/MDBadge/index.tsx @@ -0,0 +1,63 @@ +/* + * 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 . + */ + +import {BadgeProps} from "@mui/material"; +import {FC, ReactNode, forwardRef} from "react"; +import MDBadgeRoot from "qqq/components/Temporary/MDBadge/MDBadgeRoot"; + +interface Props extends Omit { + 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 = forwardRef( + ({color, variant, size, circular, indicator, border, container, children, ...rest}, ref) => ( + + {children} + + ) +); + +// 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; diff --git a/src/qqq/components/Temporary/MDBadgeDot/index.tsx b/src/qqq/components/Temporary/MDBadgeDot/index.tsx new file mode 100644 index 0000000..4e2b8d5 --- /dev/null +++ b/src/qqq/components/Temporary/MDBadgeDot/index.tsx @@ -0,0 +1,120 @@ +/* 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 . + */ + +import {FC, forwardRef} from "react"; +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// declaring props types for MDBadgeDot +interface Props +{ + variant?: "gradient" | "contained"; + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + size?: "xs" | "sm" | "md" | "lg"; + badgeContent: string; + font?: + | { + color: string; + weight: string; + } + | any; + + [key: string]: any; +} + +const MDBadgeDot: FC = forwardRef( + ({variant, color, size, badgeContent, font = {}, ...rest}, ref) => + { + let finalSize; + let fontSize: any; + let padding; + + if (size === "sm") + { + finalSize = "0.5rem"; + fontSize = "caption"; + padding = "0.45em 0.775em"; + } + else if (size === "lg") + { + finalSize = "0.625rem"; + fontSize = "body2"; + padding = "0.85em 1.375em"; + } + else if (size === "md") + { + finalSize = "0.5rem"; + fontSize = "button"; + padding = "0.65em 1em"; + } + else + { + finalSize = "0.375rem"; + fontSize = "caption"; + padding = "0.45em 0.775em"; + } + + const validColors = [ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]; + + const validColorIndex = validColors.findIndex((el) => el === color); + + return ( + + + + {badgeContent} + + + ); + } +); + +// Declaring default props for MDBadgeDot +MDBadgeDot.defaultProps = { + variant: "contained", + color: "info", + size: "xs", + font: {}, +}; + +export default MDBadgeDot; diff --git a/src/qqq/components/Temporary/MDBox/MDBoxRoot.tsx b/src/qqq/components/Temporary/MDBox/MDBoxRoot.tsx new file mode 100644 index 0000000..bed07b3 --- /dev/null +++ b/src/qqq/components/Temporary/MDBox/MDBoxRoot.tsx @@ -0,0 +1,138 @@ +/* + * 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 . + */ + +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, + }; +}); diff --git a/src/qqq/components/Temporary/MDBox/index.tsx b/src/qqq/components/Temporary/MDBox/index.tsx new file mode 100644 index 0000000..81f3a06 --- /dev/null +++ b/src/qqq/components/Temporary/MDBox/index.tsx @@ -0,0 +1,60 @@ +/* + * 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 . + */ + +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 = forwardRef( + ({variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow, ...rest}, ref) => ( + + ) +); + +// Declaring default props for MDBox +MDBox.defaultProps = { + variant: "contained", + bgColor: "transparent", + color: "dark", + opacity: 1, + borderRadius: "none", + shadow: "none", + coloredShadow: "none", +}; + +export default MDBox; diff --git a/src/qqq/components/Temporary/MDButton/MDButtonRoot.tsx b/src/qqq/components/Temporary/MDButton/MDButtonRoot.tsx new file mode 100644 index 0000000..cc76bec --- /dev/null +++ b/src/qqq/components/Temporary/MDButton/MDButtonRoot.tsx @@ -0,0 +1,309 @@ +/* + * 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 . + */ + +import Button from "@mui/material/Button"; +import {styled, Theme} from "@mui/material/styles"; + +export default styled(Button)(({theme, ownerState}: { theme?: Theme | any; ownerState: any }) => +{ + const {palette, functions, borders, boxShadows} = theme; + const {color, variant, size, circular, iconOnly, darkMode} = ownerState; + + const {white, text, transparent, gradients, grey} = palette; + const {boxShadow, linearGradient, pxToRem, rgba} = functions; + const {borderRadius} = borders; + const {colored} = boxShadows; + + // styles for the button with variant="contained" + const containedStyles = () => + { + // background color value + const backgroundValue = palette[color] ? palette[color].main : white.main; + + // backgroundColor value when button is focused + const focusedBackgroundValue = palette[color] ? palette[color].focus : white.focus; + + // boxShadow value + const boxShadowValue = colored[color] + ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow( + [0, 3], + [1, -2], + palette[color].main, + 0.2 + )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` + : "none"; + + // boxShadow value when button is hovered + const hoveredBoxShadowValue = colored[color] + ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow( + [0, 4], + [23, 0], + palette[color].main, + 0.15 + )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` + : "none"; + + // color value + let colorValue = white.main; + + if (!darkMode && (color === "white" || color === "light" || !palette[color])) + { + colorValue = text.main; + } + else if (darkMode && (color === "white" || color === "light" || !palette[color])) + { + colorValue = grey[600]; + } + + // color value when button is focused + let focusedColorValue = white.main; + + if (color === "white") + { + focusedColorValue = text.main; + } + else if (color === "primary" || color === "error" || color === "dark") + { + focusedColorValue = white.main; + } + + return { + background: backgroundValue, + color: colorValue, + boxShadow: boxShadowValue, + + "&:hover": { + backgroundColor: backgroundValue, + color: colorValue, + boxShadow: hoveredBoxShadowValue, + }, + + "&:focus:not(:hover)": { + backgroundColor: focusedBackgroundValue, + color: colorValue, + boxShadow: palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5), + }, + + "&:disabled": { + backgroundColor: backgroundValue, + color: focusedColorValue, + }, + }; + }; + + // styles for the button with variant="outlined" + const outlinedStyles = () => + { + // background color value + const backgroundValue = color === "white" ? rgba(white.main, 0.1) : transparent.main; + + // color value + const colorValue = palette[color] ? palette[color].main : white.main; + + // boxShadow value + const boxShadowValue = palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5); + + // border color value + let borderColorValue = palette[color] ? palette[color].main : rgba(white.main, 0.75); + + if (color === "white") + { + borderColorValue = rgba(white.main, 0.75); + } + + return { + background: backgroundValue, + color: colorValue, + border: `${pxToRem(1)} solid ${borderColorValue}`, + + "&:hover": { + background: transparent.main, + color: colorValue, + borderColor: colorValue, + opacity: 0.85, + }, + + "&:focus:not(:hover)": { + background: transparent.main, + color: colorValue, + boxShadow: boxShadowValue, + }, + + "&:active:not(:hover)": { + backgroundColor: colorValue, + color: white.main, + opacity: 0.85, + }, + + "&:disabled": { + color: colorValue, + borderColor: colorValue, + }, + }; + }; + + // styles for the button with variant="gradient" + const gradientStyles = () => + { + // background value + const backgroundValue = + color === "white" || !gradients[color] + ? white.main + : linearGradient(gradients[color].main, gradients[color].state); + + // boxShadow value + const boxShadowValue = colored[color] + ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow( + [0, 3], + [1, -2], + palette[color].main, + 0.2 + )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` + : "none"; + + // boxShadow value when button is hovered + const hoveredBoxShadowValue = colored[color] + ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow( + [0, 4], + [23, 0], + palette[color].main, + 0.15 + )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` + : "none"; + + // color value + let colorValue = white.main; + + if (color === "white") + { + colorValue = text.main; + } + else if (color === "light") + { + colorValue = gradients.dark.state; + } + + return { + background: backgroundValue, + color: colorValue, + boxShadow: boxShadowValue, + + "&:hover": { + boxShadow: hoveredBoxShadowValue, + color: colorValue, + }, + + "&:focus:not(:hover)": { + boxShadow: boxShadowValue, + color: colorValue, + }, + + "&:disabled": { + background: backgroundValue, + color: colorValue, + }, + }; + }; + + // styles for the button with variant="text" + const textStyles = () => + { + // color value + const colorValue = palette[color] ? palette[color].main : white.main; + + // color value when button is focused + const focusedColorValue = palette[color] ? palette[color].focus : white.focus; + + return { + color: colorValue, + + "&:hover": { + color: focusedColorValue, + }, + + "&:focus:not(:hover)": { + color: focusedColorValue, + }, + }; + }; + + // styles for the button with circular={true} + const circularStyles = () => ({ + borderRadius: borderRadius.section, + }); + + // styles for the button with iconOnly={true} + const iconOnlyStyles = () => + { + // width, height, minWidth and minHeight values + let sizeValue = pxToRem(38); + + if (size === "small") + { + sizeValue = pxToRem(25.4); + } + else if (size === "large") + { + sizeValue = pxToRem(52); + } + + // padding value + let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`; + + if (size === "small") + { + paddingValue = pxToRem(4.5); + } + else if (size === "large") + { + paddingValue = pxToRem(16); + } + + return { + width: sizeValue, + minWidth: sizeValue, + height: sizeValue, + minHeight: sizeValue, + padding: paddingValue, + + "& .material-icons": { + marginTop: 0, + }, + + "&:hover, &:focus, &:active": { + transform: "none", + }, + }; + }; + + return { + ...(variant === "contained" && containedStyles()), + ...(variant === "outlined" && outlinedStyles()), + ...(variant === "gradient" && gradientStyles()), + ...(variant === "text" && textStyles()), + ...(circular && circularStyles()), + ...(iconOnly && iconOnlyStyles()), + }; +}); diff --git a/src/qqq/components/Temporary/MDButton/index.tsx b/src/qqq/components/Temporary/MDButton/index.tsx new file mode 100644 index 0000000..92283ed --- /dev/null +++ b/src/qqq/components/Temporary/MDButton/index.tsx @@ -0,0 +1,75 @@ +/* + * 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 . + */ + +import {ButtonProps} from "@mui/material"; +import {FC, ReactNode, forwardRef} from "react"; +import {useMaterialUIController} from "context"; +import MDButtonRoot from "qqq/components/Temporary/MDButton/MDButtonRoot"; + +// Declaring props types for MDButton +export interface Props extends Omit { + color?: + | "white" + | "primary" + | "secondary" + | "info" + | "success" + | "warning" + | "error" + | "light" + | "dark" + | "default"; + variant?: "text" | "contained" | "outlined" | "gradient"; + size?: "small" | "medium" | "large"; + circular?: boolean; + iconOnly?: boolean; + children?: ReactNode; + [key: string]: any; +} + +const MDButton: FC = forwardRef( + ({color, variant, size, circular, iconOnly, children, ...rest}, ref) => + { + const [controller] = useMaterialUIController(); + const {darkMode} = controller; + + return ( + + {children} + + ); + } +); + +// Declaring default props for MDButton +MDButton.defaultProps = { + color: "white", + variant: "contained", + size: "medium", + circular: false, + iconOnly: false, +}; + +export default MDButton; diff --git a/src/qqq/components/Temporary/MDInput/MDInputRoot.tsx b/src/qqq/components/Temporary/MDInput/MDInputRoot.tsx new file mode 100644 index 0000000..9c05184 --- /dev/null +++ b/src/qqq/components/Temporary/MDInput/MDInputRoot.tsx @@ -0,0 +1,77 @@ +/* + * 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 . + */ + +import {styled, Theme} from "@mui/material/styles"; +import TextField from "@mui/material/TextField"; + +export default styled(TextField)(({theme, ownerState}: { theme?: Theme; ownerState: any }) => +{ + const {palette, functions} = theme; + const {error, success, disabled} = ownerState; + + const {grey, transparent, error: colorError, success: colorSuccess} = palette; + const {pxToRem} = functions; + + // styles for the input with error={true} + const errorStyles = () => ({ + backgroundImage: + "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23F44335' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23F44335' stroke='none'/%3E%3C/svg%3E\")", + backgroundRepeat: "no-repeat", + backgroundPosition: `right ${pxToRem(12)} center`, + backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`, + + "& .Mui-focused": { + "& .MuiOutlinedInput-notchedOutline, &:after": { + borderColor: colorError.main, + }, + }, + + "& .MuiInputLabel-root.Mui-focused": { + color: colorError.main, + }, + }); + + // styles for the input with success={true} + const successStyles = () => ({ + backgroundImage: + "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='%234CAF50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E\")", + backgroundRepeat: "no-repeat", + backgroundPosition: `right ${pxToRem(12)} center`, + backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`, + + "& .Mui-focused": { + "& .MuiOutlinedInput-notchedOutline, &:after": { + borderColor: colorSuccess.main, + }, + }, + + "& .MuiInputLabel-root.Mui-focused": { + color: colorSuccess.main, + }, + }); + + return { + backgroundColor: disabled ? `${grey[200]} !important` : transparent.main, + pointerEvents: disabled ? "none" : "auto", + ...(error && errorStyles()), + ...(success && successStyles()), + }; +}); diff --git a/src/qqq/components/Temporary/MDInput/index.tsx b/src/qqq/components/Temporary/MDInput/index.tsx new file mode 100644 index 0000000..97af216 --- /dev/null +++ b/src/qqq/components/Temporary/MDInput/index.tsx @@ -0,0 +1,44 @@ +/* + * 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 . + */ + +import {OutlinedTextFieldProps, StandardTextFieldProps} from "@mui/material"; +import {FC, forwardRef} from "react"; +import MDInputRoot from "qqq/components/Temporary/MDInput/MDInputRoot"; + +interface Props extends Omit { + variant?: "standard" | "outlined"; + error?: boolean; + success?: boolean; + disabled?: boolean; +} + +const MDInput: FC = forwardRef(({error, success, disabled, ...rest}, ref) => ( + +)); + +// Declaring default props for MDInput +MDInput.defaultProps = { + error: false, + success: false, + disabled: false, +}; + +export default MDInput; diff --git a/src/qqq/components/Temporary/MDProgress/MDProgressRoot.tsx b/src/qqq/components/Temporary/MDProgress/MDProgressRoot.tsx new file mode 100644 index 0000000..7fec360 --- /dev/null +++ b/src/qqq/components/Temporary/MDProgress/MDProgressRoot.tsx @@ -0,0 +1,56 @@ +/* + * 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 . + */ + +import LinearProgress from "@mui/material/LinearProgress"; +import {styled, Theme} from "@mui/material/styles"; + +export default styled(LinearProgress)( + ({theme, ownerState}: { theme?: Theme | any; ownerState: any }) => + { + const {palette, functions} = theme; + const {color, value, variant} = ownerState; + + const {text, gradients} = palette; + const {linearGradient} = functions; + + // background value + let backgroundValue; + + if (variant === "gradient") + { + backgroundValue = gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.info.main, gradients.info.state); + } + else + { + backgroundValue = palette[color] ? palette[color].main : palette.info.main; + } + + return { + "& .MuiLinearProgress-bar": { + background: backgroundValue, + width: `${value}%`, + color: text.main, + }, + }; + } +); diff --git a/src/qqq/components/Temporary/MDProgress/index.tsx b/src/qqq/components/Temporary/MDProgress/index.tsx new file mode 100644 index 0000000..84c08d1 --- /dev/null +++ b/src/qqq/components/Temporary/MDProgress/index.tsx @@ -0,0 +1,60 @@ +/* + * 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 . + */ + +import {FC, forwardRef} from "react"; +import MDProgressRoot from "components/MDProgress/MDProgressRoot"; +import MDTypography from "components/MDTypography"; + +// Delcare props types for MDProgress +interface Props { + variant?: "contained" | "gradient"; + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + value: number; + label?: boolean; + [key: string]: any; +} + +const MDProgress: FC = forwardRef(({variant, color, value, label, ...rest}, ref) => ( + <> + {label && ( + + {value}% + + )} + + +)); + +// Declaring default props for MDProgress +MDProgress.defaultProps = { + variant: "contained", + color: "info", + value: 0, + label: false, +}; + +export default MDProgress; diff --git a/src/qqq/components/Temporary/MDTypography/MDTypographyRoot.tsx b/src/qqq/components/Temporary/MDTypography/MDTypographyRoot.tsx new file mode 100644 index 0000000..e5c573e --- /dev/null +++ b/src/qqq/components/Temporary/MDTypography/MDTypographyRoot.tsx @@ -0,0 +1,74 @@ +/* + * 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 . + */ + +import {styled} from "@mui/material/styles"; +import Typography from "@mui/material/Typography"; + +export default styled(Typography)(({theme, ownerState}: any): any => +{ + const {palette, typography, functions}: any = theme; + const {color, textTransform, verticalAlign, fontWeight, opacity, textGradient, darkMode} = + ownerState; + + const {gradients, transparent, white} = palette; + const {fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold} = typography; + const {linearGradient} = functions; + + // fontWeight styles + const fontWeights: { [key: string]: number } = { + light: fontWeightLight, + regular: fontWeightRegular, + medium: fontWeightMedium, + bold: fontWeightBold, + }; + + // styles for the typography with textGradient={true} + const gradientStyles = () => ({ + backgroundImage: + color !== "inherit" && color !== "text" && color !== "white" && gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.dark.main, gradients.dark.state), + display: "inline-block", + WebkitBackgroundClip: "text", + WebkitTextFillColor: transparent.main, + position: "relative", + zIndex: 1, + }); + + // color value + let colorValue = color === "inherit" || !palette[color] ? "inherit" : palette[color].main; + + if (darkMode && (color === "inherit" || !palette[color])) + { + colorValue = "inherit"; + } + else if (darkMode && color === "dark") colorValue = white.main; + + return { + opacity, + textTransform, + verticalAlign, + textDecoration: "none", + color: colorValue, + fontWeight: fontWeights[fontWeight] && fontWeights[fontWeight], + ...(textGradient && gradientStyles()), + }; +}); diff --git a/src/qqq/components/Temporary/MDTypography/index.tsx b/src/qqq/components/Temporary/MDTypography/index.tsx new file mode 100644 index 0000000..f970a1a --- /dev/null +++ b/src/qqq/components/Temporary/MDTypography/index.tsx @@ -0,0 +1,100 @@ +/* + * 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 . + */ + +import {TypographyProps} from "@mui/material"; +import {FC, ReactNode, forwardRef} from "react"; +import {useMaterialUIController} from "context"; +import MDTypographyRoot from "qqq/components/Temporary/MDTypography/MDTypographyRoot"; + +// Declaring props types for MDTypography +interface Props extends TypographyProps +{ + color?: + | "inherit" + | "primary" + | "secondary" + | "info" + | "success" + | "warning" + | "error" + | "light" + | "dark" + | "text" + | "white"; + fontWeight?: "light" | "regular" | "medium" | "bold" | undefined; + textTransform?: "none" | "capitalize" | "uppercase" | "lowercase"; + verticalAlign?: + | "unset" + | "baseline" + | "sub" + | "super" + | "text-top" + | "text-bottom" + | "middle" + | "top" + | "bottom"; + textGradient?: boolean; + children: ReactNode; + opacity?: number; + + [key: string]: any; +} + +const MDTypography: FC = forwardRef( + ( + {color, fontWeight, textTransform, verticalAlign, textGradient, opacity, children, ...rest}, + ref + ) => + { + const [controller] = useMaterialUIController(); + const {darkMode} = controller; + + return ( + + {children} + + ); + } +); + +// Declaring default props for MDTypography +MDTypography.defaultProps = { + color: "dark", + fontWeight: undefined, + textTransform: "none", + verticalAlign: "unset", + textGradient: false, + opacity: 1, +}; + +export default MDTypography; diff --git a/src/qqq/components/Temporary/MiniStatisticsCard/index.tsx b/src/qqq/components/Temporary/MiniStatisticsCard/index.tsx new file mode 100644 index 0000000..9d24dcd --- /dev/null +++ b/src/qqq/components/Temporary/MiniStatisticsCard/index.tsx @@ -0,0 +1,162 @@ +/* + * 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 . + */ + +import Card from "@mui/material/Card"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; +import {ReactNode} from "react"; +import {useMaterialUIController} from "context"; +import MDBox from "qqq/components/Temporary/MDBox"; +import MDTypography from "qqq/components/Temporary/MDTypography"; + +// Decalaring props types for MiniStatisticsCard +interface Props { + bgColor?: "white" | "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + title?: { + fontWeight?: "light" | "regular" | "medium" | "bold"; + text?: string; + }; + count: string | number; + percentage?: { + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white"; + text: string | number; + }; + icon: { + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + component: ReactNode; + }; + direction?: "right" | "left"; + [key: string]: any; +} + +function MiniStatisticsCard({ + bgColor, + title, + count, + percentage, + icon, + direction, +}: Props): JSX.Element +{ + const [controller] = useMaterialUIController(); + const {darkMode} = controller; + + return ( + + ({ + background: darkMode && background.card, + })} + > + + + {direction === "left" ? ( + + + + {icon.component} + + + + ) : null} + + + + {title.text} + + + {count}{" "} + + {percentage.text} + + + + + {direction === "right" ? ( + + + + {icon.component} + + + + ) : null} + + + + + ); +} + +// Declaring default props for MiniStatisticsCard +MiniStatisticsCard.defaultProps = { + bgColor: "white", + title: { + fontWeight: "light", + text: "", + }, + percentage: { + color: "success", + text: "", + }, + direction: "right", +}; + +export default MiniStatisticsCard; diff --git a/src/qqq/components/Temporary/NotificationItem/index.tsx b/src/qqq/components/Temporary/NotificationItem/index.tsx new file mode 100644 index 0000000..b17f591 --- /dev/null +++ b/src/qqq/components/Temporary/NotificationItem/index.tsx @@ -0,0 +1,50 @@ +/* + * 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 . + */ + +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 = forwardRef(({icon, title, ...rest}, ref) => ( + menuItem(theme)}> + + + {icon} + + + {title} + + + +)); + +export default NotificationItem; diff --git a/src/qqq/components/Temporary/NotificationItem/styles.ts b/src/qqq/components/Temporary/NotificationItem/styles.ts new file mode 100644 index 0000000..62091f6 --- /dev/null +++ b/src/qqq/components/Temporary/NotificationItem/styles.ts @@ -0,0 +1,60 @@ +/* + * 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 . + */ + +import {Theme} from "@mui/material/styles"; + +function menuItem(theme: Theme) +{ + const {palette, borders, transitions} = theme; + + const {secondary, light, dark} = palette; + const {borderRadius} = borders; + + return { + display: "flex", + alignItems: "center", + width: "100%", + color: secondary.main, + borderRadius: borderRadius.md, + transition: transitions.create("background-color", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + + "& *": { + transition: "color 100ms linear", + }, + + "&:not(:last-child)": { + mb: 1, + }, + + "&:hover": { + backgroundColor: light.main, + + "& *": { + color: dark.main, + }, + }, + }; +} + +export default menuItem; diff --git a/src/qqq/components/Temporary/Theme.ts b/src/qqq/components/Temporary/Theme.ts new file mode 100644 index 0000000..c7084e1 --- /dev/null +++ b/src/qqq/components/Temporary/Theme.ts @@ -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 . + */ + +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}, + }, +}); diff --git a/src/qqq/components/Temporary/Theme/base/borders.ts b/src/qqq/components/Temporary/Theme/base/borders.ts new file mode 100644 index 0000000..9e579da --- /dev/null +++ b/src/qqq/components/Temporary/Theme/base/borders.ts @@ -0,0 +1,75 @@ +/** +========================================================= +* 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. +*/ + +/** + * The base border styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new border width, border color or border radius using this file. + * You can customized the borders value for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { grey } = colors; + +// types +interface Types { + borderColor: string; + borderWidth: { + 0: number; + 1: string; + 2: string; + 3: string; + 4: string; + 5: string; + }; + borderRadius: { + xs: string; + sm: string; + md: string; + lg: string; + xl: string; + xxl: string; + section: string; + }; +} + +const borders: Types = { + borderColor: grey[300], + + borderWidth: { + 0: 0, + 1: pxToRem(1), + 2: pxToRem(2), + 3: pxToRem(3), + 4: pxToRem(4), + 5: pxToRem(5), + }, + + borderRadius: { + xs: pxToRem(1.6), + sm: pxToRem(2), + md: pxToRem(6), + lg: pxToRem(8), + xl: pxToRem(12), + xxl: pxToRem(16), + section: pxToRem(160), + }, +}; + +export default borders; diff --git a/src/qqq/components/Temporary/Theme/base/boxShadows.ts b/src/qqq/components/Temporary/Theme/base/boxShadows.ts new file mode 100644 index 0000000..4fc58ab --- /dev/null +++ b/src/qqq/components/Temporary/Theme/base/boxShadows.ts @@ -0,0 +1,148 @@ +/** +========================================================= +* 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. +*/ + +/** + * The base box-shadow styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new box-shadow using this file. + * You can customized the box-shadow for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import boxShadow from "assets/theme/functions/boxShadow"; + +const { black, white, tabs, coloredShadows } = colors; + +// types +interface Types { + xs: string; + sm: string; + md: string; + lg: string; + xl: string; + xxl: string; + inset: string; + colored: + | { + primary: string; + secondary: string; + info: string; + success: string; + warning: string; + error: string; + light: string; + dark: string; + } + | any; + navbarBoxShadow: string; + sliderBoxShadow: { + thumb: string; + }; + tabsBoxShadow: { + indicator: string; + }; +} + +const boxShadows: Types = { + xs: boxShadow([0, 2], [9, -5], black.main, 0.15), + sm: boxShadow([0, 5], [10, 0], black.main, 0.12), + md: `${boxShadow([0, 4], [6, -1], black.main, 0.1)}, ${boxShadow( + [0, 2], + [4, -1], + black.main, + 0.06 + )}`, + lg: `${boxShadow([0, 10], [15, -3], black.main, 0.1)}, ${boxShadow( + [0, 4], + [6, -2], + black.main, + 0.05 + )}`, + xl: `${boxShadow([0, 20], [25, -5], black.main, 0.1)}, ${boxShadow( + [0, 10], + [10, -5], + black.main, + 0.04 + )}`, + xxl: boxShadow([0, 20], [27, 0], black.main, 0.05), + inset: boxShadow([0, 1], [2, 0], black.main, 0.075, "inset"), + colored: { + primary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.primary, + 0.4 + )}`, + secondary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.secondary, + 0.4 + )}`, + info: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.info, + 0.4 + )}`, + success: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.success, + 0.4 + )}`, + warning: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.warning, + 0.4 + )}`, + error: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.error, + 0.4 + )}`, + light: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.light, + 0.4 + )}`, + dark: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.dark, + 0.4 + )}`, + }, + + navbarBoxShadow: `${boxShadow([0, 0], [1, 1], white.main, 0.9, "inset")}, ${boxShadow( + [0, 20], + [27, 0], + black.main, + 0.05 + )}`, + sliderBoxShadow: { + thumb: boxShadow([0, 1], [13, 0], black.main, 0.2), + }, + tabsBoxShadow: { + indicator: boxShadow([0, 1], [5, 1], tabs.indicator.boxShadow, 1), + }, +}; + +export default boxShadows; diff --git a/src/qqq/components/Temporary/Theme/base/breakpoints.ts b/src/qqq/components/Temporary/Theme/base/breakpoints.ts new file mode 100644 index 0000000..5d3fef5 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/base/breakpoints.ts @@ -0,0 +1,33 @@ +/** +========================================================= +* 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. +*/ + +/** + * The base breakpoints for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new breakpoints using this file. + * You can customized the breakpoints for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ + +const breakpoints = { + values: { + xs: 0, + sm: 576, + md: 768, + lg: 992, + xl: 1200, + xxl: 1400, + }, +}; + +export default breakpoints; diff --git a/src/qqq/components/Temporary/Theme/base/colors.ts b/src/qqq/components/Temporary/Theme/base/colors.ts new file mode 100644 index 0000000..ee6fae7 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/base/colors.ts @@ -0,0 +1,389 @@ +/** +========================================================= +* 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. +*/ + +/** + * The base colors for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new color using this file. + * You can customized the colors for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ + +// types +interface ColorsTypes { + main: string; + focus: string; +} + +interface GradientsTypes { + main: string; + state: string; +} + +interface SocialMediaColorsTypes { + main: string; + dark: string; +} + +interface BadgeColorsTypes { + background: string; + text: string; +} + +interface Types { + background: + | { + default: string; + sidenav?: string; + card?: string; + } + | any; + white: + | { + main: string; + focus: string; + } + | any; + text: + | { + main: string; + focus: string; + primary?: string; + secondary?: string; + disabled?: string; + } + | any; + transparent: + | { + main: string; + } + | any; + black: + | { + light: string; + main: string; + focus: string; + } + | any; + primary: ColorsTypes | any; + secondary: ColorsTypes | any; + info: ColorsTypes | any; + success: ColorsTypes | any; + warning: ColorsTypes | any; + error: ColorsTypes | any; + light: ColorsTypes | any; + dark: ColorsTypes | any; + grey: + | { + [key: string | number]: string; + } + | any; + gradients: + | { + primary: GradientsTypes; + secondary: GradientsTypes; + info: GradientsTypes; + success: GradientsTypes; + warning: GradientsTypes; + error: GradientsTypes; + light: GradientsTypes; + dark: GradientsTypes; + } + | any; + socialMediaColors: + | { + facebook: SocialMediaColorsTypes; + twitter: SocialMediaColorsTypes; + instagram: SocialMediaColorsTypes; + linkedin: SocialMediaColorsTypes; + pinterest: SocialMediaColorsTypes; + youtube: SocialMediaColorsTypes; + vimeo: SocialMediaColorsTypes; + slack: SocialMediaColorsTypes; + dribbble: SocialMediaColorsTypes; + github: SocialMediaColorsTypes; + reddit: SocialMediaColorsTypes; + tumblr: SocialMediaColorsTypes; + } + | any; + badgeColors: + | { + primary: BadgeColorsTypes; + secondary: BadgeColorsTypes; + info: BadgeColorsTypes; + success: BadgeColorsTypes; + warning: BadgeColorsTypes; + error: BadgeColorsTypes; + light: BadgeColorsTypes; + dark: BadgeColorsTypes; + } + | any; + coloredShadows: + | { + [key: string]: string; + } + | any; + inputBorderColor: string; + tabs: + | { + indicator: + | { + boxShadow: string; + } + | any; + } + | any; +} + +const colors: Types = { + background: { + default: "#f0f2f5", + }, + + text: { + main: "#7b809a", + focus: "#7b809a", + }, + + transparent: { + main: "transparent", + }, + + white: { + main: "#ffffff", + focus: "#ffffff", + }, + + black: { + light: "#000000", + main: "#000000", + focus: "#000000", + }, + + primary: { + main: "#e91e63", + focus: "#e91e63", + }, + + secondary: { + main: "#7b809a", + focus: "#8f93a9", + }, + + info: { + main: "#04aaef", + focus: "#1662C4", + }, + + success: { + main: "#4CAF50", + focus: "#67bb6a", + }, + + warning: { + main: "#fb8c00", + focus: "#fc9d26", + }, + + error: { + main: "#F44335", + focus: "#f65f53", + }, + + light: { + main: "#f0f2f5", + focus: "#f0f2f5", + }, + + dark: { + main: "#344767", + focus: "#2c3c58", + }, + + grey: { + 100: "#f8f9fa", + 200: "#f0f2f5", + 300: "#dee2e6", + 400: "#ced4da", + 500: "#adb5bd", + 600: "#6c757d", + 700: "#495057", + 800: "#343a40", + 900: "#212529", + }, + + gradients: { + primary: { + main: "#EC407A", + state: "#D81B60", + }, + + secondary: { + main: "#747b8a", + state: "#495361", + }, + + info: { + main: "#49a3f1", + state: "#04aaef", + }, + + success: { + main: "#66BB6A", + state: "#43A047", + }, + + warning: { + main: "#FFA726", + state: "#FB8C00", + }, + + error: { + main: "#EF5350", + state: "#E53935", + }, + + light: { + main: "#EBEFF4", + state: "#CED4DA", + }, + + dark: { + main: "#42424a", + state: "#191919", + }, + }, + + socialMediaColors: { + facebook: { + main: "#3b5998", + dark: "#344e86", + }, + + twitter: { + main: "#55acee", + dark: "#3ea1ec", + }, + + instagram: { + main: "#125688", + dark: "#0e456d", + }, + + linkedin: { + main: "#0077b5", + dark: "#00669c", + }, + + pinterest: { + main: "#cc2127", + dark: "#b21d22", + }, + + youtube: { + main: "#e52d27", + dark: "#d41f1a", + }, + + vimeo: { + main: "#1ab7ea", + dark: "#13a3d2", + }, + + slack: { + main: "#3aaf85", + dark: "#329874", + }, + + dribbble: { + main: "#ea4c89", + dark: "#e73177", + }, + + github: { + main: "#24292e", + dark: "#171a1d", + }, + + reddit: { + main: "#ff4500", + dark: "#e03d00", + }, + + tumblr: { + main: "#35465c", + dark: "#2a3749", + }, + }, + + badgeColors: { + primary: { + background: "#f8b3ca", + text: "#cc084b", + }, + + secondary: { + background: "#d7d9e1", + text: "#6c757d", + }, + + info: { + background: "#aecef7", + text: "#095bc6", + }, + + success: { + background: "#bce2be", + text: "#339537", + }, + + warning: { + background: "#ffd59f", + text: "#c87000", + }, + + error: { + background: "#fcd3d0", + text: "#f61200", + }, + + light: { + background: "#ffffff", + text: "#c7d3de", + }, + + dark: { + background: "#8097bf", + text: "#1e2e4a", + }, + }, + + coloredShadows: { + primary: "#e91e62", + secondary: "#110e0e", + info: "#00bbd4", + success: "#4caf4f", + warning: "#ff9900", + error: "#f44336", + light: "#adb5bd", + dark: "#404040", + }, + + inputBorderColor: "#d2d6da", + + tabs: { + indicator: { boxShadow: "#ddd" }, + }, +}; + +export default colors; diff --git a/src/qqq/components/Temporary/Theme/base/globals.ts b/src/qqq/components/Temporary/Theme/base/globals.ts new file mode 100644 index 0000000..f392c56 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/base/globals.ts @@ -0,0 +1,41 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +const { info, dark } = colors; + +const globals = { + html: { + scrollBehavior: "smooth", + }, + "*, *::before, *::after": { + margin: 0, + padding: 0, + }, + "a, a:link, a:visited": { + textDecoration: "none !important", + }, + "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { + color: `${dark.main} !important`, + transition: "color 150ms ease-in !important", + }, + "a.link:hover, .link:hover, a.link:focus, .link:focus": { + color: `${info.main} !important`, + }, +}; + +export default globals; diff --git a/src/qqq/components/Temporary/Theme/base/typography.ts b/src/qqq/components/Temporary/Theme/base/typography.ts new file mode 100644 index 0000000..cce492b --- /dev/null +++ b/src/qqq/components/Temporary/Theme/base/typography.ts @@ -0,0 +1,320 @@ +/** +========================================================= +* 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. +*/ + +/** + * The base typography styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new typography style using this file. + * You can customized the typography styles for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { dark } = colors; + +// types +interface DisplayTypes { + fontFamily: string; + color: string; + fontWeight: number; + lineHeight: number; + fontSize: string; +} + +interface Types { + fontFamily: string; + fontWeightLighter: number; + fontWeightLight: number; + fontWeightRegular: number; + fontWeightMedium: number; + fontWeightBold: number; + h1: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h2: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h3: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h4: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h5: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h6: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + subtitle1: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + subtitle2: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + body1: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + body2: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + button: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + textTransform: any; + }; + caption: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + overline: { + fontFamily: string; + }; + d1: DisplayTypes; + d2: DisplayTypes; + d3: DisplayTypes; + d4: DisplayTypes; + d5: DisplayTypes; + d6: DisplayTypes; + size: { + xxs: string; + xs: string; + sm: string; + md: string; + lg: string; + xl: string; + "2xl": string; + "3xl": string; + }; + lineHeight: { + sm: number; + md: number; + lg: number; + }; +} + +const baseProperties = { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeightLighter: 100, + fontWeightLight: 300, + fontWeightRegular: 400, + fontWeightMedium: 600, + fontWeightBold: 700, + fontSizeXXS: pxToRem(10.4), + fontSizeXS: pxToRem(12), + fontSizeSM: pxToRem(14), + fontSizeMD: pxToRem(16), + fontSizeLG: pxToRem(18), + fontSizeXL: pxToRem(20), + fontSize2XL: pxToRem(24), + fontSize3XL: pxToRem(30), +}; + +const baseHeadingProperties = { + fontFamily: baseProperties.fontFamily, + color: dark.main, + fontWeight: baseProperties.fontWeightBold, +}; + +const baseDisplayProperties = { + fontFamily: baseProperties.fontFamily, + color: dark.main, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.2, +}; + +const typography: Types = { + fontFamily: baseProperties.fontFamily, + fontWeightLighter: baseProperties.fontWeightLighter, + fontWeightLight: baseProperties.fontWeightLight, + fontWeightRegular: baseProperties.fontWeightRegular, + fontWeightMedium: baseProperties.fontWeightMedium, + fontWeightBold: baseProperties.fontWeightBold, + + h1: { + fontSize: pxToRem(48), + lineHeight: 1.25, + ...baseHeadingProperties, + }, + + h2: { + fontSize: pxToRem(36), + lineHeight: 1.3, + ...baseHeadingProperties, + }, + + h3: { + fontSize: pxToRem(30), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + + h4: { + fontSize: pxToRem(24), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + + h5: { + fontSize: pxToRem(20), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + + h6: { + fontSize: pxToRem(16), + lineHeight: 1.625, + ...baseHeadingProperties, + }, + + subtitle1: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXL, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.625, + }, + + subtitle2: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeMD, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.6, + }, + + body1: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXL, + fontWeight: baseProperties.fontWeightRegular, + lineHeight: 1.625, + }, + + body2: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeMD, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.6, + }, + + button: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeSM, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.5, + textTransform: "uppercase", + }, + + caption: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXS, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.25, + }, + + overline: { + fontFamily: baseProperties.fontFamily, + }, + + d1: { + fontSize: pxToRem(80), + ...baseDisplayProperties, + }, + + d2: { + fontSize: pxToRem(72), + ...baseDisplayProperties, + }, + + d3: { + fontSize: pxToRem(64), + ...baseDisplayProperties, + }, + + d4: { + fontSize: pxToRem(56), + ...baseDisplayProperties, + }, + + d5: { + fontSize: pxToRem(48), + ...baseDisplayProperties, + }, + + d6: { + fontSize: pxToRem(40), + ...baseDisplayProperties, + }, + + size: { + xxs: baseProperties.fontSizeXXS, + xs: baseProperties.fontSizeXS, + sm: baseProperties.fontSizeSM, + md: baseProperties.fontSizeMD, + lg: baseProperties.fontSizeLG, + xl: baseProperties.fontSizeXL, + "2xl": baseProperties.fontSize2XL, + "3xl": baseProperties.fontSize3XL, + }, + + lineHeight: { + sm: 1.25, + md: 1.5, + lg: 2, + }, +}; + +export default typography; diff --git a/src/qqq/components/Temporary/Theme/components/appBar.ts b/src/qqq/components/Temporary/Theme/components/appBar.ts new file mode 100644 index 0000000..425e419 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/appBar.ts @@ -0,0 +1,31 @@ +/** +========================================================= +* 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. +*/ + +// types +type Types = any; + +const appBar: Types = { + defaultProps: { + color: "transparent", + }, + + styleOverrides: { + root: { + boxShadow: "none", + }, + }, +}; + +export default appBar; diff --git a/src/qqq/components/Temporary/Theme/components/avatar.ts b/src/qqq/components/Temporary/Theme/components/avatar.ts new file mode 100644 index 0000000..8d4b469 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/avatar.ts @@ -0,0 +1,40 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; + +const { borderRadius } = borders; + +// types +type Types = any; + +const avatar: Types = { + styleOverrides: { + root: { + transition: "all 200ms ease-in-out", + }, + + rounded: { + borderRadius: borderRadius.lg, + }, + + img: { + height: "auto", + }, + }, +}; + +export default avatar; diff --git a/src/qqq/components/Temporary/Theme/components/breadcrumbs.ts b/src/qqq/components/Temporary/Theme/components/breadcrumbs.ts new file mode 100644 index 0000000..2df6924 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/breadcrumbs.ts @@ -0,0 +1,39 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +const { grey } = colors; +const { size } = typography; + +// types +type Types = any; + +const breadcrumbs: Types = { + styleOverrides: { + li: { + lineHeight: 0, + }, + + separator: { + fontSize: size.sm, + color: grey[600], + }, + }, +}; + +export default breadcrumbs; diff --git a/src/qqq/components/Temporary/Theme/components/button/contained.ts b/src/qqq/components/Temporary/Theme/components/button/contained.ts new file mode 100644 index 0000000..fb39334 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/button/contained.ts @@ -0,0 +1,91 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { white, text, info, secondary } = colors; +const { size } = typography; + +const contained = { + base: { + backgroundColor: white.main, + minHeight: pxToRem(40), + color: text.main, + padding: `${pxToRem(10)} ${pxToRem(24)}`, + + "&:hover": { + backgroundColor: white.main, + }, + + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + }, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + + small: { + minHeight: pxToRem(32), + padding: `${pxToRem(6)} ${pxToRem(16)}`, + fontSize: size.xs, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + + large: { + minHeight: pxToRem(47), + padding: `${pxToRem(12)} ${pxToRem(28)}`, + fontSize: size.sm, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + + primary: { + backgroundColor: info.main, + + "&:hover": { + backgroundColor: info.main, + }, + + "&:focus:not(:hover)": { + backgroundColor: info.focus, + }, + }, + + secondary: { + backgroundColor: secondary.main, + + "&:hover": { + backgroundColor: secondary.main, + }, + + "&:focus:not(:hover)": { + backgroundColor: secondary.focus, + }, + }, +}; + +export default contained; diff --git a/src/qqq/components/Temporary/Theme/components/button/index.ts b/src/qqq/components/Temporary/Theme/components/button/index.ts new file mode 100644 index 0000000..69fadfc --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/button/index.ts @@ -0,0 +1,49 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React 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"; + +// types +type Types = any; + +const button: Types = { + defaultProps: { + disableRipple: false, + }, + styleOverrides: { + root: { ...root }, + contained: { ...contained.base }, + containedSizeSmall: { ...contained.small }, + containedSizeLarge: { ...contained.large }, + containedPrimary: { ...contained.primary }, + containedSecondary: { ...contained.secondary }, + outlined: { ...outlined.base }, + outlinedSizeSmall: { ...outlined.small }, + outlinedSizeLarge: { ...outlined.large }, + outlinedPrimary: { ...outlined.primary }, + outlinedSecondary: { ...outlined.secondary }, + text: { ...text.base }, + textSizeSmall: { ...text.small }, + textSizeLarge: { ...text.large }, + textPrimary: { ...text.primary }, + textSecondary: { ...text.secondary }, + }, +}; + +export default button; diff --git a/src/qqq/components/Temporary/Theme/components/button/outlined.ts b/src/qqq/components/Temporary/Theme/components/button/outlined.ts new file mode 100644 index 0000000..c324a5d --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/button/outlined.ts @@ -0,0 +1,82 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { transparent, light, info, secondary } = colors; +const { size } = typography; + +const outlined = { + base: { + minHeight: pxToRem(40), + color: light.main, + borderColor: light.main, + padding: `${pxToRem(10)} ${pxToRem(24)}`, + + "&:hover": { + opacity: 0.75, + backgroundColor: transparent.main, + }, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + + small: { + minHeight: pxToRem(32), + padding: `${pxToRem(6)} ${pxToRem(16)}`, + fontSize: size.xs, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + + large: { + minHeight: pxToRem(47), + padding: `${pxToRem(12)} ${pxToRem(28)}`, + fontSize: size.sm, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + + primary: { + backgroundColor: transparent.main, + borderColor: info.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + }, + + secondary: { + backgroundColor: transparent.main, + borderColor: secondary.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + }, +}; + +export default outlined; diff --git a/src/qqq/components/Temporary/Theme/components/button/root.ts b/src/qqq/components/Temporary/Theme/components/button/root.ts new file mode 100644 index 0000000..a713dda --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/button/root.ts @@ -0,0 +1,53 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; +import borders from "assets/theme/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { fontWeightBold, size } = typography; +const { borderRadius } = borders; + +const root = { + display: "inline-flex", + justifyContent: "center", + alignItems: "center", + fontSize: size.xs, + fontWeight: fontWeightBold, + borderRadius: borderRadius.lg, + padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`, + lineHeight: 1.4, + textAlign: "center", + textTransform: "uppercase", + userSelect: "none", + backgroundSize: "150% !important", + backgroundPositionX: "25% !important", + transition: "all 150ms ease-in", + + "&:disabled": { + pointerEvent: "none", + opacity: 0.65, + }, + + "& .material-icons": { + fontSize: pxToRem(15), + marginTop: pxToRem(-2), + }, +}; + +export default root; diff --git a/src/qqq/components/Temporary/Theme/components/button/text.ts b/src/qqq/components/Temporary/Theme/components/button/text.ts new file mode 100644 index 0000000..e4d295d --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/button/text.ts @@ -0,0 +1,104 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { text, info, secondary, transparent } = colors; +const { size } = typography; + +const buttonText = { + base: { + backgroundColor: transparent.main, + minHeight: pxToRem(40), + color: text.main, + boxShadow: "none", + padding: `${pxToRem(10)} ${pxToRem(24)}`, + + "&:hover": { + backgroundColor: transparent.main, + boxShadow: "none", + }, + + "&:focus": { + boxShadow: "none", + }, + + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + boxShadow: "none", + }, + + "&:disabled": { + boxShadow: "none", + }, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + + small: { + minHeight: pxToRem(32), + padding: `${pxToRem(6)} ${pxToRem(16)}`, + fontSize: size.xs, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + + large: { + minHeight: pxToRem(47), + padding: `${pxToRem(12)} ${pxToRem(28)}`, + fontSize: size.sm, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + + primary: { + color: info.main, + + "&:hover": { + color: info.main, + }, + + "&:focus:not(:hover)": { + color: info.focus, + boxShadow: "none", + }, + }, + + secondary: { + color: secondary.main, + + "&:hover": { + color: secondary.main, + }, + + "&:focus:not(:hover)": { + color: secondary.focus, + boxShadow: "none", + }, + }, +}; + +export default buttonText; diff --git a/src/qqq/components/Temporary/Theme/components/buttonBase.ts b/src/qqq/components/Temporary/Theme/components/buttonBase.ts new file mode 100644 index 0000000..f91be4a --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/buttonBase.ts @@ -0,0 +1,25 @@ +/** +========================================================= +* 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. +*/ + +// types +type Types = any; + +const buttonBase: Types = { + defaultProps: { + disableRipple: false, + }, +}; + +export default buttonBase; diff --git a/src/qqq/components/Temporary/Theme/components/card/cardContent.ts b/src/qqq/components/Temporary/Theme/components/card/cardContent.ts new file mode 100644 index 0000000..9f02af3 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/card/cardContent.ts @@ -0,0 +1,32 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +// types +type Types = any; + +const cardContent: Types = { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`, + }, + }, +}; + +export default cardContent; diff --git a/src/qqq/components/Temporary/Theme/components/card/cardMedia.ts b/src/qqq/components/Temporary/Theme/components/card/cardMedia.ts new file mode 100644 index 0000000..da5843f --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/card/cardMedia.ts @@ -0,0 +1,40 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { borderRadius } = borders; + +// types +type Types = any; + +const cardMedia: Types = { + styleOverrides: { + root: { + borderRadius: borderRadius.xl, + margin: `${pxToRem(16)} ${pxToRem(16)} 0`, + }, + + media: { + width: "auto", + }, + }, +}; + +export default cardMedia; diff --git a/src/qqq/components/Temporary/Theme/components/card/index.ts b/src/qqq/components/Temporary/Theme/components/card/index.ts new file mode 100644 index 0000000..eb72fd7 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/card/index.ts @@ -0,0 +1,50 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +// Material Dashboard 2 PRO React Helper Function +import rgba from "assets/theme/functions/rgba"; + +const { black, white } = colors; +const { borderWidth, borderRadius } = borders; +const { md } = boxShadows; + +// types +// types +type Types = any; + +const card: Types = { + styleOverrides: { + root: { + display: "flex", + flexDirection: "column", + position: "relative", + minWidth: 0, + wordWrap: "break-word", + backgroundColor: white.main, + backgroundClip: "border-box", + border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, + borderRadius: borderRadius.xl, + boxShadow: md, + overflow: "visible", + }, + }, +}; + +export default card; diff --git a/src/qqq/components/Temporary/Theme/components/container.ts b/src/qqq/components/Temporary/Theme/components/container.ts new file mode 100644 index 0000000..c41d078 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/container.ts @@ -0,0 +1,77 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import breakpoints from "assets/theme/base/breakpoints"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +// types +type Types = any; + +const { + values: { sm, md, lg, xl, xxl }, +} = breakpoints; + +const SM = `@media (min-width: ${sm}px)`; +const MD = `@media (min-width: ${md}px)`; +const LG = `@media (min-width: ${lg}px)`; +const XL = `@media (min-width: ${xl}px)`; +const XXL = `@media (min-width: ${xxl}px)`; + +const sharedClasses = { + paddingRight: `${pxToRem(24)} !important`, + paddingLeft: `${pxToRem(24)} !important`, + marginRight: "auto !important", + marginLeft: "auto !important", + width: "100% !important", + position: "relative", +}; + +const container: Types = { + [SM]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "540px !important", + }, + }, + [MD]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "720px !important", + }, + }, + [LG]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "960px !important", + }, + }, + [XL]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "1140px !important", + }, + }, + [XXL]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "1320px !important", + }, + }, +}; + +export default container; diff --git a/src/qqq/components/Temporary/Theme/components/dialog/dialogActions.ts b/src/qqq/components/Temporary/Theme/components/dialog/dialogActions.ts new file mode 100644 index 0000000..5d672f1 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/dialog/dialogActions.ts @@ -0,0 +1,30 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +// types +type Types = any; + +const dialogActions: Types = { + styleOverrides: { + root: { + padding: pxToRem(16), + }, + }, +}; + +export default dialogActions; diff --git a/src/qqq/components/Temporary/Theme/components/dialog/dialogContent.ts b/src/qqq/components/Temporary/Theme/components/dialog/dialogContent.ts new file mode 100644 index 0000000..04a3609 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/dialog/dialogContent.ts @@ -0,0 +1,46 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { size } = typography; +const { text } = colors; +const { borderWidth, borderColor } = borders; + +// types +type Types = any; + +const dialogContent: Types = { + styleOverrides: { + root: { + padding: pxToRem(16), + fontSize: size.md, + color: text.main, + }, + + dividers: { + borderTop: `${borderWidth[1]} solid ${borderColor}`, + borderBottom: `${borderWidth[1]} solid ${borderColor}`, + }, + }, +}; + +export default dialogContent; diff --git a/src/qqq/components/Temporary/Theme/components/dialog/dialogContentText.ts b/src/qqq/components/Temporary/Theme/components/dialog/dialogContentText.ts new file mode 100644 index 0000000..c3a8b50 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/dialog/dialogContentText.ts @@ -0,0 +1,35 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; +import colors from "assets/theme/base/colors"; + +const { size } = typography; +const { text } = colors; + +// types +type Types = any; + +const dialogContentText: Types = { + styleOverrides: { + root: { + fontSize: size.md, + color: text.main, + }, + }, +}; + +export default dialogContentText; diff --git a/src/qqq/components/Temporary/Theme/components/dialog/dialogTitle.ts b/src/qqq/components/Temporary/Theme/components/dialog/dialogTitle.ts new file mode 100644 index 0000000..331b319 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/dialog/dialogTitle.ts @@ -0,0 +1,36 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { size } = typography; + +// types +type Types = any; + +const dialogTitle: Types = { + styleOverrides: { + root: { + padding: pxToRem(16), + fontSize: size.xl, + }, + }, +}; + +export default dialogTitle; diff --git a/src/qqq/components/Temporary/Theme/components/dialog/index.ts b/src/qqq/components/Temporary/Theme/components/dialog/index.ts new file mode 100644 index 0000000..08cbc4c --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/dialog/index.ts @@ -0,0 +1,39 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +const { borderRadius } = borders; +const { xxl } = boxShadows; + +// types +type Types = any; + +const dialog: Types = { + styleOverrides: { + paper: { + borderRadius: borderRadius.lg, + boxShadow: xxl, + }, + + paperFullScreen: { + borderRadius: 0, + }, + }, +}; + +export default dialog; diff --git a/src/qqq/components/Temporary/Theme/components/divider.ts b/src/qqq/components/Temporary/Theme/components/divider.ts new file mode 100644 index 0000000..3cc9846 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/divider.ts @@ -0,0 +1,71 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import rgba from "assets/theme/functions/rgba"; +import pxToRem from "assets/theme/functions/pxToRem"; + +const { dark, transparent, white } = colors; + +// types +type Types = any; + +const divider: Types = { + styleOverrides: { + root: { + backgroundColor: transparent.main, + backgroundImage: `linear-gradient(to right, ${rgba(dark.main, 0)}, ${rgba( + dark.main, + 0.4 + )}, ${rgba(dark.main, 0)}) !important`, + height: pxToRem(1), + margin: `${pxToRem(16)} 0`, + borderBottom: "none", + opacity: 0.25, + }, + + vertical: { + backgroundColor: transparent.main, + backgroundImage: `linear-gradient(to bottom, ${rgba(dark.main, 0)}, ${rgba( + dark.main, + 0.4 + )}, ${rgba(dark.main, 0)}) !important`, + width: pxToRem(1), + height: "100%", + margin: `0 ${pxToRem(16)}`, + borderRight: "none", + }, + + light: { + backgroundColor: transparent.main, + backgroundImage: `linear-gradient(to right, ${rgba(white.main, 0)}, ${white.main}, ${rgba( + white.main, + 0 + )}) !important`, + + "&.MuiDivider-vertical": { + backgroundImage: `linear-gradient(to bottom, ${rgba(white.main, 0)}, ${white.main}, ${rgba( + white.main, + 0 + )}) !important`, + }, + }, + }, +}; + +export default divider; diff --git a/src/qqq/components/Temporary/Theme/components/flatpickr.ts b/src/qqq/components/Temporary/Theme/components/flatpickr.ts new file mode 100644 index 0000000..15e5a0a --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/flatpickr.ts @@ -0,0 +1,58 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import rgba from "assets/theme/functions/rgba"; + +const { info, white, gradients } = colors; + +// types +type Types = any; + +const flatpickr: Types = { + ".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus": + { + background: rgba(info.main, 0.28), + border: "none", + }, + + ".flatpickr-day.today": { + background: info.main, + color: white.main, + border: "none", + + "&:hover, &:focus": { + background: `${info.focus} !important`, + }, + }, + + ".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus": + { + background: `${gradients.info.state} !important`, + color: white.main, + border: "none", + }, + + ".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg": + { + color: `${info.main} !important`, + fill: `${info.main} !important`, + }, +}; + +export default flatpickr; diff --git a/src/qqq/components/Temporary/Theme/components/form/autocomplete.ts b/src/qqq/components/Temporary/Theme/components/form/autocomplete.ts new file mode 100644 index 0000000..ed002bc --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/form/autocomplete.ts @@ -0,0 +1,103 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import 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"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { lg } = boxShadows; +const { size } = typography; +const { text, white, transparent, light, dark, gradients } = colors; +const { borderRadius } = borders; + +// types +type Types = any; + +const autocomplete: Types = { + styleOverrides: { + popper: { + boxShadow: lg, + padding: pxToRem(8), + fontSize: size.sm, + color: text.main, + textAlign: "left", + backgroundColor: `${white.main} !important`, + borderRadius: borderRadius.md, + }, + + paper: { + boxShadow: "none", + backgroundColor: transparent.main, + }, + + option: { + padding: `${pxToRem(4.8)} ${pxToRem(16)}`, + borderRadius: borderRadius.md, + fontSize: size.sm, + color: text.main, + transition: "background-color 300ms ease, color 300ms ease", + + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: light.main, + color: dark.main, + }, + + '&[aria-selected="true"]': { + backgroundColor: `${light.main} !important`, + color: `${dark.main} !important`, + }, + }, + + noOptions: { + fontSize: size.sm, + color: text.main, + }, + + groupLabel: { + color: dark.main, + }, + + loading: { + fontSize: size.sm, + color: text.main, + }, + + tag: { + display: "flex", + alignItems: "center", + height: "auto", + padding: pxToRem(4), + backgroundColor: gradients.dark.state, + color: white.main, + + "& .MuiChip-label": { + lineHeight: 1.2, + padding: `0 ${pxToRem(10)} 0 ${pxToRem(4)}`, + }, + + "& .MuiSvgIcon-root, & .MuiSvgIcon-root:hover, & .MuiSvgIcon-root:focus": { + color: white.main, + marginRight: 0, + }, + }, + }, +}; + +export default autocomplete; diff --git a/src/qqq/components/Temporary/Theme/components/form/checkbox.ts b/src/qqq/components/Temporary/Theme/components/form/checkbox.ts new file mode 100644 index 0000000..825bc12 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/form/checkbox.ts @@ -0,0 +1,86 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; +import colors from "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"; + +const { borderWidth, borderColor } = borders; +const { transparent, info } = colors; + +// types +type Types = any; + +const checkbox: Types = { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + backgroundPosition: "center", + backgroundSize: "contain", + backgroundRepeat: "no-repeat", + width: pxToRem(20), + height: pxToRem(20), + color: transparent.main, + border: `${borderWidth[1]} solid ${borderColor}`, + borderRadius: pxToRem(5.6), + }, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "&.Mui-focusVisible": { + border: `${borderWidth[2]} solid ${info.main} !important`, + }, + }, + + colorPrimary: { + color: borderColor, + + "&.Mui-checked": { + color: info.main, + + "& .MuiSvgIcon-root": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient( + info.main, + info.main + )}`, + borderColor: info.main, + }, + }, + }, + + colorSecondary: { + color: borderColor, + + "& .MuiSvgIcon-root": { + color: info.main, + "&.Mui-checked": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient( + info.main, + info.main + )}`, + borderColor: info.main, + }, + }, + }, + }, +}; + +export default checkbox; diff --git a/src/qqq/components/Temporary/Theme/components/form/formControlLabel.ts b/src/qqq/components/Temporary/Theme/components/form/formControlLabel.ts new file mode 100644 index 0000000..e807e1e --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/form/formControlLabel.ts @@ -0,0 +1,53 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { dark } = colors; +const { size, fontWeightBold } = typography; + +// types +type Types = any; + +const formControlLabel: Types = { + styleOverrides: { + root: { + display: "block", + minHeight: pxToRem(24), + marginBottom: pxToRem(2), + }, + + label: { + display: "inline-block", + fontSize: size.sm, + fontWeight: fontWeightBold, + color: dark.main, + lineHeight: 1, + transform: `translateY(${pxToRem(1)})`, + marginLeft: pxToRem(4), + + "&.Mui-disabled": { + color: dark.main, + }, + }, + }, +}; + +export default formControlLabel; diff --git a/src/qqq/components/Temporary/Theme/components/form/formLabel.ts b/src/qqq/components/Temporary/Theme/components/form/formLabel.ts new file mode 100644 index 0000000..028f5b2 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/form/formLabel.ts @@ -0,0 +1,32 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +const { text } = colors; + +// types +type Types = any; + +const formLabel: Types = { + styleOverrides: { + root: { + color: text.main, + }, + }, +}; + +export default formLabel; diff --git a/src/qqq/components/Temporary/Theme/components/form/input.ts b/src/qqq/components/Temporary/Theme/components/form/input.ts new file mode 100644 index 0000000..6a6f3bc --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/form/input.ts @@ -0,0 +1,49 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; +import borders from "assets/theme/base/borders"; + +const { info, inputBorderColor, dark } = colors; +const { size } = typography; +const { borderWidth } = borders; + +// types +type Types = any; + +const input: Types = { + styleOverrides: { + root: { + fontSize: size.sm, + color: dark.main, + + "&:hover:not(.Mui-disabled):before": { + borderBottom: `${borderWidth[1]} solid ${inputBorderColor}`, + }, + + "&:before": { + borderColor: inputBorderColor, + }, + + "&:after": { + borderColor: info.main, + }, + }, + }, +}; + +export default input; diff --git a/src/qqq/components/Temporary/Theme/components/form/inputLabel.ts b/src/qqq/components/Temporary/Theme/components/form/inputLabel.ts new file mode 100644 index 0000000..7cf8d03 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/form/inputLabel.ts @@ -0,0 +1,63 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +const { text, info } = colors; +const { size } = typography; + +// types +type Types = any; + +const inputLabel: Types = { + styleOverrides: { + root: { + fontSize: size.sm, + color: text.main, + lineHeight: 0.9, + + "&.Mui-focused": { + color: info.main, + }, + + "&.MuiInputLabel-shrink": { + lineHeight: 1.5, + fontSize: size.md, + + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.85em", + }, + }, + }, + + sizeSmall: { + fontSize: size.xs, + lineHeight: 1.625, + + "&.MuiInputLabel-shrink": { + lineHeight: 1.6, + fontSize: size.sm, + + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.72em", + }, + }, + }, + }, +}; + +export default inputLabel; diff --git a/src/qqq/components/Temporary/Theme/components/form/inputOutlined.ts b/src/qqq/components/Temporary/Theme/components/form/inputOutlined.ts new file mode 100644 index 0000000..c14fd51 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/form/inputOutlined.ts @@ -0,0 +1,71 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import typography from "assets/theme/base/typography"; + +// // Material Dashboard 2 PRO React TSUI Dashboard PRO helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { inputBorderColor, info, grey, transparent } = colors; +const { borderRadius } = borders; +const { size } = typography; + +// types +type Types = any; + +const inputOutlined: Types = { + styleOverrides: { + root: { + backgroundColor: transparent.main, + fontSize: size.sm, + borderRadius: borderRadius.md, + + "&:hover .MuiOutlinedInput-notchedOutline": { + borderColor: inputBorderColor, + }, + + "&.Mui-focused": { + "& .MuiOutlinedInput-notchedOutline": { + borderColor: info.main, + }, + }, + }, + + notchedOutline: { + borderColor: inputBorderColor, + }, + + input: { + color: grey[700], + padding: pxToRem(12), + backgroundColor: transparent.main, + }, + + inputSizeSmall: { + fontSize: size.xs, + padding: pxToRem(10), + }, + + multiline: { + color: grey[700], + padding: 0, + }, + }, +}; + +export default inputOutlined; diff --git a/src/qqq/components/Temporary/Theme/components/form/radio.ts b/src/qqq/components/Temporary/Theme/components/form/radio.ts new file mode 100644 index 0000000..c6153e0 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/form/radio.ts @@ -0,0 +1,100 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; +import colors from "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"; + +const { borderWidth, borderColor } = borders; +const { transparent, info } = colors; + +// types +type Types = any; + +const radio: Types = { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + width: pxToRem(20), + height: pxToRem(20), + color: transparent.main, + border: `${borderWidth[1]} solid ${borderColor}`, + borderRadius: "50%", + }, + + "&:after": { + transition: "opacity 250ms ease-in-out", + content: `""`, + position: "absolute", + width: pxToRem(14), + height: pxToRem(14), + borderRadius: "50%", + backgroundImage: linearGradient(info.main, info.main), + opacity: 0, + left: 0, + right: 0, + top: 0, + bottom: 0, + margin: "auto", + }, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "&.Mui-focusVisible": { + border: `${borderWidth[2]} solid ${info.main} !important`, + }, + }, + + colorPrimary: { + color: borderColor, + + "&.Mui-checked": { + color: info.main, + + "& .MuiSvgIcon-root": { + borderColor: info.main, + }, + + "&:after": { + opacity: 1, + }, + }, + }, + + colorSecondary: { + color: borderColor, + + "&.Mui-checked": { + color: info.main, + + "& .MuiSvgIcon-root": { + borderColor: info.main, + }, + + "&:after": { + opacity: 1, + }, + }, + }, + }, +}; + +export default radio; diff --git a/src/qqq/components/Temporary/Theme/components/form/select.ts b/src/qqq/components/Temporary/Theme/components/form/select.ts new file mode 100644 index 0000000..e23e59e --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/form/select.ts @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { transparent } = colors; + +// types +type Types = any; + +const select: Types = { + styleOverrides: { + select: { + display: "grid", + alignItems: "center", + padding: `0 ${pxToRem(12)} !important`, + + "& .Mui-selected": { + backgroundColor: transparent.main, + }, + }, + + selectMenu: { + background: "none", + height: "none", + minHeight: "none", + overflow: "unset", + }, + + icon: { + display: "none", + }, + }, +}; + +export default select; diff --git a/src/qqq/components/Temporary/Theme/components/form/switchButton.ts b/src/qqq/components/Temporary/Theme/components/form/switchButton.ts new file mode 100644 index 0000000..6897a94 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/form/switchButton.ts @@ -0,0 +1,90 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "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"; + +const { white, gradients, grey, transparent } = colors; +const { borderWidth } = borders; +const { md } = boxShadows; + +// types +type Types = any; + +const switchButton: Types = { + defaultProps: { + disableRipple: false, + }, + + styleOverrides: { + switchBase: { + color: gradients.dark.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "&.Mui-checked": { + color: gradients.dark.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "& .MuiSwitch-thumb": { + borderColor: `${gradients.dark.main} !important`, + }, + + "& + .MuiSwitch-track": { + backgroundColor: `${gradients.dark.main} !important`, + borderColor: `${gradients.dark.main} !important`, + opacity: 1, + }, + }, + + "&.Mui-disabled + .MuiSwitch-track": { + opacity: "0.3 !important", + }, + + "&.Mui-focusVisible .MuiSwitch-thumb": { + backgroundImage: linearGradient(gradients.info.main, gradients.info.state), + }, + }, + + thumb: { + backgroundColor: white.main, + boxShadow: md, + border: `${borderWidth[1]} solid ${grey[400]}`, + }, + + track: { + width: pxToRem(32), + height: pxToRem(15), + backgroundColor: grey[400], + border: `${borderWidth[1]} solid ${grey[400]}`, + opacity: 1, + }, + + checked: {}, + }, +}; + +export default switchButton; diff --git a/src/qqq/components/Temporary/Theme/components/form/textField.ts b/src/qqq/components/Temporary/Theme/components/form/textField.ts new file mode 100644 index 0000000..0358b09 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/form/textField.ts @@ -0,0 +1,32 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +const { transparent } = colors; + +// types +type Types = any; + +const textField: Types = { + styleOverrides: { + root: { + backgroundColor: transparent.main, + }, + }, +}; + +export default textField; diff --git a/src/qqq/components/Temporary/Theme/components/icon.ts b/src/qqq/components/Temporary/Theme/components/icon.ts new file mode 100644 index 0000000..9170ea3 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/icon.ts @@ -0,0 +1,43 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +// types +type Types = any; + +const icon: Types = { + defaultProps: { + baseClassName: "material-icons-round", + fontSize: "inherit", + }, + + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + + fontSizeSmall: { + fontSize: `${pxToRem(20)} !important`, + }, + + fontSizeLarge: { + fontSize: `${pxToRem(36)} !important`, + }, + }, +}; + +export default icon; diff --git a/src/qqq/components/Temporary/Theme/components/iconButton.ts b/src/qqq/components/Temporary/Theme/components/iconButton.ts new file mode 100644 index 0000000..4a9e513 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/iconButton.ts @@ -0,0 +1,34 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +const { transparent } = colors; + +// types +type Types = any; + +const iconButton: Types = { + styleOverrides: { + root: { + "&:hover": { + backgroundColor: transparent.main, + }, + }, + }, +}; + +export default iconButton; diff --git a/src/qqq/components/Temporary/Theme/components/linearProgress.ts b/src/qqq/components/Temporary/Theme/components/linearProgress.ts new file mode 100644 index 0000000..7b71257 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/linearProgress.ts @@ -0,0 +1,56 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { borderRadius } = borders; +const { light } = colors; + +// types +type Types = any; + +const linearProgress: Types = { + styleOverrides: { + root: { + height: pxToRem(6), + borderRadius: borderRadius.md, + overflow: "visible", + position: "relative", + }, + + colorPrimary: { + backgroundColor: light.main, + }, + + colorSecondary: { + backgroundColor: light.main, + }, + + bar: { + height: pxToRem(6), + borderRadius: borderRadius.sm, + position: "absolute", + transform: `translate(0, 0) !important`, + transition: "width 0.6s ease !important", + }, + }, +}; + +export default linearProgress; diff --git a/src/qqq/components/Temporary/Theme/components/link.ts b/src/qqq/components/Temporary/Theme/components/link.ts new file mode 100644 index 0000000..0aaf207 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/link.ts @@ -0,0 +1,26 @@ +/** +========================================================= +* 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. +*/ + +// types +type Types = any; + +const link: Types = { + defaultProps: { + underline: "none", + color: "inherit", + }, +}; + +export default link; diff --git a/src/qqq/components/Temporary/Theme/components/list/index.ts b/src/qqq/components/Temporary/Theme/components/list/index.ts new file mode 100644 index 0000000..cddfdae --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/list/index.ts @@ -0,0 +1,28 @@ +/** +========================================================= +* 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. +*/ + +// types +type Types = any; + +const list: Types = { + styleOverrides: { + padding: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; + +export default list; diff --git a/src/qqq/components/Temporary/Theme/components/list/listItem.ts b/src/qqq/components/Temporary/Theme/components/list/listItem.ts new file mode 100644 index 0000000..bcd022c --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/list/listItem.ts @@ -0,0 +1,32 @@ +/** +========================================================= +* 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. +*/ + +// types +type Types = any; + +const listItem: Types = { + defaultProps: { + disableGutters: true, + }, + + styleOverrides: { + root: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; + +export default listItem; diff --git a/src/qqq/components/Temporary/Theme/components/list/listItemText.ts b/src/qqq/components/Temporary/Theme/components/list/listItemText.ts new file mode 100644 index 0000000..7ca6d40 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/list/listItemText.ts @@ -0,0 +1,28 @@ +/** +========================================================= +* 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. +*/ + +// types +type Types = any; + +const listItemText: Types = { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + }, + }, +}; + +export default listItemText; diff --git a/src/qqq/components/Temporary/Theme/components/menu/index.ts b/src/qqq/components/Temporary/Theme/components/menu/index.ts new file mode 100644 index 0000000..68c6795 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/menu/index.ts @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import 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"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { lg } = boxShadows; +const { size } = typography; +const { text, white } = colors; +const { borderRadius } = borders; + +// types +type Types = any; + +const menu: Types = { + defaultProps: { + disableAutoFocusItem: true, + }, + + styleOverrides: { + paper: { + minWidth: pxToRem(160), + boxShadow: lg, + padding: `${pxToRem(16)} ${pxToRem(8)}`, + fontSize: size.sm, + color: text.main, + textAlign: "left", + backgroundColor: `${white.main} !important`, + borderRadius: borderRadius.md, + }, + }, +}; + +export default menu; diff --git a/src/qqq/components/Temporary/Theme/components/menu/menuItem.ts b/src/qqq/components/Temporary/Theme/components/menu/menuItem.ts new file mode 100644 index 0000000..e9a62e0 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/menu/menuItem.ts @@ -0,0 +1,50 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import typography from "assets/theme/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { light, text, dark } = colors; +const { borderRadius } = borders; +const { size } = typography; + +// types +type Types = any; + +const menuItem: Types = { + styleOverrides: { + root: { + minWidth: pxToRem(160), + minHeight: "unset", + padding: `${pxToRem(4.8)} ${pxToRem(16)}`, + borderRadius: borderRadius.md, + fontSize: size.sm, + color: text.main, + transition: "background-color 300ms ease, color 300ms ease", + + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: light.main, + color: dark.main, + }, + }, + }, +}; + +export default menuItem; diff --git a/src/qqq/components/Temporary/Theme/components/popover.ts b/src/qqq/components/Temporary/Theme/components/popover.ts new file mode 100644 index 0000000..8e41af5 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/popover.ts @@ -0,0 +1,42 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "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"; + +const { transparent } = colors; +const { lg } = boxShadows; +const { borderRadius } = borders; + +// types +type Types = any; + +const popover: Types = { + styleOverrides: { + paper: { + backgroundColor: transparent.main, + boxShadow: lg, + padding: pxToRem(8), + borderRadius: borderRadius.md, + }, + }, +}; + +export default popover; diff --git a/src/qqq/components/Temporary/Theme/components/sidenav.ts b/src/qqq/components/Temporary/Theme/components/sidenav.ts new file mode 100644 index 0000000..f97505a --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/sidenav.ts @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { white } = colors; +const { borderRadius } = borders; + +// types +type Types = any; + +const sidenav: Types = { + styleOverrides: { + root: { + width: pxToRem(250), + whiteSpace: "nowrap", + border: "none", + }, + + paper: { + width: pxToRem(250), + backgroundColor: white.main, + height: `calc(100vh - ${pxToRem(32)})`, + margin: pxToRem(16), + borderRadius: borderRadius.xl, + border: "none", + }, + + paperAnchorDockedLeft: { + borderRight: "none", + }, + }, +}; + +export default sidenav; diff --git a/src/qqq/components/Temporary/Theme/components/slider.ts b/src/qqq/components/Temporary/Theme/components/slider.ts new file mode 100644 index 0000000..0c034c7 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/slider.ts @@ -0,0 +1,84 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "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"; + +const { grey, white, black, info } = colors; +const { borderRadius, borderWidth } = borders; +const { sliderBoxShadow } = boxShadows; + +// types +type Types = any; + +const slider: Types = { + styleOverrides: { + root: { + width: "100%", + + "& .MuiSlider-active, & .Mui-focusVisible": { + boxShadow: "none !important", + }, + + "& .MuiSlider-valueLabel": { + color: black.main, + }, + }, + + rail: { + height: pxToRem(2), + background: grey[200], + borderRadius: borderRadius.sm, + opacity: 1, + }, + + track: { + background: info.main, + height: pxToRem(2), + position: "relative", + border: "none", + borderRadius: borderRadius.lg, + zIndex: 1, + }, + + thumb: { + width: pxToRem(14), + height: pxToRem(14), + backgroundColor: white.main, + zIndex: 10, + boxShadow: sliderBoxShadow.thumb, + border: `${borderWidth[1]} solid ${info.main}`, + transition: "all 200ms linear", + + "&:hover": { + boxShadow: "none", + }, + + "&:active": { + transform: "translate(-50%, -50%) scale(1.4)", + }, + + "&.Mui-active": { boxShadow: boxShadow([0, 0], [0, 14], info.main, 0.16) }, + }, + }, +}; + +export default slider; diff --git a/src/qqq/components/Temporary/Theme/components/stepper/index.ts b/src/qqq/components/Temporary/Theme/components/stepper/index.ts new file mode 100644 index 0000000..d3c9827 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/stepper/index.ts @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "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"; + +const { transparent, gradients } = colors; +const { borderRadius } = borders; +const { colored } = boxShadows; + +// types +type Types = any; + +const stepper: Types = { + styleOverrides: { + root: { + background: linearGradient(gradients.info.main, gradients.info.state), + padding: `${pxToRem(24)} 0 ${pxToRem(16)}`, + borderRadius: borderRadius.lg, + boxShadow: colored.info, + + "&.MuiPaper-root": { + backgroundColor: transparent.main, + }, + }, + }, +}; + +export default stepper; diff --git a/src/qqq/components/Temporary/Theme/components/stepper/step.ts b/src/qqq/components/Temporary/Theme/components/stepper/step.ts new file mode 100644 index 0000000..ebab7a5 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/stepper/step.ts @@ -0,0 +1,30 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +// types +type Types = any; + +const step: Types = { + styleOverrides: { + root: { + padding: `0 ${pxToRem(6)}`, + }, + }, +}; + +export default step; diff --git a/src/qqq/components/Temporary/Theme/components/stepper/stepConnector.ts b/src/qqq/components/Temporary/Theme/components/stepper/stepConnector.ts new file mode 100644 index 0000000..0bd6828 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/stepper/stepConnector.ts @@ -0,0 +1,55 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +const { white } = colors; +const { borderWidth } = borders; + +// types +type Types = any; + +const stepConnector: Types = { + styleOverrides: { + root: { + color: "#9fc9ff", + transition: "all 200ms linear", + + "&.Mui-active": { + color: white.main, + }, + + "&.Mui-completed": { + color: white.main, + }, + }, + + alternativeLabel: { + top: "14%", + left: "-50%", + right: "50%", + }, + + line: { + borderWidth: `${borderWidth[2]} !important`, + borderColor: "currentColor", + opacity: 0.5, + }, + }, +}; + +export default stepConnector; diff --git a/src/qqq/components/Temporary/Theme/components/stepper/stepIcon.ts b/src/qqq/components/Temporary/Theme/components/stepper/stepIcon.ts new file mode 100644 index 0000000..50a8bf3 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/stepper/stepIcon.ts @@ -0,0 +1,60 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; +import boxShadow from "assets/theme/functions/boxShadow"; + +const { white } = colors; + +// types +type Types = any; + +const stepIcon: Types = { + styleOverrides: { + root: { + background: "#9fc9ff", + fill: "#9fc9ff", + stroke: "#9fc9ff", + strokeWidth: pxToRem(10), + width: pxToRem(13), + height: pxToRem(13), + borderRadius: "50%", + zIndex: 99, + transition: "all 200ms linear", + + "&.Mui-active": { + background: white.main, + fill: white.main, + stroke: white.main, + borderColor: white.main, + boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), + }, + + "&.Mui-completed": { + background: white.main, + fill: white.main, + stroke: white.main, + borderColor: white.main, + boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), + }, + }, + }, +}; + +export default stepIcon; diff --git a/src/qqq/components/Temporary/Theme/components/stepper/stepLabel.ts b/src/qqq/components/Temporary/Theme/components/stepper/stepLabel.ts new file mode 100644 index 0000000..93867a2 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/stepper/stepLabel.ts @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; +import colors from "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"; + +const { size, fontWeightRegular } = typography; +const { white } = colors; + +// types +type Types = any; + +const stepLabel: Types = { + styleOverrides: { + label: { + marginTop: `${pxToRem(8)} !important`, + fontWeight: fontWeightRegular, + fontSize: size.xs, + color: "#9fc9ff", + textTransform: "uppercase", + + "&.Mui-active": { + fontWeight: `${fontWeightRegular} !important`, + color: `${rgba(white.main, 0.8)} !important`, + }, + + "&.Mui-completed": { + fontWeight: `${fontWeightRegular} !important`, + color: `${rgba(white.main, 0.8)} !important`, + }, + }, + }, +}; + +export default stepLabel; diff --git a/src/qqq/components/Temporary/Theme/components/svgIcon.ts b/src/qqq/components/Temporary/Theme/components/svgIcon.ts new file mode 100644 index 0000000..627602c --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/svgIcon.ts @@ -0,0 +1,42 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +// types +type Types = any; + +const svgIcon: Types = { + defaultProps: { + fontSize: "inherit", + }, + + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + + fontSizeSmall: { + fontSize: `${pxToRem(20)} !important`, + }, + + fontSizeLarge: { + fontSize: `${pxToRem(36)} !important`, + }, + }, +}; + +export default svgIcon; diff --git a/src/qqq/components/Temporary/Theme/components/table/tableCell.ts b/src/qqq/components/Temporary/Theme/components/table/tableCell.ts new file mode 100644 index 0000000..982f3bb --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/table/tableCell.ts @@ -0,0 +1,38 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { borderWidth } = borders; +const { light } = colors; + +// types +type Types = any; + +const tableCell: Types = { + styleOverrides: { + root: { + padding: `${pxToRem(12)} ${pxToRem(16)}`, + borderBottom: `${borderWidth[1]} solid ${light.main}`, + }, + }, +}; + +export default tableCell; diff --git a/src/qqq/components/Temporary/Theme/components/table/tableContainer.ts b/src/qqq/components/Temporary/Theme/components/table/tableContainer.ts new file mode 100644 index 0000000..3095fe7 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/table/tableContainer.ts @@ -0,0 +1,38 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import boxShadows from "assets/theme/base/boxShadows"; +import borders from "assets/theme/base/borders"; + +const { white } = colors; +const { md } = boxShadows; +const { borderRadius } = borders; + +// types +type Types = any; + +const tableContainer: Types = { + styleOverrides: { + root: { + backgroundColor: white.main, + boxShadow: md, + borderRadius: borderRadius.xl, + }, + }, +}; + +export default tableContainer; diff --git a/src/qqq/components/Temporary/Theme/components/table/tableHead.ts b/src/qqq/components/Temporary/Theme/components/table/tableHead.ts new file mode 100644 index 0000000..167f024 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/table/tableHead.ts @@ -0,0 +1,37 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { borderRadius } = borders; + +// types +type Types = any; + +const tableHead: Types = { + styleOverrides: { + root: { + display: "block", + padding: `${pxToRem(16)} ${pxToRem(16)} 0 ${pxToRem(16)}`, + borderRadius: `${borderRadius.xl} ${borderRadius.xl} 0 0`, + }, + }, +}; + +export default tableHead; diff --git a/src/qqq/components/Temporary/Theme/components/tabs/index.ts b/src/qqq/components/Temporary/Theme/components/tabs/index.ts new file mode 100644 index 0000000..d85b14a --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/tabs/index.ts @@ -0,0 +1,68 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { grey, white } = colors; +const { borderRadius } = borders; +const { tabsBoxShadow } = boxShadows; + +// types +type Types = any; + +const tabs: Types = { + styleOverrides: { + root: { + position: "relative", + backgroundColor: grey[100], + borderRadius: borderRadius.xl, + minHeight: "unset", + padding: pxToRem(4), + }, + + flexContainer: { + height: "100%", + position: "relative", + zIndex: 10, + }, + + fixed: { + overflow: "unset !important", + overflowX: "unset !important", + }, + + vertical: { + "& .MuiTabs-indicator": { + width: "100%", + }, + }, + + indicator: { + height: "100%", + borderRadius: borderRadius.lg, + backgroundColor: white.main, + boxShadow: tabsBoxShadow.indicator, + transition: "all 500ms ease", + }, + }, +}; + +export default tabs; diff --git a/src/qqq/components/Temporary/Theme/components/tabs/tab.ts b/src/qqq/components/Temporary/Theme/components/tabs/tab.ts new file mode 100644 index 0000000..a878fe6 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/tabs/tab.ts @@ -0,0 +1,68 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { size, fontWeightRegular } = typography; +const { borderRadius } = borders; +const { dark } = colors; + +// types +type Types = any; + +const tab: Types = { + styleOverrides: { + root: { + display: "flex", + alignItems: "center", + flexDirection: "row", + flex: "1 1 auto", + textAlign: "center", + maxWidth: "unset !important", + minWidth: "unset !important", + minHeight: "unset !important", + fontSize: size.md, + fontWeight: fontWeightRegular, + textTransform: "none", + lineHeight: "inherit", + padding: pxToRem(4), + borderRadius: borderRadius.lg, + color: `${dark.main} !important`, + opacity: "1 !important", + + "& .material-icons, .material-icons-round": { + marginBottom: "0 !important", + marginRight: pxToRem(6), + }, + + "& svg": { + marginBottom: "0 !important", + marginRight: pxToRem(6), + }, + }, + + labelIcon: { + paddingTop: pxToRem(4), + }, + }, +}; + +export default tab; diff --git a/src/qqq/components/Temporary/Theme/components/tooltip.ts b/src/qqq/components/Temporary/Theme/components/tooltip.ts new file mode 100644 index 0000000..ee9862a --- /dev/null +++ b/src/qqq/components/Temporary/Theme/components/tooltip.ts @@ -0,0 +1,59 @@ +/** +========================================================= +* 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 Fade from "@mui/material/Fade"; + +// 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"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { black, light } = colors; +const { size, fontWeightRegular } = typography; +const { borderRadius } = borders; + +// types +type Types = any; + +const tooltip: Types = { + defaultProps: { + arrow: true, + TransitionComponent: Fade, + }, + + styleOverrides: { + tooltip: { + maxWidth: pxToRem(200), + backgroundColor: black.main, + color: light.main, + fontSize: size.sm, + fontWeight: fontWeightRegular, + textAlign: "center", + borderRadius: borderRadius.md, + opacity: 0.7, + padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`, + }, + + arrow: { + color: black.main, + }, + }, +}; + +export default tooltip; diff --git a/src/qqq/components/Temporary/Theme/functions/boxShadow.ts b/src/qqq/components/Temporary/Theme/functions/boxShadow.ts new file mode 100644 index 0000000..a4e7d08 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/functions/boxShadow.ts @@ -0,0 +1,40 @@ +/** +========================================================= +* 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. +*/ + +/** + The boxShadow() function helps you to create a box shadow for an element + */ + +// Material Dashboard 2 PRO React TS Helper Functions +import rgba from "assets/theme/functions/rgba"; +import pxToRem from "assets/theme/functions/pxToRem"; + +function boxShadow( + offset: number[], + radius: number[], + color: string, + opacity: number, + inset: string = "" +): string { + const [x, y] = offset; + const [blur, spread] = radius; + + return `${inset} ${pxToRem(x)} ${pxToRem(y)} ${pxToRem(blur)} ${pxToRem(spread)} ${rgba( + color, + opacity + )}`; +} + +export default boxShadow; diff --git a/src/qqq/components/Temporary/Theme/functions/gradientChartLine.ts b/src/qqq/components/Temporary/Theme/functions/gradientChartLine.ts new file mode 100644 index 0000000..78310e5 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/functions/gradientChartLine.ts @@ -0,0 +1,35 @@ +/** +========================================================= +* 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. +*/ + +/** + The gradientChartLine() function helps you to create a gradient color for the chart line + */ + +// Material Dashboard 2 PRO React TS Helper Functions +import rgba from "assets/theme/functions/rgba"; + +function gradientChartLine(chart: any, color: string, opacity: number = 0.2): any { + const ctx = chart.getContext("2d"); + const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50); + const primaryColor = rgba(color, opacity).toString(); + + gradientStroke.addColorStop(1, primaryColor); + gradientStroke.addColorStop(0.2, "rgba(72, 72, 176, 0.0)"); + gradientStroke.addColorStop(0, "rgba(203, 12, 159, 0)"); + + return gradientStroke; +} + +export default gradientChartLine; diff --git a/src/qqq/components/Temporary/Theme/functions/hexToRgb.ts b/src/qqq/components/Temporary/Theme/functions/hexToRgb.ts new file mode 100644 index 0000000..fc13aeb --- /dev/null +++ b/src/qqq/components/Temporary/Theme/functions/hexToRgb.ts @@ -0,0 +1,28 @@ +/** +========================================================= +* 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. +*/ + +/** + The hexToRgb() function helps you to change the hex color code to rgb + using chroma-js library. + */ + +// chroma-js is a library for all kinds of color conversions and color scales. +import chroma from "chroma-js"; + +function hexToRgb(color: string): string { + return chroma(color).rgb().join(", "); +} + +export default hexToRgb; diff --git a/src/qqq/components/Temporary/Theme/functions/linearGradient.ts b/src/qqq/components/Temporary/Theme/functions/linearGradient.ts new file mode 100644 index 0000000..4c562c5 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/functions/linearGradient.ts @@ -0,0 +1,24 @@ +/** +========================================================= +* 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. +*/ + +/** + The linearGradient() function helps you to create a linear gradient color background + */ + +function linearGradient(color: string, colorState: string, angle: number = 195): string { + return `linear-gradient(${angle}deg, ${color}, ${colorState})`; +} + +export default linearGradient; diff --git a/src/qqq/components/Temporary/Theme/functions/pxToRem.ts b/src/qqq/components/Temporary/Theme/functions/pxToRem.ts new file mode 100644 index 0000000..35e8103 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/functions/pxToRem.ts @@ -0,0 +1,24 @@ +/** +========================================================= +* 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. +*/ + +/** + The pxToRem() function helps you to convert a px unit into a rem unit, + */ + +function pxToRem(number: number, baseNumber: number = 16): string { + return `${number / baseNumber}rem`; +} + +export default pxToRem; diff --git a/src/qqq/components/Temporary/Theme/functions/rgba.ts b/src/qqq/components/Temporary/Theme/functions/rgba.ts new file mode 100644 index 0000000..d914902 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/functions/rgba.ts @@ -0,0 +1,28 @@ +/** +========================================================= +* 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. +*/ + +/** + The rgba() function helps you to create a rgba color code, it uses the hexToRgb() function + to convert the hex code into rgb for using it inside the rgba color format. + */ + +// Material Dashboard 2 PRO React TS Helper Functions +import hexToRgb from "assets/theme/functions/hexToRgb"; + +function rgba(color: string, opacity: number): string { + return `rgba(${hexToRgb(color)}, ${opacity})`; +} + +export default rgba; diff --git a/src/qqq/components/Temporary/Theme/index.ts b/src/qqq/components/Temporary/Theme/index.ts new file mode 100644 index 0000000..d04ba7a --- /dev/null +++ b/src/qqq/components/Temporary/Theme/index.ts @@ -0,0 +1,159 @@ +/** +========================================================= +* 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 }, + }, +}); diff --git a/src/qqq/components/Temporary/Theme/theme-rtl.ts b/src/qqq/components/Temporary/Theme/theme-rtl.ts new file mode 100644 index 0000000..6ba1cf5 --- /dev/null +++ b/src/qqq/components/Temporary/Theme/theme-rtl.ts @@ -0,0 +1,161 @@ +/** +========================================================= +* 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 }, + }, +}); diff --git a/src/qqq/components/Temporary/colors.ts b/src/qqq/components/Temporary/colors.ts new file mode 100644 index 0000000..a8b6076 --- /dev/null +++ b/src/qqq/components/Temporary/colors.ts @@ -0,0 +1,388 @@ +/* + * 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 . + */ + +interface ColorsTypes { + main: string; + focus: string; +} + +interface GradientsTypes { + main: string; + state: string; +} + +interface SocialMediaColorsTypes { + main: string; + dark: string; +} + +interface BadgeColorsTypes { + background: string; + text: string; +} + +interface Types { + background: + | { + default: string; + sidenav?: string; + card?: string; + } + | any; + white: + | { + main: string; + focus: string; + } + | any; + text: + | { + main: string; + focus: string; + primary?: string; + secondary?: string; + disabled?: string; + } + | any; + transparent: + | { + main: string; + } + | any; + black: + | { + light: string; + main: string; + focus: string; + } + | any; + primary: ColorsTypes | any; + secondary: ColorsTypes | any; + info: ColorsTypes | any; + success: ColorsTypes | any; + warning: ColorsTypes | any; + error: ColorsTypes | any; + light: ColorsTypes | any; + dark: ColorsTypes | any; + grey: + | { + [key: string | number]: string; + } + | any; + gradients: + | { + primary: GradientsTypes; + secondary: GradientsTypes; + info: GradientsTypes; + success: GradientsTypes; + warning: GradientsTypes; + error: GradientsTypes; + light: GradientsTypes; + dark: GradientsTypes; + } + | any; + socialMediaColors: + | { + facebook: SocialMediaColorsTypes; + twitter: SocialMediaColorsTypes; + instagram: SocialMediaColorsTypes; + linkedin: SocialMediaColorsTypes; + pinterest: SocialMediaColorsTypes; + youtube: SocialMediaColorsTypes; + vimeo: SocialMediaColorsTypes; + slack: SocialMediaColorsTypes; + dribbble: SocialMediaColorsTypes; + github: SocialMediaColorsTypes; + reddit: SocialMediaColorsTypes; + tumblr: SocialMediaColorsTypes; + } + | any; + badgeColors: + | { + primary: BadgeColorsTypes; + secondary: BadgeColorsTypes; + info: BadgeColorsTypes; + success: BadgeColorsTypes; + warning: BadgeColorsTypes; + error: BadgeColorsTypes; + light: BadgeColorsTypes; + dark: BadgeColorsTypes; + } + | any; + coloredShadows: + | { + [key: string]: string; + } + | any; + inputBorderColor: string; + tabs: + | { + indicator: + | { + boxShadow: string; + } + | any; + } + | any; +} + +const colors: Types = { + background: { + default: "#f0f2f5", + }, + + text: { + main: "#7b809a", + focus: "#7b809a", + }, + + transparent: { + main: "transparent", + }, + + white: { + main: "#ffffff", + focus: "#ffffff", + }, + + black: { + light: "#000000", + main: "#000000", + focus: "#000000", + }, + + primary: { + main: "#e91e63", + focus: "#e91e63", + }, + + secondary: { + main: "#7b809a", + focus: "#8f93a9", + }, + + info: { + main: "#04aaef", + focus: "#1662C4", + }, + + success: { + main: "#4CAF50", + focus: "#67bb6a", + }, + + warning: { + main: "#fb8c00", + focus: "#fc9d26", + }, + + error: { + main: "#F44335", + focus: "#f65f53", + }, + + light: { + main: "#f0f2f5", + focus: "#f0f2f5", + }, + + dark: { + main: "#344767", + focus: "#2c3c58", + }, + + grey: { + 100: "#f8f9fa", + 200: "#f0f2f5", + 300: "#dee2e6", + 400: "#ced4da", + 500: "#adb5bd", + 600: "#6c757d", + 700: "#495057", + 800: "#343a40", + 900: "#212529", + }, + + gradients: { + primary: { + main: "#EC407A", + state: "#D81B60", + }, + + secondary: { + main: "#747b8a", + state: "#495361", + }, + + info: { + main: "#49a3f1", + state: "#04aaef", + }, + + success: { + main: "#66BB6A", + state: "#43A047", + }, + + warning: { + main: "#FFA726", + state: "#FB8C00", + }, + + error: { + main: "#EF5350", + state: "#E53935", + }, + + light: { + main: "#EBEFF4", + state: "#CED4DA", + }, + + dark: { + main: "#42424a", + state: "#191919", + }, + }, + + socialMediaColors: { + facebook: { + main: "#3b5998", + dark: "#344e86", + }, + + twitter: { + main: "#55acee", + dark: "#3ea1ec", + }, + + instagram: { + main: "#125688", + dark: "#0e456d", + }, + + linkedin: { + main: "#0077b5", + dark: "#00669c", + }, + + pinterest: { + main: "#cc2127", + dark: "#b21d22", + }, + + youtube: { + main: "#e52d27", + dark: "#d41f1a", + }, + + vimeo: { + main: "#1ab7ea", + dark: "#13a3d2", + }, + + slack: { + main: "#3aaf85", + dark: "#329874", + }, + + dribbble: { + main: "#ea4c89", + dark: "#e73177", + }, + + github: { + main: "#24292e", + dark: "#171a1d", + }, + + reddit: { + main: "#ff4500", + dark: "#e03d00", + }, + + tumblr: { + main: "#35465c", + dark: "#2a3749", + }, + }, + + badgeColors: { + primary: { + background: "#f8b3ca", + text: "#cc084b", + }, + + secondary: { + background: "#d7d9e1", + text: "#6c757d", + }, + + info: { + background: "#aecef7", + text: "#095bc6", + }, + + success: { + background: "#bce2be", + text: "#339537", + }, + + warning: { + background: "#ffd59f", + text: "#c87000", + }, + + error: { + background: "#fcd3d0", + text: "#f61200", + }, + + light: { + background: "#ffffff", + text: "#c7d3de", + }, + + dark: { + background: "#8097bf", + text: "#1e2e4a", + }, + }, + + coloredShadows: { + primary: "#e91e62", + secondary: "#110e0e", + info: "#00bbd4", + success: "#4caf4f", + warning: "#ff9900", + error: "#f44336", + light: "#adb5bd", + dark: "#404040", + }, + + inputBorderColor: "#d2d6da", + + tabs: { + indicator: {boxShadow: "#ddd"}, + }, +}; + +export default colors; diff --git a/src/qqq/components/Temporary/typography.ts b/src/qqq/components/Temporary/typography.ts new file mode 100644 index 0000000..6377387 --- /dev/null +++ b/src/qqq/components/Temporary/typography.ts @@ -0,0 +1,324 @@ +/* + * 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 . + */ + + +import colors from "qqq/components/Temporary/colors"; + +function pxToRem(number: number, baseNumber: number = 16): string +{ + return `${number / baseNumber}rem`; +} + +const {dark} = colors; + +// types +interface DisplayTypes +{ + fontFamily: string; + color: string; + fontWeight: number; + lineHeight: number; + fontSize: string; +} + +interface Types +{ + fontFamily: string; + fontWeightLighter: number; + fontWeightLight: number; + fontWeightRegular: number; + fontWeightMedium: number; + fontWeightBold: number; + h1: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h2: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h3: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h4: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h5: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h6: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + subtitle1: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + subtitle2: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + body1: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + body2: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + button: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + textTransform: any; + }; + caption: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + overline: { + fontFamily: string; + }; + d1: DisplayTypes; + d2: DisplayTypes; + d3: DisplayTypes; + d4: DisplayTypes; + d5: DisplayTypes; + d6: DisplayTypes; + size: { + xxs: string; + xs: string; + sm: string; + md: string; + lg: string; + xl: string; + "2xl": string; + "3xl": string; + }; + lineHeight: { + sm: number; + md: number; + lg: number; + }; +} + +const baseProperties = { + fontFamily: "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif", + fontWeightLighter: 100, + fontWeightLight: 300, + fontWeightRegular: 400, + fontWeightMedium: 600, + fontWeightBold: 700, + fontSizeXXS: pxToRem(10.4), + fontSizeXS: pxToRem(12), + fontSizeSM: pxToRem(14), + fontSizeMD: pxToRem(16), + fontSizeLG: pxToRem(18), + fontSizeXL: pxToRem(20), + fontSize2XL: pxToRem(24), + fontSize3XL: pxToRem(30), +}; + +const baseHeadingProperties = { + fontFamily: baseProperties.fontFamily, + color: dark.main, + fontWeight: baseProperties.fontWeightBold, +}; + +const baseDisplayProperties = { + fontFamily: baseProperties.fontFamily, + color: dark.main, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.2, +}; + +const typography: Types = { + fontFamily: baseProperties.fontFamily, + fontWeightLighter: baseProperties.fontWeightLighter, + fontWeightLight: baseProperties.fontWeightLight, + fontWeightRegular: baseProperties.fontWeightRegular, + fontWeightMedium: baseProperties.fontWeightMedium, + fontWeightBold: baseProperties.fontWeightBold, + + h1: { + fontSize: pxToRem(48), + lineHeight: 1.25, + ...baseHeadingProperties, + }, + + h2: { + fontSize: pxToRem(36), + lineHeight: 1.3, + ...baseHeadingProperties, + }, + + h3: { + fontSize: pxToRem(30), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + + h4: { + fontSize: pxToRem(24), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + + h5: { + fontSize: pxToRem(20), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + + h6: { + fontSize: pxToRem(16), + lineHeight: 1.625, + ...baseHeadingProperties, + }, + + subtitle1: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXL, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.625, + }, + + subtitle2: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeMD, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.6, + }, + + body1: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXL, + fontWeight: baseProperties.fontWeightRegular, + lineHeight: 1.625, + }, + + body2: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeMD, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.6, + }, + + button: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeSM, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.5, + textTransform: "uppercase", + }, + + caption: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXS, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.25, + }, + + overline: { + fontFamily: baseProperties.fontFamily, + }, + + d1: { + fontSize: pxToRem(80), + ...baseDisplayProperties, + }, + + d2: { + fontSize: pxToRem(72), + ...baseDisplayProperties, + }, + + d3: { + fontSize: pxToRem(64), + ...baseDisplayProperties, + }, + + d4: { + fontSize: pxToRem(56), + ...baseDisplayProperties, + }, + + d5: { + fontSize: pxToRem(48), + ...baseDisplayProperties, + }, + + d6: { + fontSize: pxToRem(40), + ...baseDisplayProperties, + }, + + size: { + xxs: baseProperties.fontSizeXXS, + xs: baseProperties.fontSizeXS, + sm: baseProperties.fontSizeSM, + md: baseProperties.fontSizeMD, + lg: baseProperties.fontSizeLG, + xl: baseProperties.fontSizeXL, + "2xl": baseProperties.fontSize2XL, + "3xl": baseProperties.fontSize3XL, + }, + + lineHeight: { + sm: 1.25, + md: 1.5, + lg: 2, + }, +}; + +export default typography; diff --git a/src/qqq/images/carrier-logos/axlehire.png b/src/qqq/images/carrier-logos/axlehire.png new file mode 100644 index 0000000..8cf44a1 Binary files /dev/null and b/src/qqq/images/carrier-logos/axlehire.png differ diff --git a/src/qqq/images/carrier-logos/cdl.png b/src/qqq/images/carrier-logos/cdl.png new file mode 100644 index 0000000..b03c8fb Binary files /dev/null and b/src/qqq/images/carrier-logos/cdl.png differ diff --git a/src/qqq/images/carrier-logos/dhl.png b/src/qqq/images/carrier-logos/dhl.png new file mode 100644 index 0000000..c930da4 Binary files /dev/null and b/src/qqq/images/carrier-logos/dhl.png differ diff --git a/src/qqq/images/carrier-logos/fedex.jpeg b/src/qqq/images/carrier-logos/fedex.jpeg new file mode 100644 index 0000000..cb72914 Binary files /dev/null and b/src/qqq/images/carrier-logos/fedex.jpeg differ diff --git a/src/qqq/images/carrier-logos/fedex.png b/src/qqq/images/carrier-logos/fedex.png new file mode 100644 index 0000000..f26a71c Binary files /dev/null and b/src/qqq/images/carrier-logos/fedex.png differ diff --git a/src/qqq/images/carrier-logos/lso.png b/src/qqq/images/carrier-logos/lso.png new file mode 100644 index 0000000..304ca8c Binary files /dev/null and b/src/qqq/images/carrier-logos/lso.png differ diff --git a/src/qqq/images/carrier-logos/ontrac.png b/src/qqq/images/carrier-logos/ontrac.png new file mode 100644 index 0000000..498f97b Binary files /dev/null and b/src/qqq/images/carrier-logos/ontrac.png differ diff --git a/src/qqq/images/carrier-logos/ups.png b/src/qqq/images/carrier-logos/ups.png new file mode 100644 index 0000000..0d8046c Binary files /dev/null and b/src/qqq/images/carrier-logos/ups.png differ diff --git a/src/qqq/images/logo-blue.png b/src/qqq/images/logo-blue.png new file mode 100644 index 0000000..ad772a5 Binary files /dev/null and b/src/qqq/images/logo-blue.png differ diff --git a/src/qqq/images/logo.png b/src/qqq/images/logo.png new file mode 100644 index 0000000..d594bc6 Binary files /dev/null and b/src/qqq/images/logo.png differ diff --git a/src/qqq/images/warehouses/edison_nj.jpg b/src/qqq/images/warehouses/edison_nj.jpg new file mode 100644 index 0000000..c0030e3 Binary files /dev/null and b/src/qqq/images/warehouses/edison_nj.jpg differ diff --git a/src/qqq/images/warehouses/patterson.jpg b/src/qqq/images/warehouses/patterson.jpg new file mode 100644 index 0000000..e950c28 Binary files /dev/null and b/src/qqq/images/warehouses/patterson.jpg differ diff --git a/src/qqq/images/warehouses/stockton.jpg b/src/qqq/images/warehouses/stockton.jpg new file mode 100644 index 0000000..a43da46 Binary files /dev/null and b/src/qqq/images/warehouses/stockton.jpg differ diff --git a/src/qqq/pages/app-home/index.tsx b/src/qqq/pages/app-home/index.tsx index 7cda0a4..c5961c6 100644 --- a/src/qqq/pages/app-home/index.tsx +++ b/src/qqq/pages/app-home/index.tsx @@ -1,5 +1,4 @@ -/* - * QQQ - Low-code Application Framework for Engineers. +/* 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 @@ -19,30 +18,28 @@ * along with this program. If not, see . */ +import {QAppMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppMetaData"; +import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType"; +import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance"; +import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData"; +import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData"; +import {Icon} from "@mui/material"; +import Card from "@mui/material/Card"; +import Grid from "@mui/material/Grid"; import React, {useEffect, useState} from "react"; import {Link, useLocation} from "react-router-dom"; - -// Material Dashboard 2 PRO React TS examples components -import QClient from "qqq/utils/QClient"; -import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance"; -import {QAppMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppMetaData"; import BaseLayout from "qqq/components/BaseLayout"; -import MDBox from "components/MDBox"; -import Grid from "@mui/material/Grid"; -import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCard"; -import {Icon} from "@mui/material"; -import MDTypography from "components/MDTypography"; -import Card from "@mui/material/Card"; -import ComplexStatisticsCard from "examples/Cards/StatisticsCards/ComplexStatisticsCard"; -import ReportsLineChart from "examples/Charts/LineCharts/ReportsLineChart"; -import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart"; -import MDBadgeDot from "components/MDBadgeDot"; -import ReportsBarChart from "examples/Charts/BarCharts/ReportsBarChart"; -import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData"; -import {QAppNodeType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppNodeType"; -import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData"; -import DefaultInfoCard from "examples/Cards/InfoCards/DefaultInfoCard"; import ProcessLinkCard from "qqq/components/ProcessLinkCard"; +import DefaultInfoCard from "qqq/components/Temporary/DefaultInfoCard"; +import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot"; +import MDBox from "qqq/components/Temporary/MDBox"; +import MDTypography from "qqq/components/Temporary/MDTypography"; +import MiniStatisticsCard from "qqq/components/Temporary/MiniStatisticsCard"; +import BarChart from "qqq/pages/dashboards/Widgets/BarChart"; +import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart"; +import SmallLineChart from "qqq/pages/dashboards/Widgets/SmallLineChart"; +import QClient from "qqq/utils/QClient"; +import LineChart from "../dashboards/Widgets/LineChart"; const qController = QClient.getInstance(); @@ -57,6 +54,9 @@ function AppHome({app}: Props): JSX.Element const [tables, setTables] = useState([] as QTableMetaData[]); const [processes, setProcesses] = useState([] as QProcessMetaData[]); const [childApps, setChildApps] = useState([] as QAppMetaData[]); + const [tableCounts, setTableCounts] = useState(new Map()); + const [updatedTableCounts, setUpdatedTableCounts] = useState(new Date()); + const [widgets, setWidgets] = useState([] as any[]); const location = useLocation(); @@ -102,154 +102,212 @@ function AppHome({app}: Props): JSX.Element setTables(newTables); setProcesses(newProcesses); setChildApps(newChildApps); + + const tableCounts = new Map(); + newTables.forEach((table) => + { + tableCounts.set(table.name, {isLoading: true, value: null}); + + setTimeout(async () => + { + const count = await qController.count(table.name); + tableCounts.set(table.name, {isLoading: false, value: count}); + setTableCounts(tableCounts); + setUpdatedTableCounts(new Date()); + }, 1); + }); + setTableCounts(tableCounts); + + console.log(app.widgets); + if (app.widgets) + { + const widgets: any[] = []; + for (let i = 0; i < app.widgets.length; i++) + { + widgets[i] = {}; + setTimeout(async () => + { + const widget = await qController.widget(app.widgets[i]); + widgets[i] = widget; + setUpdatedTableCounts(new Date()); + }, 1); + } + setWidgets(widgets); + } }, [qInstance, location]); - const reportsBarChartData = { - labels: ["M", "T", "W", "T", "F", "S", "S"], - datasets: {label: "Sales", data: [50, 20, 10, 22, 50, 10, 40]}, - }; - - interface Types { - labels: string[]; - datasets: { - label: string; - color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; - data: number[]; - }[]; - } - - const demoLineChartData: Types = { - labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], - datasets: [ - { - label: "Facebook Ads", - color: "info", - data: [50, 100, 200, 190, 400, 350, 500, 450, 700], + /* + const charts = [ + { + type: "barChart", + title: "Parcel Invoice Lines per Month", + barChartData: { + labels: ["Feb 22", "Mar 22", "Apr 22", "May 22", "Jun 22", "Jul 22", "Aug 22"], + datasets: {label: "Parcel Invoice Lines", data: [50000, 22000, 11111, 22333, 40404, 9876, 2355]}, }, - { - label: "Google Ads", - color: "dark", - data: [10, 30, 40, 120, 150, 220, 280, 250, 280], + }, + { + type: "lineChart", + title: "Total Charges by Carrier per Month", + lineChartData: { + labels: ["Feb 22", "Mar 22", "Apr 22", "May 22", "Jun 22", "Jul 22", "Aug 22"], + datasets: [ + {label: "UPS", color: "info", data: [50000, 22000, 11111, 22333, 40404, 9876, 2355]}, + {label: "FedEx", color: "dark", data: [5000, 22000, 31111, 32333, 20404, 19876, 24355]}, + {label: "LSO", color: "error", data: [500, 2200, 1111, 2333, 404, 17876, 2355]}, + ], }, - ], - }; + }, + ]; + */ + + console.log(`Widgets: ${widgets} and tables: ${tables}`); + + const haveWidgets = widgets && widgets.length; + const widgetCount = widgets ? widgets.length : 0; + + // eslint-disable-next-line no-nested-ternary + const tileSizeLg = (widgetCount === 0 ? 3 : widgetCount === 1 ? 4 : 6); return ( - - - - - - - - - - - - - - - - - - - - - )} - chart={demoLineChartData} - /> - - - - - - - { - tables.length ? ( - - - - Tables - - - {tables.map((table) => ( - - - - {table.iconName || app.iconName}}} - direction="right" + { + widgetCount > 0 ? ( + + + { + widgets.map((chart, i) => ( + + + { + chart.type === "quickSightChart" && ( + + ) + } + { + chart.type === "barChart" && ( + - - - - ))} - - - - ) : null - } + ) + } + { + chart.type === "lineChart" && ( + + + { + chart.lineChartData.datasets.map((dataSet: any) => ( + + )) + } + + + + )} + chart={chart.lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }} + /> + ) + } + + + )) + } + + + ) : null + } - { - processes.length ? ( - - - - Processes + { + tables.length > 0 || processes.length > 0 || childApps.length > 0 ? ( + // eslint-disable-next-line no-nested-ternary + + { + tables.length ? ( + + + + Tables + + + {tables.map((table) => ( + + + + {table.iconName || app.iconName}}} + direction="right" + /> + + + + ))} + + - - {processes.map((process) => ( - - - - - - ))} - - - - ) : null - } + ) : null + } - { - childApps.length ? ( - - - - {childApps.map((childApp) => ( - - - - + { + processes.length ? ( + + + + Processes + + + {processes.map((process) => ( + + + + + + ))} - ))} - - - - ) : null - } - + + + ) : null + } + + { + childApps.length ? ( + + + + Apps + + + {childApps.map((childApp) => ( + + + + + + ))} + + + + ) : null + } + + ) : null + } diff --git a/src/qqq/pages/dashboards/CarrierPerformance.tsx b/src/qqq/pages/dashboards/CarrierPerformance.tsx new file mode 100644 index 0000000..b7df12c --- /dev/null +++ b/src/qqq/pages/dashboards/CarrierPerformance.tsx @@ -0,0 +1,234 @@ +/* + * 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 . + */ + +import {Title} from "@mui/icons-material"; +import {Icon} from "@mui/material"; +import Card from "@mui/material/Card"; +import Grid from "@mui/material/Grid"; +import Menu from "@mui/material/Menu"; +import MenuItem from "@mui/material/MenuItem"; +import React, {useState} from "react"; +import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart"; +import DashboardLayout from "examples/LayoutContainers/DashboardLayout"; +import DataTable from "examples/Tables/DataTable"; +import Footer from "qqq/components/Footer"; +import Navbar from "qqq/components/Navbar"; +import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot"; +import MDBox from "qqq/components/Temporary/MDBox"; +import MDTypography from "qqq/components/Temporary/MDTypography"; +import ShipmentsByWarehouseTable from "qqq/pages/dashboards/Tables/ShipmentsByWarehouseTable"; +import carrierSpendData from "qqq/pages/dashboards/Widgets/Data/CarrierSpendData"; +import carrierVolumeLineChartData from "qqq/pages/dashboards/Widgets/Data/CarrierVolumeLineChartData"; +import smallShipmentsByWarehouseData from "qqq/pages/dashboards/Widgets/Data/SmallShipmentsByWarehouseData"; +import timeInTransitBarChartData from "qqq/pages/dashboards/Widgets/Data/TimeInTransitBarChartData"; +import ShipmentsByCarrierPieChart from "qqq/pages/dashboards/Widgets/ShipmentsByChannelPieChart"; +import SimpleStatisticsCard from "qqq/pages/dashboards/Widgets/SimpleStatisticsCard"; +import HorizontalBarChart from "./Widgets/HorizontalBarChart"; + +function CarrierPerformance(): JSX.Element +{ + const openArrowIcon = "arrow_drop_down"; + const closeArrowIcon = "arrow_drop_up"; + + const [shipmentsDropdownValue, setShipmentsDropdownValue] = useState("Last 30 Days"); + const [deliveriesDropdownValue, setDeliveriesDropdownValue] = useState("Last 30 Days"); + const [failuresDropdownValue, setFailuresDropdownValue] = useState("Last 30 Days"); + + const [shipmentsDropdown, setShipmentsDropdown] = useState(null); + const [deliveriesDropdown, setDeliveriesDropdown] = useState(null); + const [failuresDropdown, setFailuresDropdown] = useState(null); + + const [shipmentsDropdownIcon, setShipmentsDropdownIcon] = useState(openArrowIcon); + const [deliveriesDropdownIcon, setDeliveriesDropdownIcon] = useState(openArrowIcon); + const [failuresDropdownIcon, setFailuresDropdownIcon] = useState(openArrowIcon); + + const openShipmentsDropdown = ({currentTarget}: any) => + { + setShipmentsDropdown(currentTarget); + setShipmentsDropdownIcon(closeArrowIcon); + } + const closeShipmentsDropdown = ({currentTarget}: any) => + { + setShipmentsDropdown(null); + setShipmentsDropdownValue(currentTarget.innerText || shipmentsDropdownValue); + setShipmentsDropdownIcon(openArrowIcon); + }; + const openDeliveriesDropdown = ({currentTarget}: any) => + { + setDeliveriesDropdown(currentTarget); + setDeliveriesDropdownIcon(closeArrowIcon) + } + const closeDeliveriesDropdown = ({currentTarget}: any) => + { + setDeliveriesDropdown(null); + setDeliveriesDropdownValue(currentTarget.innerText || shipmentsDropdownValue); + setDeliveriesDropdownIcon(openArrowIcon); + }; + const openFailuresDropdown = ({currentTarget}: any) => + { + setFailuresDropdown(currentTarget); + setFailuresDropdownIcon(closeArrowIcon) + } + const closeFailuresDropdown = ({currentTarget}: any) => + { + setFailuresDropdown(null); + setFailuresDropdownValue(currentTarget.innerText || shipmentsDropdownValue); + setFailuresDropdownIcon(openArrowIcon); + }; + + // Dropdown menu template for the DefaultStatisticsCard + const renderMenu = (state: any, open: any, close: any, icon: string) => ( + + {icon} + + Last 7 days + Last week + Last 30 days + + + ); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + } + chart={carrierVolumeLineChartData} + /> + + + + + + + + + Spend by Carrier YTD + + + + + + + + + + + + + + + + + + + +