From 065a84f259f95845d5cea5fcca1ba08ad1bd025c Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 3 Feb 2026 11:43:46 +0000 Subject: [PATCH] Migrate design library from Bootstrap/CoreUI to Material UI - Replace @coreui/react components with @mui/material equivalents - Replace @coreui/icons-react with @mui/icons-material - Replace @coreui/react-chartjs with recharts - Add MUI theme provider with light/dark mode support - Migrate all layout components (DefaultLayout, AppHeader, AppSidebar, etc.) - Migrate all view components (Dashboard, Charts, Widgets, Pages, Base, Forms, Notifications, Buttons, Theme, Icons) - Update navigation system to use MUI components - Remove CoreUI/Bootstrap dependencies from package.json --- package.json | 16 +- src/App.js | 73 +- src/_nav.js | 283 ++-- src/components/AppBreadcrumb.js | 35 +- src/components/AppContent.js | 17 +- src/components/AppFooter.js | 48 +- src/components/AppHeader.js | 243 ++-- src/components/AppSidebar.js | 150 ++- src/components/AppSidebarNav.js | 198 ++- src/components/DocsComponents.js | 67 +- src/components/DocsExample.js | 57 +- src/components/DocsIcons.js | 54 +- src/components/DocsLink.js | 22 +- src/components/header/AppHeaderDropdown.js | 206 +-- src/layout/DefaultLayout.js | 28 +- src/theme.js | 110 ++ src/views/base/accordion/Accordion.js | 309 +++-- src/views/base/breadcrumbs/Breadcrumbs.js | 109 +- src/views/base/cards/Cards.js | 1186 ++++------------- src/views/base/carousels/Carousels.js | 354 +++-- src/views/base/collapses/Collapses.js | 223 ++-- src/views/base/list-groups/ListGroups.js | 24 +- src/views/base/navs/Navs.js | 596 ++++----- src/views/base/paginations/Paginations.js | 252 ++-- src/views/base/placeholders/Placeholders.js | 308 ++--- src/views/base/popovers/Popovers.js | 204 ++- src/views/base/progress/Progress.js | 298 ++--- src/views/base/spinners/Spinners.js | 206 +-- src/views/base/tables/Tables.js | 1117 ++-------------- src/views/base/tabs/Tabs.js | 432 +++--- src/views/base/tooltips/Tooltips.js | 132 +- .../buttons/button-groups/ButtonGroups.js | 528 ++------ src/views/buttons/buttons/Buttons.js | 540 +++----- src/views/buttons/dropdowns/Dropdowns.js | 411 ++---- src/views/charts/Charts.js | 414 +++--- src/views/dashboard/Dashboard.js | 636 ++++----- src/views/dashboard/MainChart.js | 201 +-- src/views/forms/checks-radios/ChecksRadios.js | 478 ++----- .../forms/floating-labels/FloatingLabels.js | 237 ++-- src/views/forms/form-control/FormControl.js | 310 ++--- src/views/forms/input-group/InputGroup.js | 556 +------- src/views/forms/layout/Layout.js | 520 ++------ src/views/forms/range/Range.js | 156 ++- src/views/forms/select/Select.js | 160 ++- src/views/forms/validation/Validation.js | 586 ++------ src/views/icons/brands/Brands.js | 95 +- src/views/icons/coreui-icons/CoreUIIcons.js | 88 +- src/views/icons/flags/Flags.js | 52 +- src/views/notifications/alerts/Alerts.js | 244 ++-- src/views/notifications/badges/Badges.js | 190 ++- src/views/notifications/modals/Modals.js | 834 ++---------- src/views/notifications/toasts/Toasts.js | 323 ++--- src/views/pages/login/Login.js | 177 +-- src/views/pages/page404/Page404.js | 83 +- src/views/pages/page500/Page500.js | 83 +- src/views/pages/register/Register.js | 152 ++- src/views/theme/colors/Colors.js | 208 +-- src/views/theme/typography/Typography.js | 318 ++--- src/views/widgets/Widgets.js | 899 +------------ src/views/widgets/WidgetsBrand.js | 274 ++-- src/views/widgets/WidgetsDropdown.js | 550 +++----- 61 files changed, 6129 insertions(+), 11531 deletions(-) create mode 100644 src/theme.js diff --git a/package.json b/package.json index fccb0aebe9..ab90dc2fc8 100644 --- a/package.json +++ b/package.json @@ -19,14 +19,10 @@ "start": "vite" }, "dependencies": { - "@coreui/chartjs": "^4.1.0", - "@coreui/coreui": "^5.5.0", - "@coreui/icons": "^3.0.1", - "@coreui/icons-react": "^2.3.0", - "@coreui/react": "^5.9.2", - "@coreui/react-chartjs": "^3.0.0", - "@coreui/utils": "^2.0.2", - "@popperjs/core": "^2.11.8", + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.1", + "@mui/icons-material": "^7.3.7", + "@mui/material": "^7.3.7", "chart.js": "^4.5.1", "classnames": "^2.5.1", "core-js": "^3.47.0", @@ -35,8 +31,8 @@ "react-dom": "^19.2.3", "react-redux": "^9.2.0", "react-router-dom": "^7.11.0", - "redux": "5.0.1", - "simplebar-react": "^3.3.2" + "recharts": "^3.7.0", + "redux": "5.0.1" }, "devDependencies": { "@vitejs/plugin-react": "^5.1.2", diff --git a/src/App.js b/src/App.js index f5b22393e1..bfa4eac7be 100644 --- a/src/App.js +++ b/src/App.js @@ -1,58 +1,53 @@ -import React, { Suspense, useEffect } from 'react' +import React, { Suspense, useMemo } from 'react' import { HashRouter, Route, Routes } from 'react-router-dom' import { useSelector } from 'react-redux' +import { ThemeProvider } from '@mui/material/styles' +import CssBaseline from '@mui/material/CssBaseline' +import CircularProgress from '@mui/material/CircularProgress' +import Box from '@mui/material/Box' -import { CSpinner, useColorModes } from '@coreui/react' -import './scss/style.scss' +import { createAppTheme } from './theme' -// We use those styles to show code examples, you should remove them in your application. -import './scss/examples.scss' - -// Containers const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout')) -// Pages const Login = React.lazy(() => import('./views/pages/login/Login')) const Register = React.lazy(() => import('./views/pages/register/Register')) const Page404 = React.lazy(() => import('./views/pages/page404/Page404')) const Page500 = React.lazy(() => import('./views/pages/page500/Page500')) const App = () => { - const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme') const storedTheme = useSelector((state) => state.theme) - useEffect(() => { - const urlParams = new URLSearchParams(window.location.href.split('?')[1]) - const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0] - if (theme) { - setColorMode(theme) - } - - if (isColorModeSet()) { - return - } - - setColorMode(storedTheme) - }, []) // eslint-disable-line react-hooks/exhaustive-deps + const theme = useMemo(() => createAppTheme(storedTheme), [storedTheme]) return ( - - - - - } - > - - } /> - } /> - } /> - } /> - } /> - - - + + + + + + + } + > + + } /> + } /> + } /> + } /> + } /> + + + + ) } diff --git a/src/_nav.js b/src/_nav.js index e43f1df1ee..c83cd91270 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -1,76 +1,67 @@ import React from 'react' -import CIcon from '@coreui/icons-react' -import { - cilBell, - cilCalculator, - cilChartPie, - cilCursor, - cilDescription, - cilDrop, - cilExternalLink, - cilNotes, - cilPencil, - cilPuzzle, - cilSpeedometer, - cilStar, -} from '@coreui/icons' -import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react' +import DashboardIcon from '@mui/icons-material/Dashboard' +import ColorLensIcon from '@mui/icons-material/ColorLens' +import TextFieldsIcon from '@mui/icons-material/TextFields' +import ExtensionIcon from '@mui/icons-material/Extension' +import TouchAppIcon from '@mui/icons-material/TouchApp' +import NotesIcon from '@mui/icons-material/Notes' +import PieChartIcon from '@mui/icons-material/PieChart' +import StarIcon from '@mui/icons-material/Star' +import NotificationsIcon from '@mui/icons-material/Notifications' +import CalculateIcon from '@mui/icons-material/Calculate' +import DescriptionIcon from '@mui/icons-material/Description' +import OpenInNewIcon from '@mui/icons-material/OpenInNew' const _nav = [ { - component: CNavItem, + type: 'item', name: 'Dashboard', to: '/dashboard', - icon: , + icon: , badge: { color: 'info', text: 'NEW', }, }, { - component: CNavTitle, + type: 'title', name: 'Theme', }, { - component: CNavItem, + type: 'item', name: 'Colors', to: '/theme/colors', - icon: , + icon: , }, { - component: CNavItem, + type: 'item', name: 'Typography', to: '/theme/typography', - icon: , + icon: , }, { - component: CNavTitle, + type: 'title', name: 'Components', }, { - component: CNavGroup, + type: 'group', name: 'Base', to: '/base', - icon: , + icon: , items: [ { - component: CNavItem, + type: 'item', name: 'Accordion', to: '/base/accordion', }, { - component: CNavItem, + type: 'item', name: 'Breadcrumb', to: '/base/breadcrumbs', }, { - component: CNavItem, - name: ( - - {'Calendar'} - - - ), + type: 'item', + name: 'Calendar', href: 'https://coreui.io/react/docs/components/calendar/', badge: { color: 'danger', @@ -78,52 +69,52 @@ const _nav = [ }, }, { - component: CNavItem, + type: 'item', name: 'Cards', to: '/base/cards', }, { - component: CNavItem, + type: 'item', name: 'Carousel', to: '/base/carousels', }, { - component: CNavItem, + type: 'item', name: 'Collapse', to: '/base/collapses', }, { - component: CNavItem, + type: 'item', name: 'List group', to: '/base/list-groups', }, { - component: CNavItem, + type: 'item', name: 'Navs & Tabs', to: '/base/navs', }, { - component: CNavItem, + type: 'item', name: 'Pagination', to: '/base/paginations', }, { - component: CNavItem, + type: 'item', name: 'Placeholders', to: '/base/placeholders', }, { - component: CNavItem, + type: 'item', name: 'Popovers', to: '/base/popovers', }, { - component: CNavItem, + type: 'item', name: 'Progress', to: '/base/progress', }, { - component: CNavItem, + type: 'item', name: 'Smart Pagination', href: 'https://coreui.io/react/docs/components/smart-pagination/', badge: { @@ -132,13 +123,8 @@ const _nav = [ }, }, { - component: CNavItem, - name: ( - - {'Smart Table'} - - - ), + type: 'item', + name: 'Smart Table', href: 'https://coreui.io/react/docs/components/smart-table/', badge: { color: 'danger', @@ -146,33 +132,28 @@ const _nav = [ }, }, { - component: CNavItem, + type: 'item', name: 'Spinners', to: '/base/spinners', }, { - component: CNavItem, + type: 'item', name: 'Tables', to: '/base/tables', }, { - component: CNavItem, + type: 'item', name: 'Tabs', to: '/base/tabs', }, { - component: CNavItem, + type: 'item', name: 'Tooltips', to: '/base/tooltips', }, { - component: CNavItem, - name: ( - - {'Virtual Scroller'} - - - ), + type: 'item', + name: 'Virtual Scroller', href: 'https://coreui.io/react/docs/components/virtual-scroller/', badge: { color: 'danger', @@ -182,34 +163,29 @@ const _nav = [ ], }, { - component: CNavGroup, + type: 'group', name: 'Buttons', to: '/buttons', - icon: , + icon: , items: [ { - component: CNavItem, + type: 'item', name: 'Buttons', to: '/buttons/buttons', }, { - component: CNavItem, + type: 'item', name: 'Buttons groups', to: '/buttons/button-groups', }, { - component: CNavItem, + type: 'item', name: 'Dropdowns', to: '/buttons/dropdowns', }, { - component: CNavItem, - name: ( - - {'Loading Button'} - - - ), + type: 'item', + name: 'Loading Button', href: 'https://coreui.io/react/docs/components/loading-button/', badge: { color: 'danger', @@ -219,18 +195,13 @@ const _nav = [ ], }, { - component: CNavGroup, + type: 'group', name: 'Forms', - icon: , + icon: , items: [ { - component: CNavItem, - name: ( - - {'Autocomplete'} - - - ), + type: 'item', + name: 'Autocomplete', href: 'https://coreui.io/react/docs/forms/autocomplete/', badge: { color: 'danger', @@ -238,18 +209,13 @@ const _nav = [ }, }, { - component: CNavItem, + type: 'item', name: 'Checks & Radios', to: '/forms/checks-radios', }, { - component: CNavItem, - name: ( - - {'Date Picker'} - - - ), + type: 'item', + name: 'Date Picker', href: 'https://coreui.io/react/docs/forms/date-picker/', badge: { color: 'danger', @@ -257,7 +223,7 @@ const _nav = [ }, }, { - component: CNavItem, + type: 'item', name: 'Date Range Picker', href: 'https://coreui.io/react/docs/forms/date-range-picker/', badge: { @@ -266,28 +232,23 @@ const _nav = [ }, }, { - component: CNavItem, + type: 'item', name: 'Floating Labels', to: '/forms/floating-labels', }, { - component: CNavItem, + type: 'item', name: 'Form Control', to: '/forms/form-control', }, { - component: CNavItem, + type: 'item', name: 'Input Group', to: '/forms/input-group', }, { - component: CNavItem, - name: ( - - {'Multi Select'} - - - ), + type: 'item', + name: 'Multi Select', href: 'https://coreui.io/react/docs/forms/multi-select/', badge: { color: 'danger', @@ -295,13 +256,8 @@ const _nav = [ }, }, { - component: CNavItem, - name: ( - - {'OTP Input'} - - - ), + type: 'item', + name: 'OTP Input', href: 'https://coreui.io/react/docs/forms/one-time-password-input/', badge: { color: 'danger', @@ -309,13 +265,8 @@ const _nav = [ }, }, { - component: CNavItem, - name: ( - - {'Password Input'} - - - ), + type: 'item', + name: 'Password Input', href: 'https://coreui.io/react/docs/forms/password-input/', badge: { color: 'danger', @@ -323,18 +274,13 @@ const _nav = [ }, }, { - component: CNavItem, + type: 'item', name: 'Range', to: '/forms/range', }, { - component: CNavItem, - name: ( - - {'Range Slider'} - - - ), + type: 'item', + name: 'Range Slider', href: 'https://coreui.io/react/docs/forms/range-slider/', badge: { color: 'danger', @@ -342,13 +288,8 @@ const _nav = [ }, }, { - component: CNavItem, - name: ( - - {'Rating'} - - - ), + type: 'item', + name: 'Rating', href: 'https://coreui.io/react/docs/forms/rating/', badge: { color: 'danger', @@ -356,18 +297,13 @@ const _nav = [ }, }, { - component: CNavItem, + type: 'item', name: 'Select', to: '/forms/select', }, { - component: CNavItem, - name: ( - - {'Stepper'} - - - ), + type: 'item', + name: 'Stepper', href: 'https://coreui.io/react/docs/forms/stepper/', badge: { color: 'danger', @@ -375,13 +311,8 @@ const _nav = [ }, }, { - component: CNavItem, - name: ( - - {'Time Picker'} - - - ), + type: 'item', + name: 'Time Picker', href: 'https://coreui.io/react/docs/forms/time-picker/', badge: { color: 'danger', @@ -389,118 +320,118 @@ const _nav = [ }, }, { - component: CNavItem, + type: 'item', name: 'Layout', to: '/forms/layout', }, { - component: CNavItem, + type: 'item', name: 'Validation', to: '/forms/validation', }, ], }, { - component: CNavItem, + type: 'item', name: 'Charts', to: '/charts', - icon: , + icon: , }, { - component: CNavGroup, + type: 'group', name: 'Icons', - icon: , + icon: , items: [ { - component: CNavItem, - name: 'CoreUI Free', + type: 'item', + name: 'Material Icons', to: '/icons/coreui-icons', }, { - component: CNavItem, - name: 'CoreUI Flags', + type: 'item', + name: 'Flags', to: '/icons/flags', }, { - component: CNavItem, - name: 'CoreUI Brands', + type: 'item', + name: 'Brands', to: '/icons/brands', }, ], }, { - component: CNavGroup, + type: 'group', name: 'Notifications', - icon: , + icon: , items: [ { - component: CNavItem, + type: 'item', name: 'Alerts', to: '/notifications/alerts', }, { - component: CNavItem, + type: 'item', name: 'Badges', to: '/notifications/badges', }, { - component: CNavItem, + type: 'item', name: 'Modal', to: '/notifications/modals', }, { - component: CNavItem, + type: 'item', name: 'Toasts', to: '/notifications/toasts', }, ], }, { - component: CNavItem, + type: 'item', name: 'Widgets', to: '/widgets', - icon: , + icon: , badge: { color: 'info', text: 'NEW', }, }, { - component: CNavTitle, + type: 'title', name: 'Extras', }, { - component: CNavGroup, + type: 'group', name: 'Pages', - icon: , + icon: , items: [ { - component: CNavItem, + type: 'item', name: 'Login', to: '/login', }, { - component: CNavItem, + type: 'item', name: 'Register', to: '/register', }, { - component: CNavItem, + type: 'item', name: 'Error 404', to: '/404', }, { - component: CNavItem, + type: 'item', name: 'Error 500', to: '/500', }, ], }, { - component: CNavItem, + type: 'item', name: 'Docs', href: 'https://coreui.io/react/docs/templates/installation/', - icon: , + icon: , }, ] diff --git a/src/components/AppBreadcrumb.js b/src/components/AppBreadcrumb.js index d37de8ce9b..badf051458 100644 --- a/src/components/AppBreadcrumb.js +++ b/src/components/AppBreadcrumb.js @@ -1,10 +1,12 @@ import React from 'react' -import { useLocation } from 'react-router-dom' +import { useLocation, Link } from 'react-router-dom' +import Breadcrumbs from '@mui/material/Breadcrumbs' +import MuiLink from '@mui/material/Link' +import Typography from '@mui/material/Typography' +import NavigateNextIcon from '@mui/icons-material/NavigateNext' import routes from '../routes' -import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react' - const AppBreadcrumb = () => { const currentLocation = useLocation().pathname @@ -32,19 +34,32 @@ const AppBreadcrumb = () => { const breadcrumbs = getBreadcrumbs(currentLocation) return ( - - Home + } + aria-label="breadcrumb" + sx={{ my: 0 }} + > + + Home + {breadcrumbs.map((breadcrumb, index) => { - return ( - + {breadcrumb.name} + + ) : ( + {breadcrumb.name} - + ) })} - + ) } diff --git a/src/components/AppContent.js b/src/components/AppContent.js index b9a39ef505..b7002f742c 100644 --- a/src/components/AppContent.js +++ b/src/components/AppContent.js @@ -1,14 +1,21 @@ import React, { Suspense } from 'react' import { Navigate, Route, Routes } from 'react-router-dom' -import { CContainer, CSpinner } from '@coreui/react' +import Container from '@mui/material/Container' +import CircularProgress from '@mui/material/CircularProgress' +import Box from '@mui/material/Box' -// routes config import routes from '../routes' const AppContent = () => { return ( - - }> + + + + + } + > {routes.map((route, idx) => { return ( @@ -26,7 +33,7 @@ const AppContent = () => { } /> - + ) } diff --git a/src/components/AppFooter.js b/src/components/AppFooter.js index 217c5a04c3..92888e8ee0 100644 --- a/src/components/AppFooter.js +++ b/src/components/AppFooter.js @@ -1,22 +1,44 @@ import React from 'react' -import { CFooter } from '@coreui/react' +import Box from '@mui/material/Box' +import Typography from '@mui/material/Typography' +import Link from '@mui/material/Link' const AppFooter = () => { return ( - -
- + + + CoreUI - - © 2025 creativeLabs. -
- - + + + ) } diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js index 534dadaa89..3361bc7734 100644 --- a/src/components/AppHeader.js +++ b/src/components/AppHeader.js @@ -1,44 +1,61 @@ -import React, { useEffect, useRef } from 'react' +import React, { useEffect, useRef, useState } from 'react' import { NavLink } from 'react-router-dom' import { useSelector, useDispatch } from 'react-redux' -import { - CContainer, - CDropdown, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CHeader, - CHeaderNav, - CHeaderToggler, - CNavLink, - CNavItem, - useColorModes, -} from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { - cilBell, - cilContrast, - cilEnvelopeOpen, - cilList, - cilMenu, - cilMoon, - cilSun, -} from '@coreui/icons' +import AppBar from '@mui/material/AppBar' +import Toolbar from '@mui/material/Toolbar' +import IconButton from '@mui/material/IconButton' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' +import Menu from '@mui/material/Menu' +import MenuItem from '@mui/material/MenuItem' +import Badge from '@mui/material/Badge' +import Divider from '@mui/material/Divider' +import Button from '@mui/material/Button' +import ListItemIcon from '@mui/material/ListItemIcon' +import MenuIcon from '@mui/icons-material/Menu' +import NotificationsIcon from '@mui/icons-material/Notifications' +import MailIcon from '@mui/icons-material/Mail' +import ListIcon from '@mui/icons-material/List' +import LightModeIcon from '@mui/icons-material/LightMode' +import DarkModeIcon from '@mui/icons-material/DarkMode' +import ContrastIcon from '@mui/icons-material/Contrast' import { AppBreadcrumb } from './index' import { AppHeaderDropdown } from './header/index' +const drawerWidth = 256 + const AppHeader = () => { const headerRef = useRef() - const { colorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme') - const dispatch = useDispatch() const sidebarShow = useSelector((state) => state.sidebarShow) + const theme = useSelector((state) => state.theme) + + const [themeAnchorEl, setThemeAnchorEl] = useState(null) + const themeMenuOpen = Boolean(themeAnchorEl) + + const handleThemeClick = (event) => { + setThemeAnchorEl(event.currentTarget) + } + + const handleThemeClose = () => { + setThemeAnchorEl(null) + } + + const setColorMode = (mode) => { + dispatch({ type: 'set', theme: mode }) + handleThemeClose() + } useEffect(() => { const handleScroll = () => { - headerRef.current && - headerRef.current.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0) + if (headerRef.current) { + if (document.documentElement.scrollTop > 0) { + headerRef.current.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)' + } else { + headerRef.current.style.boxShadow = 'none' + } + } } document.addEventListener('scroll', handleScroll) @@ -46,98 +63,92 @@ const AppHeader = () => { }, []) return ( - - - + + dispatch({ type: 'set', sidebarShow: !sidebarShow })} - style={{ marginInlineStart: '-14px' }} + sx={{ mr: 2 }} > - - - - - - Dashboard - - - - Users - - - Settings - - - - - - - - - - - - - - - - - - - - -
  • -
    -
    • - - - {colorMode === 'dark' ? ( - - ) : colorMode === 'auto' ? ( - - ) : ( - - )} - - - setColorMode('light')} - > - Light - - setColorMode('dark')} - > - Dark - - setColorMode('auto')} - > - Auto - - - -
  • -
    -
    • + + + + + + + + + + + + + + + + + + + + + + + + + + + + {theme === 'dark' ? ( + + ) : theme === 'auto' ? ( + + ) : ( + + )} + + + setColorMode('light')} selected={theme === 'light'}> + + + + Light + + setColorMode('dark')} selected={theme === 'dark'}> + + + + Dark + + + + + -     -     - + + + - -     + + ) } diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js index 021cb52c34..e1fe7fff28 100644 --- a/src/components/AppSidebar.js +++ b/src/components/AppSidebar.js @@ -1,58 +1,124 @@ import React from 'react' import { useSelector, useDispatch } from 'react-redux' - -import { - CCloseButton, - CSidebar, - CSidebarBrand, - CSidebarFooter, - CSidebarHeader, - CSidebarToggler, -} from '@coreui/react' -import CIcon from '@coreui/icons-react' +import Drawer from '@mui/material/Drawer' +import Box from '@mui/material/Box' +import Typography from '@mui/material/Typography' +import IconButton from '@mui/material/IconButton' +import Divider from '@mui/material/Divider' +import CloseIcon from '@mui/icons-material/Close' +import ChevronLeftIcon from '@mui/icons-material/ChevronLeft' +import ChevronRightIcon from '@mui/icons-material/ChevronRight' +import useMediaQuery from '@mui/material/useMediaQuery' +import { useTheme } from '@mui/material/styles' import { AppSidebarNav } from './AppSidebarNav' -import { logo } from 'src/assets/brand/logo' -import { sygnet } from 'src/assets/brand/sygnet' - -// sidebar nav config import navigation from '../_nav' +const drawerWidth = 256 + const AppSidebar = () => { + const muiTheme = useTheme() + const isMobile = useMediaQuery(muiTheme.breakpoints.down('lg')) const dispatch = useDispatch() const unfoldable = useSelector((state) => state.sidebarUnfoldable) const sidebarShow = useSelector((state) => state.sidebarShow) - return ( - { - dispatch({ type: 'set', sidebarShow: visible }) - }} - > - - - - - - dispatch({ type: 'set', sidebarShow: false })} - /> - + const handleClose = () => { + dispatch({ type: 'set', sidebarShow: false }) + } + + const toggleUnfoldable = () => { + dispatch({ type: 'set', sidebarUnfoldable: !unfoldable }) + } + + const drawerContent = ( + <> + + + CoreUI + + {isMobile && ( + + + + )} + - - dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })} - /> - - + {!isMobile && ( + + + {unfoldable ? : } + + + )} + + ) + + return ( + <> + {isMobile ? ( + + {drawerContent} + + ) : ( + + {drawerContent} + + )} + ) } diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js index 7583abf49e..19aa92a812 100644 --- a/src/components/AppSidebarNav.js +++ b/src/components/AppSidebarNav.js @@ -1,70 +1,152 @@ -import React from 'react' -import { NavLink } from 'react-router-dom' +import React, { useState } from 'react' +import { NavLink, useLocation } from 'react-router-dom' import PropTypes from 'prop-types' +import List from '@mui/material/List' +import ListItem from '@mui/material/ListItem' +import ListItemButton from '@mui/material/ListItemButton' +import ListItemIcon from '@mui/material/ListItemIcon' +import ListItemText from '@mui/material/ListItemText' +import Collapse from '@mui/material/Collapse' +import Chip from '@mui/material/Chip' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' +import ExpandLess from '@mui/icons-material/ExpandLess' +import ExpandMore from '@mui/icons-material/ExpandMore' +import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord' -import SimpleBar from 'simplebar-react' -import 'simplebar-react/dist/simplebar.min.css' +const NavItemComponent = ({ item, indent = false }) => { + const location = useLocation() + const { name, badge, icon, to, href } = item + const isActive = to && location.pathname === to -import { CBadge, CNavLink, CSidebarNav } from '@coreui/react' + const content = ( + + + {icon ? icon : indent ? : null} + + + {badge && ( + + )} + + ) -export const AppSidebarNav = ({ items }) => { - const navLink = (name, icon, badge, indent = false) => { - return ( - <> - {icon - ? icon - : indent && ( - - - - )} - {name && name} - {badge && ( - - {badge.text} - - )} - - ) - } + return {content} +} - const navItem = (item, index, indent = false) => { - const { component, name, badge, icon, ...rest } = item - const Component = component - return ( - - {rest.to || rest.href ? ( - - {navLink(name, icon, badge, indent)} - - ) : ( - navLink(name, icon, badge, indent) - )} - - ) - } +const NavGroupComponent = ({ item }) => { + const [open, setOpen] = useState(false) + const { name, icon, items } = item - const navGroup = (item, index) => { - const { component, name, icon, items, to, ...rest } = item - const Component = component - return ( - - {items?.map((item, index) => - item.items ? navGroup(item, index) : navItem(item, index, true), - )} - - ) + const handleClick = () => { + setOpen(!open) } return ( - - {items && - items.map((item, index) => (item.items ? navGroup(item, index) : navItem(item, index)))} - + <> + + + {icon} + + {open ? : } + + + + + {items?.map((subItem, index) => + subItem.items ? ( + + ) : ( + + ), + )} + + + + ) +} + +const NavTitleComponent = ({ item }) => { + return ( + + + {item.name} + + + ) +} + +export const AppSidebarNav = ({ items }) => { + return ( + + + {items && + items.map((item, index) => { + if (item.type === 'title') { + return + } + if (item.type === 'group' || item.items) { + return + } + return + })} + + ) } diff --git a/src/components/DocsComponents.js b/src/components/DocsComponents.js index b0968b8fe6..ba047e7d74 100644 --- a/src/components/DocsComponents.js +++ b/src/components/DocsComponents.js @@ -1,42 +1,59 @@ import PropTypes from 'prop-types' import React from 'react' +import Box from '@mui/material/Box' +import Grid from '@mui/material/Grid' +import Button from '@mui/material/Button' +import Typography from '@mui/material/Typography' import ComponentsImg from 'src/assets/images/components.webp' const DocsComponents = (props) => ( -
    -
    -
    - + + + -
    -
    - Our Admin Panel isn’t just a mix of third-party components. It’s{' '} - - the only open-source React dashboard built on a professional, enterprise-grade UI - Components Library - - . This component is part of this library, and we present only the basic usage of it here. To - explore extended examples, detailed API documentation, and customization options, refer to - our docs. -
    - -
    -
    + + + + ) DocsComponents.propTypes = { diff --git a/src/components/DocsExample.js b/src/components/DocsExample.js index 2adedad493..e7ee57e2f2 100644 --- a/src/components/DocsExample.js +++ b/src/components/DocsExample.js @@ -1,8 +1,11 @@ import PropTypes from 'prop-types' import React from 'react' -import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { cilCode, cilMediaPlay } from '@coreui/icons' +import Box from '@mui/material/Box' +import Tabs from '@mui/material/Tabs' +import Tab from '@mui/material/Tab' +import Link from '@mui/material/Link' +import PlayArrowIcon from '@mui/icons-material/PlayArrow' +import CodeIcon from '@mui/icons-material/Code' const DocsExample = (props) => { const { children, href, tabContentClassName } = props @@ -10,27 +13,33 @@ const DocsExample = (props) => { const _href = `https://coreui.io/react/docs/${href}` return ( -
    - - - - - Preview - - - - - - Code - - - - - - {children} - - -
    + + + } iconPosition="start" label="Preview" sx={{ minHeight: 48 }} /> + } + iconPosition="start" + label="Code" + component={Link} + href={_href} + target="_blank" + sx={{ minHeight: 48 }} + /> + + + {children} + + ) } diff --git a/src/components/DocsIcons.js b/src/components/DocsIcons.js index e3fab60a72..a77879e6ad 100644 --- a/src/components/DocsIcons.js +++ b/src/components/DocsIcons.js @@ -1,31 +1,49 @@ import React from 'react' +import Box from '@mui/material/Box' +import Grid from '@mui/material/Grid' +import Button from '@mui/material/Button' +import Typography from '@mui/material/Typography' import IconsImg from 'src/assets/images/icons.webp' const DocsIcons = () => ( -
    -
    -
    - CoreUI Icons -
    -
    - CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, - and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You - can use them in your digital products for web or mobile app. For more information please - visit our documentation. -
    - -
    -
    + + + + ) export default DocsIcons diff --git a/src/components/DocsLink.js b/src/components/DocsLink.js index 7c72aa1284..5f512195cd 100644 --- a/src/components/DocsLink.js +++ b/src/components/DocsLink.js @@ -1,6 +1,8 @@ import PropTypes from 'prop-types' import React from 'react' -import { CLink } from '@coreui/react' +import Box from '@mui/material/Box' +import Link from '@mui/material/Link' +import Typography from '@mui/material/Typography' const DocsLink = (props) => { const { href, name, text, ...rest } = props @@ -8,17 +10,13 @@ const DocsLink = (props) => { const _href = name ? `https://coreui.io/react/docs/components/${name}` : href return ( -
    - - {text || 'docs'} - -
    + + + + {text || 'docs'} + + + ) } diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js index 30c0df82ba..a11d4db8a7 100644 --- a/src/components/header/AppHeaderDropdown.js +++ b/src/components/header/AppHeaderDropdown.js @@ -1,95 +1,127 @@ -import React from 'react' -import { - CAvatar, - CBadge, - CDropdown, - CDropdownDivider, - CDropdownHeader, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, -} from '@coreui/react' -import { - cilBell, - cilCreditCard, - cilCommentSquare, - cilEnvelopeOpen, - cilFile, - cilLockLocked, - cilSettings, - cilTask, - cilUser, -} from '@coreui/icons' -import CIcon from '@coreui/icons-react' +import React, { useState } from 'react' +import Avatar from '@mui/material/Avatar' +import IconButton from '@mui/material/IconButton' +import Menu from '@mui/material/Menu' +import MenuItem from '@mui/material/MenuItem' +import ListItemIcon from '@mui/material/ListItemIcon' +import ListItemText from '@mui/material/ListItemText' +import Divider from '@mui/material/Divider' +import Typography from '@mui/material/Typography' +import Badge from '@mui/material/Badge' +import Box from '@mui/material/Box' +import NotificationsIcon from '@mui/icons-material/Notifications' +import MailIcon from '@mui/icons-material/Mail' +import TaskIcon from '@mui/icons-material/Task' +import CommentIcon from '@mui/icons-material/Comment' +import PersonIcon from '@mui/icons-material/Person' +import SettingsIcon from '@mui/icons-material/Settings' +import CreditCardIcon from '@mui/icons-material/CreditCard' +import FolderIcon from '@mui/icons-material/Folder' +import LockIcon from '@mui/icons-material/Lock' import avatar8 from './../../assets/images/avatars/8.jpg' const AppHeaderDropdown = () => { + const [anchorEl, setAnchorEl] = useState(null) + const open = Boolean(anchorEl) + + const handleClick = (event) => { + setAnchorEl(event.currentTarget) + } + + const handleClose = () => { + setAnchorEl(null) + } + return ( - - - - - - Account - - - Updates - - 42 - - - - - Messages - - 42 - - - - - Tasks - - 42 - - - - - Comments - - 42 - - - Settings - - - Profile - - - - Settings - - - - Payments - - 42 - - - - - Projects - - 42 - - - - - - Lock Account - - - + <> + + + + + + + Account + + + + + + + Updates + + + + + + + Messages + + + + + + + Tasks + + + + + + + Comments + + + + + Settings + + + + + + + Profile + + + + + + Settings + + + + + + Payments + + + + + + + Projects + + + + + + + + Lock Account + + + ) } diff --git a/src/layout/DefaultLayout.js b/src/layout/DefaultLayout.js index 19fbf225fd..3e44c989aa 100644 --- a/src/layout/DefaultLayout.js +++ b/src/layout/DefaultLayout.js @@ -1,18 +1,34 @@ import React from 'react' +import Box from '@mui/material/Box' +import { useSelector } from 'react-redux' import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index' +const drawerWidth = 256 + const DefaultLayout = () => { + const sidebarShow = useSelector((state) => state.sidebarShow) + return ( -
    + -
    + -
    + -
    +     -
    -
    + + ) } diff --git a/src/theme.js b/src/theme.js new file mode 100644 index 0000000000..f7973ad14b --- /dev/null +++ b/src/theme.js @@ -0,0 +1,110 @@ +import { createTheme } from '@mui/material/styles' + +const getDesignTokens = (mode) => ({ + palette: { + mode, + primary: { + main: '#321fdb', + light: '#5c4ee5', + dark: '#2819af', + }, + secondary: { + main: '#9da5b1', + light: '#b1b7c1', + dark: '#636f83', + }, + success: { + main: '#2eb85c', + light: '#51c97d', + dark: '#1f9d4a', + }, + info: { + main: '#39f', + light: '#66b0ff', + dark: '#0077e6', + }, + warning: { + main: '#f9b115', + light: '#fac144', + dark: '#d69a0e', + }, + error: { + main: '#e55353', + light: '#eb7575', + dark: '#c93c3c', + }, + background: { + default: mode === 'dark' ? '#1e1e2d' : '#ebedef', + paper: mode === 'dark' ? '#27293d' : '#ffffff', + }, + text: { + primary: mode === 'dark' ? '#ffffff' : '#3c4b64', + secondary: mode === 'dark' ? '#b0b0b0' : '#768192', + }, + }, + typography: { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + h1: { + fontSize: '2.5rem', + fontWeight: 500, + }, + h2: { + fontSize: '2rem', + fontWeight: 500, + }, + h3: { + fontSize: '1.75rem', + fontWeight: 500, + }, + h4: { + fontSize: '1.5rem', + fontWeight: 500, + }, + h5: { + fontSize: '1.25rem', + fontWeight: 500, + }, + h6: { + fontSize: '1rem', + fontWeight: 500, + }, + }, + components: { + MuiButton: { + styleOverrides: { + root: { + textTransform: 'none', + borderRadius: 4, + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + borderRadius: 8, + boxShadow: '0 2px 4px rgba(0,0,0,0.1)', + }, + }, + }, + MuiDrawer: { + styleOverrides: { + paper: { + backgroundColor: mode === 'dark' ? '#1e1e2d' : '#3c4b64', + color: '#ffffff', + }, + }, + }, + MuiAppBar: { + styleOverrides: { + root: { + backgroundColor: mode === 'dark' ? '#27293d' : '#ffffff', + color: mode === 'dark' ? '#ffffff' : '#3c4b64', + }, + }, + }, + }, +}) + +export const createAppTheme = (mode) => createTheme(getDesignTokens(mode)) + +export default createAppTheme diff --git a/src/views/base/accordion/Accordion.js b/src/views/base/accordion/Accordion.js index edcb5e7aeb..091d6257c1 100644 --- a/src/views/base/accordion/Accordion.js +++ b/src/views/base/accordion/Accordion.js @@ -1,177 +1,176 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CAccordion, - CAccordionBody, - CAccordionHeader, - CAccordionItem, -} from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import MuiAccordion from '@mui/material/Accordion' +import AccordionSummary from '@mui/material/AccordionSummary' +import AccordionDetails from '@mui/material/AccordionDetails' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import { DocsComponents, DocsExample } from 'src/components' const Accordion = () => { + const [expanded, setExpanded] = React.useState('panel2') + + const handleChange = (panel) => (event, isExpanded) => { + setExpanded(isExpanded ? panel : false) + } + return ( - - + + - - - React Accordion - - -

    + + React Accordion} /> + + Click the accordions below to expand/collapse the accordion content. -

    + - - - Accordion Item #1 - - This is the first item's accordion body. It is hidden by + + }> + Accordion Item #1 + + + + This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #2 - - This is the second item's accordion body. It is hidden by + showing and hiding via CSS transitions. + + + + + }> + Accordion Item #2 + + + + This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #3 - - This is the second item's accordion body. It is hidden by + showing and hiding via CSS transitions. + + + + + }> + Accordion Item #3 + + + + This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - + showing and hiding via CSS transitions. + + + -     -     - - - React Accordion Flush - - -

    - Add flush to remove the default background-color, some - borders, and some rounded corners to render accordions edge-to-edge with their parent - container. -

    + + + + + React Accordion Flush + + } + /> + + + Add disableGutters and square props to remove padding and + rounded corners to render accordions edge-to-edge with their parent container. + - - - Accordion Item #1 - - This is the first item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #2 - - This is the second item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #3 - - This is the second item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - + + }> + Accordion Item #1 + + + + This is the first item's accordion body. It is hidden by + default, until the collapse plugin adds the appropriate classes. + + + + + }> + Accordion Item #2 + + + + This is the second item's accordion body. It is hidden by + default, until the collapse plugin adds the appropriate classes. + + + + + }> + Accordion Item #3 + + + + This is the third item's accordion body. It is hidden by + default, until the collapse plugin adds the appropriate classes. + + + -     -     - - - React Accordion Always open - - -

    - Add alwaysOpen property to make accordion items stay open when another - item is opened. -

    + + + + + React Accordion Always open + + } + /> + + + Multiple accordions can be open at the same time by managing state independently. + - - - Accordion Item #1 - - This is the first item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #2 - - This is the second item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - - Accordion Item #3 - - This is the second item's accordion body. It is hidden by - default, until the collapse plugin adds the appropriate classes that we use to - style each element. These classes control the overall appearance, as well as the - showing and hiding via CSS transitions. You can modify any of this with custom - CSS or overriding our default variables. It's also worth noting that just - about any HTML can go within the .accordion-body, though the - transition does limit overflow. - - - + + }> + Accordion Item #1 + + + + This is the first item's accordion body. It is hidden by + default, until the collapse plugin adds the appropriate classes. + + + + + }> + Accordion Item #2 + + + + This is the second item's accordion body. It is hidden by + default, until the collapse plugin adds the appropriate classes. + + + + + }> + Accordion Item #3 + + + + This is the third item's accordion body. It is hidden by + default, until the collapse plugin adds the appropriate classes. + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/base/breadcrumbs/Breadcrumbs.js index 3e1df44754..ac2ff78d1d 100644 --- a/src/views/base/breadcrumbs/Breadcrumbs.js +++ b/src/views/base/breadcrumbs/Breadcrumbs.js @@ -1,74 +1,59 @@ import React from 'react' -import { - CBreadcrumb, - CBreadcrumbItem, - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CLink, -} from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import MuiBreadcrumbs from '@mui/material/Breadcrumbs' +import Link from '@mui/material/Link' import { DocsComponents, DocsExample } from 'src/components' const Breadcrumbs = () => { return ( - - + + - - - React Breadcrumb - - -

    + + React Breadcrumb} /> + + The breadcrumb navigation provides links back to each previous page the user navigated - through and shows the current location in a website or an application. You don’t have - to add separators, because they automatically added in CSS through{' '} - - {' '} - ::before - {' '} - and{' '} - - {' '} - content - - . -

    + through and shows the current location in a website or an application. Separators are + automatically added between items. + - - - Home - - Library - - - - Home - - - Library - - Data - - - - Home - - - Library - - - Data - - Bootstrap - + + + Home + + Library + + + + Home + + + Library + + Data + + + + Home + + + Library + + + Data + + Bootstrap + -     -     -     -     + + + + ) } diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js index daf44f60ef..f25ddc143c 100644 --- a/src/views/base/cards/Cards.js +++ b/src/views/base/cards/Cards.js @@ -1,934 +1,312 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardFooter, - CCardGroup, - CCardHeader, - CCardImage, - CCardLink, - CCardSubtitle, - CCardText, - CCardTitle, - CListGroup, - CListGroupItem, - CNav, - CNavItem, - CNavLink, - CCol, - CRow, -} from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import CardMedia from '@mui/material/CardMedia' +import CardActions from '@mui/material/CardActions' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Link from '@mui/material/Link' +import List from '@mui/material/List' +import ListItem from '@mui/material/ListItem' +import ListItemText from '@mui/material/ListItemText' +import Tabs from '@mui/material/Tabs' +import Tab from '@mui/material/Tab' +import Box from '@mui/material/Box' +import Divider from '@mui/material/Divider' import { DocsComponents, DocsExample } from 'src/components' import ReactImg from 'src/assets/images/react.jpg' const Cards = () => { + const [tabValue, setTabValue] = React.useState(0) + return ( - - + + - - - Card Example - - -

    + + + Card Example + + } + /> + + Cards are built with as little markup and styles as possible but still manage to - deliver a bunch of control and customization. Built with flexbox, they offer easy - alignment and mix well with other CoreUI components. Cards have no top, left, and - right margins by default, so use{' '} - spacing utilities as needed. - They have no fixed width to start, so they'll fill the full width of its parent. -

    -

    - Below is an example of a basic card with mixed content and a fixed width. Cards have - no fixed width to start, so they'll naturally fill the full width of its parent - element. -

    + deliver a bunch of control and customization. + - - - - Card title - - Some quick example text to build on the card title and make up the bulk of the - card's content. - - - Go somewhere - - - + + + + Card title + + Some quick example text to build on the card title. + + + + + + -     -     -     - - - - Card Body - - -

    - The main block of a card is the <CCardBody>. Use it whenever you - need a padded section within a card. -

    + + + + + + + Card Body + + } + /> + + + The main block of a card is the CardContent. + - - This is some text within a card body. - + + This is some text within a card body. + -     -     -     - - - - Card Titles, text, and links - - -

    - Card titles are managed by <CCardTitle> component. Identically, - links are attached and collected next to each other by <CCardLink>{' '} - component. -

    -

    - Subtitles are managed by <CCardSubtitle> component. If the{' '} - <CCardTitle> also, the <CCardSubtitle> items are - stored in a <CCardBody> item, the card title, and subtitle are - arranged rightly. -

    + + + + + + + Card Titles, text, and links + + } + /> + + + Card titles are managed by Typography component. + - - - Card title - Card subtitle - - Some quick example text to build on the card title and make up the bulk of the - card's content. - - Card link - Another link - - + + + Card title + + Card subtitle + + + Some quick example text. + + + + Card link + + Another link + + + -     -     -     - - - - Card Images - - -

    - .card-img-top places a picture to the top of the card. With{' '} - .card-text, text can be added to the card. Text within{' '} - .card-text can additionally be styled with the regular HTML tags. -

    + + + + + + + Card Images + + } + /> + + + CardMedia places a picture to the top of the card. + - - - - - Some quick example text to build on the card title and make up the bulk of the - card's content. - - - + + + + + Some quick example text. + + + -     -     -     - - - - Card List groups - - -

    + + + + + + + Card List groups + + } + /> + + Create lists of content in a card with a flush list group. -

    + - - - - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - - - - - Header - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - - - - - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - Footer - - - - -     -     -     - - - - Card Kitchen sink - - -

    - Combine and match many content types to build the card you need, or throw everything - in there. Shown below are image styles, blocks, text styles, and a list group—all - wrapped in a fixed-width card. -

    - - - - - Card title - - Some quick example text to build on the card title and make up the bulk of the - card's content. - - - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - - Card link - Another link - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -     -     -     - - - - Card Header and footer - - -

    + + + + + + + Card Header and footer + + } + /> + + Add an optional header and/or footer within a card. -

    - - - Header - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - -

    - Card headers can be styled by adding ex. as="h5". -

    - - - Header - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - + - - Quote - -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat - a ante. -

    -
    - Someone famous in Source Title -
    -
    -     -     -     - - - Header - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - 2 days ago - - -     -     -     - - - - Card Body - - -

    - Cards assume no specific width to start, so they'll be 100% wide - unless otherwise stated. You can adjust this as required with custom CSS, grid - classes, grid Sass mixins, or services. -

    -

    Using grid markup

    -

    - Using the grid, wrap cards in columns and rows as needed. -

    - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - - - -

    Using utilities

    -

    - Use some of{' '} - available sizing utilities to - rapidly set a card's width. -

    - - - - Card title - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - - - Card title - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - - Using custom CSS -

    - Use custom CSS in your stylesheets or as inline styles to set a width. -

    - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - -     -     -     - - - - Card Text alignment - - -

    - You can instantly change the text arrangement of any card—in its whole or specific - parts—with{' '} - text align classes - . -

    - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - -     -     -     - - - - Card Navigation - - -

    - Add some navigation to a <CCardHeader> with our{' '} - <CNav> component. -

    - - - - - - - Active - - - - Link - - - - Disabled - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - + + + + Special title treatment + + With supporting text below. + + + + + + + + + + + + + Card Navigation + + } + /> + + + Add some navigation to a CardHeader with MUI Tabs component. + - - - - - - Active - - - - Link - - - - Disabled - - - - - - Special title treatment - - With supporting text below as a natural lead-in to additional content. - - - Go somewhere - - - - -     -     -     - - - - Card Image caps - - -

    - Similar to headers and footers, cards can include top and bottom "image - caps"—images at the top or bottom of a card. -

    - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - Last updated 3 mins ago - - - - - - - -     -     -     - - - - Card Card styles - - -

    - Cards include various options for customizing their backgrounds, borders, and color. -

    -

    Background and color

    -

    - Use color property to change the appearance of a card. -

    - - - {[ - { color: 'primary', textColor: 'white' }, - { color: 'secondary', textColor: 'white' }, - { color: 'success', textColor: 'white' }, - { color: 'danger', textColor: 'white' }, - { color: 'warning' }, - { color: 'info', textColor: 'white' }, - { color: 'light' }, - { color: 'dark', textColor: 'white' }, - ].map((item, index) => ( - - - Header - - {item.color} card title - - Some quick example text to build on the card title and make up the bulk of - the card's content. - - - - - ))} - - -

    Border

    -

    - Use border utilities to change - just the border-color of a card. Note that you can set{' '} - textColor property on the <CCard> or a subset of the - card's contents as shown below. -

    - - - {[ - { color: 'primary', textColor: 'primary' }, - { color: 'secondary', textColor: 'secondary' }, - { color: 'success', textColor: 'success' }, - { color: 'danger', textColor: 'danger' }, - { color: 'warning', textColor: 'warning' }, - { color: 'info', textColor: 'info' }, - { color: 'light' }, - { color: 'dark' }, - ].map((item, index) => ( - - - Header - - {item.color} card title - - Some quick example text to build on the card title and make up the bulk of - the card's content. - - - - - ))} - + + setTabValue(v)} centered> + + + + + + Special title treatment + + With supporting text below. + + + + + + -

    Top border

    -

    - Use border utilities to change - just the border-color of a card. Note that you can set{' '} - textColor property on the <CCard> or a subset of the - card's contents as shown below. -

    - - - {[ - { color: 'primary', textColor: 'primary' }, - { color: 'secondary', textColor: 'secondary' }, - { color: 'success', textColor: 'success' }, - { color: 'danger', textColor: 'danger' }, - { color: 'warning', textColor: 'warning' }, - { color: 'info', textColor: 'info' }, - { color: 'light' }, - { color: 'dark' }, - ].map((item, index) => ( - - - Header - - {item.color} card title - - Some quick example text to build on the card title and make up the bulk of - the card's content. - - - - - ))} - - -     -     -     - - - - Card Card groups - - -

    - Use card groups to render cards as a single, attached element with equal width and - height columns. Card groups start off stacked and use display: flex; to - become attached with uniform dimensions starting at the sm breakpoint. -

    - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - Last updated 3 mins ago - - - - - - - Card title - - This card has supporting text below as a natural lead-in to additional - content. - - - Last updated 3 mins ago - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This card has even longer content than the first to show - that equal height action. - - - Last updated 3 mins ago - - - - - -

    - When using card groups with footers, their content will automatically line up. -

    + + + + + + + Card Card groups + + } + /> + + + Use a grid of cards to render cards as a single, attached element. + - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - Card title - - This card has supporting text below as a natural lead-in to additional - content. - - - - Last updated 3 mins ago - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This card has even longer content than the first to show - that equal height action. - - - - Last updated 3 mins ago - - - - -     -     -     - - - - Card Grid cards - - -

    - Use the CRow component and set{' '} - {xs|sm|md|lg|xl|xxl}={{ cols: * }} property - to control how many grid columns (wrapped around your cards) you show per row. For - example, here's xs={{cols: 1}} laying out the - cards on one column, and md={{cols: 1}} splitting - four cards to equal width across multiple rows, from the medium breakpoint up. -

    - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - -

    - Change it to md={{ cols: 3}} and you'll see the - fourth card wrap. -

    - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - - - - - Card title - - This is a wider card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer. - - - - Last updated 3 mins ago - - - - + + + + + + Card title + + This is a wider card with supporting text. + + + + + + + + + Card title + + This card has supporting text below. + + + + + + + + + Card title + + This is a wider card with even longer content. + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/carousels/Carousels.js b/src/views/base/carousels/Carousels.js index 6d8763902d..741b3567ad 100644 --- a/src/views/base/carousels/Carousels.js +++ b/src/views/base/carousels/Carousels.js @@ -1,212 +1,188 @@ -import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCarousel, - CCarouselCaption, - CCarouselItem, - CCol, - CRow, -} from '@coreui/react' +import React, { useState } from 'react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' +import IconButton from '@mui/material/IconButton' +import MobileStepper from '@mui/material/MobileStepper' +import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft' +import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight' import { DocsComponents, DocsExample } from 'src/components' import AngularImg from 'src/assets/images/angular.jpg' import ReactImg from 'src/assets/images/react.jpg' import VueImg from 'src/assets/images/vue.jpg' -const slidesLight = [ - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23AAA%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23F5F5F5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23BBB%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23EEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23E5E5E5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', +const images = [ + { src: ReactImg, label: 'React', caption: 'First slide label' }, + { src: AngularImg, label: 'Angular', caption: 'Second slide label' }, + { src: VueImg, label: 'Vue', caption: 'Third slide label' }, ] +const SimpleCarousel = ({ showControls = false, showIndicators = false, showCaptions = false }) => { + const [activeStep, setActiveStep] = useState(0) + const maxSteps = images.length + + const handleNext = () => { + setActiveStep((prevActiveStep) => (prevActiveStep + 1) % maxSteps) + } + + const handleBack = () => { + setActiveStep((prevActiveStep) => (prevActiveStep - 1 + maxSteps) % maxSteps) + } + + return ( + + + {images[activeStep].label} + {showCaptions && ( + + {images[activeStep].caption} + + Some representative placeholder content for this slide. + + + )} + + {showControls && ( + <> + + + + + + + + )} + {showIndicators && ( + + )} + + ) +} + const Carousels = () => { return ( - - + + - - - Carousel Slide only - - -

    Here’s a carousel with slides

    + + + Carousel Slide only + + } + /> + + + Here's a carousel with slides + - - - slide 1 - - - slide 2 - - - slide 3 - - + -     -     -     - - - - Carousel With controls - - -

    - Adding in the previous and next controls by controls property. -

    + + + + + + + Carousel With controls + + } + /> + + + Adding in the previous and next controls. + - - - slide 1 - - - slide 2 - - - slide 3 - - + -     -     -     - - - - Carousel With indicators - - -

    + + + + + + + Carousel With indicators + + } + /> + + You can attach the indicators to the carousel, lengthwise the controls, too. -

    + - - - slide 1 - - - slide 2 - - - slide 3 - - + -     -     -     - - - - Carousel With captions - - -

    - You can add captions to slides with the <CCarouselCaption> element - within any <CCarouselItem>. They can be immediately hidden on - smaller viewports, as shown below, with optional{' '} - display utilities. We hide them - with .d-none and draw them back on medium-sized devices with{' '} - .d-md-block. -

    + + + + + + + Carousel With captions + + } + /> + + + You can add captions to slides. + - - - slide 1 - -
    First slide label
    -

    Some representative placeholder content for the first slide.

    -     -     - - slide 2 - -
    Second slide label
    -

    Some representative placeholder content for the first slide.

    -     -     - - slide 3 - -
    Third slide label
    -

    Some representative placeholder content for the first slide.

    -     -     -     -     -     -     -     - - - - Carousel Crossfade - - -

    - Add transition="crossfade" to your carousel to animate slides - with a fade transition instead of a slide. -

    - - - - slide 1 - - - slide 2 - - - slide 3 - - - -     -     -     - - - - Carousel Dark variant - - -

    - Add dark property to the CCarousel for darker controls, - indicators, and captions. Controls have been inverted from their default white fill - with the filter CSS property. Captions and controls have additional Sass - variables that customize the color and background-color. -

    - - - - slide 1 - -
    First slide label
    -

    Some representative placeholder content for the first slide.

    -     -     - - slide 2 - -
    Second slide label
    -

    Some representative placeholder content for the first slide.

    -     -     - - slide 3 - -
    Third slide label
    -

    Some representative placeholder content for the first slide.

    -     -     -     +     -     -     -     -     + + + + ) } diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js index d36f48f4a5..ed0f926d48 100644 --- a/src/views/base/collapses/Collapses.js +++ b/src/views/base/collapses/Collapses.js @@ -1,5 +1,12 @@ import React, { useState } from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CCollapse, CRow } from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Collapse from '@mui/material/Collapse' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Collapses = () => { @@ -9,127 +16,139 @@ const Collapses = () => { const [visibleB, setVisibleB] = useState(false) return ( - - + + - - - React Collapse - - -

    You can use a link or a button component.

    + + React Collapse} /> + + + You can use a link or a button component. + - { - e.preventDefault() - setVisible(!visible) - }} - > - Link - - setVisible(!visible)}> - Button - - - - + + + + + + + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. - - - + + + -     -     -     - - - - React Collapse Horizontal - - -

    You can use a link or a button component.

    + + + + + + + React Collapse Horizontal + + } + /> + + + You can use a link or a button component. + - setVisibleHorizontal(!visibleHorizontal)} aria-expanded={visibleHorizontal} - aria-controls="collapseWidthExample" > Button - -
    - - - - This is some placeholder content for a horizontal collapse. It's hidden by - default and shown when triggered. - - - -
    + + + + + + This is some placeholder content for a horizontal collapse. It's hidden + by default and shown when triggered. + + + +     -     -     -     - - - - React Collapse multi target - - -

    - A <CButton> can show and hide multiple elements. -

    + + + + + + + React Collapse multi target + + } + /> + + + A Button can show and hide multiple elements. + - setVisibleA(!visibleA)}> - Toggle first element - - setVisibleB(!visibleB)}> - Toggle second element - - { - setVisibleA(!visibleA) - setVisibleB(!visibleB) - }} - > - Toggle both elements - - - - - - + + + + + + + + + + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. - - - - - - - - + + + + + + + + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. -     -     - -     -     + + + + + - - - - + + + + ) } diff --git a/src/views/base/list-groups/ListGroups.js b/src/views/base/list-groups/ListGroups.js index a25e8bd6ef..e0d420d595 100644 --- a/src/views/base/list-groups/ListGroups.js +++ b/src/views/base/list-groups/ListGroups.js @@ -1,15 +1,17 @@ import React from 'react' -import { - CBadge, - CCard, - CCardBody, - CCardHeader, - CCol, - CFormCheck, - CListGroup, - CListGroupItem, - CRow, -} from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import List from '@mui/material/List' +import ListItem from '@mui/material/ListItem' +import ListItemText from '@mui/material/ListItemText' +import ListItemButton from '@mui/material/ListItemButton' +import Chip from '@mui/material/Chip' +import Checkbox from '@mui/material/Checkbox' +import FormControlLabel from '@mui/material/FormControlLabel' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const ListGroups = () => { diff --git a/src/views/base/navs/Navs.js b/src/views/base/navs/Navs.js index 052ed6fc5c..f4f259c09a 100644 --- a/src/views/base/navs/Navs.js +++ b/src/views/base/navs/Navs.js @@ -1,397 +1,247 @@ -import React from 'react' -import { - CRow, - CCol, - CCard, - CCardBody, - CCardHeader, - CDropdown, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CNav, - CNavItem, - CNavLink, -} from '@coreui/react' +import React, { useState } from 'react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Tabs from '@mui/material/Tabs' +import Tab from '@mui/material/Tab' +import Box from '@mui/material/Box' +import Button from '@mui/material/Button' +import Menu from '@mui/material/Menu' +import MenuItem from '@mui/material/MenuItem' +import Link from '@mui/material/Link' import { DocsComponents, DocsExample } from 'src/components' +const NavLinks = ({ direction = 'row', justify = 'flex-start' }) => ( + + + Active + + + Link + + + Link + + + Disabled + + +) + +const NavTabs = () => { + const [value, setValue] = useState(0) + return ( + setValue(v)}> + + + + + + ) +} + +const NavPills = () => { + const [value, setValue] = useState(0) + return ( + + {['Active', 'Link', 'Link', 'Disabled'].map((label, index) => ( + + ))} + + ) +} + +const NavWithDropdown = ({ variant = 'text' }) => { + const [anchorEl, setAnchorEl] = useState(null) + const [value, setValue] = useState(0) + const open = Boolean(anchorEl) + + return ( + + + + setAnchorEl(null)}> + setAnchorEl(null)}>Action + setAnchorEl(null)}>Another action + setAnchorEl(null)}>Something else here + + + + + ) +} + const Navs = () => { return ( - - + + - - - React Navs Base navs - - -

    - The base .nav component is built with flexbox and provide a strong - foundation for building all types of navigation components. It includes some style - overrides (for working with lists), some link padding for larger hit areas, and basic - disabled styling. -

    + + + React Navs Base navs + + } + /> + + + The base nav component is built with flexbox and provides a strong foundation for + building all types of navigation components. + - - - - Active - - - - Link - - - Link - - - - Disabled - - - + -

    - Classes are used throughout, so your markup can be super flexible. Use{' '} - <ul>s like above, <ol> if the order of your - items is important, or roll your own with a <nav> element. Because - the .nav uses display: flex, the nav links behave the same as nav items would, but - without the extra markup. -

    - - - - Active - - Link - Link - - Disabled - - - -     -     -     - - - - React Navs Horizontal alignment - - -

    - Change the horizontal alignment of your nav with{' '} - - flexbox utilities - - . By default, navs are left-aligned, but you can easily change them to center or right - aligned. -

    -

    - Centered with .justify-content-center: -

    + + + + + + + React Navs Horizontal alignment + + } + /> + + + Change the horizontal alignment of your nav with flexbox utilities. + + + Centered: + - - - - Active - - - - Link - - - Link - - - - Disabled - - - + -

    - Right-aligned with .justify-content-end: -

    + + Right-aligned: + - - - - Active - - - - Link - - - Link - - - - Disabled - - - + -     -     -     - - - - React Navs Vertical - - -

    - Stack your navigation by changing the flex item direction with the{' '} - .flex-column utility. Need to stack them on some viewports but not - others? Use the responsive versions (e.g., .flex-sm-column). -

    + + + + + + + React Navs Vertical + + } + /> + + + Stack your navigation by changing the flex item direction. + - - - - Active - - - - Link - - - Link - - - - Disabled - - - + -     -     -     - - - - React Navs Tabs - - -

    - Takes the basic nav from above and adds the variant="tabs" class - to generate a tabbed interface -

    + + + + + + + React Navs Tabs + + } + /> + + + Use MUI Tabs component to generate a tabbed interface. + - - - - Active - - - - Link - - - Link - - - - Disabled - - - + -     -     -     - - - - React Navs Pills - - -

    - Take that same HTML, but use variant="pills" instead: -

    + + + + + + + React Navs Pills + + } + /> + + + Use pill-style buttons for navigation. + - - - - Active - - - - Link - - - Link - - - - Disabled - - - - -     -     -     - - - - React Navs Fill and justify - - -

    - Force your .nav's contents to extend the full available width one of - two modifier classes. To proportionately fill all available space with your{' '} - .nav-items, use layout="fill". Notice that all - horizontal space is occupied, but not every nav item has the same width. -

    - - - - - Active - - - - Link - - - Link - - - - Disabled - - - - -

    - For equal-width elements, use layout="justified". All horizontal - space will be occupied by nav links, but unlike the .nav-fill above, every nav item - will be the same width. -

    - - - - - Active - - - - Link - - - Link - - - - Disabled - - - - -     -     -     - - - - React Navs Working with flex utilities - - -

    - If you need responsive nav variations, consider using a series of{' '} - flexbox utilities. While more - verbose, these utilities offer greater customization across responsive breakpoints. In - the example below, our nav will be stacked on the lowest breakpoint, then adapt to a - horizontal layout that fills the available width starting from the small breakpoint. -

    - - - - Active - - Link - Link - - Disabled - - + -     -     -     - - - - React Navs Tabs with dropdowns - - + + + + + + + React Navs Tabs with dropdowns + + } + /> + - - - - Active - - - - Dropdown button - - Action - Another action - Something else here - - - - Link - - - - Disabled - - - + - - - - - - - React Navs Pills with dropdowns - - + + + + + + + React Navs Pills with dropdowns + + } + /> + - - - - Active - - - - Dropdown button - - Action - Another action - Something else here - - - - Link - - - - Disabled - - - + - - - -     + + + + ) } diff --git a/src/views/base/paginations/Paginations.js b/src/views/base/paginations/Paginations.js index 24dc229a10..1f7d421472 100644 --- a/src/views/base/paginations/Paginations.js +++ b/src/views/base/paginations/Paginations.js @@ -1,174 +1,122 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CPagination, - CPaginationItem, - CRow, -} from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Pagination from '@mui/material/Pagination' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Paginations = () => { return ( - - + + - - - React Pagination - - -

    + + React Pagination} /> + + We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list - HTML elements so screen readers can announce the number of available links. Use a - wrapping <nav> element to identify it as a navigation section to - screen readers and other assistive technologies. -

    -

    - In addition, as pages likely have more than one such navigation section, it's - advisable to provide a descriptive aria-label for the{' '} - <nav> to reflect its purpose. For example, if the pagination - component is used to navigate between a set of search results, an appropriate label - could be aria-label="Search results pages". -

    + HTML elements so screen readers can announce the number of available links. + - - Previous - 1 - 2 - 3 - Next - + -     -     -     - - - - React Pagination Working with icons - - -

    + + + + + + + React Pagination Working with icons + + } + /> + + Looking to use an icon or symbol in place of text for some pagination links? Be sure - to provide proper screen reader support with aria attributes. -

    + to provide proper screen reader support with aria attributes. + - - - - - 1 - 2 - 3 - - - - + -     -     -     - - - - React Pagination Disabled and active states - - -

    - Pagination links are customizable for different circumstances. Use{' '} - disabled for links that appear un-clickable and .active to - indicate the current page. -

    -

    - While the disabled prop uses pointer-events: none to{' '} - try to disable the link functionality of <a>s, that CSS - property is not yet standardized and doesn'taccount for keyboard navigation. As - such, we always add tabindex="-1" on disabled links and use - custom JavaScript to fully disable their functionality. -

    + + + + + + + React Pagination Disabled and active states + + } + /> + + + Pagination links are customizable for different circumstances. Use disabled for links + that appear un-clickable and active to indicate the current page. + - - - - - 1 - 2 - 3 - - - - + -     -     -     - - - - React Pagination Sizing - - -

    - Fancy larger or smaller pagination? Add size="lg" or{' '} - size="sm" for additional sizes. -

    + + + + + + + React Pagination Sizing + + } + /> + + + Fancy larger or smaller pagination? Add size="large" or + size="small" for additional sizes. + - - Previous - 1 - 2 - 3 - Next - - - - - Previous - 1 - 2 - 3 - Next - - -     -     -     - - - - React Pagination Alignment - - -

    - Change the alignment of pagination components with{' '} - flexbox utilities. -

    - - - Previous - 1 - 2 - 3 - Next - + + + + + + + + + + + React Pagination Alignment + + } + /> + + + Change the alignment of pagination components with flexbox utilities. + - - Previous - 1 - 2 - 3 - Next - + + + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/placeholders/Placeholders.js b/src/views/base/placeholders/Placeholders.js index 743416d93d..711a526480 100644 --- a/src/views/base/placeholders/Placeholders.js +++ b/src/views/base/placeholders/Placeholders.js @@ -1,196 +1,164 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCardImage, - CCardText, - CCardTitle, - CCol, - CPlaceholder, - CRow, -} from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import CardMedia from '@mui/material/CardMedia' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Skeleton from '@mui/material/Skeleton' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' import ReactImg from 'src/assets/images/react.jpg' const Placeholders = () => { return ( - - + + - - - React Placeholder - - -

    + + React Placeholder} /> + + In the example below, we take a typical card component and recreate it with - placeholders applied to create a "loading card". Size and proportions are the - same between the two. -

    + placeholders applied to create a "loading card". Size and proportions are + the same between the two. + -
    - - - - Card title - + + + + + Card title + Some quick example text to build on the card title and make up the bulk of the - card's content. - - + card's content. + +
    + + + + + + + + + + + + + +     -     -     - - - React Placeholder - - -

    - Create placeholders with the <CPlaceholder> component and a grid - column propx (e.g., xs={6}) to set the width. They can - replace the text inside an element or be added as a modifier class to an existing - component. -

    + + + + React Placeholder} /> + + + Create placeholders with the Skeleton component to set the width. They can replace the + text inside an element or be added as a modifier class to an existing component. + - - + + -     -     - - - React Placeholder Width - - -

    - You can change the width through grid column classes, width utilities, or - inline styles. -

    + + + + + React Placeholder Width + + } + /> + + + You can change the width through width utilities or inline styles. + - - - + + + + + -     -     - - - React Placeholder Color - - -

    - By default, the <CPlaceholder> uses currentColor. This - can be overridden with a custom color or utility class. -

    + + + + + React Placeholder Color + + } + /> + + + By default, the Skeleton uses the theme colors. This can be overridden with custom + colors. + - - - - - - - - - - + + + + + + + + + -     -     - - - React Placeholder Sizing - - -

    - The size of <CPlaceholder>s are based on the typographic style of - the parent element. Customize them with size prop: lg,{' '} - sm, or xs. -

    + + + + + React Placeholder Sizing + + } + /> + + + The size of Skeletons can be customized with height prop. + - - - - + + + + + + -     -     - - - React Placeholder Animation - - -

    - Animate placeholders with animation="glow" or{' '} - animation="wave" to better convey the perception of something - being actively loaded. -

    + + + + + React Placeholder Animation + + } + /> + + + Animate placeholders with animation="pulse" or animation="wave" to + better convey the perception of something being actively loaded. + - - - - - - - + + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/popovers/Popovers.js b/src/views/base/popovers/Popovers.js index 794e100258..73df689250 100644 --- a/src/views/base/popovers/Popovers.js +++ b/src/views/base/popovers/Popovers.js @@ -1,71 +1,161 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Popover from '@mui/material/Popover' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Popovers = () => { + const [anchorEl, setAnchorEl] = React.useState(null) + const [popoverId, setPopoverId] = React.useState(null) + + const handleClick = (event, id) => { + setAnchorEl(event.currentTarget) + setPopoverId(id) + } + + const handleClose = () => { + setAnchorEl(null) + setPopoverId(null) + } + return ( - - + + - - - React Popover Basic example - - + + + React Popover Basic example + + } + /> + - handleClick(e, 'basic')} + > + Click to toggle popover + + - - Click to toggle popover - - + + + Popover title + + + And here's some amazing content. It's very engaging. Right? + + + - - - - - - - React Popover Four directions - - -

    - Four options are available: top, right, bottom, and left aligned. Directions are - mirrored when using CoreUI for React in RTL. -

    + + + + + + + React Popover Four directions + + } + /> + + + Four options are available: top, right, bottom, and left aligned. + - - Popover on top - - - Popover on right - - - Popover on bottom - - - Popover on left - + + + + + + Vivamus sagittis lacus vel augue laoreet rutrum faucibus. + + + + + + + + Vivamus sagittis lacus vel augue laoreet rutrum faucibus. + + + + + + + + Vivamus sagittis lacus vel augue laoreet rutrum faucibus. + + + + + + + + Vivamus sagittis lacus vel augue laoreet rutrum faucibus. + + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/progress/Progress.js b/src/views/base/progress/Progress.js index 78715d305d..18337aff91 100644 --- a/src/views/base/progress/Progress.js +++ b/src/views/base/progress/Progress.js @@ -1,186 +1,154 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CProgress, CProgressBar, CRow } from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import LinearProgress from '@mui/material/LinearProgress' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Progress = () => { return ( - - + + - - - React Progress Basic example - - -

    - Progress components are built with two HTML elements, some CSS to set the width, and a - few attributes. We don'tuse{' '} - - the HTML5 <progress> element - - , ensuring you can stack progress bars, animate them, and place text labels over them. -

    + + + React Progress Basic example + + } + /> + + + Progress components are built with MUI LinearProgress component. + - - - - - - - - - - - - - - - + + + + + + + -     -     -     - - - - React Progress Labels - - -

    - Add labels to your progress bars by placing text within the{' '} - <CProgressBar>. -

    + + + + + + + React Progress Labels + + } + /> + + + Add labels to your progress bars by placing text alongside the progress. + - - 25% - + + + + + + + 25% + + + -     -     -     - - - - React Progress Height - - -

    - We only set a height value on the <CProgress>, so if - you change that value the inner <CProgressBar> will automatically - resize accordingly. -

    + + + + + + + React Progress Height + + } + /> + + + Use the sx prop to change the height of the progress bar. + - - - - - - + + -     -     -     - - - - React Progress Backgrounds - - -

    - Use color prop to change the appearance of individual progress bars. -

    + + + + + + + React Progress Colors + + } + /> + + + Use the color prop to change the appearance of individual progress bars. + - - - - - - - - - - - - + + + + -     -     -     - - - - React Progress Multiple bars - - -

    - Include multiple progress bars in a progress component if you need. -

    + + + + + + + React Progress Buffer + + } + /> + + + Use the buffer variant to show buffering progress. + - - - - - + -     -     -     - - - - React Progress Striped - - -

    - Add variant="striped" to any <CProgressBar> to - apply a stripe via CSS gradient over the progress bar's background color. -

    - - - - - - - - - - - - - - -     -     -     - - - - React Progress Animated stripes - - -

    - The striped gradient can also be animated. Add animated property to{' '} - <CProgressBar> to animate the stripes right to left via CSS3 - animations. -

    + + + + + + + React Progress Indeterminate + + } + /> + + + Use the indeterminate variant for loading states where progress is unknown. + - - - - - - - - - - - - + + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/spinners/Spinners.js b/src/views/base/spinners/Spinners.js index 5553dbc0f7..5d366b2ba7 100644 --- a/src/views/base/spinners/Spinners.js +++ b/src/views/base/spinners/Spinners.js @@ -1,120 +1,126 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import CircularProgress from '@mui/material/CircularProgress' +import Button from '@mui/material/Button' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Spinners = () => { return ( - - + + - - - React Spinner Border - - -

    - Use the border spinners for a lightweight loading indicator. -

    + + + React Spinner Border + + } + /> + + + Use the circular progress for a lightweight loading indicator. + - + -

    - The border spinner uses currentColor for its border-color. - You can use any of our text color utilities on the standard spinner. -

    + + You can use the color prop to change the spinner color. + - - - - - - - - + + + + + + + + -     -     -     - - - - React Spinner Growing - - -

    - If you don'tfancy a border spinner, switch to the grow spinner. While it - doesn't technically spin, it does repeatedly grow! -

    + + + + + + + React Spinner Determinate + + } + /> + + + Use the variant="determinate" prop to show progress. + - + + + + + + -

    - Once again, this spinner is built with currentColor, so you can easily - change its appearance. Here it is in blue, along with the supported variants. -

    - - - - - - - - - - -     -     -     - - - - React Spinner Size - - -

    - Add size="sm" property to make a smaller spinner that can quickly - be used within other components. -

    + + + + + + + React Spinner Size + + } + /> + + + Use the size prop to change the spinner size. + - - + + + + + -     -     -     - - - - React Spinner Buttons - - -

    + + + + + + + React Spinner Buttons + + } + /> + + Use spinners within buttons to indicate an action is currently processing or taking - place. You may also swap the text out of the spinner element and utilize button text - as needed. -

    - - - - - - + place. + - - - - + + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js index 3a3f7fd864..487f159d06 100644 --- a/src/views/base/tables/Tables.js +++ b/src/views/base/tables/Tables.js @@ -1,986 +1,155 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CTable, - CTableBody, - CTableCaption, - CTableDataCell, - CTableHead, - CTableHeaderCell, - CTableRow, -} from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Table from '@mui/material/Table' +import TableBody from '@mui/material/TableBody' +import TableCell from '@mui/material/TableCell' +import TableContainer from '@mui/material/TableContainer' +import TableHead from '@mui/material/TableHead' +import TableRow from '@mui/material/TableRow' +import Paper from '@mui/material/Paper' import { DocsComponents, DocsExample } from 'src/components' const Tables = () => { return ( - - + + - - - React Table Basic example - - -

    - Using the most basic table CoreUI, here's how <CTable>-based - tables look in CoreUI. -

    + + + React Table Basic example + + } + /> + + + Using the most basic table with MUI Table component. + - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Variants - - -

    - Use contextual classes to color tables, table rows or individual cells. -

    - - - - - Class - Heading - Heading - - - - - Default - Cell - Cell - - - Primary - Cell - Cell - - - Secondary - Cell - Cell - - - Success - Cell - Cell - - - Danger - Cell - Cell - - - Warning - Cell - Cell - - - Info - Cell - Cell - - - Light - Cell - Cell - - - Dark - Cell - Cell - - - - -     -     -     - - - - React Table Striped rows - - -

    - Use striped property to add zebra-striping to any table row within the{' '} - <CTableBody>. -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -

    - These classes can also be added to table variants: -

    + + + + + # + Class + Heading + Heading + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + +
    +     + + + + + + + + React Table Striped rows + + } + /> + + + Use alternating row colors for better readability. + - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Hoverable rows - - -

    - Use hover property to enable a hover state on table rows within a{' '} - <CTableBody>. -

    + + + + + # + Class + Heading + Heading + + + + {[1, 2, 3].map((row, index) => ( + + {row} + {['Mark', 'Jacob', 'Larry'][index]} + {['Otto', 'Thornton', 'the Bird'][index]} + {['@mdo', '@fat', '@twitter'][index]} + + ))} + +
    +     + + + + + + + + React Table Hoverable rows + + } + /> + + + Add hover state on table rows. + - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Active tables - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - - Larry the Bird - - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - - Larry the Bird - - @twitter - - - - - - - - - - - React Table Bordered tables - - -

    - Add bordered property for borders on all sides of the table and cells. -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -

    - - Border color utilities - {' '} - can be added to change colors: -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Tables without borders - - -

    - Add borderless property for a table without borders. -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Small tables - - -

    - Add small property to make any <CTable> more compact - by cutting all cell padding in half. -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Vertical alignment - - -

    - Table cells of <CTableHead> are always vertical aligned to the - bottom. Table cells in <CTableBody> inherit their alignment from{' '} - <CTable> and are aligned to the the top by default. Use the align - property to re-align where needed. -

    - - - - - - Heading 1 - - - Heading 2 - - - Heading 3 - - - Heading 4 - - - - - - - This cell inherits vertical-align: middle; from the table - - - This cell inherits vertical-align: middle; from the table - - - This cell inherits vertical-align: middle; from the table - - - This here is some placeholder text, intended to take up quite a bit of - vertical space, to demonsCTableRowate how the vertical alignment works in the - preceding cells. - - - - - This cell inherits vertical-align: bottom; from the table row - - - This cell inherits vertical-align: bottom; from the table row - - - This cell inherits vertical-align: bottom; from the table row - - - This here is some placeholder text, intended to take up quite a bit of - vertical space, to demonsCTableRowate how the vertical alignment works in the - preceding cells. - - - - - This cell inherits vertical-align: middle; from the table - - - This cell inherits vertical-align: middle; from the table - - This cell is aligned to the top. - - This here is some placeholder text, intended to take up quite a bit of - vertical space, to demonsCTableRowate how the vertical alignment works in the - preceding cells. - - - - - -     -     -     - - - - React Table Nesting - - -

    - Border styles, active styles, and table variants are not inherited by nested tables. -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - - - - - Header - Header - Header - - - - - A - First - Last - - - B - First - Last - - - C - First - Last - - - - - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Table head - - -

    - Similar to tables and dark tables, use the modifier prop{' '} - color="light" or color="dark" to make{' '} - <CTableHead>s appear light or dark gray. -

    - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry - the Bird - @twitter - - - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - -     -     -     - - - - React Table Table foot - - - - - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry the Bird - @twitter - - - - - Footer - Footer - Footer - Footer - - - - - - - - - - - React Table Captions - - -

    - A <CTableCaption> functions like a heading for a table. It helps - users with screen readers to find a table and understand what it's about and - decide if they want to read it. -

    - - - List of users - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry - the Bird - @twitter - - - - -

    - You can also put the <CTableCaption> on the top of the table with{' '} - caption="top". -

    - - - List of users - - - # - Class - Heading - Heading - - - - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 3 - Larry - the Bird - @twitter - - - - -     -     -     -     + + + + + # + Class + Heading + Heading + + + + {[1, 2, 3].map((row, index) => ( + + {row} + {['Mark', 'Jacob', 'Larry'][index]} + {['Otto', 'Thornton', 'the Bird'][index]} + {['@mdo', '@fat', '@twitter'][index]} + + ))} + +
    +     + + + + + ) } diff --git a/src/views/base/tabs/Tabs.js b/src/views/base/tabs/Tabs.js index eae58d8f8c..bc78b33752 100644 --- a/src/views/base/tabs/Tabs.js +++ b/src/views/base/tabs/Tabs.js @@ -1,234 +1,232 @@ -import React from 'react' -import { - CRow, - CCol, - CCard, - CCardBody, - CCardHeader, - CTab, - CTabContent, - CTabList, - CTabPanel, - CTabs, -} from '@coreui/react' +import React, { useState } from 'react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Tabs from '@mui/material/Tabs' +import Tab from '@mui/material/Tab' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' -const Navs = () => { +function TabPanel(props) { + const { children, value, index, ...other } = props return ( - - + + ) +} + +const TabsDemo = () => { + const [value1, setValue1] = useState(1) + const [value2, setValue2] = useState(1) + const [value3, setValue3] = useState(1) + const [value4, setValue4] = useState(1) + const [value5, setValue5] = useState(1) + + return ( + + - - - React Tabs - - -

    - The basic React tabs example uses the variant="tabs" props to - generate a tabbed interface. -

    + + React Tabs} /> + + + The basic React tabs example uses the variant="tabs" props to generate a + tabbed interface. + - - - Home - Profile - Contact - - Disabled - - - - - Home tab content - - - Profile tab content - - - Contact tab content - - - Disabled tab content - - - + + setValue1(v)}> + + + + + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + -     -     -     - - - - React Tabs Unstyled - - -

    - If you don’t provide the variant prop, the component will default to a - basic style. -

    + + + + + + + React Tabs Unstyled + + } + /> + + + If you don't provide the variant prop, the component will default to a basic + style. + - - - Home - Profile - Contact - - Disabled - - - - - Home tab content - - - Profile tab content - - - Contact tab content - - - Disabled tab content - - - + setValue2(v)}> + + + + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + -     -     -     - - - - React Tabs Pills - - -

    - Take that same code, but use variant="pills" instead: -

    + + + + + + + React Tabs Pills + + } + /> + + + Take that same code, but use variant="pills" instead: + - - - - Home - - - Profile - - - Contact - - - Disabled - - - - - Home tab content - - - Profile tab content - - - Contact tab content - - - Disabled tab content - - - + setValue3(v)} + sx={{ + '& .MuiTab-root': { + borderRadius: 2, + mx: 0.5, + minHeight: 40, + }, + '& .Mui-selected': { + bgcolor: 'primary.main', + color: 'white !important', + }, + }} + TabIndicatorProps={{ style: { display: 'none' } }} + > + + + + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + -     -     -     - - - - React Tabs Underline - - -

    - Take that same code, but use variant="underline" instead: -

    + + + + + + + React Tabs Underline + + } + /> + + + Take that same code, but use variant="underline" instead: + - - - - Home - - - Profile - - - Contact - - - Disabled - - - - - Home tab content - - - Profile tab content - - - Contact tab content - - - Disabled tab content - - - + + setValue4(v)}> + + + + + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + -     -     -     - - - - React Tabs Underline border - - -

    - Take that same code, but use variant="underline-border" instead: -

    + + + + + + + React Tabs Underline border + + } + /> + + + Take that same code, but use variant="underline-border" instead: + - - - - Home - - - Profile - - - Contact - - - Disabled - - - - - Home tab content - - - Profile tab content - - - Contact tab content - - - Disabled tab content - - - + + setValue5(v)}> + + + + + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + -     -     -     -     + + + + ) } -export default Navs +export default TabsDemo diff --git a/src/views/base/tooltips/Tooltips.js b/src/views/base/tooltips/Tooltips.js index 86a229420c..53ee46ce50 100644 --- a/src/views/base/tooltips/Tooltips.js +++ b/src/views/base/tooltips/Tooltips.js @@ -1,77 +1,93 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Tooltip from '@mui/material/Tooltip' +import Link from '@mui/material/Link' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Tooltips = () => { return ( - - + + - - - React Tooltip Basic example - - -

    Hover over the links below to see tooltips:

    + + + React Tooltip Basic example + + } + /> + + + Hover over the links below to see tooltips: + -

    + Tight pants next level keffiyeh - - you probably - - haven'theard of them. Photo booth beard raw denim letterpress vegan messenger - bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit + + you probably + + haven't heard of them. Photo booth beard raw denim letterpress vegan messenger + bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel - - have a - + + have a + terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo - thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney''s - cleanse vegan chambray. A really ironic artisan - - whatever keytar - + thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse + vegan chambray. A really ironic artisan + + whatever keytar + scenester farm-to-table banksy Austin - - twitter handle - + + twitter handle + freegan cred raw denim single-origin coffee viral. -

    +     -

    + Hover over the buttons below to see the four tooltips directions: top, right, bottom, - and left. Directions are mirrored when using CoreUI in RTL. -

    + and left. + - - Tooltip on top - - - Tooltip on right - - - Tooltip on bottom - - - Tooltip on left - + + + + + + + + + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/buttons/button-groups/ButtonGroups.js b/src/views/buttons/button-groups/ButtonGroups.js index 1f366db2d0..973b20ed7b 100644 --- a/src/views/buttons/button-groups/ButtonGroups.js +++ b/src/views/buttons/button-groups/ButtonGroups.js @@ -1,439 +1,121 @@ import React from 'react' -import { - CButton, - CDropdown, - CDropdownDivider, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CButtonGroup, - CButtonToolbar, - CCard, - CCardBody, - CCardHeader, - CCol, - CFormCheck, - CFormInput, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import ButtonGroup from '@mui/material/ButtonGroup' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const ButtonGroups = () => { return ( - - + + - - - React Button Group Basic example - - -

    - Wrap a series of <CButton> components in{' '} - <CButtonGroup>.{' '} -

    + + + React Button Group Basic example + + } + /> + + + Wrap a series of buttons with ButtonGroup. + - - Left - Middle - Right - + + + + + -

    - These classes can also be added to groups of links, as an alternative to the{' '} - <CNav> components. -

    - - - - Active link - - - Link - - - Link - - - -     -     -     - - - - React Button Group Mixed styles - - - - - Left - Middle - Right - - - - - - - - - React Button Group Outlined styles - - + + + + + + + React Button Group Outlined styles + + } + /> + - - - Left - - - Middle - - - Right - - - - - - - - - - React Button Group Checkbox and radio button groups - - -

    - Combine button-like checkbox and radio toggle buttons into a seamless looking button - group. -

    - - - - - - - - - - - - - + + {['primary', 'secondary', 'success', 'error', 'warning', 'info'].map((color) => ( + + + + + + ))} + -     -     -     - - - - React Button Group Button toolbar - - -

    - Join sets of button groups into button toolbars for more complicated components. Use - utility classes as needed to space out groups, buttons, and more. -

    - - - - 1 - 2 - 3 - 4 - - - 5 - 6 - 7 - - - 8 - - + + + + + + + React Button Group Vertical variation + + } + /> + + + Make a set of buttons appear vertically stacked. + + + + + + + -

    - Feel free to combine input groups with button groups in your toolbars. Similar to the - example above, you’ll likely need some utilities through to space items correctly. -

    - - - - - 1 - - - 2 - - - 3 - - - 4 - - - - @ - - - - - - - 1 - - - 2 - - - 3 - - - 4 - - - - @ - - - - -     -     -     - - - - React Button Group Sizing - - -

    - Alternatively, of implementing button sizing classes to each button in a group, set{' '} - size property to all <CButtonGroup>'s, including - each one when nesting multiple groups. -

    + + + + + + + React Button Group Sizes + + } + /> + - - - Left - - - Middle - - - Right - - -
    - - - Left - - - Middle - - - Right - - -
    - - - Left - - - Middle - - - Right - - -     -     -     -     - - - - React Button Group Nesting - - -

    - Put a <CButtonGroup> inside another{' '} - <CButtonGroup> when you need dropdown menus combined with a series - of buttons. -

    - - - 1 - 2 - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - -     -     -     - - - - React Button Group Vertical variation - - -

    - Create a set of buttons that appear vertically stacked rather than horizontally.{' '} - Split button dropdowns are not supported here. -

    - - - Button - Button - Button - Button - Button - Button - Button - - - - - Button - Button - - Dropdown - - Action - Another action - Something else here - - Separated link - - - Button - Button - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - - - - - - - + + + + + + + + + + + + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/buttons/buttons/Buttons.js b/src/views/buttons/buttons/Buttons.js index ff6190ab9b..049f1590bb 100644 --- a/src/views/buttons/buttons/Buttons.js +++ b/src/views/buttons/buttons/Buttons.js @@ -1,401 +1,183 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { cilBell } from '@coreui/icons' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Box from '@mui/material/Box' +import NotificationsIcon from '@mui/icons-material/Notifications' import { DocsComponents, DocsExample } from 'src/components' const Buttons = () => { + const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info'] + return ( - - + + - - - React Button - - -

    - CoreUI includes a bunch of predefined buttons components, each serving its own - semantic purpose. Buttons show what action will happen when the user clicks or touches - it. CoreUI buttons are used to initialize operations, both in the background or - foreground of an experience. -

    + + React Button} /> + + + MUI includes a bunch of predefined button components, each serving its own semantic + purpose. + - {['normal', 'active', 'disabled'].map((state, index) => ( - - - {state.charAt(0).toUpperCase() + state.slice(1)} - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - Link - - - ))} + + {colors.map((color) => ( + + ))} + + + {colors.map((color) => ( + + ))} + -     -     -     - - - - React Button with icons - - -

    - You can combine button with our CoreUI Icons. -

    + + + + + + + React Button with icons + + } + /> + + + You can combine buttons with MUI Icons. + - {['normal', 'active', 'disabled'].map((state, index) => ( - - - {state.charAt(0).toUpperCase() + state.slice(1)} - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - - - Link - - - - ))} - -     -     -     - - - - React Button Button components - - -

    - The <CButton> component are designed for{' '} - <button> , <a> or <input>{' '} - elements (though some browsers may apply a slightly different rendering). -

    -

    - If you're using <CButton> component as <a>{' '} - elements that are used to trigger functionality ex. collapsing content, these links - should be given a role="button" to adequately communicate their - meaning to assistive technologies such as screen readers. -

    - - - Link - - - Button - - - - + + {colors.map((color) => ( + + ))} + -     -     -     - - - - React Button outline - - -

    - If you need a button, but without the strong background colors. Set{' '} - variant="outline" prop to remove all background colors. -

    + + + + + + + React Button outline + + } + /> + + + Use variant="outlined" for outline buttons. + - {['normal', 'active', 'disabled'].map((state, index) => ( - - - {state.charAt(0).toUpperCase() + state.slice(1)} - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - - - ))} + + {colors.map((color) => ( + + ))} + -     -     -     - - - - React Button ghost - - -

    - If you need a ghost variant of button, set variant="ghost" prop - to remove all background colors. -

    + + + + + + + React Button text + + } + /> + + + Use variant="text" for text buttons. + - {['normal', 'active', 'disabled'].map((state, index) => ( - - - {state.charAt(0).toUpperCase() + state.slice(1)} - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - - - ))} - -     -     -     - - - - React Button Sizes - - -

    - Larger or smaller buttons? Add size="lg" or{' '} - size="sm" for additional sizes. -

    - - - Large button - - - Large button - + + {colors.map((color) => ( + + ))} + + + + + + + + React Button Sizes + + } + /> + + + Use size="small" or size="large" for different sizes. + - - Small button - - - Small button - - -     -     -     - - - - React Button Pill - - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - - - - - - - - React Button Square - - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - {color.charAt(0).toUpperCase() + color.slice(1)} - - ))} - - - - - - - - React Button Disabled state - - -

    - Add the disabled boolean prop to any <CButton>{' '} - component to make buttons look inactive. Disabled button has{' '} - pointer-events: none applied to, disabling hover and active states from - triggering. -

    - - - Primary button - - - Button - - -

    - Disabled buttons using the <a> component act a little different: -

    -

    - <a>s don'tsupport the disabled attribute, so - CoreUI has to add .disabled className to make buttons look inactive. - CoreUI also has to add to the disabled button component{' '} - aria-disabled="true" attribute to show the state of the component - to assistive technologies. -

    - - - Primary link - - - Link - + + + + + -     -     -     - - - - React Button Block buttons - - -

    - Create buttons that span the full width of a parent—by using utilities. -

    + + + + + + + React Button Block buttons + + } + /> + + + Create full-width buttons using fullWidth prop. + -
    - Button - Button -
    -     -

    - Here we create a responsive variation, starting with vertically stacked buttons until - the md breakpoint, where .d-md-block replaces the{' '} - .d-grid class, thus nullifying the gap-2 utility. Resize - your browser to see them change. -

    - -
    - Button - Button -
    -     -

    - You can adjust the width of your block buttons with grid column width classes. For - example, for a half-width "block button", use .col-6. Center it - horizontally with .mx-auto, too. -

    - -
    - Button - Button -
    -     -

    - Additional utilities can be used to adjust the alignment of buttons when horizontal. - Here we've taken our previous responsive example and added some flex utilities and - a margin utility on the button to right align the buttons when they're no longer - stacked. -

    - -
    - + + +
    + +     -     -     -     -     + + + + ) } diff --git a/src/views/buttons/dropdowns/Dropdowns.js b/src/views/buttons/dropdowns/Dropdowns.js index a6885a416a..e2988e5f41 100644 --- a/src/views/buttons/dropdowns/Dropdowns.js +++ b/src/views/buttons/dropdowns/Dropdowns.js @@ -1,338 +1,105 @@ -import React from 'react' -import { - CButton, - CButtonGroup, - CCard, - CCardBody, - CCardHeader, - CCol, - CDropdown, - CDropdownDivider, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CRow, -} from '@coreui/react' +import React, { useState } from 'react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Menu from '@mui/material/Menu' +import MenuItem from '@mui/material/MenuItem' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' +const DropdownButton = ({ label, color = 'primary', variant = 'contained' }) => { + const [anchorEl, setAnchorEl] = useState(null) + const open = Boolean(anchorEl) + return ( + <> + + setAnchorEl(null)}> + setAnchorEl(null)}>Action + setAnchorEl(null)}>Another action + setAnchorEl(null)}>Something else here + + + ) +} + const Dropdowns = () => { return ( - - + + - - - React Dropdown Single button - - -

    - Here's how you can put them to work with either <button>{' '} - elements: -

    + + + React Dropdown Single button + + } + /> + + + Here's how you can use MUI Menu as dropdowns with buttons. + - - Dropdown button - - Action - Another action - Something else here - - + -

    - The best part is you can do this with any button variant, too: -

    - +     +     +     + + + - {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map( - (color, index) => ( - - {color} - - Action - Another action - Something else here - - Separated link - - - ), - )} + React Dropdown Color variants + } + /> + + + + {['primary', 'secondary', 'success', 'error', 'warning', 'info'].map((color) => ( + + ))} + - - -     - - - - React Dropdown Split button - - -

    - Similarly, create split button dropdowns with virtually the same markup as single - button dropdowns, but with the addition of boolean prop split for proper - spacing around the dropdown caret. -

    -

    - We use this extra class to reduce the horizontal padding on either side - of the caret by 25% and remove the margin-left that's attached for - normal button dropdowns. Those additional changes hold the caret centered in the split - button and implement a more properly sized hit area next to the main button. -

    - + + + + + + - {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map( - (color, index) => ( - - {color} - - - Action - Another action - Something else here - - Separated link - - - ), - )} + React Dropdown Outlined variants + } + /> + + + + {['primary', 'secondary', 'success', 'error', 'warning', 'info'].map((color) => ( + + ))} + -     -     -     - - - - React Dropdown Sizing - - -

    - Button dropdowns work with buttons of all sizes, including default and split dropdown - buttons. -

    - - - - Large button - - - Action - Another action - Something else here - - Separated link - - - - - Large split button - - - - Action - Another action - Something else here - - Separated link - - - - - - - Small button - - - Action - Another action - Something else here - - Separated link - - - - - Small split button - - - - Action - Another action - Something else here - - Separated link - - - -     -     -     - - - - React Dropdown Single button - - -

    - Opt into darker dropdowns to match a dark navbar or custom style by set{' '} - dark property. No changes are required to the dropdown items. -

    - - - Dropdown button - - Action - Another action - Something else here - - Separated link - - - -

    And putting it to use in a navbar:

    - - - -     -     -     - - - - React Dropdown Dropup - - -

    - Trigger dropdown menus above elements by adding{' '} - direction="dropup" to the <CDropdown>{' '} - component. -

    - - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Small split button - - - Action - Another action - Something else here - - Separated link - - - -     -     -     - - - - React Dropdown Dropright - - -

    - Trigger dropdown menus at the right of the elements by adding{' '} - direction="dropend" to the <CDropdown>{' '} - component. -

    - - - Dropdown - - Action - Another action - Something else here - - Separated link - - - - Small split button - - - Action - Another action - Something else here - - Separated link - - - -     -     -     - - - - React Dropdown Dropleft - - -

    - Trigger dropdown menus at the left of the elements by adding{' '} - direction="dropstart" to the <CDropdown>{' '} - component. -

    - - - - - - Action - Another action - Something else here - - Separated link - - - Small split button - - -     -     -     -     + + + + ) } diff --git a/src/views/charts/Charts.js b/src/views/charts/Charts.js index d5df06bf70..6684da9fda 100644 --- a/src/views/charts/Charts.js +++ b/src/views/charts/Charts.js @@ -1,182 +1,250 @@ -import React from 'react' -import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react' +import React, { useMemo } from 'react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' import { - CChartBar, - CChartDoughnut, - CChartLine, - CChartPie, - CChartPolarArea, - CChartRadar, -} from '@coreui/react-chartjs' + BarChart, + Bar, + LineChart, + Line, + PieChart, + Pie, + Cell, + RadarChart, + Radar, + PolarGrid, + PolarAngleAxis, + PolarRadiusAxis, + ResponsiveContainer, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, +} from 'recharts' import { DocsLink } from 'src/components' const Charts = () => { - const random = () => Math.round(Math.random() * 100) + const barData = [ + { name: 'January', commits: 40 }, + { name: 'February', commits: 20 }, + { name: 'March', commits: 12 }, + { name: 'April', commits: 39 }, + { name: 'May', commits: 10 }, + { name: 'June', commits: 40 }, + { name: 'July', commits: 39 }, + ] + + const lineData = useMemo( + () => [ + { name: 'January', dataset1: 65, dataset2: 28 }, + { name: 'February', dataset1: 59, dataset2: 48 }, + { name: 'March', dataset1: 80, dataset2: 40 }, + { name: 'April', dataset1: 81, dataset2: 19 }, + { name: 'May', dataset1: 56, dataset2: 86 }, + { name: 'June', dataset1: 55, dataset2: 27 }, + { name: 'July', dataset1: 40, dataset2: 90 }, + ], + [], + ) + + const doughnutData = [ + { name: 'VueJs', value: 40, color: '#41B883' }, + { name: 'EmberJs', value: 20, color: '#E46651' }, + { name: 'ReactJs', value: 80, color: '#00D8FF' }, + { name: 'AngularJs', value: 10, color: '#DD1B16' }, + ] + + const pieData = [ + { name: 'Red', value: 300, color: '#FF6384' }, + { name: 'Green', value: 50, color: '#36A2EB' }, + { name: 'Yellow', value: 100, color: '#FFCE56' }, + ] + + const polarData = [ + { name: 'Red', value: 11, color: '#FF6384' }, + { name: 'Green', value: 16, color: '#4BC0C0' }, + { name: 'Yellow', value: 7, color: '#FFCE56' }, + { name: 'Grey', value: 3, color: '#E7E9ED' }, + { name: 'Blue', value: 14, color: '#36A2EB' }, + ] + + const radarData = [ + { subject: 'Eating', A: 65, B: 28 }, + { subject: 'Drinking', A: 59, B: 48 }, + { subject: 'Sleeping', A: 90, B: 40 }, + { subject: 'Designing', A: 81, B: 19 }, + { subject: 'Coding', A: 56, B: 96 }, + { subject: 'Cycling', A: 55, B: 27 }, + { subject: 'Running', A: 40, B: 100 }, + ] return ( - - - - - - Bar Chart - - - - - - - - - - Line Chart - - - - - - - - - - Doughnut Chart - - - - - - - - - - Pie Chart {' '} - - - - - - - - - - Polar Area Chart - - - - - - - - - - - Radar Chart - - - - - - - + + + + + } + titleTypographyProps={{ variant: 'h6' }} + /> + + + + + + + + + + + + + + + + + } + titleTypographyProps={{ variant: 'h6' }} + /> + + + + + + + + + + + + + + + + + + } + titleTypographyProps={{ variant: 'h6' }} + /> + + + + + {doughnutData.map((entry, index) => ( + + ))} + + + + + + + + + + + } + titleTypographyProps={{ variant: 'h6' }} + /> + + + + + {pieData.map((entry, index) => ( + + ))} + + + + + + + + + + + } + titleTypographyProps={{ variant: 'h6' }} + /> + + + + + {polarData.map((entry, index) => ( + + ))} + + + + + + + + + + + } + titleTypographyProps={{ variant: 'h6' }} + /> + + + + + + + + + + + + + + + + ) } diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js index 57a55290d9..bc02fe44cf 100644 --- a/src/views/dashboard/Dashboard.js +++ b/src/views/dashboard/Dashboard.js @@ -1,47 +1,30 @@ import React from 'react' -import classNames from 'classnames' - -import { - CAvatar, - CButton, - CButtonGroup, - CCard, - CCardBody, - CCardFooter, - CCardHeader, - CCol, - CProgress, - CRow, - CTable, - CTableBody, - CTableDataCell, - CTableHead, - CTableHeaderCell, - CTableRow, -} from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { - cibCcAmex, - cibCcApplePay, - cibCcMastercard, - cibCcPaypal, - cibCcStripe, - cibCcVisa, - cibGoogle, - cibFacebook, - cibLinkedin, - cifBr, - cifEs, - cifFr, - cifIn, - cifPl, - cifUs, - cibTwitter, - cilCloudDownload, - cilPeople, - cilUser, - cilUserFemale, -} from '@coreui/icons' +import Box from '@mui/material/Box' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import ButtonGroup from '@mui/material/ButtonGroup' +import LinearProgress from '@mui/material/LinearProgress' +import Table from '@mui/material/Table' +import TableBody from '@mui/material/TableBody' +import TableCell from '@mui/material/TableCell' +import TableContainer from '@mui/material/TableContainer' +import TableHead from '@mui/material/TableHead' +import TableRow from '@mui/material/TableRow' +import Avatar from '@mui/material/Avatar' +import Divider from '@mui/material/Divider' +import { useTheme } from '@mui/material/styles' +import CloudDownloadIcon from '@mui/icons-material/CloudDownload' +import PeopleIcon from '@mui/icons-material/People' +import PersonIcon from '@mui/icons-material/Person' +import PersonOutlineIcon from '@mui/icons-material/PersonOutline' +import GoogleIcon from '@mui/icons-material/Google' +import FacebookIcon from '@mui/icons-material/Facebook' +import LinkedInIcon from '@mui/icons-material/LinkedIn' +import TwitterIcon from '@mui/icons-material/Twitter' +import CreditCardIcon from '@mui/icons-material/CreditCard' import avatar1 from 'src/assets/images/avatars/1.jpg' import avatar2 from 'src/assets/images/avatars/2.jpg' @@ -55,6 +38,17 @@ import WidgetsDropdown from '../widgets/WidgetsDropdown' import MainChart from './MainChart' const Dashboard = () => { + const theme = useTheme() + + const colorMap = { + success: theme.palette.success.main, + info: theme.palette.info.main, + warning: theme.palette.warning.main, + danger: theme.palette.error.main, + primary: theme.palette.primary.main, + secondary: theme.palette.secondary.main, + } + const progressExample = [ { title: 'Visits', value: '29.703 Users', percent: 40, color: 'success' }, { title: 'Unique', value: '24.093 Users', percent: 20, color: 'info' }, @@ -74,313 +68,355 @@ const Dashboard = () => { ] const progressGroupExample2 = [ - { title: 'Male', icon: cilUser, value: 53 }, - { title: 'Female', icon: cilUserFemale, value: 43 }, + { title: 'Male', icon: , value: 53 }, + { title: 'Female', icon: , value: 43 }, ] const progressGroupExample3 = [ - { title: 'Organic Search', icon: cibGoogle, percent: 56, value: '191,235' }, - { title: 'Facebook', icon: cibFacebook, percent: 15, value: '51,223' }, - { title: 'Twitter', icon: cibTwitter, percent: 11, value: '37,564' }, - { title: 'LinkedIn', icon: cibLinkedin, percent: 8, value: '27,319' }, + { title: 'Organic Search', icon: , percent: 56, value: '191,235' }, + { title: 'Facebook', icon: , percent: 15, value: '51,223' }, + { title: 'Twitter', icon: , percent: 11, value: '37,564' }, + { title: 'LinkedIn', icon: , percent: 8, value: '27,319' }, ] const tableExample = [ { avatar: { src: avatar1, status: 'success' }, - user: { - name: 'Yiorgos Avraamu', - new: true, - registered: 'Jan 1, 2023', - }, - country: { name: 'USA', flag: cifUs }, - usage: { - value: 50, - period: 'Jun 11, 2023 - Jul 10, 2023', - color: 'success', - }, - payment: { name: 'Mastercard', icon: cibCcMastercard }, + user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2023' }, + country: { name: 'USA' }, + usage: { value: 50, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'success' }, + payment: { name: 'Mastercard' }, activity: '10 sec ago', }, { avatar: { src: avatar2, status: 'danger' }, - user: { - name: 'Avram Tarasios', - new: false, - registered: 'Jan 1, 2023', - }, - country: { name: 'Brazil', flag: cifBr }, - usage: { - value: 22, - period: 'Jun 11, 2023 - Jul 10, 2023', - color: 'info', - }, - payment: { name: 'Visa', icon: cibCcVisa }, + user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2023' }, + country: { name: 'Brazil' }, + usage: { value: 22, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'info' }, + payment: { name: 'Visa' }, activity: '5 minutes ago', }, { avatar: { src: avatar3, status: 'warning' }, user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' }, - country: { name: 'India', flag: cifIn }, - usage: { - value: 74, - period: 'Jun 11, 2023 - Jul 10, 2023', - color: 'warning', - }, - payment: { name: 'Stripe', icon: cibCcStripe }, + country: { name: 'India' }, + usage: { value: 74, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'warning' }, + payment: { name: 'Stripe' }, activity: '1 hour ago', }, { avatar: { src: avatar4, status: 'secondary' }, user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' }, - country: { name: 'France', flag: cifFr }, - usage: { - value: 98, - period: 'Jun 11, 2023 - Jul 10, 2023', - color: 'danger', - }, - payment: { name: 'PayPal', icon: cibCcPaypal }, + country: { name: 'France' }, + usage: { value: 98, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'danger' }, + payment: { name: 'PayPal' }, activity: 'Last month', }, { avatar: { src: avatar5, status: 'success' }, - user: { - name: 'Agapetus Tadeáš', - new: true, - registered: 'Jan 1, 2023', - }, - country: { name: 'Spain', flag: cifEs }, - usage: { - value: 22, - period: 'Jun 11, 2023 - Jul 10, 2023', - color: 'primary', - }, - payment: { name: 'Google Wallet', icon: cibCcApplePay }, + user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2023' }, + country: { name: 'Spain' }, + usage: { value: 22, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'primary' }, + payment: { name: 'Google Wallet' }, activity: 'Last week', }, { avatar: { src: avatar6, status: 'danger' }, - user: { - name: 'Friderik Dávid', - new: true, - registered: 'Jan 1, 2023', - }, - country: { name: 'Poland', flag: cifPl }, - usage: { - value: 43, - period: 'Jun 11, 2023 - Jul 10, 2023', - color: 'success', - }, - payment: { name: 'Amex', icon: cibCcAmex }, + user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2023' }, + country: { name: 'Poland' }, + usage: { value: 43, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'success' }, + payment: { name: 'Amex' }, activity: 'Last week', }, ] return ( - <> + - - - - -

    + + + + + + Traffic -

    -
    January - July 2023
    -     - - - - - + + + January - July 2023 + +     + + {['Day', 'Month', 'Year'].map((value) => ( - + ))} - - - + + + + - - - - {progressExample.map((item, index, items) => ( - + + + + {progressExample.map((item, index) => ( + -
    {item.title}
    -
    + + {item.title} + + {item.value} ({item.percent}%) -
    - -     + + +     ))} - - - - - - - - Traffic {' & '} Sales - - - - - -
    -
    New Clients
    -
    9,123
    -
    -     - -
    -
    - Recurring Clients -
    -
    22,643
    -
    -     -     -
    - {progressGroupExample1.map((item, index) => ( -
    -
    - {item.title} -
    -
    - - -
    -
    - ))} -     - - - -
    -
    Pageviews
    -
    78,623
    -
    -     - -
    -
    Organic
    -
    49,123
    -
    -     -     - -
    - - {progressGroupExample2.map((item, index) => ( -
    -
    - - {item.title} - {item.value}% -
    -
    - -
    -
    - ))} + + + -
    - - {progressGroupExample3.map((item, index) => ( -
    -
    - - {item.title} - - {item.value}{' '} - ({item.percent}%) - -
    -
    - -
    -
    - ))} -     -     + -
    + + + Traffic & Sales + + + + + + + + + New Clients + + + 9,123 + + + + + + + Recurring Clients + + + 22,643 + + + + + + {progressGroupExample1.map((item, index) => ( + + + {item.title} + + + + + ))} + + + + + + + Pageviews + + + 78,623 + + + + + + + Organic + + + 49,123 + + + + + + {progressGroupExample2.map((item, index) => ( + + + {item.icon} + {item.title} + + {item.value}% + + + + + ))} + + {progressGroupExample3.map((item, index) => ( + + + {item.icon} + {item.title} + + {item.value}{' '} + + ({item.percent}%) + + + + + + ))} + + - - - - - - - User - - Country - - Usage - - Payment Method - - Activity - - - + + + + + + + + + User + Country + Usage + Payment Method + Activity + + + {tableExample.map((item, index) => ( - - - - - -
    {item.user.name}
    -
    - {item.user.new ? 'New' : 'Recurring'} | Registered:{' '} - {item.user.registered} -
    -     - - - - -
    -
    {item.usage.value}%
    -
    - {item.usage.period} -
    -
    - -     - - - - -
    Last login
    -
    {item.activity}
    -     -     + + + + + + {item.user.name} + + {item.user.new ? 'New' : 'Recurring'} | Registered: {item.user.registered} + + + + {item.country.name} + + + + + {item.usage.value}% + + + {item.usage.period} + + + + + + + + + + Last login + + + {item.activity} + + + ))} - - - - - - - +     +
    +     +     +     +     + ) } diff --git a/src/views/dashboard/MainChart.js b/src/views/dashboard/MainChart.js index 98b7eec3cf..0c6bb6da42 100644 --- a/src/views/dashboard/MainChart.js +++ b/src/views/dashboard/MainChart.js @@ -1,136 +1,81 @@ -import React, { useEffect, useRef } from 'react' - -import { CChartLine } from '@coreui/react-chartjs' -import { getStyle } from '@coreui/utils' +import React, { useMemo } from 'react' +import { useTheme } from '@mui/material/styles' +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer, + Area, + AreaChart, +} from 'recharts' const MainChart = () => { - const chartRef = useRef(null) - - useEffect(() => { - const handleColorSchemeChange = () => { - if (chartRef.current) { - setTimeout(() => { - chartRef.current.options.scales.x.grid.borderColor = getStyle( - '--cui-border-color-translucent', - ) - chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent') - chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color') - chartRef.current.options.scales.y.grid.borderColor = getStyle( - '--cui-border-color-translucent', - ) - chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent') - chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color') - chartRef.current.update() - }) - } - } + const theme = useTheme() - document.documentElement.addEventListener('ColorSchemeChange', handleColorSchemeChange) - return () => - document.documentElement.removeEventListener('ColorSchemeChange', handleColorSchemeChange) - }, [chartRef]) - - const random = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min + const data = useMemo( + () => [ + { name: 'January', dataset1: 165, dataset2: 128, dataset3: 65 }, + { name: 'February', dataset1: 159, dataset2: 148, dataset3: 65 }, + { name: 'March', dataset1: 180, dataset2: 140, dataset3: 65 }, + { name: 'April', dataset1: 181, dataset2: 119, dataset3: 65 }, + { name: 'May', dataset1: 156, dataset2: 186, dataset3: 65 }, + { name: 'June', dataset1: 155, dataset2: 127, dataset3: 65 }, + { name: 'July', dataset1: 140, dataset2: 190, dataset3: 65 }, + ], + [], + ) return ( - <> - - + + + + + + + + + + + ) } diff --git a/src/views/forms/checks-radios/ChecksRadios.js b/src/views/forms/checks-radios/ChecksRadios.js index ef073dee55..723c2c5d43 100644 --- a/src/views/forms/checks-radios/ChecksRadios.js +++ b/src/views/forms/checks-radios/ChecksRadios.js @@ -1,392 +1,122 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CFormSwitch, CRow } from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import FormControlLabel from '@mui/material/FormControlLabel' +import Checkbox from '@mui/material/Checkbox' +import Radio from '@mui/material/Radio' +import RadioGroup from '@mui/material/RadioGroup' +import Switch from '@mui/material/Switch' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const ChecksRadios = () => { return ( - - + + - - - React Checkbox - - + + + React Checkbox + + } + /> + - - - - - - - - - - React Checkbox Disabled - - -

    - Add the disabled attribute and the associated <label>s - are automatically styled to match with a lighter color to help indicate the - input's state. -

    + + } label="Default checkbox" /> + } label="Checked checkbox" /> + + + + + + + + + React Checkbox Disabled + + } + /> + - - - -     -     -     - - - - React Radio - - -

    - Add the disabled attribute and the associated <label>s - are automatically styled to match with a lighter color to help indicate the - input's state. -

    + + } label="Disabled checkbox" /> + } + label="Disabled checked checkbox" + /> + + + + + + + + + React Radio + + } + /> + - - - -     -     -     - - - - React Radio Disabled - - - - - - - - - - - - - React Switches - - -

    - A switch has the markup of a custom checkbox but uses the switch boolean - properly to render a toggle switch. Switches also support the disabled{' '} - attribute. -

    - - - - - - -     -     -     - - - - React Switches Sizes - - - - - - - - - - - - - - React Checks and Radios Default layout (stacked) - - -

    - By default, any number of checkboxes and radios that are immediate sibling will be - vertically stacked and appropriately spaced. -

    - - - - - - - - - -     -     -     - - - - React Checks and Radios Inline - - -

    - Group checkboxes or radios on the same horizontal row by adding inline{' '} - boolean property to any <CFormCheck>. -

    - - - - - - - - - - -     -     -     - - - - React Checks and Radios Without labels - - -

    - Remember to still provide some form of accessible name for assistive technologies (for - instance, using aria-label). -

    - -
    - -
    -
    - + } label="Default radio" /> + } + label="Second default radio" /> -
    -     -     -     -     - - - - Toggle buttons - - -

    - Create button-like checkboxes and radio buttons by using button boolean - property on the <CFormCheck> component. These toggle buttons can - further be grouped in a button group if needed. -

    - - - - - - - - - -

    Radio toggle buttons

    - - - - - - -

    Outlined styles

    -

    - Different variants of button, such at the various outlined styles, are supported. -

    - -
    - } + label="Disabled radio" + disabled /> -
    -
    - + + + + + + + + React Switch + + } + /> + + + + } label="Default switch checkbox input" /> + } + label="Checked switch checkbox input" /> -
    -
    - } + label="Disabled switch checkbox input" /> - } + label="Disabled checked switch checkbox input" /> -
    +     -     -     -     -     + + + + ) } diff --git a/src/views/forms/floating-labels/FloatingLabels.js b/src/views/forms/floating-labels/FloatingLabels.js index 2a637fd21c..4f01f4c706 100644 --- a/src/views/forms/floating-labels/FloatingLabels.js +++ b/src/views/forms/floating-labels/FloatingLabels.js @@ -1,170 +1,101 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CFormInput, - CFormLabel, - CFormFloating, - CFormSelect, - CFormTextarea, - CRow, -} from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import MenuItem from '@mui/material/MenuItem' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const FloatingLabels = () => { return ( - - + + - - - React Floating labels - - -

    - Wrap a pair of <CFormInput> and <CFormLabel>{' '} - elements in CFormFloating to enable floating labels with textual form - fields. A placeholder is required on each <CFormInput>{' '} - as our method of CSS-only floating labels uses the :placeholder-shown{' '} - pseudo-element. Also note that the <CFormInput> must come first so - we can utilize a sibling selector (e.g., ~). -

    + + + React Floating labels + + } + /> + + + MUI TextField with label prop creates floating labels by default. + - - - Email address - - - - Password - + + + + -

    - When there's a value already defined, <CFormLabel> - s will automatically adjust to their floated position. -

    - - - - Input with value - - -     -     -     - - - - React Floating labels Textareas - - -

    - By default, <CFormTextarea>s will be the same height as{' '} - <CFormInput>s. -

    - - - - Comments - - -

    - To set a custom height on your <CFormTextarea;>, do not use the{' '} - rows attribute. Instead, set an explicit height (either - inline or via custom CSS). -

    + + + + + + + React Floating labels Textareas + + } + /> + - - - Comments - + -     -     -     - - - - React Floating labels Selects - - -

    - Other than <CFormInput>, floating labels are only available on{' '} - <CFormSelect>s. They work in the same way, but unlike{' '} - <CFormInput>s, they'll always show the{' '} - <CFormLabel> in its floated state.{' '} - - Selects with size and multiple are not supported. - -

    + + + + + + + React Floating labels Selects + + } + /> + - - - - - - - - Works with selects - + + Open this select menu + One + Two + Three + -     -     -     - - - - React Floating labels Layout - - -

    - When working with the CoreUI for Bootstrap grid system, be sure to place form elements - within column classes. -

    + + + + + + + React Floating labels Layout + + } + /> + - - - - - Email address - - - - - - - - - - - Works with selects - - - + + + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/forms/form-control/FormControl.js b/src/views/forms/form-control/FormControl.js index 7b972ffd86..42b7a701ad 100644 --- a/src/views/forms/form-control/FormControl.js +++ b/src/views/forms/form-control/FormControl.js @@ -1,248 +1,96 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CForm, - CFormInput, - CFormLabel, - CFormTextarea, - CRow, -} from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const FormControl = () => { return ( - - + + - - - React Form Control - - + + React Form Control} /> + + + Use MUI TextField for form inputs. + - -
    - Email address - -
    -
    - Example textarea - -
    -     + + + +     -     -     -     - - - - React Form Control Sizing - - -

    - Set heights using size property like size="lg" and{' '} - size="sm". -

    + + + + + + + React Form Control Sizing + + } + /> + + + Set heights using size prop. + - -
    - -
    - + + + +     -     -     -     - - - - React Form Control Disabled - - -

    - Add the disabled boolean attribute on an input to give it a grayed out - appearance and remove pointer events. -

    + + + + + + + React Form Control Disabled + + } + /> + - -
    - -
    + + + +     -     -     -     - - - - React Form Control Readonly - - -

    - Add the readOnly boolean attribute on an input to prevent modification of - the input's value. Read-only inputs appear lighter (just like disabled inputs), - but retain the standard cursor. -

    + + + + + + + React Form Control Readonly + + } + /> + - + -     -     -     - - - - React Form Control Readonly plain text - - -

    - If you want to have <input readonly> elements in your form styled - as plain text, use the plainText boolean property to remove the default - form field styling and preserve the correct margin and padding. -

    - - - - Email - -
    - -
    -     - - - Password - -
    - -
    -     -     - - -
    - - Email - - -
    -
    - - Password - - -
    -
    - - Confirm identity - -
    -     -     -     -     -     - - - - React Form Control File input - - - -
    - Default file input example - -
    -
    - Multiple files input example - -
    -
    - Disabled file input example - -
    -
    - Small file input example - -
    -
    - Large file input example - -
    -     -     -     -     - - - - React Form Control Color - - - - Color picker - - - - - -     + + + + ) } diff --git a/src/views/forms/input-group/InputGroup.js b/src/views/forms/input-group/InputGroup.js index 73ccac2629..6e03ef425c 100644 --- a/src/views/forms/input-group/InputGroup.js +++ b/src/views/forms/input-group/InputGroup.js @@ -1,503 +1,91 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CDropdown, - CDropdownDivider, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CFormCheck, - CFormInput, - CFormLabel, - CFormSelect, - CFormTextarea, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import InputAdornment from '@mui/material/InputAdornment' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const InputGroup = () => { return ( - - + + - - - React Input group Basic example - - -

    - Place one add-on or button on either side of an input. You may also place one on both - sides of an input. Remember to place <CFormLabel>s outside the - input group. -

    + + + React Input group Basic example + + } + /> + + + Use MUI TextField with InputAdornment for input groups. + - - @ - + @, + }} placeholder="Username" - aria-label="Username" - aria-describedby="basic-addon1" + fullWidth /> - - - @example.com, + }} + fullWidth /> - @example.com - - Your vanity URL - - https://example.com/users/ - - - - $ - - .00 - - - - @ - - - - With textarea - - - -     -     -     - - - - React Input group Wrapping - - -

    - Input groups wrap by default via flex-wrap: wrap in order to accommodate - custom form field validation within an input group. You may disable this with{' '} - .flex-nowrap. -

    - - - @ - https://example.com/users/ + ), + }} + fullWidth /> - + -     -     -     - - - - React Input group Sizing - - -

    - Add the relative form sizing classes to the <CInputGroup> itself - and contents within will automatically resize—no need for repeating the form control - size classes on each element. -

    -

    - Sizing on the individual input group elements isn'tsupported. -

    + + + + + + + React Input group Sizing + + } + /> + - - Small - - - - Default - - - - Large - - - -     -     -     - - - - React Input group Checkboxes and radios - - -

    - Place any checkbox or radio option within an input group's addon instead of text. -

    - - - - - - - - - - - - - - -     -     -     - - - - React Input group Multiple inputs - - -

    - While multiple <CFormInput>s are supported visually, validation - styles are only available for input groups with a single{' '} - <CFormInput>. -

    - - - First and last name - - - - -     -     -     - - - - React Input group Multiple addons - - -

    - Multiple add-ons are supported and can be mixed with checkbox and radio input - versions.. -

    - - - $ - 0.00 - - - - - $ - 0.00 - - -     -     -     - - - - React Input group Button addons - - -

    - Multiple add-ons are supported and can be mixed with checkbox and radio input - versions.. -

    - - - - Button - - - - - - - Button - - - - - Button - - - Button - - - - - - - Button - - - Button - - - -     -     -     - - - - React Input group Buttons with dropdowns - - - - - - - Dropdown - - - Action - Another action - Something else here - - Separated link - - - - - - - - - Dropdown - - - Action - Another action - Something else here - - Separated link - - - - - - - Dropdown - - - Action - Another action - Something else here - - Separated link - - - - - - Dropdown - - - Action - Another action - Something else here - - Separated link - - - - - - - - - - - React Input group Segmented buttons - - - - - - - Action - - - - Action - Another action - Something else here - - Separated link - - - - - - - - - Action - - - - Action - Another action - Something else here - - Separated link - - - - - - - - - - - React Input group Custom select - - - - - - Options - - - - - - - - - - - - - - - - - Options - - - - - Button - - - - - - - - - - - - - - - - - Button - - - - - - - - - - React Input group Custom file input - - - - - - Upload - - - - - - - Upload - - - - - Button - - + Small, + }} + fullWidth /> - - - Default, + }} + fullWidth /> - - Button - - + - - - -     + + + + ) } diff --git a/src/views/forms/layout/Layout.js b/src/views/forms/layout/Layout.js index 6a6bf56451..e1301161a2 100644 --- a/src/views/forms/layout/Layout.js +++ b/src/views/forms/layout/Layout.js @@ -1,424 +1,126 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CForm, - CFormCheck, - CFormInput, - CFormLabel, - CFormSelect, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import Button from '@mui/material/Button' +import FormControlLabel from '@mui/material/FormControlLabel' +import Checkbox from '@mui/material/Checkbox' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Layout = () => { return ( - - + + - - - Layout Form grid - - -

    - More complex forms can be built using our grid classes. Use these for form layouts - that require multiple columns, varied widths, and additional alignment options. -

    + + + Layout Form grid + + } + /> + + + Use MUI Grid for form layouts. + - - - - - - - - + + + + + + + + -     -     -     - - - - Layout Gutters - - -

    - By adding gutter modifier classes - , you can have control over the gutter width in as well the inline as block direction. -

    + + + + + + + Layout Gutters + + } + /> + - - - - - - - - + + + + + + + + + + + + + + + + + + + + + } label="Check me out" /> + + + + + -

    - More complex layouts can also be created with the grid system. -

    - - - - Email - - - - Password - - - - Address - - - - Address 2 - - - - City - - - - State - - - - - - - Zip - - - - - - - - Sign in - - - - -     -     -     - - - - Layout Horizontal form - - -

    - Create horizontal forms with the grid by adding the .row class to form - groups and using the .col-*-* classes to specify the width of your labels - and controls. Be sure to add .col-form-label to your{' '} - <CFormLabel>s as well so they're vertically centered with their - associated form controls. -

    -

    - At times, you maybe need to use margin or padding utilities to create that perfect - alignment you need. For example, we've removed the padding-top on our - stacked radio inputs label to better align the text baseline. -

    + + + + + + + Layout Horizontal form + + } + /> + - - - - Email - - - - - - - - Password - - - - - -
    - Radios - - - - - -
    - -
    - -
    -     - - Sign in - -     -     -     -     -     - - - - Layout Horizontal form label sizing - - -

    - Be sure to use .col-form-label-sm or .col-form-label-lg to - your <CFormLabel>s or <legend>s to correctly - follow the size of .form-control-lg and .form-control-sm. -

    - - - - Email - - - - - - - - Email - - - - - - - - Email - - - - - - -     -     -     - - - - Layout Column sizing - - -

    - As shown in the previous examples, our grid system allows you to place any number of{' '} - <CCol>s within a <CRow>. They'll split the - available width equally between them. You may also pick a subset of your columns to - take up more or less space, while the remaining <CCol>s equally - split the rest, with specific column classes like{' '} - <CCol sm="7">. -

    - - - - - - - - - - - - - -     -     -     - - - - Layout Auto-sizing - - -

    - The example below uses a flexbox utility to vertically center the contents and changes{' '} - <CCol> to <CCol xs="auto"> so that your - columns only take up as much space as needed. Put another way, the column sizes itself - based on the contents. -

    - - - - - Name - - - - - - Username - - - @ - - - - - - Preference - - - - - - - - - - - - - - Submit - - - - -

    - You can then remix that once again with size-specific column classes. -

    - - - - - Name - - - - - - Username - - - @ - - - - - - Preference - - - - - - - - - - - - - - Submit - - - - -     -     -     - - - - Layout Inline forms - - -

    - Use the <CCol xs="auto"> class to create horizontal - layouts. By adding{' '} - gutter modifier classes, we will - have gutters in horizontal and vertical directions. The{' '} - .align-items-center aligns the form elements to the middle, making the{' '} - <CFormCheck> align properly. -

    - - - - - Username - - - @ - - - - - - Preference - - - - - - - - - - - - - - Submit - - - + + + + Email + + + + + + + + Password + + + + + + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/forms/range/Range.js b/src/views/forms/range/Range.js index 78a43dbfd2..7e65525871 100644 --- a/src/views/forms/range/Range.js +++ b/src/views/forms/range/Range.js @@ -1,82 +1,100 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CFormLabel, CFormRange, CRow } from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Slider from '@mui/material/Slider' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Range = () => { return ( - - + + - - - React Range - - -

    - Create custom <input type="range"> controls with{' '} - <CFormRange>. -

    - - Example range - + + + React Range + + } + /> + + + Use MUI Slider for range inputs. + + + + Example range + + -     -     -     - - - - React Range Disabled - - -

    - Add the disabled boolean attribute on an input to give it a grayed out - appearance and remove pointer events. -

    - - Disabled range - + + + + + + + React Range Disabled + + } + /> + + + + + -     -     -     - - - - React Range Min and max - - -

    - Range inputs have implicit values for min and max— - 0 and 100, respectively. You may specify new values for - those using the min and max attributes. -

    - - Example range - + + + + + + + React Range Min and max + + } + /> + + + Slider has implicit values for min and max—0 and 100, respectively. + + + + + -     -     -     - - - - React Range Steps - - -

    - By default, range inputs "snap" to integer values. To change this, you can - specify a step value. In the example below, we double the number of steps - by using step="0.5". -

    - - Example range - + + + + + + + React Range Steps + + } + /> + + + By default, sliders snap to integers. To change this, you can specify a step value. + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/forms/select/Select.js b/src/views/forms/select/Select.js index d817644493..0779e4e090 100644 --- a/src/views/forms/select/Select.js +++ b/src/views/forms/select/Select.js @@ -1,99 +1,91 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import MenuItem from '@mui/material/MenuItem' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' const Select = () => { return ( - - + + - - - React Select Default - - + + + React Select Default + + } + /> + + + Use MUI TextField with select prop for select inputs. + - - - - - - + + Open this select menu + One + Two + Three + - - - - - - - React Select Sizing - - -

    - You may also choose from small and large custom selects to match our similarly sized - text inputs. -

    + + + + + + + React Select Sizing + + } + /> + - - - - - - - - - - - - + + + One + Two + Three + + + One + Two + Three + + -

    - The multiple attribute is also supported: -

    - - - - - - - - -

    - As is the htmlSize property: -

    - - - - - - - - -     -     -     - - - - React Select Disabled - - -

    - Add the disabled boolean attribute on a select to give it a grayed out - appearance and remove pointer events. -

    + + + + + + + React Select Disabled + + } + /> + - - - - - - + + Open this select menu + One + Two + Three + -     -     -     -     + + + + ) } diff --git a/src/views/forms/validation/Validation.js b/src/views/forms/validation/Validation.js index d0017b6b2c..9202dab78e 100644 --- a/src/views/forms/validation/Validation.js +++ b/src/views/forms/validation/Validation.js @@ -1,503 +1,117 @@ import React, { useState } from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CForm, - CFormCheck, - CFormInput, - CFormFeedback, - CFormLabel, - CFormSelect, - CFormTextarea, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import Button from '@mui/material/Button' +import FormControlLabel from '@mui/material/FormControlLabel' +import Checkbox from '@mui/material/Checkbox' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' -const CustomStyles = () => { +const Validation = () => { const [validated, setValidated] = useState(false) - const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } - setValidated(true) - } - return ( - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - - ) -} -const BrowserDefaults = () => { - const [validated, setValidated] = useState(false) const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } + event.preventDefault() setValidated(true) } - return ( - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - - ) -} -const Tooltips = () => { - const [validated, setValidated] = useState(false) - const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } - setValidated(true) - } return ( - - - Email - - - Looks good! - - - - Email - - - Looks good! - - - - Username - - @ - - - Please choose a username. - - - - - City - - - Please provide a valid city. - - - - City - - - - - - Please provide a valid city. - - - - City - - - Please provide a valid zip. - - - - - Submit form - - - - ) -} - -const Validation = () => { - return ( - - + + - - - Validation Custom styles - - -

    - For custom CoreUI form validation messages, you'll need to add the{' '} - noValidate boolean property to your <CForm>. This - disables the browser default feedback tooltips, but still provides access to the form - validation APIs in JavaScript. Try to submit the form below; our JavaScript will - intercept the submit button and relay feedback to you. When attempting to submit, - you'll see the :invalid and :valid styles applied to - your form controls. -

    -

    - Custom feedback styles apply custom colors, borders, focus styles, and background - icons to better communicate feedback.{' '} -

    - {CustomStyles()} -     -     -     - - - - Validation Browser defaults - - -

    - Not interested in custom validation feedback messages or writing JavaScript to change - form behaviors? All good, you can use the browser defaults. Try submitting the form - below. Depending on your browser and OS, you'll see a slightly different style of - feedback. -

    -

    - While these feedback styles cannot be styled with CSS, you can still customize the - feedback text through JavaScript. -

    - {BrowserDefaults()} -     -     -     - - - - Validation Server side - - -

    - We recommend using client-side validation, but in case you require server-side - validation, you can indicate invalid and valid form fields with invalid{' '} - and valid boolean properties. -

    -

    - For invalid fields, ensure that the invalid feedback/error message is associated with - the relevant form field using aria-describedby (noting that this - attribute allows more than one id to be referenced, in case the field - already points to additional form text). -

    - - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - + + Validation + + } + /> + + + Use MUI TextField with error and helperText props for validation. + + + + + + - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - - -     -     -     - - - - Validation Supported elements - - -

    - Validation styles are available for the following form controls and components: -

    -
      -
    • - <CFormInput>s -
      • -
    • - <CFormSelect>s -
      • -
    • - <CFormCheck>s -
      • -
    - - -
    - - Textarea - - - Please enter a message in the textarea. -
    - - Example invalid feedback text - - - - - More example invalid feedback text - -
    - - - - - - - Example invalid select feedback -
    - -
    - - Example invalid form file feedback -
    - -
    - - Submit form - -
    -     + + + + + + + + + + + + + + + + + + } + label="Agree to terms and conditions" + /> + + + + + +     -     -     -     - - - - Validation Tooltips - - -

    - If your form layout allows it, you can swap the text for the tooltip to display - validation feedback in a styled tooltip. Be sure to have a parent with{' '} - position: relative on it for tooltip positioning. In the example below, - our column classes have this already, but your project may require an alternative - setup. -

    - {Tooltips()} -     -     -     -     + + + + ) } diff --git a/src/views/icons/brands/Brands.js b/src/views/icons/brands/Brands.js index e46ce6fedb..6db412dcc0 100644 --- a/src/views/icons/brands/Brands.js +++ b/src/views/icons/brands/Brands.js @@ -1,34 +1,75 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { brandSet } from '@coreui/icons' -import { DocsIcons } from 'src/components' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' +import FacebookIcon from '@mui/icons-material/Facebook' +import TwitterIcon from '@mui/icons-material/Twitter' +import LinkedInIcon from '@mui/icons-material/LinkedIn' +import GitHubIcon from '@mui/icons-material/GitHub' +import InstagramIcon from '@mui/icons-material/Instagram' +import YouTubeIcon from '@mui/icons-material/YouTube' +import GoogleIcon from '@mui/icons-material/Google' +import AppleIcon from '@mui/icons-material/Apple' -const toKebabCase = (str) => { - return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase() -} - -export const getIconsView = (iconset) => { - return Object.entries(iconset).map(([name, value]) => ( - - -
    {toKebabCase(name)}
    -     - )) -} +const Brands = () => { + const brandIcons = [ + { icon: , name: 'Facebook' }, + { icon: , name: 'Twitter' }, + { icon: , name: 'LinkedIn' }, + { icon: , name: 'GitHub' }, + { icon: , name: 'Instagram' }, + { icon: , name: 'YouTube' }, + { icon: , name: 'Google' }, + { icon: , name: 'Apple' }, + ] -const CoreUIIcons = () => { return ( - <> - - - Brand Icons - - {getIconsView(brandSet)} - - - + + + + Brand Icons} /> + + + MUI provides some brand icons. For more comprehensive brand icons, consider using{' '} + + react-icons + + . + + + {brandIcons.map(({ icon, name }) => ( + + + {icon} + + {name} + + + + ))} + + + + + ) } -export default CoreUIIcons +export default Brands diff --git a/src/views/icons/coreui-icons/CoreUIIcons.js b/src/views/icons/coreui-icons/CoreUIIcons.js index 08fe176f76..a0d73efc6a 100644 --- a/src/views/icons/coreui-icons/CoreUIIcons.js +++ b/src/views/icons/coreui-icons/CoreUIIcons.js @@ -1,20 +1,82 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react' -import { freeSet } from '@coreui/icons' -import { getIconsView } from '../brands/Brands.js' -import { DocsIcons } from 'src/components' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' +import HomeIcon from '@mui/icons-material/Home' +import SettingsIcon from '@mui/icons-material/Settings' +import PersonIcon from '@mui/icons-material/Person' +import SearchIcon from '@mui/icons-material/Search' +import MailIcon from '@mui/icons-material/Mail' +import NotificationsIcon from '@mui/icons-material/Notifications' +import FavoriteIcon from '@mui/icons-material/Favorite' +import StarIcon from '@mui/icons-material/Star' +import DeleteIcon from '@mui/icons-material/Delete' +import EditIcon from '@mui/icons-material/Edit' +import AddIcon from '@mui/icons-material/Add' +import CheckIcon from '@mui/icons-material/Check' const CoreUIIcons = () => { + const icons = [ + { icon: , name: 'Home' }, + { icon: , name: 'Settings' }, + { icon: , name: 'Person' }, + { icon: , name: 'Search' }, + { icon: , name: 'Mail' }, + { icon: , name: 'Notifications' }, + { icon: , name: 'Favorite' }, + { icon: , name: 'Star' }, + { icon: , name: 'Delete' }, + { icon: , name: 'Edit' }, + { icon: , name: 'Add' }, + { icon: , name: 'Check' }, + ] + return ( - <> - - - Free Icons - - {getIconsView(freeSet)} - - - + + + + MUI Icons} /> + + + MUI provides over 2,100 official Material icons. Visit{' '} + + MUI Icons documentation + {' '} + for the full list. + + + {icons.map(({ icon, name }) => ( + + + {icon} + + {name} + + + + ))} + + + + + ) } diff --git a/src/views/icons/flags/Flags.js b/src/views/icons/flags/Flags.js index 5db7e56705..bbc3ce46d4 100644 --- a/src/views/icons/flags/Flags.js +++ b/src/views/icons/flags/Flags.js @@ -1,21 +1,43 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react' -import { getIconsView } from '../brands/Brands.js' -import { flagSet } from '@coreui/icons' -import { DocsIcons } from 'src/components' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' -const CoreUIIcons = () => { +const Flags = () => { return ( - <> - - - Flag Icons - - {getIconsView(flagSet)} - - - + + + + Flag Icons} /> + + + For flag icons, consider using a dedicated flag icon library like{' '} + + flag-icons + {' '} + or{' '} + + react-world-flags + + . + + + + Flag icons can be added by installing a flag icon library of your choice. + + + + + + ) } -export default CoreUIIcons +export default Flags diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js index 70e1108a11..71c8261404 100644 --- a/src/views/notifications/alerts/Alerts.js +++ b/src/views/notifications/alerts/Alerts.js @@ -1,145 +1,131 @@ -import React from 'react' -import { - CAlert, - CAlertHeading, - CAlertLink, - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, -} from '@coreui/react' +import React, { useState } from 'react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Alert from '@mui/material/Alert' +import AlertTitle from '@mui/material/AlertTitle' +import Link from '@mui/material/Link' import { DocsComponents, DocsExample } from 'src/components' const Alerts = () => { + const [showDismissible, setShowDismissible] = useState(true) + return ( - - + + - - - React Alert - - -

    - React Alert is prepared for any length of text, as well as an optional close button. - For a styling, use one of the required contextual color{' '} - props (e.g., primary). For inline dismissal, use the{' '} - dismissing prop - . -

    + + React Alert} /> + + + MUI Alert is prepared for any length of text, as well as an optional close button. + - A simple primary alert—check it out! - A simple secondary alert—check it out! - A simple success alert—check it out! - A simple danger alert—check it out! - A simple warning alert—check it out! - A simple info alert—check it out! - A simple light alert—check it out! - A simple dark alert—check it out! + + A simple info alert—check it out! + + + A simple success alert—check it out! + + + A simple warning alert—check it out! + + + A simple error alert—check it out! + -     -     -     - - - - React Alert Link color - - -

    - Use the <CAlertLink> component to immediately give matching colored - links inside any alert. -

    + + + + + + + React Alert Link color + + } + /> + + + Use the Link component inside alerts. + - - A simple primary alert with an example link. Give - it a click if you like. - - - A simple secondary alert with an example link. - Give it a click if you like. - - - A simple success alert with an example link. Give - it a click if you like. - - - A simple danger alert with an example link. Give - it a click if you like. - - - A simple warning alert with an example link. Give - it a click if you like. - - - A simple info alert with an example link. Give it - a click if you like. - - - A simple light alert with an example link. Give it - a click if you like. - - - A simple dark alert with an example link. Give it - a click if you like. - + + A simple info alert with an example link. Give it a click if + you like. + + + A simple success alert with an example link. Give it a click + if you like. + + + A simple warning alert with an example link. Give it a click + if you like. + + + A simple error alert with an example link. Give it a click if + you like. + -     -     -     - - - - React Alert Additional content - - -

    - Alert can also incorporate supplementary components & elements like heading, - paragraph, and divider. -

    + + + + + + + React Alert Additional content + + } + /> + + + Alert can also incorporate supplementary components like AlertTitle. + - - Well done! -

    - Aww yeah, you successfully read this important alert message. This example text is - going to run a bit longer so that you can see how spacing within an alert works - with this kind of content. -

    -
    -

    - Whenever you need to, be sure to use margin utilities to keep things nice and - tidy. -

    -     + + Well done! + Aww yeah, you successfully read this important alert message. This example text is + going to run a bit longer so that you can see how spacing within an alert works with + this kind of content. +     -     -     -     - - - - React Alert Dismissing - - -

    - Alerts can also be easily dismissed. Just add the dismissible prop. -

    + + + + + + + React Alert Dismissing + + } + /> + + + Alerts can also be easily dismissed using the onClose prop. + - { - alert('👋 Well, hi there! Thanks for dismissing me.') - }} - > - Go right ahead and click that dimiss over there on the right. - + {showDismissible && ( + setShowDismissible(false)}> + Go right ahead and click that dismiss over there on the right. + + )} + {!showDismissible && ( + + Alert dismissed! Refresh to see it again. + + )} -     -     -     -     + + + + ) } diff --git a/src/views/notifications/badges/Badges.js b/src/views/notifications/badges/Badges.js index 81dd6b5ac4..80112ba99b 100644 --- a/src/views/notifications/badges/Badges.js +++ b/src/views/notifications/badges/Badges.js @@ -1,124 +1,96 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CBadge, CRow } from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Badge from '@mui/material/Badge' +import Button from '@mui/material/Button' +import Chip from '@mui/material/Chip' +import Box from '@mui/material/Box' +import MailIcon from '@mui/icons-material/Mail' import { DocsComponents, DocsExample } from 'src/components' const Badges = () => { return ( - - + + - - - - - React Badges Dismissing - - -

    - Bootstrap badge scale to suit the size of the parent element by using relative font - sizing and em units. -

    + + React Badge} /> + + + MUI Badge generates a small badge to the top-right of its child(ren). + -

    - Example heading New -

    -

    - Example heading New -

    -

    - Example heading New -

    -

    - Example heading New -

    -
    - Example heading New -
    -
    - Example heading New -
    + + + + + + + + + + + + + +     -

    - Badges can be used as part of links or buttons to provide a counter. -

    - - - Notifications 4 - - -

    - Remark that depending on how you use them, badges may be complicated for users of - screen readers and related assistive technologies. -

    -

    - Unless the context is clear, consider including additional context with a visually - hidden piece of additional text. -

    - - - Profile 9 - unread messages - - -     -     -     - - - - React Badges Contextual variations - - -

    - Add any of the below-mentioned color props to modify the presentation of - a badge. -

    + + + + + + + React Badge Chip component + + } + /> + + + Use MUI Chip for inline badges/labels. + - primary - success - danger - warning - info - light - dark + + + + + + + + -     -     - - - React Badges Pill badges - - -

    - Apply the shape="rounded-pill" prop to make badges rounded. -

    + + + + + + + React Badge Outlined chips + + } + /> + - - primary - - - success - - - danger - - - warning - - - info - - - light - - - dark - + + + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/notifications/modals/Modals.js b/src/views/notifications/modals/Modals.js index 7be7294a12..6e21d5be13 100644 --- a/src/views/notifications/modals/Modals.js +++ b/src/views/notifications/modals/Modals.js @@ -1,752 +1,106 @@ import React, { useState } from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CLink, - CModal, - CModalBody, - CModalFooter, - CModalHeader, - CModalTitle, - CPopover, - CRow, - CTooltip, -} from '@coreui/react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Dialog from '@mui/material/Dialog' +import DialogTitle from '@mui/material/DialogTitle' +import DialogContent from '@mui/material/DialogContent' +import DialogContentText from '@mui/material/DialogContentText' +import DialogActions from '@mui/material/DialogActions' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' -const LiveDemo = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}> - Launch demo modal - - setVisible(false)}> - - Modal title - - Woohoo, you're reading this text in a modal! - - setVisible(false)}> - Close - - Save changes - - - - ) -} - -const StaticBackdrop = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}> - Launch static backdrop modal - - setVisible(false)}> - - Modal title - - - I will not close if you click outside me. Don'teven try to press escape key. - - - setVisible(false)}> - Close - - Save changes - - - - ) -} - -const ScrollingLongContent = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}> - Launch demo modal - - setVisible(false)}> - - Modal title - - -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -     - - setVisible(false)}> - Close - - Save changes - -     - - ) -} - -const ScrollingLongContent2 = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}> - Launch demo modal - - setVisible(false)}> - - Modal title - - -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -     - - setVisible(false)}> - Close - - Save changes - -     - - ) -} - -const VerticallyCentered = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}> - Vertically centered modal - - setVisible(false)}> - - Modal title - - - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. - - - setVisible(false)}> - Close - - Save changes - - - - ) -} - -const VerticallyCentered2 = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}> - Vertically centered scrollable modal - - setVisible(false)}> - - Modal title - - -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -

    - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel - scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus - auctor fringilla. -

    -

    - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis - in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -

    -

    - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis - lacus vel augue laoreet rutrum faucibus dolor auctor. -

    -     - - setVisible(false)}> - Close - - Save changes - -     - - ) -} - -const TooltipsPopovers = () => { - const [visible, setVisible] = useState(false) - return ( - <> - setVisible(!visible)}> - Launch demo modal - - setVisible(false)}> - - Modal title - - -
    Popover in a modal
    -

    - This - - button - {' '} - triggers a popover on click. -

    -
    -
    Tooltips in a modal
    -

    - - This link - {' '} - and - - that link - {' '} - have tooltips on hover. -

    -     - - setVisible(false)}> - Close - - Save changes - -     - - ) -} - -const OptionalSizes = () => { - const [visibleXL, setVisibleXL] = useState(false) - const [visibleLg, setVisibleLg] = useState(false) - const [visibleSm, setVisibleSm] = useState(false) - return ( - <> - setVisibleXL(!visibleXL)}> - Extra large modal - - setVisibleLg(!visibleLg)}> - Large modal - - setVisibleSm(!visibleSm)}> - Small large modal - - setVisibleXL(false)}> - - Extra large modal - - ... - - setVisibleLg(false)}> - - Large modal - - ... - - setVisibleSm(false)}> - - Small modal - - ... - - - ) -} - -const FullscreenModal = () => { - const [visible, setVisible] = useState(false) - const [visibleSm, setVisibleSm] = useState(false) - const [visibleMd, setVisibleMd] = useState(false) - const [visibleLg, setVisibleLg] = useState(false) - const [visibleXL, setVisibleXL] = useState(false) - const [visibleXXL, setVisibleXXL] = useState(false) - - return ( - <> - setVisible(!visible)}> - Full screen - - setVisibleSm(!visibleSm)}> - Full screen below sm - - setVisibleMd(!visibleMd)}> - Full screen below md - - setVisibleLg(!visibleLg)}> - Full screen below lg - - setVisibleXL(!visibleXL)}> - Full screen below xl - - setVisibleXXL(!visibleXXL)}> - Full screen below xxl - - setVisible(false)}> - - Full screen - - ... - - setVisibleSm(false)}> - - Full screen below sm - - ... - - setVisibleMd(false)}> - - Full screen below md - - ... - - setVisibleLg(false)}> - - Full screen below lg - - ... - - setVisibleXL(false)}> - - Full screen below xl - - ... - - setVisibleXXL(false)}> - - Full screen below xxl - - ... - - - ) -} - const Modals = () => { + const [open, setOpen] = useState(false) + const [openLarge, setOpenLarge] = useState(false) + const [openSmall, setOpenSmall] = useState(false) + return ( - - + + - - - React Modal - - -

    - Below is a static modal example (meaning its position and{' '} - display have been overridden). Included are the modal header, modal body - (required for padding), and modal footer (optional). We ask that you - include modal headers with dismiss actions whenever possible, or provide another - explicit dismiss action. -

    + + + React Modal Basic + + } + /> + + + Use MUI Dialog for modal dialogs. + - - - Modal title - - Modal body text goes here. - - Close - Save changes - - - -     -     -     - - - - React Modal Live demo - - -

    - Toggle a working modal demo by clicking the button below. It will slide down and fade - in from the top of the page. -

    - {LiveDemo()} -     -     -     - - - - React Modal Static backdrop - - -

    - If you don’t provide an onDimsiss handler to the Modal component, your - modal will behave as though the backdrop is static, meaning it will not close when - clicking outside it. Click the button below to try it. -

    - {StaticBackdrop()} -     -     -     - - - - React Modal Scrolling long content - - -

    - If you don’t provide an onDimsiss handler to the Modal component, your - modal will behave as though the backdrop is static, meaning it will not close when - clicking outside it. Click the button below to try it. -

    - - {ScrollingLongContent()} - -

    - You can also create a scrollable modal that allows scroll the modal body by adding{' '} - scrollable prop. -

    - - {ScrollingLongContent2()} - -     -     -     - - - - React Modal Vertically centered - - -

    - Add alignment="center" to <CModal> to - vertically center the modal. -

    - - {VerticallyCentered()} - - - {VerticallyCentered2()} + + setOpen(false)}> + Modal title + + + Woohoo, you are reading this text in a modal! + + + + + + + -     -     -     - - - - React Modal Tooltips and popovers - - -

    - <CTooltips> and <CPopovers> can be placed within - modals as needed. When modals are closed, any tooltips and popovers within are also - automatically dismissed. -

    - - {TooltipsPopovers()} + + + + + + + React Modal Sizes + + } + /> + + + Modals have optional sizes, available via maxWidth prop. + + + + + + + setOpenLarge(false)} maxWidth="lg" fullWidth> + Large modal + + Large modal content. + + + + + + setOpenSmall(false)} maxWidth="sm"> + Small modal + + Small modal content. + + + + + -     -     -     - - - - React Modal Optional sizes - - -

    - Modals have three optional sizes, available via modifier classes to be placed on a{' '} - <CModal>. These sizes kick in at certain breakpoints to avoid - horizontal scrollbars on narrower viewports. -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SizeProperty sizeModal max-width
    Small - 'sm' - - 300px -
    DefaultNone - 500px -
    Large - 'lg' - - 800px -
    Extra large - 'xl' - - 1140px -
    - {OptionalSizes()} -     -     -     - - - - React Modal Fullscreen Modal - - -

    - Another override is the option to pop up a modal that covers the user viewport, - available via property fullscrean. -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Property fullscreanAvailability
    - true - Always
    - 'sm' - - Below 576px -
    - 'md' - - Below 768px -
    - 'lg' - - Below 992px -
    - 'xl' - - Below 1200px -
    - 'xxl' - - Below 1400px -
    - {FullscreenModal()} -     -     -     -     + + + + ) } diff --git a/src/views/notifications/toasts/Toasts.js b/src/views/notifications/toasts/Toasts.js index 9ccf859ad3..8d57ee5ef9 100644 --- a/src/views/notifications/toasts/Toasts.js +++ b/src/views/notifications/toasts/Toasts.js @@ -1,252 +1,95 @@ -import React, { useRef, useState } from 'react' -import { - CCard, - CCardHeader, - CCardBody, - CButton, - CRow, - CCol, - CToast, - CToastBody, - CToastClose, - CToastHeader, - CToaster, -} from '@coreui/react' +import React, { useState } from 'react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' +import Snackbar from '@mui/material/Snackbar' +import Alert from '@mui/material/Alert' +import Box from '@mui/material/Box' import { DocsComponents, DocsExample } from 'src/components' -const ExampleToast = () => { - const [toast, addToast] = useState(0) - const toaster = useRef() - const exampleToast = ( - - - - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - - ) - return ( - <> - addToast(exampleToast)}> - Send a toast - - - - ) -} - const Toasts = () => { + const [open, setOpen] = useState(false) + const [openSuccess, setOpenSuccess] = useState(false) + const [openError, setOpenError] = useState(false) + return ( - - + + - - - React Toast Basic - - -

    - Toasts are as flexible as you need and have very little required markup. At a minimum, - we require a single element to contain your “toasted” content and strongly encourage a - dismiss button. -

    - - - - - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - + + + React Toast Basic + + } + /> + + + Use MUI Snackbar for toast notifications. + + + + setOpen(false)} + message="This is a toast message" + /> - {ExampleToast()} -     -     -     - - - - React Toast Translucent - - -

    - Toasts are slightly translucent to blend in with what's below them. -

    - - - - - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - - -     -     -     - - - - React Toast Stacking - - -

    - You can stack toasts by wrapping them in a toast container, which will vertically add - some spacing. -

    - - - - - - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - - - - - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - - - -     -     -     - - - - React Toast Custom content - - -

    - Customize your toasts by removing sub-components, tweaking them with{' '} - utilities, or by adding your own - markup. Here we've created a simpler toast by removing the default{' '} - <CToastHeader>, adding a custom hide icon from{' '} - CoreUI Icons, and using some{' '} - flexbox utilities to adjust the - layout. -

    - - -
    - Hello, world! This is a toast message. - -
    -     -     -

    - Alternatively, you can also add additional controls and components to toasts. -

    - - - - Hello, world! This is a toast message. -
    - - Take action - - - Close - -
    -     -     -     -     -     -     - - - - React Toast Custom content - - -

    - Building on the above example, you can create different toast color schemes with our{' '} - color and{' '} - background utilities. Here - we've set color="primary" and added .text-white{' '} - class to the <Ctoast>, and then set white property to - our close button. For a crisp edge, we remove the default border with{' '} - .border-0. -

    + + + + + + + React Toast With Alert + + } + /> + + + Combine Snackbar with Alert for colored toasts. + - + + + + setOpenSuccess(false)} + > + setOpenSuccess(false)} severity="success"> + Success! This is a success toast. + + + setOpenError(false)} > -
    - Hello, world! This is a toast message. - -
    -     + setOpenError(false)} severity="error"> + Error! This is an error toast. + +     -     -     -     -     + + + + ) } diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js index 1b2ee0baa2..f921db0717 100644 --- a/src/views/pages/login/Login.js +++ b/src/views/pages/login/Login.js @@ -1,85 +1,108 @@ import React from 'react' import { Link } from 'react-router-dom' -import { - CButton, - CCard, - CCardBody, - CCardGroup, - CCol, - CContainer, - CForm, - CFormInput, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { cilLockLocked, cilUser } from '@coreui/icons' +import Box from '@mui/material/Box' +import Container from '@mui/material/Container' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import Button from '@mui/material/Button' +import InputAdornment from '@mui/material/InputAdornment' +import PersonIcon from '@mui/icons-material/Person' +import LockIcon from '@mui/icons-material/Lock' const Login = () => { return ( -
    - - - - - - - -

    Login

    -

    Sign In to your account

    - - - - - - - - - - - - - - - - Login - - - - - Forgot password? - - - -     -     -     - - -
    -

    Sign up

    -

    - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. -

    - - - Register Now! - - -
    -     -     -     -     -     -     -
    + + + + + + + + Login + + + Sign In to your account + + + + + ), + }} + /> + + + + ), + }} + /> + + + + + + + + + + + + Sign up + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. + + + + + + + + ) } diff --git a/src/views/pages/page404/Page404.js b/src/views/pages/page404/Page404.js index d7fe9a0a25..6306c8f67a 100644 --- a/src/views/pages/page404/Page404.js +++ b/src/views/pages/page404/Page404.js @@ -1,40 +1,57 @@ import React from 'react' -import { - CButton, - CCol, - CContainer, - CFormInput, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { cilMagnifyingGlass } from '@coreui/icons' +import Box from '@mui/material/Box' +import Container from '@mui/material/Container' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import Button from '@mui/material/Button' +import InputAdornment from '@mui/material/InputAdornment' +import SearchIcon from '@mui/icons-material/Search' const Page404 = () => { return ( -
    - - - -
    -

    404

    -

    Oops! You{"'"}re lost.

    -

    - The page you are looking for was not found. -

    -
    - - - - - - Search - -     -     -     -
    + + + + + 404 + + + + Oops! You're lost. + + + The page you are looking for was not found. + + + + + + + + ), + }} + /> + + + + ) } diff --git a/src/views/pages/page500/Page500.js b/src/views/pages/page500/Page500.js index ea11a0cb2d..8138c33bbc 100644 --- a/src/views/pages/page500/Page500.js +++ b/src/views/pages/page500/Page500.js @@ -1,40 +1,57 @@ import React from 'react' -import { - CButton, - CCol, - CContainer, - CFormInput, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { cilMagnifyingGlass } from '@coreui/icons' +import Box from '@mui/material/Box' +import Container from '@mui/material/Container' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import Button from '@mui/material/Button' +import InputAdornment from '@mui/material/InputAdornment' +import SearchIcon from '@mui/icons-material/Search' const Page500 = () => { return ( -
    - - - - -

    500

    -

    Houston, we have a problem!

    -

    - The page you are looking for is temporarily unavailable. -

    -     - - - - - - Search - -     -     -     -
    + + + + + 500 + + + + Houston, we have a problem! + + + The page you are looking for is temporarily unavailable. + + + + + + + + ), + }} + /> + + + + ) } diff --git a/src/views/pages/register/Register.js b/src/views/pages/register/Register.js index d78b24c8fd..a9ef70ce34 100644 --- a/src/views/pages/register/Register.js +++ b/src/views/pages/register/Register.js @@ -1,70 +1,96 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCol, - CContainer, - CForm, - CFormInput, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { cilLockLocked, cilUser } from '@coreui/icons' +import Box from '@mui/material/Box' +import Container from '@mui/material/Container' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import Typography from '@mui/material/Typography' +import TextField from '@mui/material/TextField' +import Button from '@mui/material/Button' +import InputAdornment from '@mui/material/InputAdornment' +import PersonIcon from '@mui/icons-material/Person' +import LockIcon from '@mui/icons-material/Lock' +import EmailIcon from '@mui/icons-material/Email' const Register = () => { return ( -
    - - - - - - -

    Register

    -

    Create your account

    - - - - - - - - @ - - - - - - - - - - - - - - -
    - Create Account -
    -     -     -     -     -     -     -
    + + + + + + Register + + + Create your account + + + + + ), + }} + /> + + + + ), + }} + /> + + + + ), + }} + /> + + + + ), + }} + /> + + + + + ) } diff --git a/src/views/theme/colors/Colors.js b/src/views/theme/colors/Colors.js index ef844e1637..35ba44b02a 100644 --- a/src/views/theme/colors/Colors.js +++ b/src/views/theme/colors/Colors.js @@ -1,91 +1,131 @@ -import React, { useEffect, useState, createRef } from 'react' -import PropTypes from 'prop-types' -import classNames from 'classnames' -import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react' -import { rgbToHex } from '@coreui/utils' -import { DocsLink } from 'src/components' +import React from 'react' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' +import { useTheme } from '@mui/material/styles' const ThemeView = () => { - const [color, setColor] = useState('rgb(255, 255, 255)') - const ref = createRef() + const theme = useTheme() - useEffect(() => { - const el = ref.current.parentNode.firstChild - const varColor = window.getComputedStyle(el).getPropertyValue('background-color') - setColor(varColor) - }, [ref]) - - return ( - - - - - - - - - - - -
    HEX:{rgbToHex(color)}
    RGB:{color}
    - ) -} - -const ThemeColor = ({ className, children }) => { - const classes = classNames(className, 'theme-color w-75 rounded mb-3') - return ( - -
    - {children} - -     - ) -} - -ThemeColor.propTypes = { - children: PropTypes.node, - className: PropTypes.string, -} - -const Colors = () => { return ( - <> - - - Theme colors - - - - - -
    Brand Primary Color
    -     - -
    Brand Secondary Color
    -     - -
    Brand Success Color
    -     - -
    Brand Danger Color
    -     - -
    Brand Warning Color
    -     - -
    Brand Info Color
    -     - -
    Brand Light Color
    -     - -
    Brand Dark Color
    -     -     -     -     - + + + + Theme Colors} /> + + + MUI theme colors available in your application. + + + {['primary', 'secondary', 'success', 'error', 'warning', 'info'].map((color) => ( + + + {color} + {theme.palette[color].main} + + + ))} + + + + + + + + Theme Colors Light variants + + } + /> + + + {['primary', 'secondary', 'success', 'error', 'warning', 'info'].map((color) => ( + + + {color} light + + + ))} + + + + + + + + Theme Colors Dark variants + + } + /> + + + {['primary', 'secondary', 'success', 'error', 'warning', 'info'].map((color) => ( + + + {color} dark + + + ))} + + + + + + + + Grays + + } + /> + + + {[50, 100, 200, 300, 400, 500, 600, 700, 800, 900].map((shade) => ( + + 500 ? 'white' : 'black', + p: 2, + borderRadius: 1, + textAlign: 'center', + }} + > + grey.{shade} + + + ))} + + + + + ) } -export default Colors +export default ThemeView diff --git a/src/views/theme/typography/Typography.js b/src/views/theme/typography/Typography.js index 1cae4f6c99..ec0a17743e 100644 --- a/src/views/theme/typography/Typography.js +++ b/src/views/theme/typography/Typography.js @@ -1,229 +1,115 @@ import React from 'react' -import { CCard, CCardHeader, CCardBody } from '@coreui/react' -import { DocsLink } from 'src/components' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Typography from '@mui/material/Typography' -const Typography = () => { +const TypographyView = () => { return ( - <> - - - Headings - - - -

    - Documentation and examples for Bootstrap typography, including global settings, - headings, body text, lists, and more. -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    HeadingExample
    -

    - <h1></h1> -

    -     		- h1. Bootstrap heading -
    -

    - <h2></h2> -

    -     		- h2. Bootstrap heading -
    -

    - <h3></h3> -

    -     		- h3. Bootstrap heading -
    -

    - <h4></h4> -

    -     		- h4. Bootstrap heading -
    -

    - <h5></h5> -

    -     		- h5. Bootstrap heading -
    -

    - <h6></h6> -

    -     		- h6. Bootstrap heading -
    -     -     - - Headings - -

    - .h1 through - .h6 - classes are also available, for when you want to match the font styling of a heading but - cannot use the associated HTML element. -

    -
    -

    h1. Bootstrap heading

    -

    h2. Bootstrap heading

    -

    h3. Bootstrap heading

    -

    h4. Bootstrap heading

    -

    h5. Bootstrap heading

    -

    h6. Bootstrap heading

    -
    -     -     - -
    Display headings
    -
    -

    - Traditional heading elements are designed to work best in the meat of your page content. - When you need a heading to stand out, consider using a display heading - —a larger, slightly more opinionated heading style. -

    -
    - - - - - - - - - - - - - - - -
    - Display 1 -
    - Display 2 -
    - Display 3 -
    - Display 4 -
    -
    -
    -     - - Inline text elements - -

    - Traditional heading elements are designed to work best in the meat of your page content. - When you need a heading to stand out, consider using a display heading - —a larger, slightly more opinionated heading style. -

    -
    -

    + + + + Headings} /> + + + h1. Heading + + + h2. Heading + + + h3. Heading + + + h4. Heading + + + h5. Heading + + + h6. Heading + + + + + + + Display headings} /> + + + Display 1 + + + Display 2 + + + Display 3 + + + Display 4 + + + + + + + Inline text elements} /> + + You can use the mark tag to highlight text. -

    -

    + + This line of text is meant to be treated as deleted text. -

    -

    + + This line of text is meant to be treated as no longer accurate. -

    -

    + + This line of text is meant to be treated as an addition to the document. -

    -

    - This line of text will render as underlined -

    -

    + + + This line of text will render as underlined. + + This line of text is meant to be treated as fine print. -

    -

    + + This line rendered as bold text. -

    -

    + + This line rendered as italicized text. -

    -
    -     -     - - Description list alignment - -

    - Align terms and descriptions horizontally by using our grid system’s predefined classes - (or semantic mixins). For longer terms, you can optionally add a{' '} - .text-truncate class to truncate the text - with an ellipsis. -

    -
    -
    -
    Description lists
    -
    A description list is perfect for defining terms.
    - -
    Euismod
    -
    -

    - Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. -

    -

    Donec id elit non mi porta gravida at eget metus.

    -
    - -
    Malesuada porta
    -
    Etiam porta sem malesuada magna mollis euismod.
    - -
    Truncated term is truncated
    -
    - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut - fermentum massa justo sit amet risus. -
    - -
    Nesting
    -
    -
    -
    Nested definition list
    -
    - Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. -
    -
    -
    -
    -
    -     -     - + + + + + + + Body text variants} /> + + + Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + + + Body 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + + + Subtitle 1. Lorem ipsum dolor sit amet. + + + Subtitle 2. Lorem ipsum dolor sit amet. + + + Caption text. Lorem ipsum dolor sit amet. + + + Overline text + + + + + ) } -export default Typography +export default TypographyView diff --git a/src/views/widgets/Widgets.js b/src/views/widgets/Widgets.js index 4a34afe4c0..74e56f8b7e 100644 --- a/src/views/widgets/Widgets.js +++ b/src/views/widgets/Widgets.js @@ -1,897 +1,18 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardGroup, - CCardHeader, - CCol, - CLink, - CRow, - CWidgetStatsB, - CWidgetStatsC, - CWidgetStatsE, - CWidgetStatsF, -} from '@coreui/react' -import { getStyle } from '@coreui/utils' -import CIcon from '@coreui/icons-react' -import { - cilArrowRight, - cilBasket, - cilBell, - cilChartPie, - cilMoon, - cilLaptop, - cilPeople, - cilSettings, - cilSpeech, - cilSpeedometer, - cilUser, - cilUserFollow, -} from '@coreui/icons' -import { CChartBar, CChartLine } from '@coreui/react-chartjs' -import { DocsExample } from 'src/components' - -import WidgetsBrand from './WidgetsBrand' +import Grid from '@mui/material/Grid' import WidgetsDropdown from './WidgetsDropdown' +import WidgetsBrand from './WidgetsBrand' const Widgets = () => { - const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min) - return ( - - Widgets - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - } - title="title" - value="1,123" - /> - - - - } - title="title" - value="1,123" - /> - - - - } - title="title" - value="1,123" - /> - - - - } - title="title" - value="1,123" - /> - - - - } - title="title" - value="1,123" - /> - - - - } - title="title" - value="1,123" - /> - - - - - - - } - title="income" - value="$1.999,50" - color="primary" - /> - - - } - title="income" - value="$1.999,50" - color="info" - /> - - - } - title="income" - value="$1.999,50" - color="warning" - /> - - - } - title="income" - value="$1.999,50" - color="danger" - /> - - - - - - - } - title="income" - value="$1.999,50" - color="primary" - footer={ - - View more - - - } - /> - - - } - title="income" - value="$1.999,50" - color="info" - footer={ - - View more - - - } - /> - - - } - title="income" - value="$1.999,50" - color="warning" - footer={ - - View more - - - } - /> - - - } - title="income" - value="$1.999,50" - color="danger" - footer={ - - View more - - - } - /> - - - - - - - } - padding={false} - title="income" - value="$1.999,50" - color="primary" - /> - - - } - padding={false} - title="income" - value="$1.999,50" - color="info" - /> - - - } - padding={false} - title="income" - value="$1.999,50" - color="warning" - /> - - - } - padding={false} - title="income" - value="$1.999,50" - color="danger" - /> - - - - - - - - - - - - } - value="87.500" - title="Visitors" - progress={{ color: 'info', value: 75 }} - /> - } - value="385" - title="New Clients" - progress={{ color: 'success', value: 75 }} - /> - } - value="1238" - title="Products sold" - progress={{ color: 'warning', value: 75 }} - /> - } - value="28%" - title="Returning Visitors" - progress={{ color: 'primary', value: 75 }} - /> - } - value="5:34:11" - title="Avg. Time" - progress={{ color: 'danger', value: 75 }} - /> - - - - - - } - value="87.500" - title="Visitors" - progress={{ color: 'info', value: 75 }} - /> - - - } - value="385" - title="New Clients" - progress={{ color: 'success', value: 75 }} - /> - - - } - value="1238" - title="Products sold" - progress={{ color: 'warning', value: 75 }} - /> - - - } - value="28%" - title="Returning Visitors" - progress={{ color: 'primary', value: 75 }} - /> - - - } - value="5:34:11" - title="Avg. Time" - progress={{ color: 'danger', value: 75 }} - /> - - - } - value="972" - title="Comments" - progress={{ color: 'info', value: 75 }} - /> - - - - - - - } - value="87.500" - title="Visitors" - inverse - progress={{ value: 75 }} - /> - - - } - value="385" - title="New Clients" - inverse - progress={{ value: 75 }} - /> - - - } - value="1238" - title="Products sold" - inverse - progress={{ value: 75 }} - /> - - - } - value="28%" - title="Returning Visitors" - inverse - progress={{ value: 75 }} - /> - - - } - value="5:34:11" - title="Avg. Time" - inverse - progress={{ value: 75 }} - /> - - - } - value="972" - title="Comments" - inverse - progress={{ value: 75 }} - /> - - - - - + + + + + + + + ) } diff --git a/src/views/widgets/WidgetsBrand.js b/src/views/widgets/WidgetsBrand.js index 03eea83efd..f161e9a437 100644 --- a/src/views/widgets/WidgetsBrand.js +++ b/src/views/widgets/WidgetsBrand.js @@ -1,176 +1,156 @@ import React from 'react' import PropTypes from 'prop-types' -import { CWidgetStatsD, CRow, CCol } from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons' -import { CChart } from '@coreui/react-chartjs' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import Box from '@mui/material/Box' +import Typography from '@mui/material/Typography' +import FacebookIcon from '@mui/icons-material/Facebook' +import TwitterIcon from '@mui/icons-material/Twitter' +import LinkedInIcon from '@mui/icons-material/LinkedIn' +import EventIcon from '@mui/icons-material/Event' +import { LineChart, Line, ResponsiveContainer, Area, AreaChart } from 'recharts' + +const BrandWidget = ({ icon, bgColor, values, chartData, withChart }) => { + return ( + + + {withChart && chartData && ( + + + + + + + + )} + {icon} + + + {values.map((item, index) => ( + + + {item.value} + + + {item.title} + + + ))} + + + ) +} const WidgetsBrand = (props) => { - const chartOptions = { - elements: { - line: { - tension: 0.4, - }, - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - hoverBorderWidth: 3, - }, - }, - maintainAspectRatio: false, - plugins: { - legend: { - display: false, - }, - }, - scales: { - x: { - display: false, - }, - y: { - display: false, - }, - }, - } + const facebookData = [ + { name: 'Jan', value: 65 }, + { name: 'Feb', value: 59 }, + { name: 'Mar', value: 84 }, + { name: 'Apr', value: 84 }, + { name: 'May', value: 51 }, + { name: 'Jun', value: 55 }, + { name: 'Jul', value: 40 }, + ] + + const twitterData = [ + { name: 'Jan', value: 1 }, + { name: 'Feb', value: 13 }, + { name: 'Mar', value: 9 }, + { name: 'Apr', value: 17 }, + { name: 'May', value: 34 }, + { name: 'Jun', value: 41 }, + { name: 'Jul', value: 38 }, + ] + + const linkedinData = [ + { name: 'Jan', value: 78 }, + { name: 'Feb', value: 81 }, + { name: 'Mar', value: 80 }, + { name: 'Apr', value: 45 }, + { name: 'May', value: 34 }, + { name: 'Jun', value: 12 }, + { name: 'Jul', value: 40 }, + ] + + const eventsData = [ + { name: 'Jan', value: 35 }, + { name: 'Feb', value: 23 }, + { name: 'Mar', value: 56 }, + { name: 'Apr', value: 22 }, + { name: 'May', value: 97 }, + { name: 'Jun', value: 23 }, + { name: 'Jul', value: 64 }, + ] return ( - - - - ), - })} - icon={} + + + } + bgColor="#3b5998" values={[ { title: 'friends', value: '89K' }, { title: 'feeds', value: '459' }, ]} - style={{ - '--cui-card-cap-bg': '#3b5998', - }} + chartData={facebookData} + withChart={props.withCharts} /> - - - - ), - })} - icon={} + + + } + bgColor="#00aced" values={[ { title: 'followers', value: '973k' }, { title: 'tweets', value: '1.792' }, ]} - style={{ - '--cui-card-cap-bg': '#00aced', - }} + chartData={twitterData} + withChart={props.withCharts} /> - - - - ), - })} - icon={} + + + } + bgColor="#4875b4" values={[ { title: 'contacts', value: '500' }, { title: 'feeds', value: '1.292' }, ]} - style={{ - '--cui-card-cap-bg': '#4875b4', - }} + chartData={linkedinData} + withChart={props.withCharts} /> - - - - ), - })} - icon={} + + + } + bgColor="#f9b115" values={[ { title: 'events', value: '12+' }, { title: 'meetings', value: '4' }, ]} + chartData={eventsData} + withChart={props.withCharts} /> - - + + ) } diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js index 85e2fc969d..f38b771a4b 100644 --- a/src/views/widgets/WidgetsDropdown.js +++ b/src/views/widgets/WidgetsDropdown.js @@ -1,390 +1,198 @@ -import React, { useEffect, useRef } from 'react' +import React, { useState } from 'react' import PropTypes from 'prop-types' +import Grid from '@mui/material/Grid' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' +import IconButton from '@mui/material/IconButton' +import Menu from '@mui/material/Menu' +import MenuItem from '@mui/material/MenuItem' +import { useTheme } from '@mui/material/styles' +import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward' +import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward' +import MoreVertIcon from '@mui/icons-material/MoreVert' +import { LineChart, Line, BarChart, Bar, ResponsiveContainer, Area, AreaChart } from 'recharts' -import { - CRow, - CCol, - CDropdown, - CDropdownMenu, - CDropdownItem, - CDropdownToggle, - CWidgetStatsA, -} from '@coreui/react' -import { getStyle } from '@coreui/utils' -import { CChartBar, CChartLine } from '@coreui/react-chartjs' -import CIcon from '@coreui/icons-react' -import { cilArrowBottom, cilArrowTop, cilOptions } from '@coreui/icons' +const StatWidget = ({ title, value, change, changeType, color, chartData, chartType }) => { + const theme = useTheme() + const [anchorEl, setAnchorEl] = useState(null) + + const handleClick = (event) => { + setAnchorEl(event.currentTarget) + } + + const handleClose = () => { + setAnchorEl(null) + } + + const colorMap = { + primary: theme.palette.primary.main, + info: theme.palette.info.main, + warning: theme.palette.warning.main, + danger: theme.palette.error.main, + } + + const bgColor = colorMap[color] || theme.palette.primary.main + + return ( + + + + + + {value}{' '} + + ({change}{' '} + {changeType === 'down' ? ( + + ) : ( + + )} + ) + + + + {title} + + + + + + + Action + Another action + Something else here... + Disabled action + + + + + + {chartType === 'bar' ? ( + + + + ) : chartType === 'area' ? ( + + + + ) : ( + + + + )} + + + + ) +} const WidgetsDropdown = (props) => { - const widgetChartRef1 = useRef(null) - const widgetChartRef2 = useRef(null) + const usersData = [ + { name: 'Jan', value: 65 }, + { name: 'Feb', value: 59 }, + { name: 'Mar', value: 84 }, + { name: 'Apr', value: 84 }, + { name: 'May', value: 51 }, + { name: 'Jun', value: 55 }, + { name: 'Jul', value: 40 }, + ] + + const incomeData = [ + { name: 'Jan', value: 1 }, + { name: 'Feb', value: 18 }, + { name: 'Mar', value: 9 }, + { name: 'Apr', value: 17 }, + { name: 'May', value: 34 }, + { name: 'Jun', value: 22 }, + { name: 'Jul', value: 11 }, + ] - useEffect(() => { - document.documentElement.addEventListener('ColorSchemeChange', () => { - if (widgetChartRef1.current) { - setTimeout(() => { - widgetChartRef1.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-primary') - widgetChartRef1.current.update() - }) - } + const conversionData = [ + { name: 'Jan', value: 78 }, + { name: 'Feb', value: 81 }, + { name: 'Mar', value: 80 }, + { name: 'Apr', value: 45 }, + { name: 'May', value: 34 }, + { name: 'Jun', value: 12 }, + { name: 'Jul', value: 40 }, + ] - if (widgetChartRef2.current) { - setTimeout(() => { - widgetChartRef2.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-info') - widgetChartRef2.current.update() - }) - } - }) - }, [widgetChartRef1, widgetChartRef2]) + const sessionsData = [ + { name: 'Jan', value: 78 }, + { name: 'Feb', value: 81 }, + { name: 'Mar', value: 80 }, + { name: 'Apr', value: 45 }, + { name: 'May', value: 34 }, + { name: 'Jun', value: 12 }, + { name: 'Jul', value: 40 }, + { name: 'Aug', value: 85 }, + { name: 'Sep', value: 65 }, + { name: 'Oct', value: 23 }, + { name: 'Nov', value: 12 }, + { name: 'Dec', value: 98 }, + ] return ( - - - - 26K{' '} - - (-12.4% ) - - - } + + + - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } + value="26K" + change="-12.4%" + changeType="down" + color="primary" + chartData={usersData} + chartType="line" /> - - - - $6.200{' '} - - (40.9% ) - - - } + + + - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } + value="$6.200" + change="40.9%" + changeType="up" + color="info" + chartData={incomeData} + chartType="line" /> - - - - 2.49%{' '} - - (84.7% ) - - - } + + + - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } + value="2.49%" + change="84.7%" + changeType="up" + color="warning" + chartData={conversionData} + chartType="area" /> - - - - 44K{' '} - - (-23.6% ) - - - } + + + - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } + value="44K" + change="-23.6%" + changeType="down" + color="danger" + chartData={sessionsData} + chartType="bar" /> - - + + ) }