diff --git a/package.json b/package.json index 36fc9c7..2c95987 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,6 @@ "version": "0.1.0", "private": true, "dependencies": { - "@babel/plugin-proposal-optional-chaining": "^7.21.0", "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@floating-ui/react": "^0.26.9", @@ -19,56 +18,35 @@ "@mui/x-data-grid": "^6.16.2", "@mui/x-date-pickers": "^6.10.1", "@nivo/line": "^0.83.0", - "@nivo/pie": "^0.84.0", "@stripe/react-stripe-js": "^2.1.1", "@stripe/stripe-js": "^1.54.2", - "auth0-js": "^9.22.1", "axios": "^1.4.0", "chroma-js": "^2.4.2", "date-fns": "^2.30.0", - "dayjs": "^1.11.9", - "downshift": "^9.0.1", - "image-downloader": "^4.3.0", "jwt-decode": "^3.1.2", "lodash": "^4.17.21", - "lodash.set": "^4.3.2", - "logrocket": "^8.1.0", - "material-ui-image": "^3.3.2", "mathjs": "^12.4.1", - "moment": "^2.29.4", "nanoid": "^5.0.7", "notistack": "^3.0.1", - "pino": "^8.20.0", - "polished": "^4.3.1", - "react": "^17.0.0 || ^18.0.0", + "react": "^18.3.1", "react-cookie": "^4.1.1", "react-device-detect": "^2.2.3", - "react-dom": "^17.0.0 || ^18.0.0", + "react-dom": "^18.3.1", "react-error-boundary": "^4.0.13", "react-helmet": "^6.1.0", + "react-helmet-async": "^2.0.4", "react-hook-form": "^7.50.0", "react-icons": "^4.10.1", - "react-if": "^4.1.5", - "react-material-ui-carousel": "^3.4.2", "react-perfect-scrollbar": "^1.5.8", - "react-pro-sidebar": "^1.1.0-alpha.1", - "react-responsive-carousel": "^3.2.23", "react-router-dom": "^6.17.0", - "react-scale-text": "^1.2.2", - "react-scripts": "5.0.1", "react-scroll-parallax": "^3.4.5", - "react-slick": "^0.29.0", - "react-spinners": "^0.13.8", "react-spring": "^9.7.3", "react-stripe-checkout": "^2.6.3", - "react-swipeable-views": "^0.14.0", "react-table": "^7.8.0", "react-transition-group": "^4.4.5", "react-virtualized": "^9.22.5", "recharts": "^2.12.3", "sass": "^1.69.7", - "shortid": "^2.2.16", - "slick-carousel": "^1.8.1", "stripe": "^12.14.0", "styled-components": "^6.1.8", "swiper": "^11.0.6", @@ -101,11 +79,13 @@ ] }, "devDependencies": { + "@babel/plugin-proposal-optional-chaining": "^7.21.0", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "eslint": "^8.46.0", "eslint-config-prettier": "^8.9.0", "eslint-plugin-prettier": "^5.0.0", "http-proxy-middleware": "^2.0.6", - "prettier": "^3.0.0" + "prettier": "^3.0.0", + "react-scripts": "5.0.1" } } diff --git a/src/App.js b/src/App.js index 1e08836..a51e866 100644 --- a/src/App.js +++ b/src/App.js @@ -1,64 +1,90 @@ // App.js -import React, { Suspense, lazy } from 'react'; +import React, { Suspense, lazy, useEffect } from 'react'; +import { Route, Routes, useNavigate } from 'react-router-dom'; + import './assets/css/index.css'; import './assets/css/card.css'; import './assets/css/page.css'; -import useManageCookies from 'context/hooks/useManageCookies'; -import useConfigurator from 'context/hooks/useConfigurator'; -import PageLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout'; -import Navigation from 'layout/navigation'; -import Configurator from 'layout/REUSABLE_COMPONENTS/Configurator'; import { CSSTransition, TransitionGroup } from 'react-transition-group'; -import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/utils/system-utils/LoadingOverlay'; -import { Route, Routes } from 'react-router-dom'; -import PrivateRoute from 'layout/navigation/PrivateRoute'; -import LoginDialog from 'pages/LoginDialog'; +import LoginDialog from 'layout/dialogs/LoginDialog'; +import Navigation from 'layout/navigation'; import { ROUTE_CONFIG } from 'data'; +import { + Configurator, + LoadingOverlay, + PageLayout, +} from 'layout/REUSABLE_COMPONENTS'; +import { + useUserData, + useConfigurator, + useManageCookies, + useMode, +} from 'context'; +import { ThemeProvider } from 'styled-components'; +import { CssBaseline } from '@mui/material'; // ==============================|| APP ||============================== // + +const PrivateRoute = ({ children }) => { + const { user } = useUserData(); + const navigate = useNavigate(); + useEffect(() => { + if (user === null) { + navigate('/login', { replace: true }); + } + }, [navigate, user]); + + return children; +}; + const LazyRoute = ({ componentName, ...rest }) => { const Component = lazy(() => import(`./pages/${componentName}`)); return ; }; const App = () => { const { getCookie } = useManageCookies(); + const { theme } = useMode(); const { isLoggedIn } = getCookie(['isLoggedIn']); const { isConfiguratorOpen } = useConfigurator(); return ( - - - {isConfiguratorOpen && } - - - }> - - {ROUTE_CONFIG.routes.map( - ({ path, componentName, isPrivate }, index) => ( - + + + {/* */} + + + {isConfiguratorOpen && } + + + }> + + {ROUTE_CONFIG.routes.map( + ({ path, componentName, isPrivate }, index) => ( + + + + ) : ( - - ) : ( - - ) - } - /> - ) - )} - - - - - - + ) + } + /> + ) + )} + + + + + + + ); }; diff --git a/src/assets/themeSettings.jsx b/src/assets/themeSettings.jsx new file mode 100644 index 0000000..040dc63 --- /dev/null +++ b/src/assets/themeSettings.jsx @@ -0,0 +1,69 @@ +import { + boxShadow, + hexToRgba, + hexToRgb, + linearGradient, + pxToRem, + rgba, +} from './themes'; +import { + breakpoints, + colors, + borders, + boxShadows, + typography, + palette, +} from './themes'; +import { Transitions } from './themes'; +import components from './themes/components'; + +export const themeSettings = (mode) => { + return { + functions: { + boxShadow, + hexToRgb, + hexToRgba, + linearGradient, + pxToRem, + rgba, + }, + palette: { + ...colors, + mode: mode, + }, + newPalette: { + ...palette, + mode: mode, + }, + components: { + ...components, + }, + breakpoints: breakpoints.values, + Transitions: Transitions, + borders: borders, + boxShadows: boxShadows, + typography: typography, + spacing: (factor) => `${0.25 * factor}rem`, + zIndex: { + appBar: 1200, + drawer: 1100, + }, + // components: { + // MuiCssBaseline: components.MuiCssBaseline, + // MuiDivider: components.MuiDivider, + // MuiTableContainer: components.MuiTableContainer, + // MuiTableCell: components.MuiTableCell, + // MuiTableHead: components.MuiTableHead, + // MuiButton: components.MuiButton, + // MuiInput: components.MuiInput, + // MuiInputLabel: components.MuiInputLabel, + // MuiSlider: components.MuiSlider, + // MuiSwitch: components.MuiSwitch, + // MuiCard: components.MuiCard, + // MuiCardMedia: components.MuiCardMedia, + // MuiCardContent: components.MuiCardContent, + // MuiTabs: components.MuiTabs, + // MuiTab: components.MuiTab, + // }, + }; +}; diff --git a/src/assets/themes/GlobalStyles.js b/src/assets/themes/GlobalStyles.js deleted file mode 100644 index 1c12c75..0000000 --- a/src/assets/themes/GlobalStyles.js +++ /dev/null @@ -1,38 +0,0 @@ -import { GlobalStyles } from '@mui/material'; - -const MyGlobalStyles = () => ( - -); - -export default MyGlobalStyles; diff --git a/src/assets/themes/base/cleanup/GlobalStyles.js b/src/assets/themes/base/cleanup/GlobalStyles.js new file mode 100644 index 0000000..a9142ef --- /dev/null +++ b/src/assets/themes/base/cleanup/GlobalStyles.js @@ -0,0 +1,38 @@ +// import { GlobalStyles } from '@mui/material'; + +// const MyGlobalStyles = () => ( +// +// ); + +// export default MyGlobalStyles; diff --git a/src/assets/themes/base/colors.jsx b/src/assets/themes/base/colors.jsx index 7463ebd..ac21358 100644 --- a/src/assets/themes/base/colors.jsx +++ b/src/assets/themes/base/colors.jsx @@ -1,67 +1,202 @@ +import { rgba } from '../functions'; import hexToRgba from '../functions/hexToRgba'; -import { - rarityOverlay, - chartTheme, - rarity, - info, - warning, - success, - error, - text, - divider, - action, - primary, - secondary, - grey, - redAccent, - blueAccent, - white, - black, - myGradients, -} from './customColorPalettes'; +const colorTextForDark = rgba('white', 0.96); +// ------------------------------------------- +// --------------- MAIN COLORS --------------- +// ------------------------------------------- +const error = { + light: '#e57373', + main_light: '#af3f3b', + main_darkest: '#2c100f', + main: '#f44336', + secondary: '#f44336', + focus: rgba('#f44336' || 'white', 0.15), + dark: '#d32f2f', + darkest: '#7f2e2eff', + contrastText: '#fff', + hoverContrastText: colorTextForDark, +}; +const warning = { + light: '#ffb74d', + main: '#ff9800', + focus: '#ff9800', + dark: '#f57c00', + secondary: '#ff5722', +}; +const success = { + light: '#70d8bd', + main_light: '#4cceac', + main_lighter: '#b7ebde', + main_emerald: '#06d6a0ff', + main: '#18b984', + secondary: '#5CDB95', + tertiary: '#5fe7bb', + focus: rgba('#18b984' || 'white', 0.15), + secondaryFocus: rgba('#5CDB95' || 'white', 0.15), + dark: '#3da58a', + darkest: '#2e7c67', // '#70d8bd', + contrastText: '#dbf5ee', + hoverContrastText: colorTextForDark, +}; +const info = { + main: '#3781F1', + secondary: '#3781F1', + // main: '#2196f3', + dark: '#1976d2', + light: '#64b5f6', + focus: '#64b5f6', + contrastText: '#fff', +}; +const grey = { + lighterSimpleGrey: '#777', + simpleGrey: '#333', + clearGrey: hexToRgba('#444', 0.6), + black: '#040509', + blueGrey: '#141b2d', + lightBlueGrey: '#1F2A40', + darkest: '#141414', + darker: '#292929', + dark: '#3d3d3d', + default: '#525252', + light: '#666666', + lighter: '#858585', + lightest: '#a3a3a3', + evenLighter: '#c2c2c2', + contrastText: '#e0e0e0', + main: '#e0e0e0', +}; +const white = { + main: '#ffffff', + focus: '#E8E8E8', +}; +const black = { + darker: '#040509', + dark: '#0B0C0E', + darkest: '#141414', + main: '#1C1C1C', + light: '#212121', + focus: '#26242C', +}; +// ------------------------------------------- +// --------------- RANDOM COLORS ------------- +// ------------------------------------------- +const primary = { + darkest: '#040509', + darker: '#040509', + dark: '#040509', + default: '#f2f0f0', + light: '#141b2d', + lighter: '#1F2A40', + lightest: '#727681', + evenLighter: '#8c8c8c', + contrastText: '#e0e0e0', + secondary: '#f2f0f0', + main: '#141b2d', + focus: '#141b2d', + hoverContrastText: colorTextForDark, +}; +const secondary = { + main: '#8c8c8c', + focus: '#8f93a9', + hoverContrastText: colorTextForDark, + contrastText: '#e0e0e0', + secondary: '#8c8c8c', +}; +const rarity = { + common: '#C0C0C0', // Silver + uncommon: '#B8860B', // DarkGoldenRod + rare: '#FFD700', // Gold + super: '#00BFFF', // DeepSkyBlue + ultra: '#FF6347', // Tomato + secret: '#800080', // Purple + ghost: '#F8F8FF', // GhostWhite + starlight: '#F0E68C', // Khaki + prismatic: '#E6E6FA', // Lavender + collector: '#DAA520', // GoldenRod + shortPrint: '#778899', // LightSlateGrey + parallel: '#BA55D3', // MediumOrchid + qcr: '#FF4500', // OrangeRed + // Add more rarities as needed +}; +const rarityOverlay = { + common: hexToRgba(rarity.common, 0.5), + uncommon: hexToRgba(rarity.uncommon, 0.5), + rare: hexToRgba(rarity.rare, 0.5), + super: hexToRgba(rarity.super, 0.5), + ultra: hexToRgba(rarity.ultra, 0.5), + secret: hexToRgba(rarity.secret, 0.5), + ghost: hexToRgba(rarity.ghost, 0.5), + starlight: hexToRgba(rarity.starlight, 0.5), + prismatic: hexToRgba(rarity.prismatic, 0.5), + collector: hexToRgba(rarity.collector, 0.5), + shortPrint: hexToRgba(rarity.shortPrint, 0.5), + parallel: hexToRgba(rarity.parallel, 0.5), + qcr: hexToRgba(rarity.qcr, 0.5), + // Add more rarities as needed +}; +const text = { + primary: '#212121', + secondary: '#3d3d3d', + main: '#3d3d3d', // '#424242', + focus: '#212121', + dark: '#424242', + colorText: '#343239', + colorPrimaryText: rgba('white', 0.96), + colorLabel: '#A4A3A6', + contrastText: '#ffffff', +}; +const divider = 'white'; +const action = { + hover: '#424242', + disabled: '#eeeeee', +}; +const inputBorderColor = '#d2d6da'; +const tabs = { + indicator: { boxShadow: '#ddd' }, +}; +const transparent = { + main: 'transparent', +}; +const light = { + main: '#f0f2f5', + focus: '#f0f2f5', +}; +const dark = { + main: '#344767', + focus: '#2c3c58', + state: '#191919', +}; +const background = { + default: '#f0f2f5', + paper: '#fff', +}; const colors = { - chartTheme: chartTheme, - background: { - default: '#f0f2f5', - paper: '#fff', - }, - redAccent: redAccent, - blueAccent: blueAccent, - // COLORS FOR CARD RARITY OVERLAY rarity, - // CARD RARITY OVERLAYS rarityOverlay, - // TEXT COLORS - text, - // DIVIDER COLORS - divider, - // ACTION COLORS - action, - // INFO COLORS + info, - // SUCCESS COLORS success, - // WARNING COLORS warning, - // ERROR COLORS error, grey, + white, black, - transparent: { - main: 'transparent', - }, + light, + dark, + transparent, + primary, secondary, - light: { - main: '#f0f2f5', - focus: '#f0f2f5', - }, - // dark: { - // main: '#344767', - // focus: '#2c3c58', - // state: '#191919', - // }, + + tabs, + inputBorderColor, + text, + divider, + action, + + background, + gradients: { primary: { main: '#EC407A', @@ -209,7 +344,7 @@ const colors = { }, }, coloredShadows: { - primary: '#e91e62', + primary: '#e91e63', secondary: '#110e0e', info: '#00bbd4', success: '#4caf4f', @@ -217,13 +352,6 @@ const colors = { error: '#f44336', light: '#adb5bd', dark: '#404040', - greenAccent: '#4caf4f', - redAccent: '#f44336', - blueAccent: '#2196f3', - }, - inputBorderColor: '#d2d6da', - tabs: { - indicator: { boxShadow: '#ddd' }, }, inputColors: { borderColor: { main: '#d2d6da', focus: '#35d1f5' }, @@ -231,23 +359,6 @@ const colors = { error: '#fd5c70', success: '#66d432', }, - dark: { - main: '#344767', - focus: '#344767', - state: '#191919', - }, - // inputBorderColor: { - // main: '#d2d6da', - // hover: '#b3b9c2', - // active: '#9499a2', - // disabled: '#d2d6da', - // error: '#f44336', - // success: '#4caf4f', - // warning: '#ff9900', - // info: '#00bbd4', - // light: '#adb5bd', - // dark: '#404040', - // }, }; export default colors; diff --git a/src/assets/themes/base/customColorPalettes.jsx b/src/assets/themes/base/customColorPalettes.jsx deleted file mode 100644 index 01a8838..0000000 --- a/src/assets/themes/base/customColorPalettes.jsx +++ /dev/null @@ -1,265 +0,0 @@ -import hexToRgba from '../functions/hexToRgba'; -import rgba from '../functions/rgba'; -const colorTextForDark = rgba('white', 0.96); -// ------------------------------------------- -// --------------- MAIN COLORS --------------- -// ------------------------------------------- -const error = { - light: '#e57373', - main: '#f44336', - secondary: '#f44336', - focus: rgba('#f44336' || 'white', 0.15), - dark: '#d32f2f', - darkest: '#7f2e2eff', - contrastText: '#fff', - hoverContrastText: colorTextForDark, -}; -const warning = { - light: '#ffb74d', - main: '#ff9800', - focus: '#ff9800', - dark: '#f57c00', - secondary: '#ff5722', -}; -const success = { - light: '#70d8bd', - main_light: '#4cceac', - main_lighter: '#b7ebde', - main_emerald: '#06d6a0ff', - main: '#18b984', - secondary: '#5CDB95', - tertiary: '#5fe7bb', - focus: rgba('#18b984' || 'white', 0.15), - secondaryFocus: rgba('#5CDB95' || 'white', 0.15), - dark: '#3da58a', - darkest: '#2e7c67', // '#70d8bd', - contrastText: '#dbf5ee', - hoverContrastText: colorTextForDark, -}; -const info = { - main: '#3781F1', - secondary: '#3781F1', - // main: '#2196f3', - dark: '#1976d2', - light: '#64b5f6', - focus: '#64b5f6', - contrastText: '#fff', -}; -const grey = { - lighterSimpleGrey: '#777', - simpleGrey: '#333', - clearGrey: hexToRgba('#444', 0.6), - black: '#040509', - blueGrey: '#141b2d', - lightBlueGrey: '#1F2A40', - darkest: '#141414', - darker: '#292929', - dark: '#3d3d3d', - default: '#525252', - light: '#666666', - lighter: '#858585', - lightest: '#a3a3a3', - evenLighter: '#c2c2c2', - contrastText: '#e0e0e0', - main: '#e0e0e0', -}; -const white = { - main: '#ffffff', - focus: '#E8E8E8', -}; -const black = { - darker: '#040509', - dark: '#0B0C0E', - darkest: '#141414', - main: '#1C1C1C', - light: '#212121', - focus: '#26242C', -}; -const greenPalette = { - 50: '#b7ebde', // Even lighter than the lightest - 100: '#94e2cd', // Lightest shade - 200: '#70d8bd', // Lighter shade - 300: '#4cceac', // Light shade, also 'crystalGreen' with opacity adjusted for full hex - 400: '#3da58a', // Default, mid-light - 500: '#18b984', // Main green used in the primary color - 600: '#159b76', // Slightly darker and less saturated than 500 - 700: '#12875f', // Darker and more muted green - 800: '#0f7348', // Dark, rich green - 900: '#2e7c67', // Darkest shade, used for the deepest contrast - contrastText: '#dbf5ee', // Lightest contrast text - main: '#18b984', // Primary main color - focus: 'rgba(24, 185, 132, 0.15)', // Focus state with opacity - hoverContrastText: 'white', // Text color for hover states -}; -const redPalette = { - 50: '#f8dcdb', // Even lighter than the lightest - 100: '#f1b9b7', // Lightest - 200: '#e99592', // Lighter - 300: '#e2726e', // Light shade - 400: '#db4f4a', // Default, main used color - 500: '#af3f3b', // Mid-dark, more saturation - 600: '#832f2c', // Darker and more intense - 700: '#58201e', // Even darker, rich depth - 800: '#2c100f', // Darkest shade, for deep contrast - contrastText: '#f8dcdb', // Lightest contrast text - main: '#db4f4a', // Primary main color - focus: 'rgba(219, 79, 74, 0.15)', // Focus state with opacity - hoverContrastText: 'white', // Text color for hover states -}; -const bluePalette = { - 50: '#e1e2fe', // Even lighter than the lightest - 100: '#c3c6fd', // Lightest - 200: '#a4a9fc', // Lighter - 300: '#868dfb', // Light shade - 400: '#6870fa', // Default, main used color - 500: '#535ac8', // Mid-dark, more saturation - 600: '#3e4396', // Darker and more intense - 700: '#2a2d64', // Even darker, rich depth - 800: '#151632', // Darkest shade, for deep contrast - contrastText: '#e1e2fe', // Lightest contrast text - main: '#6870fa', // Primary main color - focus: 'rgba(104, 112, 250, 0.15)', // Focus state with opacity - hoverContrastText: 'white', // Text color for hover states -}; - -const redAccent = { - darkest: '#2c100f', - darker: '#58201e', - dark: '#832f2c', - default: '#af3f3b', - light: '#db4f4a', - lighter: '#e2726e', - lightest: '#e99592', - evenLighter: '#f1b9b7', - contrastText: '#f8dcdb', - secondary: '#f1b9b7', - main: '#db4f4a', - focus: rgba('#db4f4a' || 'white', 0.15), - hoverContrastText: colorTextForDark, -}; -const blueAccent = { - darkest: '#151632', - darker: '#2a2d64', - dark: '#3e4396', - default: '#535ac8', - light: '#6870fa', - lighter: '#868dfb', - lightest: '#a4a9fc', - evenLighter: '#c3c6fd', - contrastText: '#e1e2fe', - secondary: '#c3c6fd', - main: '#6870fa', - focus: rgba('#6870fa' || 'white', 0.15), - hoverContrastText: colorTextForDark, -}; -const myGradients = { - primary: { - main: '#0172AF', - state: '#74FEBD', - value: 'linear-gradient(180deg, #0172AF 0%, #74FEBD 100%)', - }, - secondary: { - main: '#FF8473', - state: '#FFF9d2', - value: 'linear-gradient(180deg, #FF8473 0%, #FFF9d2 100%)', - }, -}; -// ------------------------------------------- -// --------------- RANDOM COLORS ------------- -// ------------------------------------------- -const primary = { - darkest: '#040509', - darker: '#040509', - dark: '#040509', - default: '#f2f0f0', - light: '#141b2d', - lighter: '#1F2A40', - lightest: '#727681', - evenLighter: '#8c8c8c', - contrastText: '#e0e0e0', - secondary: '#f2f0f0', - main: '#141b2d', - focus: '#141b2d', - hoverContrastText: colorTextForDark, -}; -const secondary = { - main: '#8c8c8c', - focus: '#8f93a9', - hoverContrastText: colorTextForDark, - contrastText: '#e0e0e0', - secondary: '#8c8c8c', -}; -const chartTheme = { - primary, - grey, - redAccent, - blueAccent, -}; -const rarity = { - common: '#C0C0C0', // Silver - uncommon: '#B8860B', // DarkGoldenRod - rare: '#FFD700', // Gold - super: '#00BFFF', // DeepSkyBlue - ultra: '#FF6347', // Tomato - secret: '#800080', // Purple - ghost: '#F8F8FF', // GhostWhite - starlight: '#F0E68C', // Khaki - prismatic: '#E6E6FA', // Lavender - collector: '#DAA520', // GoldenRod - shortPrint: '#778899', // LightSlateGrey - parallel: '#BA55D3', // MediumOrchid - qcr: '#FF4500', // OrangeRed - // Add more rarities as needed -}; -const rarityOverlay = { - common: hexToRgba(rarity.common, 0.5), - uncommon: hexToRgba(rarity.uncommon, 0.5), - rare: hexToRgba(rarity.rare, 0.5), - super: hexToRgba(rarity.super, 0.5), - ultra: hexToRgba(rarity.ultra, 0.5), - secret: hexToRgba(rarity.secret, 0.5), - ghost: hexToRgba(rarity.ghost, 0.5), - starlight: hexToRgba(rarity.starlight, 0.5), - prismatic: hexToRgba(rarity.prismatic, 0.5), - collector: hexToRgba(rarity.collector, 0.5), - shortPrint: hexToRgba(rarity.shortPrint, 0.5), - parallel: hexToRgba(rarity.parallel, 0.5), - qcr: hexToRgba(rarity.qcr, 0.5), - // Add more rarities as needed -}; -const text = { - primary: '#212121', - secondary: '#3d3d3d', - main: '#3d3d3d', // '#424242', - focus: '#212121', - dark: '#424242', - colorText: '#343239', - colorPrimaryText: rgba('white', 0.96), - colorLabel: '#A4A3A6', - contrastText: '#ffffff', -}; -const divider = 'white'; -const action = { - hover: '#424242', - disabled: '#eeeeee', -}; -export { - chartTheme, - rarityOverlay, - rarity, - error, - warning, - success, - info, - text, - divider, - action, - primary, - secondary, - grey, - redAccent, - blueAccent, - myGradients, - white, - black, -}; diff --git a/src/assets/themes/base/globals.jsx b/src/assets/themes/base/globals.jsx index 393240b..2cb7349 100644 --- a/src/assets/themes/base/globals.jsx +++ b/src/assets/themes/base/globals.jsx @@ -2,7 +2,7 @@ import colors from './colors'; const { info, dark } = colors; -export default { +const globals = { html: { scrollBehavior: 'smooth', }, @@ -21,3 +21,5 @@ export default { color: `${info.main} !important`, }, }; + +export default globals; diff --git a/src/assets/themes/base/index.jsx b/src/assets/themes/base/index.jsx new file mode 100644 index 0000000..7724768 --- /dev/null +++ b/src/assets/themes/base/index.jsx @@ -0,0 +1,17 @@ +import breakpoints from './breakpoints'; +import colors from './colors'; +import borders from './borders'; +import boxShadows from './boxShadows'; +import typography from './typography'; +import globals from './globals'; +import palette from './palette'; + +export { + breakpoints, + colors, + borders, + boxShadows, + typography, + globals, + palette, +}; diff --git a/src/assets/themes/base/palette.jsx b/src/assets/themes/base/palette.jsx index 6fa70ef..ceaff6c 100644 --- a/src/assets/themes/base/palette.jsx +++ b/src/assets/themes/base/palette.jsx @@ -1,4 +1,62 @@ import rgba from '../functions/rgba'; +const greenPalette = { + 50: '#b7ebde', // Even lighter than the lightest + 100: '#94e2cd', // Lightest shade + 200: '#70d8bd', // Lighter shade + 300: '#4cceac', // Light shade, also 'crystalGreen' with opacity adjusted for full hex + 400: '#3da58a', // Default, mid-light + 500: '#18b984', // Main green used in the primary color + 600: '#159b76', // Slightly darker and less saturated than 500 + 700: '#12875f', // Darker and more muted green + 800: '#0f7348', // Dark, rich green + 900: '#2e7c67', // Darkest shade, used for the deepest contrast + contrastText: '#dbf5ee', // Lightest contrast text + main: '#18b984', // Primary main color + focus: 'rgba(24, 185, 132, 0.15)', // Focus state with opacity + hoverContrastText: 'white', // Text color for hover states +}; +const redPalette = { + 50: '#f8dcdb', // Even lighter than the lightest + 100: '#f1b9b7', // Lightest + 200: '#e99592', // Lighter + 300: '#e2726e', // Light shade + 400: '#db4f4a', // Default, main used color + 500: '#af3f3b', // Mid-dark, more saturation + 600: '#832f2c', // Darker and more intense + 700: '#58201e', // Even darker, rich depth + 800: '#2c100f', // Darkest shade, for deep contrast + contrastText: '#f8dcdb', // Lightest contrast text + main: '#db4f4a', // Primary main color + focus: 'rgba(219, 79, 74, 0.15)', // Focus state with opacity + hoverContrastText: 'white', // Text color for hover states +}; +const bluePalette = { + 50: '#e1e2fe', // Even lighter than the lightest + 100: '#c3c6fd', // Lightest + 200: '#a4a9fc', // Lighter + 300: '#868dfb', // Light shade + 400: '#6870fa', // Default, main used color + 500: '#535ac8', // Mid-dark, more saturation + 600: '#3e4396', // Darker and more intense + 700: '#2a2d64', // Even darker, rich depth + 800: '#151632', // Darkest shade, for deep contrast + contrastText: '#e1e2fe', // Lightest contrast text + main: '#6870fa', // Primary main color + focus: 'rgba(104, 112, 250, 0.15)', // Focus state with opacity + hoverContrastText: 'white', // Text color for hover states +}; +const myGradients = { + primary: { + main: '#0172AF', + state: '#74FEBD', + value: 'linear-gradient(180deg, #0172AF 0%, #74FEBD 100%)', + }, + secondary: { + main: '#FF8473', + state: '#FFF9d2', + value: 'linear-gradient(180deg, #FF8473 0%, #FFF9d2 100%)', + }, +}; const palette = { primary: { lighter: '#94e2cd', @@ -22,7 +80,7 @@ const palette = { secondary: '#3d3d3d', contrastText: '#ffffff', }, - greyPalette: { + grey: { 50: '#f8fafc', 100: '#eef2f6', 200: '#e3e8ef', @@ -34,6 +92,16 @@ const palette = { 800: '#232a3b', // Assuming grey800, filled logically between grey700 and grey900 900: '#121926', }, + black: { + light: '#212121', + main: '#1C1C1C', + focus: '#26242C', + dark: '#0B0C0E', + }, + white: { + main: '#ffffff', + focus: '#E8E8E8', + }, info: { light: '#90caf9', focus: '#64b5f6', @@ -77,16 +145,6 @@ const palette = { transparent: { main: 'transparent', }, - black: { - light: '#212121', - main: '#1C1C1C', - focus: '#26242C', - dark: '#0B0C0E', - }, - white: { - main: '#ffffff', - focus: '#E8E8E8', - }, }; export default palette; diff --git a/src/assets/themes/components/buttons/index.jsx b/src/assets/themes/components/buttons/index.jsx index e0270ed..8821261 100644 --- a/src/assets/themes/components/buttons/index.jsx +++ b/src/assets/themes/components/buttons/index.jsx @@ -5,9 +5,6 @@ import buttonText from './text'; import holo from './holo'; export default { - defaultProps: { - disableRipple: false, - }, styleOverrides: { root: { ...root }, contained: { ...contained.base }, diff --git a/src/assets/themes/components/buttons/root.jsx b/src/assets/themes/components/buttons/root.jsx index a7cbbd5..debf588 100644 --- a/src/assets/themes/components/buttons/root.jsx +++ b/src/assets/themes/components/buttons/root.jsx @@ -20,24 +20,17 @@ export default { backgroundSize: '150% !important', backgroundPositionX: '25% !important', transition: 'all 150ms ease-in', - // borderRadius: 4, - // padding: '0.5rem 1rem', - // textTransform: 'none', // Disable uppercase text background: '#5CDB95', - - // backgroundColor: '#4cceac', '&:hover': { backgroundColor: '#3da58a', }, '@media (max-width:600px)': { - // Responsive styles fontSize: '0.875rem', }, '&:disabled': { pointerEvent: 'none', opacity: 0.65, }, - '& .material-icons': { fontSize: pxToRem(15), marginTop: pxToRem(-2), diff --git a/src/assets/themes/components/buttons/text.jsx b/src/assets/themes/components/buttons/text.jsx index 0615aec..edb0e83 100644 --- a/src/assets/themes/components/buttons/text.jsx +++ b/src/assets/themes/components/buttons/text.jsx @@ -2,7 +2,7 @@ import colors from '../../base/colors'; import typography from '../../base/typography'; import pxToRem from '../../functions/pxToRem'; -const { text, info, success, secondary, transparent } = colors; +const { text, success, secondary, transparent } = colors; const { size } = typography; export default { diff --git a/src/assets/themes/components/card/index.jsx b/src/assets/themes/components/card/index.jsx index 72e749c..f8550d3 100644 --- a/src/assets/themes/components/card/index.jsx +++ b/src/assets/themes/components/card/index.jsx @@ -1,27 +1,5 @@ -import borders from '../../base/borders'; -import boxShadows from '../../base/boxShadows'; -import colors from '../../base/colors'; -import rgba from '../../functions/rgba'; +import root from './root'; +import cardContent from './cardContent'; +import cardMedia from './cardMedia'; -const { black, success } = colors; -const { borderWidth, borderRadius } = borders; -const { md } = boxShadows; - -export default { - styleOverrides: { - root: { - display: 'flex', - flexDirection: 'column', - position: 'relative', - minWidth: 0, - wordWrap: 'break-word', - backgroundImage: 'none', - backgroundColor: success.main_lighter, - backgroundClip: 'border-box', - border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, - borderRadius: borderRadius.xl, - boxShadow: md, - overflow: 'visible', - }, - }, -}; +export { root, cardContent, cardMedia }; diff --git a/src/assets/themes/components/card/root.jsx b/src/assets/themes/components/card/root.jsx new file mode 100644 index 0000000..72e749c --- /dev/null +++ b/src/assets/themes/components/card/root.jsx @@ -0,0 +1,27 @@ +import borders from '../../base/borders'; +import boxShadows from '../../base/boxShadows'; +import colors from '../../base/colors'; +import rgba from '../../functions/rgba'; + +const { black, success } = colors; +const { borderWidth, borderRadius } = borders; +const { md } = boxShadows; + +export default { + styleOverrides: { + root: { + display: 'flex', + flexDirection: 'column', + position: 'relative', + minWidth: 0, + wordWrap: 'break-word', + backgroundImage: 'none', + backgroundColor: success.main_lighter, + backgroundClip: 'border-box', + border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, + borderRadius: borderRadius.xl, + boxShadow: md, + overflow: 'visible', + }, + }, +}; diff --git a/src/assets/themes/components/container/container.jsx b/src/assets/themes/components/container/index.jsx similarity index 90% rename from src/assets/themes/components/container/container.jsx rename to src/assets/themes/components/container/index.jsx index 139a942..68f2ad2 100644 --- a/src/assets/themes/components/container/container.jsx +++ b/src/assets/themes/components/container/index.jsx @@ -1,5 +1,5 @@ -import pxToRem from '../../functions/pxToRem'; -import breakpoints from '../../base/breakpoints'; +import breakpoints from 'assets/themes/base/breakpoints'; +import pxToRem from 'assets/themes/functions/pxToRem'; const { values: { sm, md, lg, xl, xxl }, } = breakpoints; diff --git a/src/assets/themes/components/divider/divider.jsx b/src/assets/themes/components/divider/index.jsx similarity index 100% rename from src/assets/themes/components/divider/divider.jsx rename to src/assets/themes/components/divider/index.jsx diff --git a/src/assets/themes/components/forms/index.jsx b/src/assets/themes/components/forms/index.jsx new file mode 100644 index 0000000..2351553 --- /dev/null +++ b/src/assets/themes/components/forms/index.jsx @@ -0,0 +1,5 @@ +import input from './input'; +import inputLabel from './inputLabel'; +import switchButton from './switchButton'; + +export { input, inputLabel, switchButton }; diff --git a/src/assets/themes/components/forms/switchButton.jsx b/src/assets/themes/components/forms/switchButton.jsx index 46347cc..fb74cc3 100644 --- a/src/assets/themes/components/forms/switchButton.jsx +++ b/src/assets/themes/components/forms/switchButton.jsx @@ -4,26 +4,11 @@ import colors from '../../base/colors'; import linearGradient from '../../functions/linearGradient'; import pxToRem from '../../functions/pxToRem'; -const { - text, - info, - success, - error, - primary, - common, - white, - grey, - gradients, - transparent, - chartTheme, -} = colors; +const { success, grey, gradients, transparent } = colors; const { borderWidth } = borders; const { md } = boxShadows; export default { - defaultProps: { - disableRipple: false, - }, styleOverrides: { switchBase: { color: success.dark, diff --git a/src/assets/themes/components/index.jsx b/src/assets/themes/components/index.jsx index 4daf503..437a48e 100644 --- a/src/assets/themes/components/index.jsx +++ b/src/assets/themes/components/index.jsx @@ -1,24 +1,27 @@ -import input from './forms/input'; -import inputLabel from './forms/inputLabel'; +// import input from './forms/input'; +// import inputLabel from './forms/inputLabel'; import button from './buttons/index'; -import container from './container/container'; -import divider from './divider/divider'; -import tableContainer from './table/tableContainer'; -import tableCell from './table/tableCell'; -import tableHead from './table/tableHead'; -import card from './card/index'; -import cardMedia from './card/cardMedia'; -import cardContent from './card/cardContent'; +import container from './container'; +// import tableContainer from './table/tableContainer'; +// import tableCell from './table/tableCell'; +// import tableHead from './table/tableHead'; +// import card from './card/index'; +// import cardMedia from './card/cardMedia'; +// import cardContent from './card/cardContent'; import slider from './slider'; -import switchButton from './forms/switchButton'; +// import switchButton from './forms/switchButton'; import globals from '../base/globals'; import tabs from './tabs'; import tab from './tabs/tab'; +import { input, inputLabel, switchButton } from './forms'; +import divider from './divider'; +import { cardContent, cardMedia, root } from './card'; +import { tableCell, tableContainer, tableHead } from './table'; -export const components = { +export default { MuiCssBaseline: { styleOverrides: { - ...globals, + // ...globals, ...container, }, }, @@ -41,11 +44,9 @@ export const components = { MuiSlider: { ...slider }, MuiSwitch: { ...switchButton }, - MuiCard: { ...card }, + MuiCard: { ...root }, MuiCardMedia: { ...cardMedia }, MuiCardContent: { ...cardContent }, MuiTabs: { ...tabs }, MuiTab: { ...tab }, }; - -export default components; diff --git a/src/assets/themes/components/table/index.jsx b/src/assets/themes/components/table/index.jsx new file mode 100644 index 0000000..27db3f9 --- /dev/null +++ b/src/assets/themes/components/table/index.jsx @@ -0,0 +1,5 @@ +import tableCell from './tableCell'; +import tableHead from './tableHead'; +import tableContainer from './tableContainer'; + +export { tableCell, tableHead, tableContainer }; diff --git a/src/assets/themes/functions/index.jsx b/src/assets/themes/functions/index.jsx index f532d25..037d3c8 100644 --- a/src/assets/themes/functions/index.jsx +++ b/src/assets/themes/functions/index.jsx @@ -3,11 +3,6 @@ import boxShadow from './boxShadow'; import linearGradient from './linearGradient'; import pxToRem from './pxToRem'; import rgba from './rgba'; +import hexToRgb from './hexToRgb'; -export default { - boxShadow, - hexToRgba, - linearGradient, - pxToRem, - rgba, -}; +export { boxShadow, hexToRgba, hexToRgb, linearGradient, pxToRem, rgba }; diff --git a/src/assets/themes/index.jsx b/src/assets/themes/index.jsx new file mode 100644 index 0000000..6175bba --- /dev/null +++ b/src/assets/themes/index.jsx @@ -0,0 +1,35 @@ +import { + boxShadow, + hexToRgba, + linearGradient, + pxToRem, + rgba, + hexToRgb, +} from './functions'; +import { + breakpoints, + colors, + borders, + boxShadows, + typography, + globals, + palette, +} from './base'; +import Transitions from './transitions'; + +export { + boxShadow, + hexToRgba, + hexToRgb, + linearGradient, + pxToRem, + rgba, + breakpoints, + colors, + borders, + boxShadows, + typography, + globals, + palette, + Transitions, +}; diff --git a/src/assets/themes/themeSettings.jsx b/src/assets/themes/themeSettings.jsx deleted file mode 100644 index e931933..0000000 --- a/src/assets/themes/themeSettings.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import colors from './base/colors'; -import components from './components/index'; -import borders from './base/borders'; -import boxShadows from './base/boxShadows'; -import typography from './base/typography'; -import boxShadow from './functions/boxShadow'; -import hexToRgb from './functions/hexToRgb'; -import linearGradient from './functions/linearGradient'; -import pxToRem from './functions/pxToRem'; -import rgba from './functions/rgba'; -import breakpoints from './base/breakpoints'; -import Transitions from './Transitions'; -import palette from './base/palette'; - -export const themeSettings = (mode) => { - return { - functions: { - boxShadow, - hexToRgb, - linearGradient, - pxToRem, - rgba, - }, - palette: { - ...colors, - mode: mode, - }, - newPalette: { - ...palette, - mode: mode, - }, - breakpoints: breakpoints.values, - Transitions: Transitions, - borders: borders, - boxShadows: boxShadows, - typography: typography, - spacing: (factor) => `${0.25 * factor}rem`, - // shape: { - // borderRadius: 4, - // borderRadiusLarge: 8, - // borderRadiusExtraLarge: 16, - // }, - zIndex: { - appBar: 1200, - drawer: 1100, - }, - components: { - MuiCssBaseline: components.MuiCssBaseline, - MuiDivider: components.MuiDivider, - MuiTableContainer: components.MuiTableContainer, - MuiTableCell: components.MuiTableCell, - MuiTableHead: components.MuiTableHead, - MuiButton: components.MuiButton, - MuiInput: components.MuiInput, - MuiInputLabel: components.MuiInputLabel, - MuiSlider: components.MuiSlider, - MuiSwitch: components.MuiSwitch, - MuiCard: components.MuiCard, - MuiCardMedia: components.MuiCardMedia, - MuiCardContent: components.MuiCardContent, - MuiTabs: components.MuiTabs, - MuiTab: components.MuiTab, - }, - }; -}; diff --git a/src/assets/themes/Transitions.jsx b/src/assets/themes/transitions/index.jsx similarity index 94% rename from src/assets/themes/Transitions.jsx rename to src/assets/themes/transitions/index.jsx index ce08fb5..68876e0 100644 --- a/src/assets/themes/Transitions.jsx +++ b/src/assets/themes/transitions/index.jsx @@ -5,7 +5,16 @@ import React from 'react'; // ==============================|| TRANSITIONS ||============================== // const Transitions = React.forwardRef( - ({ children, position, type, direction, ...others }, ref) => { + ( + { + children, + position = 'top-left', + type = 'grow', + direction = 'up', + ...others + }, + ref + ) => { let positionSX = { transformOrigin: '0 0 0', }; @@ -107,10 +116,4 @@ Transitions.propTypes = { direction: PropTypes.oneOf(['up', 'down', 'left', 'right']), }; -Transitions.defaultProps = { - type: 'grow', - position: 'top-left', - direction: 'up', -}; - export default Transitions; diff --git a/src/components/forms/Factory/RCTags.jsx b/src/components/forms/Factory/RCTags.jsx deleted file mode 100644 index a83d028..0000000 --- a/src/components/forms/Factory/RCTags.jsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { TextField, Chip, IconButton } from '@mui/material'; -import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; - -const RCTags = ({ name, control, setValue, getValues }) => { - const [inputValue, setInputValue] = useState(''); - const chipData = getValues(name) || []; - - const handleDeleteChip = (chipToDelete) => { - const newChipData = chipData.filter((chip) => chip !== chipToDelete); - setValue(name, newChipData, { shouldValidate: true }); - }; - - const handleAddChip = () => { - if (inputValue && !chipData.includes(inputValue)) { - const newChipData = [...chipData, inputValue]; - setValue(name, newChipData, { shouldValidate: true }); - setInputValue(''); - } - }; - - return ( - <> - setInputValue(e.target.value)} - onKeyDown={(e) => { - if (e.key === 'Enter' && inputValue) { - e.preventDefault(); - handleAddChip(); - } - }} - variant="outlined" - margin="normal" - fullWidth - label="Add Tag" - /> - - - -
- {chipData.map((chip, index) => ( - handleDeleteChip(chip)} - /> - ))} -
- - ); -}; - -export default RCTags; diff --git a/src/components/forms/Factory/RCTagsInput.jsx b/src/components/forms/Factory/RCTagsInput.jsx deleted file mode 100644 index ef7546c..0000000 --- a/src/components/forms/Factory/RCTagsInput.jsx +++ /dev/null @@ -1,196 +0,0 @@ -import React, { useState, KeyboardEvent } from 'react'; -import { TextField, Chip, Box } from '@mui/material'; - -const RCTagsInput = ({ placeholder, label, fullWidth = true }) => { - const [tags, setTags] = useState([]); - const [inputValue, setInputValue] = useState(''); - - const handleKeyDown = (event) => { - if (['Enter', 'Tab', ','].includes(event.key)) { - event.preventDefault(); - const newTag = inputValue.trim(); - if (newTag && !tags.includes(newTag)) { - setTags([...tags, newTag]); - } - setInputValue(''); - } - }; - - const handleDelete = (tagToDelete) => () => { - setTags(tags.filter((tag) => tag !== tagToDelete)); - }; - - return ( - - setInputValue(e.target.value)} - onKeyDown={handleKeyDown} - InputProps={{ - startAdornment: tags.map((item, index) => ( - - )), - }} - /> - - ); -}; - -export default RCTagsInput; - -// import React, { useEffect } from 'react'; -// import PropTypes from 'prop-types'; -// import Downshift from 'downshift'; -// import { Chip, TextField } from '@mui/material'; - -// export default function TagsInput({ ...props }) { -// const { submitTag, placeholder, tags, ...other } = props; -// const [inputValue, setInputValue] = React.useState(''); -// const [selectedItem, setSelectedItem] = React.useState([]); -// // useEffect(() => { -// // submitTag(selectedItem); -// // }, [selectedItem, submitTag]); - -// function handleKeyDown(event) { -// if (event.key === 'Enter') { -// const newSelectedItem = [...selectedItem]; -// const duplicatedValues = newSelectedItem.indexOf( -// event.target.value.trim() -// ); - -// if (duplicatedValues !== -1) { -// setInputValue(''); -// return; -// } -// if (!event.target.value.replace(/\s/g, '').length) return; - -// newSelectedItem.push(event.target.value.trim()); -// setSelectedItem(newSelectedItem); -// setInputValue(''); -// } -// if ( -// selectedItem.length && -// !inputValue.length && -// event.key === 'Backspace' -// ) { -// setSelectedItem(selectedItem.slice(0, selectedItem.length - 1)); -// } -// } -// function handleChange(item) { -// let newSelectedItem = [...selectedItem]; -// if (newSelectedItem.indexOf(item) === -1) { -// newSelectedItem = [...newSelectedItem, item]; -// } -// setInputValue(''); -// setSelectedItem(newSelectedItem); -// } -// const handleDelete = (item) => () => { -// const newSelectedItem = [...selectedItem]; -// newSelectedItem.splice(newSelectedItem.indexOf(item), 1); -// setSelectedItem(newSelectedItem); -// }; -// function handleInputChange(event) { -// setInputValue(event.target.value); -// } -// return ( -// -// -// {({ getInputProps }) => { -// const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({ -// onKeyDown: handleKeyDown, -// placeholder, -// }); -// return { -// /*
-// ( -// -// )), -// onBlur, -// onChange: (event) => { -// handleInputChange(event); -// onChange(event); -// }, -// onFocus, -// }} -// // const [chipData, setChipData] = React.useState([ -// // { key: 0, label: 'Angular' }, -// // { key: 1, label: 'jQuery' }, -// // { key: 2, label: 'Polymer' }, -// // { key: 3, label: 'React' }, -// // { key: 4, label: 'Vue.js' }, -// // ]); -// // const handleDelete = (chipToDelete) => () => { -// // setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key)); -// // }; -// input={} -// renderValue={(selected) => ( -// -// {selected.map((value) => ( -// } -// onDelete={handleDelete(value)} -// /> -// ))} -// -// )} -// {...other} -// {...inputProps} -// /> -//
*/ -// }; -// }} -// -// -// ); -// } -// TagsInput.defaultProps = { -// tags: [], -// }; -// TagsInput.propTypes = { -// submitTag: PropTypes.func.isRequired, -// tags: PropTypes.arrayOf(PropTypes.string), -// }; - -{ - /* onChange(e.target.value), - onBlur: (e) => onBlur(e.target.value), - onFocus: (e) => onChange(e.target.value), -}} -{...rest} -/> */ -} diff --git a/src/components/index.jsx b/src/components/index.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/context/ColorModeProvider.jsx b/src/context/ColorModeProvider.jsx index ce2532d..cafba2e 100644 --- a/src/context/ColorModeProvider.jsx +++ b/src/context/ColorModeProvider.jsx @@ -1,7 +1,7 @@ -import { useState, useMemo, createContext, useEffect, useContext } from 'react'; +import { useState, useMemo, createContext, useEffect } from 'react'; import { createTheme } from '@mui/material'; -import { themeSettings } from 'assets/themes/themeSettings'; -import useManageCookies from './hooks/useManageCookies'; +import { themeSettings } from 'assets/themeSettings'; +import { useManageCookies } from './hooks'; export const ColorModeContext = createContext({ mode: 'dark', diff --git a/src/context/hooks/index.jsx b/src/context/hooks/index.jsx index 1c81d83..9460963 100644 --- a/src/context/hooks/index.jsx +++ b/src/context/hooks/index.jsx @@ -12,7 +12,10 @@ import usePagination from './usePagination'; import useSelectedContext from './useSelectedContext'; import usePopover from './usePopover'; import useSelectorActions from './useSelectorActions'; - +import useFormManagement from './useFormManagement'; +import useFormSubmission from './useFormSubmission'; +import useRCFormHook from './useRCFormHook'; +import useInitialFormData from './useInitialFormData'; export { useBreakpoint, useLocalStorage, @@ -28,4 +31,8 @@ export { useSelectedContext, usePopover, useSelectorActions, + useFormManagement, + useFormSubmission, + useRCFormHook, + useInitialFormData, }; diff --git a/src/context/formHooks/useFormManagement.jsx b/src/context/hooks/useFormManagement.jsx similarity index 82% rename from src/context/formHooks/useFormManagement.jsx rename to src/context/hooks/useFormManagement.jsx index 138170e..d996e3a 100644 --- a/src/context/formHooks/useFormManagement.jsx +++ b/src/context/hooks/useFormManagement.jsx @@ -1,5 +1,5 @@ import { useState, useCallback } from 'react'; -export const useFormManagement = (initialFormKey, formSchemas) => { +const useFormManagement = (initialFormKey, formSchemas) => { const [activeForm, setActiveForm] = useState(initialFormKey); const setActiveFormSchema = useCallback( @@ -17,3 +17,5 @@ export const useFormManagement = (initialFormKey, formSchemas) => { currentSchemaKey: activeForm, }; }; + +export default useFormManagement; diff --git a/src/context/formHooks/useFormSubmission.jsx b/src/context/hooks/useFormSubmission.jsx similarity index 93% rename from src/context/formHooks/useFormSubmission.jsx rename to src/context/hooks/useFormSubmission.jsx index a387db6..a37bd40 100644 --- a/src/context/formHooks/useFormSubmission.jsx +++ b/src/context/hooks/useFormSubmission.jsx @@ -1,7 +1,7 @@ import { useCallback, useState } from 'react'; import { handleValidation, zodSchemas } from '../../data/formsConfig'; -export const useFormSubmission = (formHandlers, formKey) => { +const useFormSubmission = (formHandlers, formKey) => { const [isSubmitting, setIsSubmitting] = useState(false); const activeSchema = zodSchemas[formKey]; const onSubmit = useCallback( @@ -37,3 +37,5 @@ export const useFormSubmission = (formHandlers, formKey) => { return { onSubmit, isSubmitting }; }; + +export default useFormSubmission; diff --git a/src/context/hooks/useGridItems.jsx b/src/context/hooks/useGridItems.jsx index 2b71347..a196675 100644 --- a/src/context/hooks/useGridItems.jsx +++ b/src/context/hooks/useGridItems.jsx @@ -1,12 +1,9 @@ import React, { useMemo } from 'react'; import { Grid, Grow, IconButton, Tooltip } from '@mui/material'; -import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; -import GenericCard from 'components/cards/GenericCard'; -import { SkeletonCard } from 'layout/REUSABLE_COMPONENTS/utils/system-utils/SkeletonVariants'; -import useMode from '../state/useMode'; +import GenericCard from 'layout/cards/GenericCard'; import HighlightOffRoundedIcon from '@mui/icons-material/HighlightOffRounded'; -import { useCardStoreHook } from '../state/useCardStore'; -import useManager from '../useManager'; +import { useCardStore, useManager, useMode } from 'context'; +import { MDBox, SkeletonCard } from 'layout/REUSABLE_COMPONENTS'; const useGridItems = ({ itemsPerPage, cards, @@ -15,7 +12,7 @@ const useGridItems = ({ type, deckId, }) => { - const { loadingSearchResults } = useCardStoreHook(); + const { loadingSearchResults } = useCardStore(); const { theme } = useMode(); const { removeItemFromDeck } = useManager(); const calculateTimeout = (index) => index * 400; // Adjust this value for faster or slower animations diff --git a/src/context/formHooks/useInitialFormData.jsx b/src/context/hooks/useInitialFormData.jsx similarity index 100% rename from src/context/formHooks/useInitialFormData.jsx rename to src/context/hooks/useInitialFormData.jsx diff --git a/src/context/formHooks/useRCFormHook.jsx b/src/context/hooks/useRCFormHook.jsx similarity index 100% rename from src/context/formHooks/useRCFormHook.jsx rename to src/context/hooks/useRCFormHook.jsx diff --git a/src/context/hooks/useSelectorActions.jsx b/src/context/hooks/useSelectorActions.jsx index 4f535c7..b187883 100644 --- a/src/context/hooks/useSelectorActions.jsx +++ b/src/context/hooks/useSelectorActions.jsx @@ -1,7 +1,7 @@ /* eslint-disable no-case-declarations */ import { useState } from 'react'; import useLocalStorage from './useLocalStorage'; -import useManager from '../useManager'; +import useManager from '../state/useManager'; import { nanoid } from 'nanoid'; function useSelectorActions() { diff --git a/src/context/index.js b/src/context/index.js index b16a968..9c9b628 100644 --- a/src/context/index.js +++ b/src/context/index.js @@ -1,5 +1,54 @@ -import useMode from './state/useMode'; - -// context/index.js -export { useMode }; -export { ColorModeProvider } from './ColorModeProvider'; +import { + useAuthManager, + useCardStore, + useMode, + useUserData, + useManager, +} from './state'; +import { + useBreakpoint, + useLocalStorage, + useConfigurator, + useDialogState, + useEventHandlers, + useFetchWrapper, + useGridItems, + useLoading, + useLogger, + useManageCookies, + usePagination, + useSelectedContext, + usePopover, + useSelectorActions, + useFormManagement, + useFormSubmission, + useRCFormHook, + useInitialFormData, +} from './hooks'; +import { ColorModeProvider } from './ColorModeProvider'; +export { + ColorModeProvider, + useAuthManager, + useCardStore, + useMode, + useUserData, + useManager, + useBreakpoint, + useLocalStorage, + useConfigurator, + useDialogState, + useEventHandlers, + useFetchWrapper, + useGridItems, + useLoading, + useLogger, + useManageCookies, + usePagination, + useSelectedContext, + usePopover, + useSelectorActions, + useFormManagement, + useFormSubmission, + useRCFormHook, + useInitialFormData, +}; diff --git a/src/context/state/index.jsx b/src/context/state/index.jsx new file mode 100644 index 0000000..80d3c4d --- /dev/null +++ b/src/context/state/index.jsx @@ -0,0 +1,7 @@ +import useAuthManager from './useAuthManager'; +import useCardStore from './useCardStore'; +import useMode from './useMode'; +import useUserData from './useUserData'; +import useManager from './useManager'; + +export { useAuthManager, useCardStore, useMode, useUserData, useManager }; diff --git a/src/context/state/useAuthManager.jsx b/src/context/state/useAuthManager.jsx index f4f9a70..4c8c4a0 100644 --- a/src/context/state/useAuthManager.jsx +++ b/src/context/state/useAuthManager.jsx @@ -1,10 +1,8 @@ import { useCallback, useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import jwtDecode from 'jwt-decode'; -import useFetchWrapper from '../hooks/useFetchWrapper'; -import useManageCookies from '../hooks/useManageCookies'; import useUserData from './useUserData'; import jwt_decode from 'jwt-decode'; +import { useFetchWrapper, useManageCookies } from 'context/hooks'; function useAuthManager() { const navigate = useNavigate(); @@ -21,7 +19,7 @@ function useAuthManager() { const setAuthCookies = useCallback( (data) => { const { accessToken, refreshToken } = data; - const authData = jwtDecode(accessToken); + const authData = jwt_decode(accessToken); addCookies( ['accessToken', 'refreshToken', 'isLoggedIn', 'authUser', 'userId'], [accessToken, refreshToken, true, authData, authData.userId], @@ -47,7 +45,7 @@ function useAuthManager() { const decodeAndSetUser = useCallback( (accessToken) => { - const decoded = jwtDecode(accessToken); + const decoded = jwt_decode(accessToken); handleSetUser(decoded); // Adjust according to your implementation }, [handleSetUser] @@ -128,7 +126,6 @@ function useAuthManager() { } } catch (error) { console.error('Token validation error:', error); - // logout(); } }, [user.accessToken]); useEffect(() => { diff --git a/src/context/state/useCardStore.jsx b/src/context/state/useCardStore.jsx index 71f94fc..f827240 100644 --- a/src/context/state/useCardStore.jsx +++ b/src/context/state/useCardStore.jsx @@ -17,7 +17,7 @@ function debounce(func, wait) { }; } -export const useCardStoreHook = () => { +const useCardStore = () => { const { getCookie } = useManageCookies(); const { userId } = getCookie(['userId']); const logger = useLogger('CardProvider'); @@ -114,3 +114,5 @@ export const useCardStoreHook = () => { }, }; }; + +export default useCardStore; diff --git a/src/context/useManager.jsx b/src/context/state/useManager.jsx similarity index 94% rename from src/context/useManager.jsx rename to src/context/state/useManager.jsx index ba3d352..e6eff9f 100644 --- a/src/context/useManager.jsx +++ b/src/context/state/useManager.jsx @@ -1,10 +1,12 @@ /* eslint-disable no-case-declarations */ -import { useCallback, useEffect, useMemo, useState } from 'react'; -import useFetchWrapper from './hooks/useFetchWrapper'; -import useLogger from './hooks/useLogger'; -import useManageCookies from './hooks/useManageCookies'; -import useLocalStorage from './hooks/useLocalStorage'; -import useSelectedContext from './hooks/useSelectedContext'; +import { useCallback, useMemo, useState } from 'react'; +import { + useFetchWrapper, + useLocalStorage, + useLogger, + useManageCookies, + useSelectedContext, +} from '../hooks'; const useManager = () => { const { fetchWrapper } = useFetchWrapper(); @@ -384,22 +386,6 @@ const useManager = () => { case 'collections': const selectedId = localStorage.getItem('selectedCollectionId'); setCollections(response.data); - // Re-select the collection if it was the one being updated - // if (selectedId === id) { - // const updatedCollection = response.data.find( - // (col) => col._id === id - // ); - // setSelectedCollection(updatedCollection); - // } - // const selected = localStorage.getItem('selectedCollectionId'); - // setCollections(response.data); - // // setCollections((prev) => - // // prev.map((col) => - // // col._id === id ? { ...col, ...response.data } : col - // // ) - // // ); - // setSelectedCollection((prev) => { - break; case 'decks': setDecks((prev) => diff --git a/src/context/state/useMode.jsx b/src/context/state/useMode.jsx index cdf27b5..7749471 100644 --- a/src/context/state/useMode.jsx +++ b/src/context/state/useMode.jsx @@ -1,5 +1,3 @@ -// useMode is a custom hook that returns the current mode and theme. - import { useContext } from 'react'; import { ColorModeContext } from '../ColorModeProvider'; diff --git a/src/data/HelmetMetaData.jsx b/src/data/HelmetMetaData.jsx index 04e38e4..e6e49e3 100644 --- a/src/data/HelmetMetaData.jsx +++ b/src/data/HelmetMetaData.jsx @@ -1,39 +1,27 @@ -/* eslint-disable max-len */ -import { Helmet } from 'react-helmet'; +import React from 'react'; +import { Helmet, HelmetProvider } from 'react-helmet-async'; -const HelmetMetaData = () => ( - +const HelmetMetaData = ({ title, description, image, url }) => ( + +
+ + {title} + + + + + + + + + + + +
+ ); export default HelmetMetaData; diff --git a/src/data/formsConfig.jsx b/src/data/formsConfig.jsx index 80eba99..7918ce6 100644 --- a/src/data/formsConfig.jsx +++ b/src/data/formsConfig.jsx @@ -18,11 +18,8 @@ import DeleteIcon from '@mui/icons-material/Delete'; import SaveIcon from '@mui/icons-material/Save'; import EditIcon from '@mui/icons-material/Edit'; import AddIcon from '@mui/icons-material/Add'; - import { z } from 'zod'; -import useAuthManager from 'context/state/useAuthManager'; -import { useCardStoreHook } from 'context/state/useCardStore'; -import useManager from 'context/useManager'; +import { useAuthManager, useCardStore, useManager } from 'context'; // ----------------------------------------------------------------------------- // ----------------------------------------------------------------------------- // ---------------------------- FORM FIELD HANDLERS ---------------------------- @@ -30,7 +27,7 @@ import useManager from 'context/useManager'; // ----------------------------------------------------------------------------- const getFormFieldHandlers = () => { const { signup, login } = useAuthManager(); - const { handleRequest } = useCardStoreHook(); + const { handleRequest } = useCardStore(); const { addCollection, updateCollection, diff --git a/src/data/route-config.jsx b/src/data/route-config.jsx index d6658d3..f822a3d 100644 --- a/src/data/route-config.jsx +++ b/src/data/route-config.jsx @@ -8,12 +8,12 @@ export const ROUTES = [ { path: '/profile', componentName: 'ProfilePage', isPrivate: true }, // { path: '/login', componentName: 'LoginDialog', isPrivate: false }, { path: '/login', componentName: 'LoginPage', isPrivate: false }, - { path: '/loginPage', componentName: 'LoginPage', isPrivate: false }, + // { path: '/loginPage', componentName: 'LoginPage', isPrivate: false }, { path: '/signup', componentName: 'SignupPage', isPrivate: false }, - { path: '/about', componentName: 'AboutPage', isPrivate: false }, - { path: '/contact', componentName: 'ContactPage', isPrivate: false }, - { path: '/terms', componentName: 'TermsPage', isPrivate: false }, - { path: '/privacy', componentName: 'PrivacyPage', isPrivate: false }, + // { path: '/about', componentName: 'AboutPage', isPrivate: false }, + // { path: '/contact', componentName: 'ContactPage', isPrivate: false }, + // { path: '/terms', componentName: 'TermsPage', isPrivate: false }, + // { path: '/privacy', componentName: 'PrivacyPage', isPrivate: false }, { path: '*', componentName: 'NotFoundPage', isPrivate: false }, ]; diff --git a/src/index.js b/src/index.js index d08c6b2..543ff7c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,26 +1,25 @@ -import ReactDOM from 'react-dom'; +import React, { StrictMode } from 'react'; +// import ReactDOM from 'react-dom/client'; +import { createRoot } from 'react-dom/client'; + import { BrowserRouter as Router } from 'react-router-dom'; import App from './App'; import { register, unregister } from './serviceWorker'; -import { createRoot } from 'react-dom/client'; // ==============================|| REACT DOM RENDER ||============================== // -import { ColorModeProvider, useMode } from './context'; +import { ColorModeProvider } from './context'; import { SnackbarProvider, enqueueSnackbar } from 'notistack'; import { ErrorBoundary } from 'react-error-boundary'; -import ErrorFallback from 'layout/REUSABLE_COMPONENTS/utils/system-utils/ErrorFallback'; -import { ThemeProvider } from 'styled-components'; -import { CssBaseline, GlobalStyles } from '@mui/material'; import { ParallaxProvider } from 'react-scroll-parallax'; import { HelmetMetaData } from 'data'; +import { ErrorFallback } from 'layout/REUSABLE_COMPONENTS'; + +const root = createRoot(document.getElementById('root')); -const domNode = document.getElementById('root'); -if (!domNode) throw new Error('Failed to find the root element'); +// ==============================|| APP WRAPPER ||============================== // -const root = createRoot(domNode); // Create a root. const AppWrapper = () => { - const { theme } = useMode(); const errorHandler = (error, errorInfo) => { console.error('Error:', error, 'Info:', errorInfo); enqueueSnackbar('An unexpected error occurred, please try again later.', { @@ -28,27 +27,20 @@ const AppWrapper = () => { }); }; return ( - window.location.reload()} - onError={errorHandler} - theme={theme} - > - - + + - - - - + + + - - + + - - + + ); }; diff --git a/src/layout/REUSABLE_COMPONENTS/GenericActionButtons.jsx b/src/layout/REUSABLE_COMPONENTS/GenericActionButtons.jsx index d36b993..45d4d90 100644 --- a/src/layout/REUSABLE_COMPONENTS/GenericActionButtons.jsx +++ b/src/layout/REUSABLE_COMPONENTS/GenericActionButtons.jsx @@ -7,7 +7,7 @@ import RemoveCircleOutlineOutlined from '@mui/icons-material/RemoveCircleOutline import { useMode } from 'context'; import useLoading from 'context/hooks/useLoading'; import { LoadingButton } from '@mui/lab'; -import useManager from 'context/useManager'; +import useManager from 'context/state/useManager'; const buttonSizeMap = { xs: 'extraSmall', diff --git a/src/layout/REUSABLE_COMPONENTS/MDBOX/MdBoxRoot.jsx b/src/layout/REUSABLE_COMPONENTS/MDBOX/MdBoxRoot.jsx index 78b12ff..d5d3ae5 100644 --- a/src/layout/REUSABLE_COMPONENTS/MDBOX/MdBoxRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/MDBOX/MdBoxRoot.jsx @@ -106,7 +106,7 @@ export default styled(Box)(({ ownerstate }) => { boxShadowValue = colored[coloredShadow] ? colored[coloredShadow] : 'none'; } - // Define additional styles that DashboardLayout might expect + // Define additional styles that DashBoardLayout might expect const additionalStyles = { // marginLeft: isSidebarOpen ? functions.pxToRem(250) : functions.pxToRem(0), marginLeft: functions.pxToRem(0), diff --git a/src/layout/REUSABLE_COMPONENTS/RCBADGE/RCBadgeRoot.jsx b/src/layout/REUSABLE_COMPONENTS/RCBADGE/RCBadgeRoot.jsx index ed8314f..66f6156 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBADGE/RCBadgeRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBADGE/RCBadgeRoot.jsx @@ -1,6 +1,6 @@ import { Badge } from '@mui/material'; +import { useMode } from 'context'; import styled from 'styled-components'; -import { useMode } from 'context/state/useMode'; export default styled(Badge)(({ ownerState }) => { const { theme } = useMode(); diff --git a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/index.jsx b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/index.jsx index 7a940c4..397d203 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/index.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/index.jsx @@ -54,6 +54,7 @@ const RCButton = React.forwardRef( ); RCButton.displayName = 'RCButton'; + RCButton.propTypes = { size: PropTypes.oneOf(['small', 'medium', 'large']), variant: PropTypes.oneOf([ diff --git a/src/layout/REUSABLE_COMPONENTS/RCCARD/index.jsx b/src/layout/REUSABLE_COMPONENTS/RCCARD/index.jsx index 3299f6b..86ead31 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCCARD/index.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCCARD/index.jsx @@ -1,11 +1,4 @@ import PropTypes from 'prop-types'; -import { - Card, - CardContent, - CardHeader, - Divider, - Typography, -} from '@mui/material'; import { useMode } from 'context'; import React from 'react'; import RCCardRoot from './RCCardRoot'; @@ -98,8 +91,7 @@ const RCCard = React.forwardRef( )} - {!hasTitle && children} - {/* {!content && children} */} + {!hasTitle || !content ? children : null} ); } diff --git a/src/components/forms/Factory/RCDynamicForm.jsx b/src/layout/REUSABLE_COMPONENTS/RC_FORMS/RCDynamicForm.jsx similarity index 95% rename from src/components/forms/Factory/RCDynamicForm.jsx rename to src/layout/REUSABLE_COMPONENTS/RC_FORMS/RCDynamicForm.jsx index 5af2ed7..d587be9 100644 --- a/src/components/forms/Factory/RCDynamicForm.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RC_FORMS/RCDynamicForm.jsx @@ -1,19 +1,18 @@ /* eslint-disable @typescript-eslint/no-empty-function */ +import React, { useEffect, useState } from 'react'; + import { Box, InputAdornment, Tooltip } from '@mui/material'; import RCInput from './RCInput'; import { Controller } from 'react-hook-form'; -import useRCFormHook from 'context/formHooks/useRCFormHook'; import { useMode } from 'context'; import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; -import { getFormFieldHandlers } from '../../../data/formsConfig'; -import { useFormSubmission } from 'context/formHooks/useFormSubmission'; -import React, { useEffect, useState } from 'react'; -import useBreakpoint from 'context/hooks/useBreakPoint'; import RCLoadingButton from 'layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON'; import { FormBox, FormFieldBox, } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +import { useBreakpoint, useFormSubmission, useRCFormHook } from 'context/hooks'; +import { getFormFieldHandlers } from 'data'; const RCDynamicForm = ({ formKey, diff --git a/src/components/forms/Factory/RCInput.jsx b/src/layout/REUSABLE_COMPONENTS/RC_FORMS/RCInput.jsx similarity index 93% rename from src/components/forms/Factory/RCInput.jsx rename to src/layout/REUSABLE_COMPONENTS/RC_FORMS/RCInput.jsx index ba6020c..1024213 100644 --- a/src/components/forms/Factory/RCInput.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RC_FORMS/RCInput.jsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-empty-function */ import React, { useState } from 'react'; import { TextField, @@ -19,23 +20,25 @@ import { } from '@mui/material'; import PropTypes from 'prop-types'; import { StyledTextField } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import { useMode } from 'context'; +import { + useBreakpoint, + useManager, + useMode, + useSelectorActions, +} from 'context'; import RCSwitch from './RCSwitch'; -import useBreakpoint from 'context/hooks/useBreakPoint'; -import useSelectorActions from 'context/hooks/useSelectorActions'; -import useManager from 'context/useManager'; + const RCInput = React.forwardRef( ( { - type, - options, - onChange, - initialValue, - value, - placeholder, - onSelectChange, - error, - helperText, + type = 'text', + options = [], + onChange = () => {}, + initialValue = '', + value = '', + placeholder = '', + error = false, + helperText = '', ...rest }, ref @@ -153,7 +156,7 @@ const RCInput = React.forwardRef( backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, '& .MuiOutlinedInput-notchedOutline': { - borderColor: theme.palette.chartTheme.redAccent.default, + borderColor: theme.palette.error.main_light, }, '& .MuiSvgIcon-root': { color: theme.palette.text.primary, @@ -319,20 +322,11 @@ const RCInput = React.forwardRef( ); RCInput.displayName = 'RCInput'; -RCInput.defaultProps = { - type: 'text', - options: [], - // eslint-disable-next-line @typescript-eslint/no-empty-function - onChange: () => {}, - initialValue: '', - value: '', - placeholder: '', -}; + RCInput.propTypes = { type: PropTypes.string.isRequired, options: PropTypes.array, onChange: PropTypes.func, - onSelectChange: PropTypes.func, label: PropTypes.string, name: PropTypes.string.isRequired, value: PropTypes.oneOfType([ diff --git a/src/components/forms/Factory/RCSwitch.jsx b/src/layout/REUSABLE_COMPONENTS/RC_FORMS/RCSwitch.jsx similarity index 100% rename from src/components/forms/Factory/RCSwitch.jsx rename to src/layout/REUSABLE_COMPONENTS/RC_FORMS/RCSwitch.jsx diff --git a/src/layout/REUSABLE_COMPONENTS/RC_FORMS/index.jsx b/src/layout/REUSABLE_COMPONENTS/RC_FORMS/index.jsx new file mode 100644 index 0000000..c301957 --- /dev/null +++ b/src/layout/REUSABLE_COMPONENTS/RC_FORMS/index.jsx @@ -0,0 +1,5 @@ +import RCDynamicForm from './RCDynamicForm'; +import RCInput from './RCInput'; +import RCSwitch from './RCSwitch'; + +export { RCDynamicForm, RCInput, RCSwitch }; diff --git a/src/layout/REUSABLE_COMPONENTS/index.jsx b/src/layout/REUSABLE_COMPONENTS/index.jsx new file mode 100644 index 0000000..7ec9112 --- /dev/null +++ b/src/layout/REUSABLE_COMPONENTS/index.jsx @@ -0,0 +1,110 @@ +import MDBox from './MDBOX'; +import RCCard from './RCCARD'; +import RCWrappedIcon from './RCWRAPPEDICON'; +import RCLoadingButton from './RCLOADINGBUTTON'; +import RCBadge from './RCBADGE'; +import RCChange from './RC_OTHER/RCChange'; +import RCMainCard from './RC_OTHER/RCMainCard'; +import RCToolTip from './RC_OTHER/RCToolTip'; +import RCInput from './RC_FORMS/RCInput'; +import RCDynamicForm from './RC_FORMS/RCDynamicForm'; +import RCSwitch from './RC_FORMS/RCSwitch'; +import GenericActionButtons from './GenericActionButtons'; +import Configurator from './Configurator'; +import RCLogoSection from './RC_OTHER/RCLogoSection'; +import RCTypography from './RCTYPOGRAPHY'; +// export { default as MDBox } from './MDBox/index'; +// export { default as RCWrappedIcon } from './RCWrappedIcon'; +// export { default as RCTypography } from './RCTYPOGRAPHY'; +// export { default as RCLoadingButton } from './RCLOADINGBUTTON'; +// export { default as RCBadge } from './RCBADGE'; +// export { default as RCButton } from './RCBUTTON'; +// export { default as RCCard } from './RCCard'; +// export { default as RCInput } from './RC_FORMS/RCInput'; + +// export { default as Configurator } from './Configurator'; +// export { default as GenericActionButtons } from './GenericActionButtons'; +// export { default as RCLogoSection } from './RC_OTHER/RCLogoSection'; +// export { default as RCChange } from './RC_OTHER/RCChange'; +// export { default as RCHeader } from './RC_OTHER/RCHeader'; +// export { default as RCInfoItem } from './RC_OTHER/RCInfoItem'; +// export { default as RCMainCard } from './RC_OTHER/RCMainCard'; +// export { default as RCToolTip } from './RC_OTHER/RCToolTip'; +// export { default as RCDynamicForm } from './RC_FORMS/RCDynamicForm'; +// export { default as RCSwitch } from './RC_FORMS/RCSwitch'; +// export { default as IconStatWrapper } from './utils/layout-utils/IconStatWrapper'; +import { + Copyright, + ErrorFallback, + ErrorIndicator, + LoadingIndicator, + LoadingOverlay, + NotFoundPage, + LoadingCardSkeleton, + HeroSectionSkeleton, + PageHeaderSkeleton, + DynamicSkeletonList, + SkeletonCard, + CollectionListItemSkeleton, + DeckListItemSkeleton, + SkeletonCartItem, + SkeletonPieChart, + SplashPage2, +} from './utils/system-utils'; + +import { + BoxHeader, + DashboardBox, + FlexBetween, + IconStatWrapper, + NivoContainer, + PageHeader, + PageLayout, + SimpleSectionHeader, + StatBox, + DashBoardLayout, +} from './utils/layout-utils'; + +export { + MDBox, + RCWrappedIcon, + RCTypography, + RCLoadingButton, + RCBadge, + RCChange, + RCMainCard, + RCToolTip, + RCInput, + RCDynamicForm, + BoxHeader, + DashboardBox, + FlexBetween, + IconStatWrapper, + RCCard, + RCLogoSection, + Configurator, + RCSwitch, + GenericActionButtons, + DashBoardLayout, + NivoContainer, + PageHeader, + PageLayout, + SimpleSectionHeader, + StatBox, + Copyright, + ErrorFallback, + ErrorIndicator, + LoadingIndicator, + LoadingOverlay, + NotFoundPage, + LoadingCardSkeleton, + HeroSectionSkeleton, + PageHeaderSkeleton, + DynamicSkeletonList, + SkeletonCard, + CollectionListItemSkeleton, + DeckListItemSkeleton, + SkeletonCartItem, + SkeletonPieChart, + SplashPage2, +}; diff --git a/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/BoxHeader.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/BoxHeader.jsx index 23b03ea..cff8f02 100644 --- a/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/BoxHeader.jsx +++ b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/BoxHeader.jsx @@ -5,22 +5,21 @@ import PropTypes from 'prop-types'; import { useMode } from 'context'; const BoxHeader = ({ - icon, - title, - subtitle, - sideText, - sx, - useSX, - titleVariant, - subtitleVariant, - colorVariant, - paddingVariant, + icon = , + title = 'Title', + subtitle = 'Subtitle', + sideText = 'Side Text', + sx = {}, + useSX = false, + titleVariant = 'h4', + subtitleVariant = 'body1', + colorVariant = 'text.main', + paddingVariant = '1.5rem 1rem 0 1rem', }) => { const { theme } = useMode(); return ( @@ -70,13 +69,6 @@ const BoxHeader = ({ export default BoxHeader; -BoxHeader.defaultProps = { - icon: , - title: 'Title', - subtitle: 'Subtitle', - sideText: 'Side Text', -}; - BoxHeader.propTypes = { icon: PropTypes.node, title: PropTypes.string, diff --git a/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/DashBoardLayout.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/DashBoardLayout.jsx index 92b92b5..3bd23d1 100644 --- a/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/DashBoardLayout.jsx +++ b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/DashBoardLayout.jsx @@ -1,22 +1,15 @@ import { useMode } from 'context'; -import { useLocation } from 'react-router-dom'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import PropTypes from 'prop-types'; -import MDBox from '../../MDBOX/index'; -function DashboardLayout({ children }) { - const { pathname } = useLocation(); +function DashBoardLayout({ children }) { const { theme } = useMode(); - const { pxToRem } = theme.functions; return ( ({ - // p: 3, position: 'relative', marginLeft: theme.functions.pxToRem(0), // Adjust based on sidebar width - // marginLeft: isSidebarOpen - // ? theme.functions.pxToRem(250) - // : theme.functions.pxToRem(0), // Adjust based on sidebar width transition: transitions.create(['margin-left', 'margin-right'], { easing: transitions.easing.easeInOut, duration: transitions.duration.standard, @@ -31,9 +24,9 @@ function DashboardLayout({ children }) { ); } -// Typechecking props for the DashboardLayout -DashboardLayout.propTypes = { +// Typechecking props for the DashBoardLayout +DashBoardLayout.propTypes = { children: PropTypes.node.isRequired, }; -export default DashboardLayout; +export default DashBoardLayout; diff --git a/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/PageHeader.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/PageHeader.jsx index b6a6530..3ca1259 100644 --- a/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/PageHeader.jsx +++ b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/PageHeader.jsx @@ -1,13 +1,12 @@ import React from 'react'; import styled from 'styled-components'; import { Box } from '@mui/material'; -import SimpleSectionHeader from './SimpleSectionHeader'; -import { PageHeaderSkeleton } from '../system-utils/SkeletonVariants'; -import RCButton from '../../RCBUTTON'; -import useUserData from 'context/state/useUserData'; -import { useFormManagement } from 'context/formHooks/useFormManagement'; import { Tooltip } from '@mui/joy'; -import RCCard from '../../RCCARD'; +import { useFormManagement, useUserData } from 'context'; +import { PageHeaderSkeleton } from '../system-utils'; +import SimpleSectionHeader from './SimpleSectionHeader'; +import RCCard from 'layout/REUSABLE_COMPONENTS/RCCARD'; +import RCButton from 'layout/REUSABLE_COMPONENTS/RCBUTTON'; const FlexContainer = styled(Box)(({ theme }) => ({ display: 'flex', @@ -33,7 +32,7 @@ const PageHeader = ({ type = 'Portfolio', // Default type action, }) => { - const { setActiveFormSchema } = useFormManagement(); + const { setActiveFormSchema } = useFormManagement(formName); const { user } = useUserData(); if (!user) { return ; diff --git a/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout.jsx index 19ed199..2e56420 100644 --- a/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout.jsx +++ b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout.jsx @@ -4,7 +4,7 @@ import MDBox from '../../MDBOX'; import { Grid } from '@mui/material'; import { useMode } from 'context'; -function PageLayout({ background, backCol, children }) { +function PageLayout({ children }) { const { pathname } = useLocation(); const { theme } = useMode(); return ( @@ -26,12 +26,6 @@ function PageLayout({ background, backCol, children }) { ); } -// Setting default values for the props for PageLayout -PageLayout.defaultProps = { - background: 'default', - backCol: true, -}; - // Typechecking props for the PageLayout PageLayout.propTypes = { background: PropTypes.oneOf(['white', 'light', 'default']), diff --git a/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/StatBox.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/StatBox.jsx index ad53311..03c76b6 100644 --- a/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/StatBox.jsx +++ b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/StatBox.jsx @@ -1,8 +1,8 @@ -import { Box, Card, CardContent, Typography, useTheme } from '@mui/material'; +import { Box, Typography } from '@mui/material'; import { useMode } from 'context'; -import MDBox from '../../MDBOX'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; -const StatBox = ({ title, subtitle, icon, progress, increase, wrapIcon }) => { +const StatBox = ({ title, subtitle, icon, increase }) => { const { theme } = useMode(); const colors = theme.palette; const green = colors.success.dark; diff --git a/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/index.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/index.jsx new file mode 100644 index 0000000..25bfc47 --- /dev/null +++ b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/index.jsx @@ -0,0 +1,23 @@ +import BoxHeader from './BoxHeader'; +import DashboardBox from './DashboardBox'; +import FlexBetween from './FlexBetween'; +import IconStatWrapper from './IconStatWrapper'; +import NivoContainer from './NivoContainer'; +import PageHeader from './PageHeader'; +import PageLayout from './PageLayout'; +import SimpleSectionHeader from './SimpleSectionHeader'; +import StatBox from './StatBox'; +import DashBoardLayout from './DashBoardLayout'; + +export { + BoxHeader, + DashboardBox, + FlexBetween, + IconStatWrapper, + DashBoardLayout, + NivoContainer, + PageHeader, + PageLayout, + SimpleSectionHeader, + StatBox, +}; diff --git a/src/layout/REUSABLE_COMPONENTS/utils/system-utils/ErrorFallback.jsx b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/ErrorFallback.jsx index e73f5c4..56a498b 100644 --- a/src/layout/REUSABLE_COMPONENTS/utils/system-utils/ErrorFallback.jsx +++ b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/ErrorFallback.jsx @@ -1,96 +1,181 @@ -import React from 'react'; -import { Typography, Button, Paper, Container, Box } from '@mui/material'; +// import React from 'react'; +// import { Typography, Paper, Container, Box } from '@mui/material'; +// import RefreshIcon from '@mui/icons-material/Refresh'; +// import FileCopyIcon from '@mui/icons-material/FileCopy'; +// import RCButton from '../../RCBUTTON'; + +// class ErrorFallback extends React.Component { +// constructor(props) { +// super(props); +// this.state = { hasCopied: false }; +// } + +// handleCopyErrorDetails = async () => { +// try { +// await navigator.clipboard.writeText(this.props.error.stack); +// this.setState({ hasCopied: true }); +// setTimeout(() => this.setState({ hasCopied: false }), 2000); // Reset copy status after 2 seconds +// } catch (error) { +// console.error('Failed to copy error details:', error); +// } +// }; +// render() { +// const { error, resetErrorBoundary } = this.props; +// const { hasCopied } = this.state; + +// return ( +// +// +// +// Oops! Something went wrong. +// +// +// An unexpected error has occurred. Our team has been notified. +// +// +// +// Error: {error.name} +// +// +// {error.message} +// +// +// +// +// {error.stack} +// +// +// +// } +// color="success" +// size="small" +// variant="holo" +// withContainer={false} +// onClick={() => window.location.reload()} +// > +// Refresh +// +// } +// variant="holo" +// color="error" +// size="small" +// withContainer={false} +// onClick={this.handleCopyErrorDetails} +// style={{ marginLeft: '10px' }} +// > +// {hasCopied ? 'Copied' : 'Copy Error'} +// +// +// +// +// ); +// } +// } + +// export default ErrorFallback; +import React, { useState } from 'react'; +import { Typography, Paper, Container, Box } from '@mui/material'; import RefreshIcon from '@mui/icons-material/Refresh'; import FileCopyIcon from '@mui/icons-material/FileCopy'; -import RCButton from '../../RCBUTTON'; -import { useMode } from 'context'; +import RCButton from 'layout/REUSABLE_COMPONENTS/RCBUTTON'; -class ErrorFallback extends React.Component { - constructor(props) { - super(props); - this.state = { hasCopied: false }; - } +function ErrorFallback({ error, resetErrorBoundary }) { + const [hasCopied, setHasCopied] = useState(false); - handleCopyErrorDetails = async () => { + const handleCopyErrorDetails = async () => { try { - await navigator.clipboard.writeText(this.props.error.stack); - this.setState({ hasCopied: true }); - setTimeout(() => this.setState({ hasCopied: false }), 2000); // Reset copy status after 2 seconds + await navigator.clipboard.writeText(error.stack); + setHasCopied(true); + setTimeout(() => setHasCopied(false), 2000); // Reset copy status after 2 seconds } catch (error) { console.error('Failed to copy error details:', error); } }; - render() { - const { error, resetErrorBoundary } = this.props; - const { hasCopied } = this.state; - const { theme } = this.props; - return ( - - - - Oops! Something went wrong. + return ( + + + + Oops! Something went wrong. + + + An unexpected error has occurred. Our team has been notified. + + + + Error: {error.name} + + + {error.message} - - An unexpected error has occurred. Our team has been notified. + + + + {error.stack} - + + } + color="success" + size="small" + variant="holo" + withContainer={false} + onClick={() => window.location.reload()} > - - Error: {error.name} - - - {error.message} - - - + } + variant="holo" + color="error" + size="small" + withContainer={false} + onClick={handleCopyErrorDetails} + style={{ marginLeft: '10px' }} > - - {error.stack} - - - - } - color="success" - size="small" - variant="holo" - withContainer={false} - onClick={() => window.location.reload()} - > - Refresh - - } - variant="holo" - color="error" - size="small" - withContainer={false} - onClick={this.handleCopyErrorDetails} - style={{ marginLeft: '10px' }} - > - {hasCopied ? 'Copied' : 'Copy Error'} - - - - - ); - } + {hasCopied ? 'Copied' : 'Copy Error'} + + + + + ); } export default ErrorFallback; diff --git a/src/layout/REUSABLE_COMPONENTS/utils/system-utils/SkeletonVariants.jsx b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/SkeletonVariants.jsx index eb3d5e8..6ba9ffb 100644 --- a/src/layout/REUSABLE_COMPONENTS/utils/system-utils/SkeletonVariants.jsx +++ b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/SkeletonVariants.jsx @@ -10,15 +10,188 @@ import { Collapse, CardActionArea, Typography, + Stack, } from '@mui/material'; -import useSkeletonLoader from './useSkeletonLoader'; import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import { useMode } from 'context'; import { AspectRatioBoxSkeleton, StyledSkeletonCard, } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +const skeletonLoadingVariants = { + title: { + variant: 'text', + width: '60%', + height: 32, // Approximate height of a title + }, + subtitle: { + variant: 'text', + width: '40%', + height: 24, // Approximate height of a subtitle + }, + button: { + variant: 'rectangular', + width: 180, // Approximate width of a button + height: 40, // Approximate height of a button + }, + chart: { + variant: 'rectangular', + width: '100%', + height: 300, + }, + listItem: { + variant: 'rectangular', + width: '100%', + height: 50, + marginBottom: 1, + }, + text: { + variant: 'text', + width: '60%', + height: 40, + }, + card: { + variant: 'rectangular', + width: '100%', + height: 200, + marginBottom: 2, + }, + avatar: { + variant: 'circular', + width: 40, + height: 40, + marginBottom: 1, + }, + dashboardPanel: { + variant: 'rectangular', + width: '100%', + height: 150, + marginBottom: 2, + }, + grid: { + variant: 'rectangular', + width: '100%', + height: 150, // Default height for grid items + }, + gridContainer: { + variant: 'rectangular', + width: '100%', + height: 150, + marginBottom: 2, + }, + gridItem: { + variant: 'rectangular', + width: '100%', + height: 150, + marginBottom: 2, + }, +}; + +const useSkeletonLoader = () => { + const SkeletonLoader = ({ + type = 'text', + count = 3, + gridProps = { + container: true, + spacing: 2, + }, + gridItemProps = { + xs: 12, + sm: 6, + md: 3, + lg: 4, + }, + styleProps = {}, + contentProps = { + typeData: [ + { + id: 0, + type: 'avatar', + num: 1, + index: 0, + }, + { + id: 1, + type: 'title', + num: 1, + index: 1, + }, + { + id: 2, + type: 'subtitle', + num: 1, + index: 2, + }, + ], + numOfItems: 3, + types: ['title', 'subtitle', 'avatar'], + }, + ...props + }) => { + const generateVariantSequence = () => { + return contentProps?.typeData?.flatMap((item) => + Array.from({ length: item.num }, () => item.type) + ); + }; + + if (type === 'grid') { + const variantSequence = generateVariantSequence(); + return ( + + {variantSequence.map((variantType, index) => { + const { variant, width, height } = + skeletonLoadingVariants[variantType]; + return ( + + + + ); + })} + + ); + } + if (type === 'pieChart') { + return ( + + {' '} + + ); + } + const { variant, width, height, marginBottom } = + skeletonLoadingVariants[type] || skeletonLoadingVariants.text; + + // Support for rendering multiple skeletons of the same type, useful for lists + return ( + + {Array.from({ length: count }, (_, index) => ( + + + + ))} + + ); + }; + return { SkeletonLoader }; +}; const LoadingCardSkeleton = () => { return ( ( width={200} height={200} sx={{ - bgcolor: theme.palette.chartTheme.primary.main, + bgcolor: theme.palette.primary.main, }} /> diff --git a/src/layout/REUSABLE_COMPONENTS/utils/system-utils/index.jsx b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/index.jsx new file mode 100644 index 0000000..6b3716f --- /dev/null +++ b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/index.jsx @@ -0,0 +1,37 @@ +import Copyright from './Copyright'; +import ErrorFallback from './ErrorFallback'; +import ErrorIndicator from './ErrorIndicator'; +import LoadingIndicator from './LoadingIndicator'; +import LoadingOverlay from './LoadingOverlay'; +import NotFoundPage from './NotFoundPage'; +import { + LoadingCardSkeleton, + HeroSectionSkeleton, + PageHeaderSkeleton, + DynamicSkeletonList, + SkeletonCard, + CollectionListItemSkeleton, + DeckListItemSkeleton, + SkeletonCartItem, + SkeletonPieChart, +} from './SkeletonVariants'; +import SplashPage2 from './SplashPage2'; + +export { + Copyright, + ErrorFallback, + ErrorIndicator, + LoadingIndicator, + LoadingOverlay, + NotFoundPage, + LoadingCardSkeleton, + HeroSectionSkeleton, + PageHeaderSkeleton, + DynamicSkeletonList, + SkeletonCard, + CollectionListItemSkeleton, + DeckListItemSkeleton, + SkeletonCartItem, + SkeletonPieChart, + SplashPage2, +}; diff --git a/src/layout/REUSABLE_COMPONENTS/utils/system-utils/useSkeletonLoader.jsx b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/useSkeletonLoader.jsx deleted file mode 100644 index 3eedab4..0000000 --- a/src/layout/REUSABLE_COMPONENTS/utils/system-utils/useSkeletonLoader.jsx +++ /dev/null @@ -1,190 +0,0 @@ -import React from 'react'; -import { Box, Stack, Grid } from '@mui/material'; -import { Skeleton } from '@mui/joy'; - -// Enhanced skeleton configurations for a wider variety of types -const skeletonVariants = { - title: { - variant: 'text', - width: '60%', - height: 32, // Approximate height of a title - }, - subtitle: { - variant: 'text', - width: '40%', - height: 24, // Approximate height of a subtitle - }, - button: { - variant: 'rectangular', - width: 180, // Approximate width of a button - height: 40, // Approximate height of a button - }, - chart: { - variant: 'rectangular', - width: '100%', - height: 300, - }, - listItem: { - variant: 'rectangular', - width: '100%', - height: 50, - marginBottom: 1, - }, - text: { - variant: 'text', - width: '60%', - height: 40, - }, - card: { - variant: 'rectangular', - width: '100%', - height: 200, - marginBottom: 2, - }, - avatar: { - variant: 'circular', - width: 40, - height: 40, - marginBottom: 1, - }, - dashboardPanel: { - variant: 'rectangular', - width: '100%', - height: 150, - marginBottom: 2, - }, - grid: { - variant: 'rectangular', - width: '100%', - height: 150, // Default height for grid items - }, - gridContainer: { - variant: 'rectangular', - width: '100%', - height: 150, - marginBottom: 2, - }, - gridItem: { - variant: 'rectangular', - width: '100%', - height: 150, - marginBottom: 2, - }, -}; - -/** - * Custom hook to return skeleton loaders based on type, with enhanced styles and variants. - * @returns A skeleton component based on the specified type, with added flexibility for customization. - */ -const useSkeletonLoader = () => { - const SkeletonLoader = ({ - type = 'text', - count = 3, - gridProps = { - container: true, - spacing: 2, - }, - gridItemProps = { - xs: 12, - sm: 6, - md: 3, - lg: 4, - }, - styleProps = {}, - contentProps = { - typeData: [ - { - id: 0, - type: 'avatar', - num: 1, - index: 0, - }, - { - id: 1, - type: 'title', - num: 1, - index: 1, - }, - { - id: 2, - type: 'subtitle', - num: 1, - index: 2, - }, - ], - numOfItems: 3, - types: ['title', 'subtitle', 'avatar'], - }, - ...props - }) => { - const generateVariantSequence = () => { - return contentProps?.typeData?.flatMap((item) => - Array.from({ length: item.num }, () => item.type) - ); - }; - - if (type === 'grid') { - const variantSequence = generateVariantSequence(); - return ( - - {variantSequence.map((variantType, index) => { - const { variant, width, height } = skeletonVariants[variantType]; - return ( - - - - ); - })} - - ); - } - if (type === 'pieChart') { - return ( - - {' '} - {/* */} - - ); - } - const { variant, width, height, marginBottom } = - skeletonVariants[type] || skeletonVariants.text; - - // Support for rendering multiple skeletons of the same type, useful for lists - return ( - - {Array.from({ length: count }, (_, index) => ( - - - - ))} - - ); - }; - - return { SkeletonLoader }; -}; - -export default useSkeletonLoader; diff --git a/src/components/cards/CardDetailsContainer.jsx b/src/layout/cards/CardDetailsContainer.jsx similarity index 100% rename from src/components/cards/CardDetailsContainer.jsx rename to src/layout/cards/CardDetailsContainer.jsx diff --git a/src/components/cards/CardMediaSection.js b/src/layout/cards/CardMediaSection.js similarity index 100% rename from src/components/cards/CardMediaSection.js rename to src/layout/cards/CardMediaSection.js diff --git a/src/components/cards/CardToolTip.jsx b/src/layout/cards/CardToolTip.jsx similarity index 100% rename from src/components/cards/CardToolTip.jsx rename to src/layout/cards/CardToolTip.jsx diff --git a/src/components/cards/GenericCard.jsx b/src/layout/cards/GenericCard.jsx similarity index 99% rename from src/components/cards/GenericCard.jsx rename to src/layout/cards/GenericCard.jsx index 6861029..e959d6c 100644 --- a/src/components/cards/GenericCard.jsx +++ b/src/layout/cards/GenericCard.jsx @@ -11,7 +11,7 @@ import { import usePopover from 'context/hooks/usePopover'; import GenericActionButtons from 'layout/REUSABLE_COMPONENTS/GenericActionButtons'; import useDialogState from 'context/hooks/useDialogState'; -import useManager from 'context/useManager'; +import useManager from 'context/state/useManager'; import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; const getQuantity = ({ card, diff --git a/src/layout/cart/cartPageContainers/Review.jsx b/src/layout/cart/cartPageContainers/Review.jsx index 0ccfed4..71baf74 100644 --- a/src/layout/cart/cartPageContainers/Review.jsx +++ b/src/layout/cart/cartPageContainers/Review.jsx @@ -4,7 +4,7 @@ import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import ListItemText from '@mui/material/ListItemText'; import Grid from '@mui/material/Grid'; -import useManager from 'context/useManager'; +import useManager from 'context/state/useManager'; const addresses = ['1 MUI Drive', 'Reactville', 'Anytown', '99999', 'USA']; const payments = [ { name: 'Card type', detail: 'Visa' }, diff --git a/src/layout/cart/index.jsx b/src/layout/cart/index.jsx index 42b47ec..e616ab9 100644 --- a/src/layout/cart/index.jsx +++ b/src/layout/cart/index.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { Typography, Box, Grid, CardContent, Card, Stack } from '@mui/material'; import { useMode } from 'context'; -import useManager from 'context/useManager'; +import useManager from 'context/state/useManager'; import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; const CartContent = () => { diff --git a/src/layout/collection/CollectionsViewLayout/CollectionListItem.jsx b/src/layout/collection/CollectionsViewLayout/CollectionListItem.jsx index 8e69308..d8e5d5d 100644 --- a/src/layout/collection/CollectionsViewLayout/CollectionListItem.jsx +++ b/src/layout/collection/CollectionsViewLayout/CollectionListItem.jsx @@ -5,7 +5,7 @@ import { Divider, Tooltip } from '@mui/joy'; import PropTypes from 'prop-types'; import useDialogState from 'context/hooks/useDialogState'; import { useMode } from 'context'; -import CollectionDialog from 'components/dialogs/CollectionDialog'; +import CollectionDialog from 'layout/dialogs/CollectionDialog'; import RCChange from 'layout/REUSABLE_COMPONENTS/RC_OTHER/RCChange'; import RCInfoItem from 'layout/REUSABLE_COMPONENTS/RC_OTHER/RCInfoItem'; import { roundToNearestTenth } from 'context/Helpers'; diff --git a/src/layout/collection/CollectionsViewLayout/index.jsx b/src/layout/collection/CollectionsViewLayout/index.jsx index 9158e29..ecb5b5f 100644 --- a/src/layout/collection/CollectionsViewLayout/index.jsx +++ b/src/layout/collection/CollectionsViewLayout/index.jsx @@ -7,7 +7,7 @@ import useBreakpoint from 'context/hooks/useBreakPoint'; import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/utils/system-utils/LoadingOverlay'; import { useMode } from 'context'; import { CollectionListItemSkeleton } from 'layout/REUSABLE_COMPONENTS/utils/system-utils/SkeletonVariants'; -import useManager from 'context/useManager'; +import useManager from 'context/state/useManager'; import RCCard from 'layout/REUSABLE_COMPONENTS/RCCARD'; const CollectionsViewLayout = ({ handleSelectAndShowCollection }) => { diff --git a/src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx b/src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx index 348cdce..f736b87 100644 --- a/src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx +++ b/src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx @@ -4,7 +4,7 @@ import { DataGrid } from '@mui/x-data-grid'; import { useMemo } from 'react'; import { Divider } from '@mui/joy'; import { useMode } from 'context'; -import useManager from 'context/useManager'; +import useManager from 'context/state/useManager'; import prepareTableData from 'data/prepareTableData'; import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; diff --git a/src/layout/collection/CollectionsViewLayout/stats/StatBoxes.jsx b/src/layout/collection/CollectionsViewLayout/stats/StatBoxes.jsx index f0eca33..928d84d 100644 --- a/src/layout/collection/CollectionsViewLayout/stats/StatBoxes.jsx +++ b/src/layout/collection/CollectionsViewLayout/stats/StatBoxes.jsx @@ -2,13 +2,13 @@ import { Box, Divider } from '@mui/material'; import StatBox from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/StatBox'; import { useMode } from 'context'; import FormatListNumberedRoundedIcon from '@mui/icons-material/FormatListNumberedRounded'; -import useManager from 'context/useManager'; +import useManager from 'context/state/useManager'; import MonetizationOnIcon from '@mui/icons-material/MonetizationOn'; import { roundToNearestTenth } from 'context/Helpers'; const TotalCardsStatBox = () => { const { theme } = useMode(); - const colors = theme.palette.chartTheme; + const colors = theme.palette; const primary = colors.primary.dark; const grey = colors.grey.dark; const { collectionMetaData } = useManager(); @@ -42,7 +42,7 @@ const TotalCardsStatBox = () => { const TotalPriceStatBox = () => { const { theme } = useMode(); - const colors = theme.palette.chartTheme; + const colors = theme.palette; const primary = colors.primary.dark; const grey = colors.grey.dark; const { collectionMetaData } = useManager(); diff --git a/src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx b/src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx index 53b1504..98466a4 100644 --- a/src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx +++ b/src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx @@ -12,7 +12,7 @@ import { } from 'recharts'; import BoxHeader from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/BoxHeader'; import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; -import useManager from 'context/useManager'; +import useManager from 'context/state/useManager'; import RCWrappedIcon from 'layout/REUSABLE_COMPONENTS/RCWRAPPEDICON'; const ValuDistributionCircle = () => { diff --git a/src/layout/collection/PortfolioViewLayout/MyPortfolioLineChart.jsx b/src/layout/collection/PortfolioViewLayout/MyPortfolioLineChart.jsx index e6d101e..4c945e7 100644 --- a/src/layout/collection/PortfolioViewLayout/MyPortfolioLineChart.jsx +++ b/src/layout/collection/PortfolioViewLayout/MyPortfolioLineChart.jsx @@ -25,7 +25,7 @@ const MyPortfolioLineChart = ({ // tickValues, validMarkers, success, - redAccent, + error, grey, text, }) => { @@ -116,7 +116,7 @@ const MyPortfolioLineChart = ({ }, legend: { text: { - fill: success.darkestest, + fill: success.darkest, fontSize: 12, outlineWidth: 0.1, outlineColor: grey.darkest, @@ -140,7 +140,7 @@ const MyPortfolioLineChart = ({ tooltip: { container: { color: grey.darkest, - borderColor: redAccent.darkest, + borderColor: error.main_darkest, }, }, }} @@ -162,7 +162,7 @@ MyPortfolioLineChart.propTypes = { }) ).isRequired, success: PropTypes.object.isRequired, - redAccent: PropTypes.object.isRequired, + error: PropTypes.object.isRequired, grey: PropTypes.object.isRequired, text: PropTypes.string.isRequired, }; diff --git a/src/layout/collection/PortfolioViewLayout/TopCardsSwiper.jsx b/src/layout/collection/PortfolioViewLayout/TopCardsSwiper.jsx index 92a41c6..0e9d253 100644 --- a/src/layout/collection/PortfolioViewLayout/TopCardsSwiper.jsx +++ b/src/layout/collection/PortfolioViewLayout/TopCardsSwiper.jsx @@ -9,12 +9,12 @@ import { Autoplay, Pagination, Navigation } from 'swiper/modules'; import { useMode } from 'context'; import placeHolder from 'assets/images/placeholder.jpeg'; import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; -import CardDetailsContainer from 'components/cards/CardDetailsContainer'; +import CardDetailsContainer from 'layout/cards/CardDetailsContainer'; import FlexBetween from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/FlexBetween'; import DashboardBox from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashboardBox'; import BoxHeader from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/BoxHeader'; import { CardWrapper } from 'layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents'; -import useManager from 'context/useManager'; +import useManager from 'context/state/useManager'; import useBreakpoint from 'context/hooks/useBreakPoint'; const TopCardsSwiper = () => { diff --git a/src/layout/collection/PortfolioViewLayout/index.jsx b/src/layout/collection/PortfolioViewLayout/index.jsx index 35e46ff..dfd1509 100644 --- a/src/layout/collection/PortfolioViewLayout/index.jsx +++ b/src/layout/collection/PortfolioViewLayout/index.jsx @@ -9,11 +9,11 @@ import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/utils/system-utils/Loadin import { ResponsiveContainer } from 'recharts'; import { formatDateBasedOnRange, roundToNearestTenth } from 'context/Helpers'; import { formFields } from 'data/formsConfig'; -import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; +import RCDynamicForm from 'layout/REUSABLE_COMPONENTS/RC_FORMS/RCDynamicForm'; import { DataGrid, GridToolbar } from '@mui/x-data-grid'; import NivoContainer from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/NivoContainer'; import { ChartArea } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import useManager from 'context/useManager'; +import useManager from 'context/state/useManager'; import useSelectorActions from 'context/hooks/useSelectorActions'; import RCWrappedIcon from 'layout/REUSABLE_COMPONENTS/RCWRAPPEDICON'; import prepareTableData from 'data/prepareTableData'; @@ -216,7 +216,7 @@ FormSelectorRow.displayName = 'FormSelectorRow'; // !--------------------- CHART COMPONENT --------------------- const ChartAreaComponent = React.memo(() => { const { theme } = useMode(); - const { success, redAccent, grey } = theme.palette; + const { success, error, grey } = theme.palette; const { selectedTimeRange, selectedStat } = useSelectorActions(); const { selectedCollection, handleSelectCollection } = useManager(); const [collection, setCollection] = useState(selectedCollection); @@ -299,7 +299,7 @@ const ChartAreaComponent = React.memo(() => { tickValues={tickValues} validMarkers={[memoMarker]} xFormat={memoChartData.id === '24hr' ? '%H:%M' : '%b %d'} - redAccent={redAccent} + error={error} success={success} grey={grey} text={theme.palette.text.primary} diff --git a/src/layout/collection/index.jsx b/src/layout/collection/index.jsx index 8cf8661..3f7cd3d 100644 --- a/src/layout/collection/index.jsx +++ b/src/layout/collection/index.jsx @@ -1,9 +1,9 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useMode } from 'context'; -import DashboardLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashBoardLayout'; +import DashBoardLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashBoardLayout'; import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import { Grid } from '@mui/material'; -import CollectionDialog from 'components/dialogs/CollectionDialog'; +import CollectionDialog from 'layout/dialogs/CollectionDialog'; import useDialogState from 'context/hooks/useDialogState'; import DashboardBox from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashboardBox'; import StatBoard from './CollectionsViewLayout/StatBoard'; @@ -11,18 +11,18 @@ import { Tab, Tabs } from '@mui/material'; import CollectionPortfolioHeader from './PortfolioViewLayout/CollectionPortfolioHeader'; import PageHeader from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageHeader'; import useUserData from 'context/state/useUserData'; -import { useFormManagement } from 'context/formHooks/useFormManagement'; import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/utils/system-utils/LoadingOverlay'; -import useManager from 'context/useManager'; +import useManager from 'context/state/useManager'; import CollectionsViewLayout from './CollectionsViewLayout'; import PortfolioViewLayout from './PortfolioViewLayout'; +import { useFormManagement } from 'context/hooks'; const CollectionsView = ({ openDialog, handleTabAndSelect }) => { const { theme } = useMode(); const { setActiveFormSchema } = useFormManagement(); const { user } = useUserData(); return ( - + { /> - + ); }; const PortfolioView = ({ handleBackToCollections, selectedCollection }) => ( - + ( - + ); const CollectionPortfolio = () => { const { theme } = useMode(); diff --git a/src/layout/deck/DeckListItem.jsx b/src/layout/deck/DeckListItem.jsx index 4cb3872..e75e6f2 100644 --- a/src/layout/deck/DeckListItem.jsx +++ b/src/layout/deck/DeckListItem.jsx @@ -13,9 +13,9 @@ import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import DeckBuilderIcon from '../../data/DeckBuilderIcon'; import RCInfoItem from 'layout/REUSABLE_COMPONENTS/RC_OTHER/RCInfoItem'; import { useMode } from 'context'; -import GenericCard from 'components/cards/GenericCard'; +import GenericCard from 'layout/cards/GenericCard'; import { formFields } from 'data/formsConfig'; -import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; +import RCDynamicForm from 'layout/REUSABLE_COMPONENTS/RC_FORMS/RCDynamicForm'; import useBreakpoint from 'context/hooks/useBreakPoint'; import { SkeletonCard } from 'layout/REUSABLE_COMPONENTS/utils/system-utils/SkeletonVariants'; import RCWrappedIcon from 'layout/REUSABLE_COMPONENTS/RCWRAPPEDICON'; diff --git a/src/layout/deck/index.jsx b/src/layout/deck/index.jsx index 25646da..74b0877 100644 --- a/src/layout/deck/index.jsx +++ b/src/layout/deck/index.jsx @@ -9,16 +9,15 @@ import { } from '@mui/material'; import { useMode } from 'context'; import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; -import DashboardLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashBoardLayout'; -import SearchComponent from 'components/forms/search/SearchComponent'; -import DeckDialog from 'components/dialogs/DeckDialog'; -import useDialogState from 'context/hooks/useDialogState'; +import DashBoardLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashBoardLayout'; +import SearchComponent from 'layout/search/SearchComponent'; +import DeckDialog from 'layout/dialogs/DeckDialog'; import DeckListItem from './DeckListItem'; import DashboardBox from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashboardBox'; import PageHeader from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageHeader'; import useUserData from 'context/state/useUserData'; -import { useFormManagement } from 'context/formHooks/useFormManagement'; -import useManager from 'context/useManager'; +import useManager from 'context/state/useManager'; +import { useDialogState, useFormManagement } from 'context/hooks'; const DeckBuilder = () => { const { theme } = useMode(); @@ -144,7 +143,7 @@ const DeckBuilder = () => { ); return ( - + @@ -222,7 +221,7 @@ const DeckBuilder = () => { - + {dialogState.isAddDeckDialogOpen && ( { const { theme } = useMode(); diff --git a/src/components/dialogs/DeckDialog.jsx b/src/layout/dialogs/DeckDialog.jsx similarity index 94% rename from src/components/dialogs/DeckDialog.jsx rename to src/layout/dialogs/DeckDialog.jsx index c5091e5..b0cb8cd 100644 --- a/src/components/dialogs/DeckDialog.jsx +++ b/src/layout/dialogs/DeckDialog.jsx @@ -7,13 +7,13 @@ import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; import { formFields } from 'data/formsConfig'; -import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; +import RCDynamicForm from 'layout/REUSABLE_COMPONENTS/RC_FORMS/RCDynamicForm'; import { DialogPaper, StyledDialog, StyledDialogContent, } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import useInitialFormData from 'context/formHooks/useInitialFormData'; +import useInitialFormData from 'context/hooks/useInitialFormData'; const DeckDialog = ({ open, onClose, isNew, deckData }) => { const { theme } = useMode(); diff --git a/src/components/dialogs/DetailsModal.jsx b/src/layout/dialogs/DetailsModal.jsx similarity index 100% rename from src/components/dialogs/DetailsModal.jsx rename to src/layout/dialogs/DetailsModal.jsx diff --git a/src/components/dialogs/GenericCardDialog.jsx b/src/layout/dialogs/GenericCardDialog.jsx similarity index 86% rename from src/components/dialogs/GenericCardDialog.jsx rename to src/layout/dialogs/GenericCardDialog.jsx index 5f22cf4..f6ebfe2 100644 --- a/src/components/dialogs/GenericCardDialog.jsx +++ b/src/layout/dialogs/GenericCardDialog.jsx @@ -10,19 +10,15 @@ import { List, ListItem, CardContent, - useMediaQuery, - useTheme, Grid, } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; import CardMediaSection from '../cards/CardMediaSection'; import CardDetailsContainer from '../cards/CardDetailsContainer'; -import { useMode } from 'context'; +import { useMode, useBreakpoint } from 'context'; import { useSnackbar } from 'notistack'; import FlexBetween from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/FlexBetween'; -import useBreakpoint from 'context/hooks/useBreakPoint'; import GenericActionButtons from 'layout/REUSABLE_COMPONENTS/GenericActionButtons'; -import useDialogState from 'context/hooks/useDialogState'; const GenericCardDialog = ({ open = false, @@ -34,10 +30,7 @@ const GenericCardDialog = ({ ...otherProps }) => { const { theme } = useMode(); - const { closeDialog, dialogState } = useDialogState(); - const fullScreen = useMediaQuery(theme.breakpoints.down('md')); - const { isMobile } = useBreakpoint(); - console.log('GENERIC CARD DIALOG OPEN', open); + const { isMobile, isMd } = useBreakpoint(); const { enqueueSnackbar } = useSnackbar(); // Assuming useOverlay has enqueueSnackbar method const handleAction = useCallback( (message, variant) => { @@ -45,13 +38,11 @@ const GenericCardDialog = ({ }, [enqueueSnackbar] ); - useEffect(() => { if (open && card) { handleAction('Card details loaded successfully.', 'success'); } }, [open, card, handleAction]); - const handleContextSelect = useCallback( (newContext) => { handleAction(`Card added to ${newContext} successfully.`, 'success'); @@ -67,20 +58,17 @@ const GenericCardDialog = ({ } }} TransitionComponent={transition ? Slide : Fade} - fullScreen={fullScreen} + fullScreen={isMd} aria-labelledby="card-detail-dialog-title" aria-describedby="card-detail-dialog-description" maxWidth="md" fullWidth sx={{ - // position: 'relative', // Ensure the relative positioning for the close button's absolute positioning - '& .MuiDialog-paper': { borderRadius: 2, p: 2, maxHeight: '90vh', alignItems: 'center', - // position: 'relative', // Ensure the relative positioning for the close button's absolute positioning }, }} slotProps={{ diff --git a/src/pages/LoginDialog.jsx b/src/layout/dialogs/LoginDialog.jsx similarity index 88% rename from src/pages/LoginDialog.jsx rename to src/layout/dialogs/LoginDialog.jsx index 0347d31..8c9ba99 100644 --- a/src/pages/LoginDialog.jsx +++ b/src/layout/dialogs/LoginDialog.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import { Avatar, Box, @@ -10,23 +10,28 @@ import { Typography, } from '@mui/material'; import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; -import { useMode } from 'context'; -import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; -import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; +import LoginIcon from '@mui/icons-material/Login'; +import PersonAddIcon from '@mui/icons-material/PersonAdd'; import { DialogPaper, StyledDialog, StyledDialogContent, } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import RCSwitch from 'components/forms/Factory/RCSwitch'; -import LoginIcon from '@mui/icons-material/Login'; -import PersonAddIcon from '@mui/icons-material/PersonAdd'; -import useDialogState from 'context/hooks/useDialogState'; -import useManageCookies from 'context/hooks/useManageCookies'; -import { useFormManagement } from 'context/formHooks/useFormManagement'; -import { formFields } from 'data/formsConfig'; -import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; import styled from 'styled-components'; +import { formFields } from 'data'; +import { + useDialogState, + useFormManagement, + useManageCookies, + useMode, +} from 'context'; +import { + MDBox, + RCDynamicForm, + RCSwitch, + RCTypography, +} from 'layout/REUSABLE_COMPONENTS'; + const StyledInfoPanel = styled(Box)(({ theme }) => ({ padding: theme.spacing(2), backgroundColor: theme.palette.background.paper, @@ -75,10 +80,10 @@ const GuestInfoPanel = () => { function LoginDialog() { const { theme } = useMode(); const { getCookie } = useManageCookies(); - const { isLoggedIn } = getCookie(['isLoggedIn']); - const dialogName = 'isAuthDialogOpen'; // Define a name for the dialog const { closeDialog } = useDialogState(); // Adjusted to useDialog const { toggleActiveForm, currentSchemaKey } = useFormManagement('loginForm'); + // const ref = React.useRef(); + const { isLoggedIn } = getCookie(['isLoggedIn']); const formTitle = currentSchemaKey === 'loginForm' ? 'Login' : 'Sign Up'; const signupMode = currentSchemaKey === 'signupForm'; return ( @@ -95,7 +100,7 @@ function LoginDialog() { closeDialog(dialogName)} + onClose={() => closeDialog('isAuthDialogOpen')} tbeme={theme} aria-labelledby="responsive-dialog-title" maxWidth="xl" diff --git a/src/layout/home/FeatureCardsSection.jsx b/src/layout/home/FeatureCardsSection.jsx index e122eea..b0e5d80 100644 --- a/src/layout/home/FeatureCardsSection.jsx +++ b/src/layout/home/FeatureCardsSection.jsx @@ -16,7 +16,7 @@ import { CardUnorderedList, FeatureCard, } from '../REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import DetailsModal from 'components/dialogs/DetailsModal'; +import DetailsModal from 'layout/dialogs/DetailsModal'; const AnimatedBox = animated(Box); export const AnimatedFeatureCard = ({ cardData }) => { diff --git a/src/layout/home/index.jsx b/src/layout/home/index.jsx index 5501a4f..ab2a1f8 100644 --- a/src/layout/home/index.jsx +++ b/src/layout/home/index.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import placeHolder from 'assets/images/placeholder.jpeg'; import { HeroSectionSkeleton } from 'layout/REUSABLE_COMPONENTS/utils/system-utils/SkeletonVariants'; @@ -6,13 +6,11 @@ import { Card } from '@mui/material'; import HeroTextSection from './HeroTextSection'; import HeroIconSection from './HeroIconSection'; import HeroSwiper from './HeroSwiper'; -import useLocalStorage from 'context/hooks/useLocalStorage'; -import { useCardStoreHook } from 'context/state/useCardStore'; import HeroChartSection from './HeroChartSection'; -import useBreakpoint from 'context/hooks/useBreakPoint'; +import { useBreakpoint, useCardStore, useLocalStorage } from 'context'; const HeroSection = () => { - const { fetchRandomCardsAndSet } = useCardStoreHook(); + const { fetchRandomCardsAndSet } = useCardStore(); const [randomCards, setRandomCards] = useLocalStorage('randomCards', []); const { isMd } = useBreakpoint(); const [activeCardIndex, setActiveCardIndex] = useState(0); diff --git a/src/layout/navigation/PrivateRoute.jsx b/src/layout/navigation/PrivateRoute.jsx deleted file mode 100644 index 07428a8..0000000 --- a/src/layout/navigation/PrivateRoute.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import { useNavigate } from 'react-router-dom'; -import useUserData from 'context/state/useUserData'; -import { useEffect } from 'react'; - -const PrivateRoute = ({ children }) => { - const { user } = useUserData(); - const navigate = useNavigate(); - useEffect(() => { - if (user === null) { - navigate('/login', { replace: true }); - } - }, [navigate, user]); - - return children; -}; - -export default PrivateRoute; diff --git a/src/layout/navigation/index.jsx b/src/layout/navigation/index.jsx index a57dcbc..65a557e 100644 --- a/src/layout/navigation/index.jsx +++ b/src/layout/navigation/index.jsx @@ -1,19 +1,15 @@ -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useState, useCallback } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { animated, useSprings } from 'react-spring'; + import { Toolbar, IconButton, List, - Hidden, ListItem, - ListItemText, AppBar, useMediaQuery, } from '@mui/material'; -import MenuIcon from '@mui/icons-material/Menu'; -import { useMode } from 'context'; -import { useNavigate } from 'react-router-dom'; -import { animated, useSprings } from 'react-spring'; -import RCLogoSection from 'layout/REUSABLE_COMPONENTS/RC_OTHER/RCLogoSection'; import { Avatar, Box, @@ -25,26 +21,31 @@ import { Sheet, Typography, } from '@mui/joy'; -import useManageCookies from 'context/hooks/useManageCookies'; +import MenuIcon from '@mui/icons-material/Menu'; import { Logout } from '@mui/icons-material'; -import useAuthManager from 'context/state/useAuthManager'; -import useManager from 'context/useManager'; -import RCLoadingButton from 'layout/REUSABLE_COMPONENTS/RCLOADINGBUTTON'; import { baseMenuItems } from 'data'; + +import { + useMode, + useManager, + useManageCookies, + useAuthManager, + useBreakpoint, +} from 'context'; import rgba from 'assets/themes/functions/rgba'; +import { RCLoadingButton, RCLogoSection } from 'layout/REUSABLE_COMPONENTS'; const Navigation = () => { const { theme } = useMode(); const navigate = useNavigate(); const { cart } = useManager(); + const { getCookie } = useManageCookies(); + const { isMd } = useBreakpoint(); const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent); const [isOpen, setIsOpen] = useState(false); // Manage open state locally - const isMedView = useMediaQuery(theme.breakpoints.down('md')); - const { getCookie } = useManageCookies(); const { authUser, isLoggedIn } = getCookie(['authUser', 'isLoggedIn']); - const username = authUser?.username; const { logout } = useAuthManager(); const menuItems = baseMenuItems({ cartCardQuantity: cart?.items?.length }); const toggleSidebar = useCallback(() => setIsOpen(!isOpen), [isOpen]); @@ -167,7 +168,7 @@ const Navigation = () => { /> - {!isMedView && renderMenuItems('top')} + {!isMd && renderMenuItems('top')} { color: 'white', }} /> - {username} + {authUser?.username} - {/* */} { { navigate('/profile')} @@ -261,11 +256,9 @@ const Navigation = () => { mr: 1, background: theme.palette.success.main_light, color: 'white', - // cursor: 'pointer', }} - // onClick={() => navigate('/profile')} /> - {username} + {authUser?.username} - + ); } diff --git a/src/layout/profile/sub-components/Header.jsx b/src/layout/profile/sub-components/Header.jsx index 537fe2f..437b527 100644 --- a/src/layout/profile/sub-components/Header.jsx +++ b/src/layout/profile/sub-components/Header.jsx @@ -140,11 +140,6 @@ function Header({ children }) { ); } -// Setting default props for the Header -Header.defaultProps = { - children: '', -}; - // Typechecking props for the Header Header.propTypes = { children: PropTypes.node, diff --git a/src/layout/profile/sub-components/ProfileInfoCard.jsx b/src/layout/profile/sub-components/ProfileInfoCard.jsx index 6038470..adc26e3 100644 --- a/src/layout/profile/sub-components/ProfileInfoCard.jsx +++ b/src/layout/profile/sub-components/ProfileInfoCard.jsx @@ -128,11 +128,6 @@ function ProfileInfoCard({ ); } -// Setting default props for the ProfileInfoCard -ProfileInfoCard.defaultProps = { - shadow: true, -}; - // Typechecking props for the ProfileInfoCard ProfileInfoCard.propTypes = { title: PropTypes.string.isRequired, diff --git a/src/components/forms/search/PaginationComponent.jsx b/src/layout/search/PaginationComponent.jsx similarity index 100% rename from src/components/forms/search/PaginationComponent.jsx rename to src/layout/search/PaginationComponent.jsx diff --git a/src/components/forms/search/SearchComponent.jsx b/src/layout/search/SearchComponent.jsx similarity index 90% rename from src/components/forms/search/SearchComponent.jsx rename to src/layout/search/SearchComponent.jsx index 6b22174..abd5201 100644 --- a/src/components/forms/search/SearchComponent.jsx +++ b/src/layout/search/SearchComponent.jsx @@ -5,20 +5,22 @@ import SearchResults from './SearchResults'; import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import RCTypography from 'layout/REUSABLE_COMPONENTS/RCTYPOGRAPHY'; import SettingsIcon from '@mui/icons-material/Settings'; -import { useMode } from 'context'; -import useLocalStorage from 'context/hooks/useLocalStorage'; import SearchIcon from '@mui/icons-material/Search'; -import { useCardStoreHook } from 'context/state/useCardStore'; -import useConfigurator from 'context/hooks/useConfigurator'; -import RCDynamicForm from '../Factory/RCDynamicForm'; -import { formFields } from '../../../data/formsConfig'; -import useBreakpoint from 'context/hooks/useBreakPoint'; +import RCDynamicForm from '../REUSABLE_COMPONENTS/RC_FORMS/RCDynamicForm'; import RCCard from 'layout/REUSABLE_COMPONENTS/RCCARD'; +import { + useBreakpoint, + useMode, + useCardStore, + useConfigurator, + useLocalStorage, +} from 'context'; +import { formFields } from 'data'; const SearchComponent = (pageContext) => { const { theme } = useMode(); const { isMobile } = useBreakpoint(); - const { loadingSearchResults } = useCardStoreHook(); + const { loadingSearchResults } = useCardStore(); const { toggleConfigurator } = useConfigurator(); const itemsPerPage = 12; const [searchData, setSearchData] = useLocalStorage('searchData', []); diff --git a/src/components/forms/search/SearchResults.jsx b/src/layout/search/SearchResults.jsx similarity index 100% rename from src/components/forms/search/SearchResults.jsx rename to src/layout/search/SearchResults.jsx diff --git a/src/layout/store/index.jsx b/src/layout/store/index.jsx index 1f9a640..488781f 100644 --- a/src/layout/store/index.jsx +++ b/src/layout/store/index.jsx @@ -1,9 +1,9 @@ -import React, { useState } from 'react'; +import React from 'react'; import { useMode } from 'context'; import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import PageLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout'; -import SearchComponent from 'components/forms/search/SearchComponent'; -import { PortfolioBoxA } from '../REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +import SearchComponent from 'layout/search/SearchComponent'; +import { PortfolioBoxA } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; const StoreSearch = () => { const { theme } = useMode(); diff --git a/src/pages/CartPage.js b/src/pages/CartPage.js index 62d90c0..8e4486a 100644 --- a/src/pages/CartPage.js +++ b/src/pages/CartPage.js @@ -26,7 +26,7 @@ import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import useUserData from 'context/state/useUserData'; import CartContent from 'layout/cart'; import TableChartOutlinedIcon from '@mui/icons-material/TableChartOutlined'; -import useManager from 'context/useManager'; +import useManager from 'context/state/useManager'; import useBreakpoint from 'context/hooks/useBreakPoint'; import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; const CartPage = () => { diff --git a/src/pages/CollectionPage.js b/src/pages/CollectionPage.js index 3468e70..6a3654c 100644 --- a/src/pages/CollectionPage.js +++ b/src/pages/CollectionPage.js @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import { Grid } from '@mui/material'; import CollectionPortfolio from 'layout/collection'; import PageLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout'; -import useManager from 'context/useManager'; +import useManager from 'context/state/useManager'; const CollectionPage = () => { const { fetchCollections, hasFetchedCollections } = useManager(); diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index 4fc2366..d0475a6 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -3,23 +3,32 @@ import { Grid } from '@mui/material'; import PageLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout'; import HeroSection from 'layout/home'; import FeatureCardsSection from 'layout/home/FeatureCardsSection'; +import { HelmetMetaData } from 'data'; // ==============================|| HOME PAGE ||============================== // const HomePage = () => { return ( - - - {/* HERO SECTION */} - - + <> + + + + {/* HERO SECTION */} + + + + {/* FEATURE CARDS SECTION */} + + + - {/* FEATURE CARDS SECTION */} - - - - - + + ); }; diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx index 1df0789..50b2902 100644 --- a/src/pages/LoginPage.jsx +++ b/src/pages/LoginPage.jsx @@ -1,9 +1,9 @@ import React from 'react'; -import { CssBaseline, Box, Typography, Card } from '@mui/material'; +import { CssBaseline, Box, Card } from '@mui/material'; import SplashPage2 from 'layout/REUSABLE_COMPONENTS/utils/system-utils/SplashPage2'; -import LoginDialog from './LoginDialog'; // Import the LoginDialog component -import useManageCookies from 'context/hooks/useManageCookies'; +import LoginDialog from '../layout/dialogs/LoginDialog'; // Import the LoginDialog component import { useMode } from 'context'; +import { useManageCookies } from 'context/hooks'; const LoginPage = () => { const { theme } = useMode(); // Using the theme from MUI's theme provider