From 0eaf3df10657a5e54dd09449d1c5b9f8c020e367 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 3 Feb 2026 10:46:49 +0000 Subject: [PATCH] Migrate from CoreUI to Material UI - Replace all @coreui/* packages with @mui/material, @mui/icons-material, @emotion/react, @emotion/styled - Update all layout components (DefaultLayout, AppHeader, AppSidebar, AppFooter, AppContent, AppBreadcrumb) - Migrate navigation system to use MUI Drawer, List, ListItem components - Update all view files to use MUI components: - Dashboard with Grid, Card, Table, LinearProgress - Charts using react-chartjs-2 with MUI theming - Base views (Accordion, Cards, Tables, Tabs, etc.) - Form views (TextField, Select, Checkbox, Radio, Slider, etc.) - Button views (Button, ButtonGroup, Menu) - Notification views (Alert, Snackbar, Dialog, Badge) - Icon views using @mui/icons-material - Widget views with brand cards and charts - Add MUI theme configuration with light/dark mode support - Remove SCSS files and CoreUI-specific components - Update Redux store for MUI theme management --- package.json | 31 +- src/App.js | 76 +- src/_nav.js | 498 +------- src/components/AppBreadcrumb.js | 38 +- src/components/AppContent.js | 17 +- src/components/AppFooter.js | 50 +- src/components/AppHeader.js | 263 ++-- src/components/AppSidebar.js | 144 ++- src/components/AppSidebarNav.js | 226 +++- src/components/DocsComponents.js | 46 - src/components/DocsExample.js | 43 - src/components/DocsIcons.js | 31 - src/components/DocsLink.js | 31 - src/components/header/AppHeaderDropdown.js | 204 ++-- src/components/index.js | 10 +- src/layout/DefaultLayout.js | 39 +- src/scss/examples.scss | 116 -- src/scss/style.scss | 67 -- src/scss/vendors/simplebar.scss | 5 - src/store.js | 11 +- src/theme.js | 81 ++ src/views/base/accordion/Accordion.js | 213 +--- src/views/base/breadcrumbs/Breadcrumbs.js | 103 +- src/views/base/cards/Cards.js | 1017 ++-------------- src/views/base/carousels/Carousels.js | 287 ++--- src/views/base/collapses/Collapses.js | 152 +-- src/views/base/list-groups/ListGroups.js | 413 ++----- src/views/base/navs/Navs.js | 468 ++------ src/views/base/paginations/Paginations.js | 222 +--- src/views/base/placeholders/Placeholders.js | 243 +--- src/views/base/popovers/Popovers.js | 136 ++- src/views/base/progress/Progress.js | 242 +--- src/views/base/spinners/Spinners.js | 163 +-- src/views/base/tables/Tables.js | 1060 ++--------------- src/views/base/tabs/Tabs.js | 312 ++--- src/views/base/tooltips/Tooltips.js | 118 +- .../buttons/button-groups/ButtonGroups.js | 532 ++------- src/views/buttons/buttons/Buttons.js | 522 ++------ src/views/buttons/dropdowns/Dropdowns.js | 406 ++----- src/views/charts/Charts.js | 350 +++--- src/views/dashboard/Dashboard.js | 633 +++++----- src/views/dashboard/MainChart.js | 235 ++-- src/views/forms/checks-radios/ChecksRadios.js | 473 ++------ .../forms/floating-labels/FloatingLabels.js | 227 +--- src/views/forms/form-control/FormControl.js | 296 +---- src/views/forms/input-group/InputGroup.js | 585 ++------- src/views/forms/layout/Layout.js | 510 ++------ src/views/forms/range/Range.js | 150 ++- src/views/forms/select/Select.js | 169 ++- src/views/forms/validation/Validation.js | 611 ++-------- src/views/icons/brands/Brands.js | 94 +- src/views/icons/coreui-icons/CoreUIIcons.js | 92 +- src/views/icons/flags/Flags.js | 74 +- src/views/notifications/alerts/Alerts.js | 227 ++-- src/views/notifications/badges/Badges.js | 202 ++-- src/views/notifications/modals/Modals.js | 855 ++----------- src/views/notifications/toasts/Toasts.js | 363 ++---- src/views/pages/login/Login.js | 177 +-- src/views/pages/page404/Page404.js | 81 +- src/views/pages/page500/Page500.js | 81 +- src/views/pages/register/Register.js | 152 ++- src/views/theme/colors/Colors.js | 153 ++- src/views/theme/typography/Typography.js | 286 ++--- src/views/widgets/Widgets.js | 897 +------------- src/views/widgets/WidgetsBrand.js | 278 ++--- src/views/widgets/WidgetsDropdown.js | 588 ++++----- 66 files changed, 4715 insertions(+), 12760 deletions(-) delete mode 100644 src/components/DocsComponents.js delete mode 100644 src/components/DocsExample.js delete mode 100644 src/components/DocsIcons.js delete mode 100644 src/components/DocsLink.js delete mode 100644 src/scss/examples.scss delete mode 100644 src/scss/style.scss delete mode 100644 src/scss/vendors/simplebar.scss create mode 100644 src/theme.js diff --git a/package.json b/package.json index fccb0aebe9..89b0c51953 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,9 @@ { - "name": "@coreui/coreui-free-react-admin-template", - "version": "5.5.0", - "description": "CoreUI Free React Admin Template", + "name": "mui-react-admin-template", + "version": "1.0.0", + "description": "Material UI React Admin Template", "homepage": ".", - "bugs": { - "url": "https://github.com/coreui/coreui-free-react-admin-template/issues" - }, - "repository": { - "type": "git", - "url": "git@github.com:coreui/coreui-free-react-admin-template.git" - }, "license": "MIT", - "author": "The CoreUI Team (https://github.com/orgs/coreui/people)", "scripts": { "build": "vite build", "lint": "eslint", @@ -19,24 +11,20 @@ "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.11.3", + "@emotion/styled": "^11.11.0", + "@mui/icons-material": "^5.15.10", + "@mui/material": "^5.15.10", "chart.js": "^4.5.1", "classnames": "^2.5.1", "core-js": "^3.47.0", "prop-types": "^15.8.1", "react": "^19.2.3", + "react-chartjs-2": "^5.2.0", "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" + "redux": "5.0.1" }, "devDependencies": { "@vitejs/plugin-react": "^5.1.2", @@ -49,7 +37,6 @@ "globals": "^16.5.0", "postcss": "^8.5.6", "prettier": "3.7.4", - "sass": "^1.97.0", "vite": "^7.3.0" } } diff --git a/src/App.js b/src/App.js index f5b22393e1..e147e726ef 100644 --- a/src/App.js +++ b/src/App.js @@ -1,58 +1,52 @@ -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 { getTheme } 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 themeMode = useSelector((state) => state.themeMode) + const theme = useMemo(() => getTheme(themeMode), [themeMode]) return ( - - - - - } - > - - } /> - } /> - } /> - } /> - } /> - - - + + + + + + + } + > + + } /> + } /> + } /> + } /> + } /> + + + + ) } diff --git a/src/_nav.js b/src/_nav.js index e43f1df1ee..28ddb5090d 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -1,506 +1,134 @@ -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 WidgetsIcon from '@mui/icons-material/Widgets' +import SmartButtonIcon from '@mui/icons-material/SmartButton' +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' const _nav = [ { - component: CNavItem, name: 'Dashboard', to: '/dashboard', - icon: , + icon: DashboardIcon, badge: { color: 'info', text: 'NEW', }, }, { - component: CNavTitle, - name: 'Theme', + title: 'Theme', }, { - component: CNavItem, name: 'Colors', to: '/theme/colors', - icon: , + icon: ColorLensIcon, }, { - component: CNavItem, name: 'Typography', to: '/theme/typography', - icon: , + icon: TextFieldsIcon, }, { - component: CNavTitle, - name: 'Components', + title: 'Components', }, { - component: CNavGroup, name: 'Base', to: '/base', - icon: , + icon: WidgetsIcon, items: [ - { - component: CNavItem, - name: 'Accordion', - to: '/base/accordion', - }, - { - component: CNavItem, - name: 'Breadcrumb', - to: '/base/breadcrumbs', - }, - { - component: CNavItem, - name: ( - - {'Calendar'} - - - ), - href: 'https://coreui.io/react/docs/components/calendar/', - badge: { - color: 'danger', - text: 'PRO', - }, - }, - { - component: CNavItem, - name: 'Cards', - to: '/base/cards', - }, - { - component: CNavItem, - name: 'Carousel', - to: '/base/carousels', - }, - { - component: CNavItem, - name: 'Collapse', - to: '/base/collapses', - }, - { - component: CNavItem, - name: 'List group', - to: '/base/list-groups', - }, - { - component: CNavItem, - name: 'Navs & Tabs', - to: '/base/navs', - }, - { - component: CNavItem, - name: 'Pagination', - to: '/base/paginations', - }, - { - component: CNavItem, - name: 'Placeholders', - to: '/base/placeholders', - }, - { - component: CNavItem, - name: 'Popovers', - to: '/base/popovers', - }, - { - component: CNavItem, - name: 'Progress', - to: '/base/progress', - }, - { - component: CNavItem, - name: 'Smart Pagination', - href: 'https://coreui.io/react/docs/components/smart-pagination/', - badge: { - color: 'danger', - text: 'PRO', - }, - }, - { - component: CNavItem, - name: ( - - {'Smart Table'} - - - ), - href: 'https://coreui.io/react/docs/components/smart-table/', - badge: { - color: 'danger', - text: 'PRO', - }, - }, - { - component: CNavItem, - name: 'Spinners', - to: '/base/spinners', - }, - { - component: CNavItem, - name: 'Tables', - to: '/base/tables', - }, - { - component: CNavItem, - name: 'Tabs', - to: '/base/tabs', - }, - { - component: CNavItem, - name: 'Tooltips', - to: '/base/tooltips', - }, - { - component: CNavItem, - name: ( - - {'Virtual Scroller'} - - - ), - href: 'https://coreui.io/react/docs/components/virtual-scroller/', - badge: { - color: 'danger', - text: 'PRO', - }, - }, + { name: 'Accordion', to: '/base/accordion' }, + { name: 'Breadcrumb', to: '/base/breadcrumbs' }, + { name: 'Cards', to: '/base/cards' }, + { name: 'Carousel', to: '/base/carousels' }, + { name: 'Collapse', to: '/base/collapses' }, + { name: 'List group', to: '/base/list-groups' }, + { name: 'Navs & Tabs', to: '/base/navs' }, + { name: 'Pagination', to: '/base/paginations' }, + { name: 'Placeholders', to: '/base/placeholders' }, + { name: 'Popovers', to: '/base/popovers' }, + { name: 'Progress', to: '/base/progress' }, + { name: 'Spinners', to: '/base/spinners' }, + { name: 'Tables', to: '/base/tables' }, + { name: 'Tabs', to: '/base/tabs' }, + { name: 'Tooltips', to: '/base/tooltips' }, ], }, { - component: CNavGroup, name: 'Buttons', to: '/buttons', - icon: , + icon: SmartButtonIcon, items: [ - { - component: CNavItem, - name: 'Buttons', - to: '/buttons/buttons', - }, - { - component: CNavItem, - name: 'Buttons groups', - to: '/buttons/button-groups', - }, - { - component: CNavItem, - name: 'Dropdowns', - to: '/buttons/dropdowns', - }, - { - component: CNavItem, - name: ( - - {'Loading Button'} - - - ), - href: 'https://coreui.io/react/docs/components/loading-button/', - badge: { - color: 'danger', - text: 'PRO', - }, - }, + { name: 'Buttons', to: '/buttons/buttons' }, + { name: 'Button groups', to: '/buttons/button-groups' }, + { name: 'Dropdowns', to: '/buttons/dropdowns' }, ], }, { - component: CNavGroup, name: 'Forms', - icon: , + icon: NotesIcon, items: [ - { - component: CNavItem, - name: ( - - {'Autocomplete'} - - - ), - href: 'https://coreui.io/react/docs/forms/autocomplete/', - badge: { - color: 'danger', - text: 'PRO', - }, - }, - { - component: CNavItem, - name: 'Checks & Radios', - to: '/forms/checks-radios', - }, - { - component: CNavItem, - name: ( - - {'Date Picker'} - - - ), - href: 'https://coreui.io/react/docs/forms/date-picker/', - badge: { - color: 'danger', - text: 'PRO', - }, - }, - { - component: CNavItem, - name: 'Date Range Picker', - href: 'https://coreui.io/react/docs/forms/date-range-picker/', - badge: { - color: 'danger', - text: 'PRO', - }, - }, - { - component: CNavItem, - name: 'Floating Labels', - to: '/forms/floating-labels', - }, - { - component: CNavItem, - name: 'Form Control', - to: '/forms/form-control', - }, - { - component: CNavItem, - name: 'Input Group', - to: '/forms/input-group', - }, - { - component: CNavItem, - name: ( - - {'Multi Select'} - - - ), - href: 'https://coreui.io/react/docs/forms/multi-select/', - badge: { - color: 'danger', - text: 'PRO', - }, - }, - { - component: CNavItem, - name: ( - - {'OTP Input'} - - - ), - href: 'https://coreui.io/react/docs/forms/one-time-password-input/', - badge: { - color: 'danger', - text: 'PRO', - }, - }, - { - component: CNavItem, - name: ( - - {'Password Input'} - - - ), - href: 'https://coreui.io/react/docs/forms/password-input/', - badge: { - color: 'danger', - text: 'PRO', - }, - }, - { - component: CNavItem, - name: 'Range', - to: '/forms/range', - }, - { - component: CNavItem, - name: ( - - {'Range Slider'} - - - ), - href: 'https://coreui.io/react/docs/forms/range-slider/', - badge: { - color: 'danger', - text: 'PRO', - }, - }, - { - component: CNavItem, - name: ( - - {'Rating'} - - - ), - href: 'https://coreui.io/react/docs/forms/rating/', - badge: { - color: 'danger', - text: 'PRO', - }, - }, - { - component: CNavItem, - name: 'Select', - to: '/forms/select', - }, - { - component: CNavItem, - name: ( - - {'Stepper'} - - - ), - href: 'https://coreui.io/react/docs/forms/stepper/', - badge: { - color: 'danger', - text: 'PRO', - }, - }, - { - component: CNavItem, - name: ( - - {'Time Picker'} - - - ), - href: 'https://coreui.io/react/docs/forms/time-picker/', - badge: { - color: 'danger', - text: 'PRO', - }, - }, - { - component: CNavItem, - name: 'Layout', - to: '/forms/layout', - }, - { - component: CNavItem, - name: 'Validation', - to: '/forms/validation', - }, + { name: 'Checks & Radios', to: '/forms/checks-radios' }, + { name: 'Floating Labels', to: '/forms/floating-labels' }, + { name: 'Form Control', to: '/forms/form-control' }, + { name: 'Input Group', to: '/forms/input-group' }, + { name: 'Range', to: '/forms/range' }, + { name: 'Select', to: '/forms/select' }, + { name: 'Layout', to: '/forms/layout' }, + { name: 'Validation', to: '/forms/validation' }, ], }, { - component: CNavItem, name: 'Charts', to: '/charts', - icon: , + icon: PieChartIcon, }, { - component: CNavGroup, name: 'Icons', - icon: , - items: [ - { - component: CNavItem, - name: 'CoreUI Free', - to: '/icons/coreui-icons', - }, - { - component: CNavItem, - name: 'CoreUI Flags', - to: '/icons/flags', - }, - { - component: CNavItem, - name: 'CoreUI Brands', - to: '/icons/brands', - }, - ], + icon: StarIcon, + items: [{ name: 'Material Icons', to: '/icons/material-icons' }], }, { - component: CNavGroup, name: 'Notifications', - icon: , + icon: NotificationsIcon, items: [ - { - component: CNavItem, - name: 'Alerts', - to: '/notifications/alerts', - }, - { - component: CNavItem, - name: 'Badges', - to: '/notifications/badges', - }, - { - component: CNavItem, - name: 'Modal', - to: '/notifications/modals', - }, - { - component: CNavItem, - name: 'Toasts', - to: '/notifications/toasts', - }, + { name: 'Alerts', to: '/notifications/alerts' }, + { name: 'Badges', to: '/notifications/badges' }, + { name: 'Modal', to: '/notifications/modals' }, + { name: 'Toasts', to: '/notifications/toasts' }, ], }, { - component: CNavItem, name: 'Widgets', to: '/widgets', - icon: , + icon: CalculateIcon, badge: { color: 'info', text: 'NEW', }, }, { - component: CNavTitle, - name: 'Extras', + title: 'Extras', }, { - component: CNavGroup, name: 'Pages', - icon: , + icon: StarIcon, items: [ - { - component: CNavItem, - name: 'Login', - to: '/login', - }, - { - component: CNavItem, - name: 'Register', - to: '/register', - }, - { - component: CNavItem, - name: 'Error 404', - to: '/404', - }, - { - component: CNavItem, - name: 'Error 500', - to: '/500', - }, + { name: 'Login', to: '/login' }, + { name: 'Register', to: '/register' }, + { name: 'Error 404', to: '/404' }, + { name: 'Error 500', to: '/500' }, ], }, { - component: CNavItem, name: 'Docs', - href: 'https://coreui.io/react/docs/templates/installation/', - icon: , + href: 'https://mui.com/material-ui/getting-started/', + icon: DescriptionIcon, + external: true, }, ] diff --git a/src/components/AppBreadcrumb.js b/src/components/AppBreadcrumb.js index d37de8ce9b..df37430c45 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 as RouterLink } from 'react-router-dom' +import Breadcrumbs from '@mui/material/Breadcrumbs' +import Link from '@mui/material/Link' +import Typography from '@mui/material/Typography' +import HomeIcon from '@mui/icons-material/Home' import routes from '../routes' -import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react' - const AppBreadcrumb = () => { const currentLocation = useLocation().pathname @@ -32,19 +34,35 @@ const AppBreadcrumb = () => { const breadcrumbs = getBreadcrumbs(currentLocation) return ( - - Home + + + + Home + {breadcrumbs.map((breadcrumb, index) => { - return ( - + {breadcrumb.name} + + ) : ( + {breadcrumb.name} - + ) })} - + ) } diff --git a/src/components/AppContent.js b/src/components/AppContent.js index b9a39ef505..0070eb88ef 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..ae3b51baff 100644 --- a/src/components/AppFooter.js +++ b/src/components/AppFooter.js @@ -1,22 +1,42 @@ 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. -
- - + + theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900], + borderTop: 1, + borderColor: 'divider', + }} + > + + + + Material UI + {' '} + © {new Date().getFullYear()} + + + Powered by{' '} + + Material UI React Admin Template + + + + ) } diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js index 534dadaa89..bca3fdba66 100644 --- a/src/components/AppHeader.js +++ b/src/components/AppHeader.js @@ -1,143 +1,158 @@ -import React, { useEffect, useRef } from 'react' +import React 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 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 Link from '@mui/material/Link' import { AppBreadcrumb } from './index' import { AppHeaderDropdown } from './header/index' +import { drawerWidth, drawerCollapsedWidth } from '../theme' const AppHeader = () => { - const headerRef = useRef() - const { colorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme') + const [anchorEl, setAnchorEl] = React.useState(null) + const open = Boolean(anchorEl) const dispatch = useDispatch() - const sidebarShow = useSelector((state) => state.sidebarShow) + const sidebarOpen = useSelector((state) => state.sidebarOpen) + const sidebarCollapsed = useSelector((state) => state.sidebarCollapsed) + const themeMode = useSelector((state) => state.themeMode) - useEffect(() => { - const handleScroll = () => { - headerRef.current && - headerRef.current.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0) - } + const currentDrawerWidth = sidebarOpen + ? sidebarCollapsed + ? drawerCollapsedWidth + : drawerWidth + : 0 - document.addEventListener('scroll', handleScroll) - return () => document.removeEventListener('scroll', handleScroll) - }, []) + const handleThemeMenuClick = (event) => { + setAnchorEl(event.currentTarget) + } + + const handleThemeMenuClose = () => { + setAnchorEl(null) + } + + const handleThemeChange = (mode) => { + dispatch({ type: 'SET_THEME_MODE', themeMode: mode }) + handleThemeMenuClose() + } return ( - - - dispatch({ type: 'set', sidebarShow: !sidebarShow })} - style={{ marginInlineStart: '-14px' }} + + theme.transitions.create(['margin', 'width'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }} + > + + dispatch({ type: 'TOGGLE_SIDEBAR' })} + sx={{ mr: 2 }} > - - - - - - Dashboard - - - - Users - - - Settings - - - - - - - - - - - - - - - - - - - - -
  • -
    -
    • - - - {colorMode === 'dark' ? ( - - ) : colorMode === 'auto' ? ( - - ) : ( - - )} - - - setColorMode('light')} - > - Light - - setColorMode('dark')} - > - Dark - - setColorMode('auto')} - > - Auto - - - -
  • -
    -
    • + + + + + + Dashboard + + + Users + + + Settings + + + + + + + + + + + + + + + + + + + + + + + + {themeMode === 'dark' ? ( + + ) : themeMode === 'auto' ? ( + + ) : ( + + )} + + + handleThemeChange('light')} selected={themeMode === 'light'}> + + + + Light + + handleThemeChange('dark')} selected={themeMode === 'dark'}> + + + + Dark + + + + + -     -     - + + + - -     + + ) } diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js index 021cb52c34..eb61d70fdf 100644 --- a/src/components/AppSidebar.js +++ b/src/components/AppSidebar.js @@ -1,58 +1,114 @@ 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 ChevronLeftIcon from '@mui/icons-material/ChevronLeft' +import ChevronRightIcon from '@mui/icons-material/ChevronRight' +import CloseIcon from '@mui/icons-material/Close' +import { useTheme } from '@mui/material/styles' +import useMediaQuery from '@mui/material/useMediaQuery' import { AppSidebarNav } from './AppSidebarNav' +import { drawerWidth, drawerCollapsedWidth } from '../theme' -import { logo } from 'src/assets/brand/logo' -import { sygnet } from 'src/assets/brand/sygnet' - -// sidebar nav config import navigation from '../_nav' const AppSidebar = () => { + const theme = useTheme() + const isMobile = useMediaQuery(theme.breakpoints.down('sm')) const dispatch = useDispatch() - const unfoldable = useSelector((state) => state.sidebarUnfoldable) - const sidebarShow = useSelector((state) => state.sidebarShow) + const sidebarCollapsed = useSelector((state) => state.sidebarCollapsed) + const sidebarOpen = useSelector((state) => state.sidebarOpen) + + const currentWidth = sidebarCollapsed ? drawerCollapsedWidth : drawerWidth + + const handleDrawerClose = () => { + dispatch({ type: 'set', sidebarOpen: false }) + } + + const handleToggleCollapse = () => { + dispatch({ type: 'TOGGLE_SIDEBAR_COLLAPSED' }) + } + + const drawerContent = ( + <> + + {!sidebarCollapsed && ( + + MUI Admin + + )} + {isMobile && ( + + + + )} + + + + + + + + {sidebarCollapsed ? : } + + + + ) return ( - { - dispatch({ type: 'set', sidebarShow: visible }) - }} - > - - - - - - dispatch({ type: 'set', sidebarShow: false })} - /> - - - - dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })} - /> - - + <> + + {drawerContent} + + + {drawerContent} + + ) } diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js index 7583abf49e..fb2f083155 100644 --- a/src/components/AppSidebarNav.js +++ b/src/components/AppSidebarNav.js @@ -1,73 +1,189 @@ -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 Typography from '@mui/material/Typography' +import Chip from '@mui/material/Chip' +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' +export const AppSidebarNav = ({ items, collapsed }) => { + const location = useLocation() + const [openGroups, setOpenGroups] = useState({}) -import { CBadge, CNavLink, CSidebarNav } from '@coreui/react' - -export const AppSidebarNav = ({ items }) => { - const navLink = (name, icon, badge, indent = false) => { - return ( - <> - {icon - ? icon - : indent && ( - - - - )} - {name && name} - {badge && ( - - {badge.text} - - )} - - ) + const handleGroupClick = (name) => { + setOpenGroups((prev) => ({ + ...prev, + [name]: !prev[name], + })) } - 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 isActive = (to) => { + return location.pathname === to || location.pathname.startsWith(to + '/') } - const navGroup = (item, index) => { - const { component, name, icon, items, to, ...rest } = item - const Component = component + const renderNavItem = (item, index, indent = false) => { + if (item.title) { + return ( + + {item.title} + + ) + } + + const Icon = item.icon + const hasChildren = item.items && item.items.length > 0 + const isOpen = openGroups[item.name] + const active = item.to && isActive(item.to) + + if (hasChildren) { + return ( + + + handleGroupClick(item.name)} + sx={{ + minHeight: 48, + justifyContent: collapsed ? 'center' : 'initial', + px: 2.5, + '&:hover': { + backgroundColor: 'rgba(255,255,255,0.08)', + }, + }} + > + {Icon && ( + + + + )} + {!collapsed && ( + <> + + {isOpen ? ( + + ) : ( + + )} + + )} + + + {!collapsed && ( + + + {item.items.map((child, childIndex) => + renderNavItem(child, `${index}-${childIndex}`, true), + )} + + + )} + + ) + } + + const linkProps = item.href + ? { component: 'a', href: item.href, target: '_blank', rel: 'noopener noreferrer' } + : item.to + ? { component: NavLink, to: item.to } + : {} + return ( - - {items?.map((item, index) => - item.items ? navGroup(item, index) : navItem(item, index, true), - )} - + + + {Icon ? ( + + + + ) : indent && !collapsed ? ( + + + + ) : null} + {!collapsed && ( + <> + + {item.badge && ( + + )} + + )} + + ) } return ( - - {items && - items.map((item, index) => (item.items ? navGroup(item, index) : navItem(item, index)))} - + + {items && items.map((item, index) => renderNavItem(item, index))} + ) } AppSidebarNav.propTypes = { items: PropTypes.arrayOf(PropTypes.any).isRequired, + collapsed: PropTypes.bool, } diff --git a/src/components/DocsComponents.js b/src/components/DocsComponents.js deleted file mode 100644 index b0968b8fe6..0000000000 --- a/src/components/DocsComponents.js +++ /dev/null @@ -1,46 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' - -import ComponentsImg from 'src/assets/images/components.webp' - -const DocsComponents = (props) => ( -
    -
    -
    - CoreUI PRO hexagon -
    -
    - 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 = { - href: PropTypes.string, -} - -export default DocsComponents diff --git a/src/components/DocsExample.js b/src/components/DocsExample.js deleted file mode 100644 index 2adedad493..0000000000 --- a/src/components/DocsExample.js +++ /dev/null @@ -1,43 +0,0 @@ -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' - -const DocsExample = (props) => { - const { children, href, tabContentClassName } = props - - const _href = `https://coreui.io/react/docs/${href}` - - return ( -
    - - - - - Preview - - - - - - Code - - - - - - {children} - - -
    - ) -} - -DocsExample.propTypes = { - children: PropTypes.node, - href: PropTypes.string, - tabContentClassName: PropTypes.string, -} - -export default React.memo(DocsExample) diff --git a/src/components/DocsIcons.js b/src/components/DocsIcons.js deleted file mode 100644 index e3fab60a72..0000000000 --- a/src/components/DocsIcons.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' - -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 deleted file mode 100644 index 7c72aa1284..0000000000 --- a/src/components/DocsLink.js +++ /dev/null @@ -1,31 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import { CLink } from '@coreui/react' - -const DocsLink = (props) => { - const { href, name, text, ...rest } = props - - const _href = name ? `https://coreui.io/react/docs/components/${name}` : href - - return ( -
    - - {text || 'docs'} - -
    - ) -} - -DocsLink.propTypes = { - href: PropTypes.string, - name: PropTypes.string, - text: PropTypes.string, -} - -export default React.memo(DocsLink) diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js index 30c0df82ba..0cc851dc0a 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 IconButton from '@mui/material/IconButton' +import Avatar from '@mui/material/Avatar' +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] = React.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/components/index.js b/src/components/index.js index 93fb52c43a..ddb107ba9c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -4,10 +4,7 @@ import AppFooter from './AppFooter' import AppHeader from './AppHeader' import AppHeaderDropdown from './header/AppHeaderDropdown' import AppSidebar from './AppSidebar' -import DocsComponents from './DocsComponents' -import DocsIcons from './DocsIcons' -import DocsLink from './DocsLink' -import DocsExample from './DocsExample' +import { AppSidebarNav } from './AppSidebarNav' export { AppBreadcrumb, @@ -16,8 +13,5 @@ export { AppHeader, AppHeaderDropdown, AppSidebar, - DocsComponents, - DocsIcons, - DocsLink, - DocsExample, + AppSidebarNav, } diff --git a/src/layout/DefaultLayout.js b/src/layout/DefaultLayout.js index 19fbf225fd..c60ba2144c 100644 --- a/src/layout/DefaultLayout.js +++ b/src/layout/DefaultLayout.js @@ -1,18 +1,45 @@ import React from 'react' +import Box from '@mui/material/Box' +import { useSelector } from 'react-redux' import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index' +import { drawerWidth, drawerCollapsedWidth } from '../theme' const DefaultLayout = () => { + const sidebarOpen = useSelector((state) => state.sidebarOpen) + const sidebarCollapsed = useSelector((state) => state.sidebarCollapsed) + + const currentDrawerWidth = sidebarOpen + ? sidebarCollapsed + ? drawerCollapsedWidth + : drawerWidth + : 0 + return ( -
    + -
    + + theme.transitions.create(['margin', 'width'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }} + > -
    + -
    +     -
    -
    +     + ) } diff --git a/src/scss/examples.scss b/src/scss/examples.scss deleted file mode 100644 index 83e43f34e8..0000000000 --- a/src/scss/examples.scss +++ /dev/null @@ -1,116 +0,0 @@ -/* stylelint-disable scss/selector-no-redundant-nesting-selector */ -@use "@coreui/coreui/scss/variables" as * with ( - $enable-deprecation-messages: false -); -@use "@coreui/coreui/scss/mixins/breakpoints" as *; -@use "@coreui/coreui/scss/mixins/color-mode" as *; - -.example { - &:not(:first-child) { - margin-top: 1.5rem; - } - - .tab-content { - background-color: var(--#{$prefix}tertiary-bg); - } - - & + p { - margin-top: 1.5rem; - } - - // Components examples - .preview { - + p { - margin-top: 2rem; - } - - > .form-control { - + .form-control { - margin-top: .5rem; - } - } - - > .nav + .nav, - > .alert + .alert, - > .navbar + .navbar, - > .progress + .progress { - margin-top: 1rem; - } - - > .dropdown-menu { - position: static; - display: block; - } - - > :last-child { - margin-bottom: 0; - } - - // Images - > svg + svg, - > img + img { - margin-left: .5rem; - } - - // Buttons - .col > .btn, - .col-auto > .btn, - > .btn, - > .btn-group { - margin: .25rem .125rem; - } - > .btn-toolbar + .btn-toolbar { - margin-top: .5rem; - } - - // List groups - > .list-group { - max-width: 400px; - } - - > [class*="list-group-horizontal"] { - max-width: 100%; - } - - // Navbars - .fixed-top, - .sticky-top { - position: static; - margin: -1rem -1rem 1rem; - } - - .fixed-bottom { - position: static; - margin: 1rem -1rem -1rem; - } - - @include media-breakpoint-up(sm) { - .fixed-top, - .sticky-top { - margin: -1.5rem -1.5rem 1rem; - } - .fixed-bottom { - margin: 1rem -1.5rem -1.5rem; - } - } - - // Pagination - .pagination { - margin-top: .5rem; - margin-bottom: .5rem; - } - - .docs-example-modal { - .modal { - position: static; - display: block; - } - } - } -} - -@include color-mode(dark) { - .example .tab-content { - background-color: var(--#{$prefix}secondary-bg); - } -} diff --git a/src/scss/style.scss b/src/scss/style.scss deleted file mode 100644 index 6b8f2b2e53..0000000000 --- a/src/scss/style.scss +++ /dev/null @@ -1,67 +0,0 @@ -@use "@coreui/coreui/scss/coreui" as * with ( - $enable-deprecation-messages: false, -); -@use "@coreui/chartjs/scss/coreui-chartjs"; -@use "vendors/simplebar"; - -body { - background-color: var(--cui-tertiary-bg); -} - -.wrapper { - width: 100%; - padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0); - will-change: auto; - @include transition(padding .15s); -} - -.header > .container-fluid, -.sidebar-header { - min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list -} - -.sidebar-brand-full { - margin-left: 3px; -} - -.sidebar-header { - .nav-underline-border { - --cui-nav-underline-border-link-padding-x: 1rem; - --cui-nav-underline-border-gap: 0; - } - - .nav-link { - display: flex; - align-items: center; - min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list - } -} - -.sidebar-toggler { - margin-inline-start: auto; -} - -.sidebar-narrow, -.sidebar-narrow-unfoldable:not(:hover) { - .sidebar-toggler { - margin-inline-end: auto; - } -} - -.header > .container-fluid + .container-fluid { - min-height: 3rem; -} - -.footer { - min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list -} - -@include color-mode(dark) { - body { - background-color: var(--cui-dark-bg-subtle); - } - - .footer { - --cui-footer-bg: var(--cui-body-bg); - } -} diff --git a/src/scss/vendors/simplebar.scss b/src/scss/vendors/simplebar.scss deleted file mode 100644 index 59c81b8a98..0000000000 --- a/src/scss/vendors/simplebar.scss +++ /dev/null @@ -1,5 +0,0 @@ -.simplebar-content { - display: flex; - flex-direction: column; - min-height: 100%; -} diff --git a/src/store.js b/src/store.js index 8ad30dad62..015f447358 100644 --- a/src/store.js +++ b/src/store.js @@ -1,14 +1,21 @@ import { legacy_createStore as createStore } from 'redux' const initialState = { - sidebarShow: true, - theme: 'light', + sidebarOpen: true, + sidebarCollapsed: false, + themeMode: 'light', } const changeState = (state = initialState, { type, ...rest }) => { switch (type) { case 'set': return { ...state, ...rest } + case 'TOGGLE_SIDEBAR': + return { ...state, sidebarOpen: !state.sidebarOpen } + case 'TOGGLE_SIDEBAR_COLLAPSED': + return { ...state, sidebarCollapsed: !state.sidebarCollapsed } + case 'SET_THEME_MODE': + return { ...state, themeMode: rest.themeMode } default: return state } diff --git a/src/theme.js b/src/theme.js new file mode 100644 index 0000000000..3e5f00dda4 --- /dev/null +++ b/src/theme.js @@ -0,0 +1,81 @@ +import { createTheme } from '@mui/material/styles' + +export const getTheme = (mode) => + createTheme({ + palette: { + mode, + primary: { + main: '#321fdb', + light: '#5c4cdb', + dark: '#2819b0', + }, + secondary: { + main: '#9da5b1', + light: '#b1b7c1', + dark: '#7a828e', + }, + success: { + main: '#2eb85c', + light: '#51c97c', + dark: '#259349', + }, + info: { + main: '#39f', + light: '#66b0ff', + dark: '#2a7acc', + }, + warning: { + main: '#f9b115', + light: '#fac043', + dark: '#c78e11', + }, + error: { + main: '#e55353', + light: '#ea7575', + dark: '#b74242', + }, + background: { + default: mode === 'light' ? '#ebedef' : '#212631', + paper: mode === 'light' ? '#ffffff' : '#282d37', + }, + }, + typography: { + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + ].join(','), + }, + components: { + MuiDrawer: { + styleOverrides: { + paper: { + backgroundColor: mode === 'light' ? '#3c4b64' : '#212631', + color: 'rgba(255, 255, 255, 0.87)', + }, + }, + }, + MuiAppBar: { + styleOverrides: { + root: { + backgroundColor: mode === 'light' ? '#ffffff' : '#282d37', + color: mode === 'light' ? '#3c4b64' : '#ffffff', + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)', + }, + }, + }, + }, + }) + +export const drawerWidth = 256 +export const drawerCollapsedWidth = 56 diff --git a/src/views/base/accordion/Accordion.js b/src/views/base/accordion/Accordion.js index edcb5e7aeb..3b034bd124 100644 --- a/src/views/base/accordion/Accordion.js +++ b/src/views/base/accordion/Accordion.js @@ -1,177 +1,50 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CAccordion, - CAccordionBody, - CAccordionHeader, - CAccordionItem, -} from '@coreui/react' -import { DocsComponents, DocsExample } from 'src/components' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import MuiAccordion from '@mui/material/Accordion' +import AccordionSummary from '@mui/material/AccordionSummary' +import AccordionDetails from '@mui/material/AccordionDetails' +import Typography from '@mui/material/Typography' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' const Accordion = () => { return ( - - - - - - 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 - 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. - - - - -     -     - - - 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. -

    - - - - 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. - - - - -     -     - - - React Accordion Always open - - -

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

    - - - - 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 shown by default. + + + + + }> + Accordion Item #2 + + + + This is the second item's accordion body. It is hidden by default. + + + + + }> + Accordion Item #3 + + + + This is the third item's accordion body. It is hidden by default. + + + + + ) } diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/base/breadcrumbs/Breadcrumbs.js index 3e1df44754..07c4946ac2 100644 --- a/src/views/base/breadcrumbs/Breadcrumbs.js +++ b/src/views/base/breadcrumbs/Breadcrumbs.js @@ -1,74 +1,43 @@ import React from 'react' -import { - CBreadcrumb, - CBreadcrumbItem, - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CLink, -} from '@coreui/react' -import { DocsComponents, DocsExample } from 'src/components' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import MuiBreadcrumbs from '@mui/material/Breadcrumbs' +import Link from '@mui/material/Link' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' const Breadcrumbs = () => { return ( - - - - - - 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 - - . -

    - - - - Home - - Library - - - - Home - - - Library - - Data - - - - Home - - - Library - - - Data - - Bootstrap - - -     -     -     -     + + + + + + Home + + + + + + Home + + Library + + + + + + Home + + + Library + + Data + + + + ) } diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js index daf44f60ef..eca4839a42 100644 --- a/src/views/base/cards/Cards.js +++ b/src/views/base/cards/Cards.js @@ -1,934 +1,97 @@ 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 { DocsComponents, DocsExample } from 'src/components' - -import ReactImg from 'src/assets/images/react.jpg' +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 CardActions from '@mui/material/CardActions' +import CardMedia from '@mui/material/CardMedia' +import Typography from '@mui/material/Typography' +import Button from '@mui/material/Button' const Cards = () => { return ( - - - - - - 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. -

    - - - - - 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 Body - - -

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

    - - - 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 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 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. -

    - - - - - - Some quick example text to build on the card title and make up the bulk of the - card's content. - - - - -     -     -     - - - - 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 - - -

    - 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 - - - - - - - - - - - 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. - - - - - ))} - - -

    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 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 - - - - - -     -     -     -     + + + + + + + Some quick example text to build on the card title and make up the bulk of the + card's content. + + + + + + + + + + + + + Card with Image + + + Some quick example text to build on the card title and make up the bulk of the + card's content. + + + + + + + + + + + + + + Some quick example text to build on the card title and make up the bulk of the + card's content. + + + + + + + + + + Some quick example text to build on the card title and make up the bulk of the + card's content. + + + + + + + + + + Some quick example text to build on the card title and make up the bulk of the + card's content. + + + + + + + + + + Some quick example text to build on the card title and make up the bulk of the + card's content. + + + + + ) } diff --git a/src/views/base/carousels/Carousels.js b/src/views/base/carousels/Carousels.js index 6d8763902d..f5897d4ec6 100644 --- a/src/views/base/carousels/Carousels.js +++ b/src/views/base/carousels/Carousels.js @@ -1,212 +1,91 @@ -import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCarousel, - CCarouselCaption, - CCarouselItem, - CCol, - CRow, -} from '@coreui/react' -import { DocsComponents, DocsExample } from 'src/components' +import React, { useState } from 'react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Box from '@mui/material/Box' +import IconButton from '@mui/material/IconButton' +import Typography from '@mui/material/Typography' +import ChevronLeftIcon from '@mui/icons-material/ChevronLeft' +import ChevronRightIcon from '@mui/icons-material/ChevronRight' -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 slides = [ + { title: 'First slide', color: 'primary.main' }, + { title: 'Second slide', color: 'secondary.main' }, + { title: 'Third slide', color: 'success.main' }, ] const Carousels = () => { + const [activeIndex, setActiveIndex] = useState(0) + + const handlePrev = () => { + setActiveIndex((prev) => (prev === 0 ? slides.length - 1 : prev - 1)) + } + + const handleNext = () => { + setActiveIndex((prev) => (prev === slides.length - 1 ? 0 : prev + 1)) + } + return ( - - - - - - 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. -

    - - - - slide 1 - - - slide 2 - - - slide 3 - - - -     -     -     - - - - 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. -

    - - - - 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.

    -     -     -     -     -     -     -     -     + + + + + + + {slides[activeIndex].title} + + + + + + + + + + + {slides.map((_, index) => ( + setActiveIndex(index)} + /> + ))} + + + ) } diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js index d36f48f4a5..cde1725155 100644 --- a/src/views/base/collapses/Collapses.js +++ b/src/views/base/collapses/Collapses.js @@ -1,135 +1,33 @@ import React, { useState } from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CCollapse, CRow } from '@coreui/react' -import { DocsComponents, DocsExample } from 'src/components' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Button from '@mui/material/Button' +import Collapse from '@mui/material/Collapse' +import Box from '@mui/material/Box' +import Paper from '@mui/material/Paper' const Collapses = () => { - const [visible, setVisible] = useState(false) - const [visibleHorizontal, setVisibleHorizontal] = useState(false) - const [visibleA, setVisibleA] = useState(false) - const [visibleB, setVisibleB] = useState(false) + const [open, setOpen] = useState(false) return ( - - - - - - 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.

    - - 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. - - - -
    -     -     -     -     - - - - React Collapse multi target - - -

    - A <CButton> 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. - - - - - - -     -     -     -     + + + + + + + + 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..8832c41ae7 100644 --- a/src/views/base/list-groups/ListGroups.js +++ b/src/views/base/list-groups/ListGroups.js @@ -1,346 +1,81 @@ import React from 'react' -import { - CBadge, - CCard, - CCardBody, - CCardHeader, - CCol, - CFormCheck, - CListGroup, - CListGroupItem, - CRow, -} from '@coreui/react' -import { DocsComponents, DocsExample } 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 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' const ListGroups = () => { return ( - - - - - - React List Group Basic example - - -

    - The default list group is an unordered list with items and the proper CSS classes. - Build upon it with the options that follow, or with your CSS as required. -

    - - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - - -     -     -     - - - - React List Group Active items - - -

    - Add active boolean property to a <CListGroupItem> to - show the current active selection. -

    - - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - - -     -     -     - - - - React List Group Disabled items - - -

    - Add disabled boolean property to a <CListGroupItem> to - make it appear disabled. -

    - - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - - -     -     -     - - - - React List Group Links and buttons - - -

    - Use <a>s or <button>s to create{' '} - actionable list group items with hover, disabled, and active states by adding{' '} - as="a|button". We separate these pseudo-classes to ensure list - groups made of non-interactive elements (like <li>s or{' '} - <div> - s) don'tprovide a click or tap affordance. -

    - - - - Cras justo odio - - - Dapibus ac facilisis in - - - Morbi leo risus - - - Porta ac consectetur ac - - - Vestibulum at eros - - - -     -     -     - - - - React List Group Flush - - -

    - Add flush boolean property to remove some borders and rounded corners to - render list group items edge-to-edge in a parent container (e.g., cards). -

    - - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - - -     -     -     - - - - React List Group Horizontal - - -

    - Add layout="horizontal" to change the layout of list group items - from vertical to horizontal across all breakpoints. Alternatively, choose a responsive - variant .layout="horizontal-{sm | md | lg | xl | xxl}"{' '} - to make a list group horizontal starting at that breakpoint's{' '} - min-width. Currently{' '} - horizontal list groups cannot be combined with flush list groups. -

    - - {['', '-sm', '-md', '-lg', '-xl', '-xxl'].map((breakpoint, index) => ( - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - - ))} - -     -     -     - - - - React List Group Contextual classes - - -

    - Use contextual classes to style list items with a stateful background and color. -

    - - - Dapibus ac facilisis in - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - A simple {color} list group item - - ))} - - -

    - Contextual classes also work with <a>s or{' '} - <button>s. Note the addition of the hover styles here not present - in the previous example. Also supported is the active state; apply it to - indicate an active selection on a contextual list group item. -

    - - - - Dapibus ac facilisis in - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - ].map((color, index) => ( - - A simple {color} list group item - - ))} - - -     -     -     - - - - React List Group With badges - - -

    - Add badges to any list group item to show unread counts, activity, and more. -

    - - - - Cras justo odio - - 14 - - - - Dapibus ac facilisis in - - 2 - - - - Morbi leo risus - - 1 - - - - -     -     -     - - - - React List Group Custom content - - -

    - Add nearly any HTML within, even for linked list groups like the one below, with the - help of flexbox utilities. -

    - - - -
    -
    List group item heading
    - 3 days ago -
    -

    - Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus - varius blandit. -

    - Donec id elit non mi porta. -     - -
    -
    List group item heading
    - 3 days ago -
    -

    - Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus - varius blandit. -

    - Donec id elit non mi porta. -     - -
    -
    List group item heading
    - 3 days ago -
    -

    - Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus - varius blandit. -

    - Donec id elit non mi porta. -     -     -     -     -     -     - - - - React List Group Checkboxes and radios - - -

    - Place CoreUI's checkboxes and radios within list group items and customize as - needed. -

    - - - - - - - - - - - - - - - - - - - -     -     -     -     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + }> + + + }> + + + }> + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/src/views/base/navs/Navs.js b/src/views/base/navs/Navs.js index 052ed6fc5c..d74c8335ee 100644 --- a/src/views/base/navs/Navs.js +++ b/src/views/base/navs/Navs.js @@ -1,397 +1,83 @@ -import React from 'react' -import { - CRow, - CCol, - CCard, - CCardBody, - CCardHeader, - CDropdown, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CNav, - CNavItem, - CNavLink, -} from '@coreui/react' -import { DocsComponents, DocsExample } from 'src/components' +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 Tabs from '@mui/material/Tabs' +import Tab from '@mui/material/Tab' +import BottomNavigation from '@mui/material/BottomNavigation' +import BottomNavigationAction from '@mui/material/BottomNavigationAction' +import HomeIcon from '@mui/icons-material/Home' +import FavoriteIcon from '@mui/icons-material/Favorite' +import PersonIcon from '@mui/icons-material/Person' const Navs = () => { + const [tabValue, setTabValue] = useState(0) + const [navValue, setNavValue] = useState(0) + 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. -

    - - - - - 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: -

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

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

    - - - - - 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). -

    - - - - - Active - - - - Link - - - Link - - - - Disabled - - - - -     -     -     - - - - React Navs Tabs - - -

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

    - - - - - Active - - - - Link - - - Link - - - - Disabled - - - - -     -     -     - - - - React Navs Pills - - -

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

    - - - - - 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 - - - - - - - Active - - - - Dropdown button - - Action - Another action - Something else here - - - - Link - - - - Disabled - - - - - - - - - - - React Navs Pills with dropdowns - - - - - - - Active - - - - Dropdown button - - Action - Another action - Something else here - - - - Link - - - - Disabled - - - - - - - -     + + + + + + setTabValue(v)}> + + + + + + + + + + + + + setTabValue(v)} centered> + + + + + + + + + + + + setTabValue(v)} + orientation="vertical" + sx={{ borderRight: 1, borderColor: 'divider' }} + > + + + + + + + + + + + + + setNavValue(v)} + showLabels + sx={{ bgcolor: 'background.paper' }} + > + } /> + } /> + } /> + + + + + ) } diff --git a/src/views/base/paginations/Paginations.js b/src/views/base/paginations/Paginations.js index 24dc229a10..667494568f 100644 --- a/src/views/base/paginations/Paginations.js +++ b/src/views/base/paginations/Paginations.js @@ -1,174 +1,62 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CPagination, - CPaginationItem, - CRow, -} from '@coreui/react' -import { DocsComponents, DocsExample } 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 Pagination from '@mui/material/Pagination' +import Stack from '@mui/material/Stack' const Paginations = () => { return ( - - - - - - 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". -

    - - - Previous - 1 - 2 - 3 - Next - - -     -     -     - - - - 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. -

    - - - - - - 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. -

    - - - - - - 1 - 2 - 3 - - - - - -     -     -     - - - - React Pagination Sizing - - -

    - Fancy larger or smaller pagination? Add size="lg" or{' '} - size="sm" 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 - - - - - Previous - 1 - 2 - 3 - Next - - -     -     -     -     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/src/views/base/placeholders/Placeholders.js b/src/views/base/placeholders/Placeholders.js index 743416d93d..8580a7f7e7 100644 --- a/src/views/base/placeholders/Placeholders.js +++ b/src/views/base/placeholders/Placeholders.js @@ -1,196 +1,61 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCardImage, - CCardText, - CCardTitle, - CCol, - CPlaceholder, - CRow, -} from '@coreui/react' -import { DocsComponents, DocsExample } from 'src/components' - -import ReactImg from 'src/assets/images/react.jpg' +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 Skeleton from '@mui/material/Skeleton' +import Box from '@mui/material/Box' const Placeholders = () => { return ( - - - - - - 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. -

    - -
    - - - - Card title - - Some quick example text to build on the card title and make up the bulk of the - card's content. - - - Go somewhere - - - - - - Placeholder - - - - - - - - - - - - - - - - -
    -     -     -     - - - 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 Width - - -

    - You can change the width through grid column classes, 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 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 Animation - - -

    - Animate placeholders with animation="glow" 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..b6020887ed 100644 --- a/src/views/base/popovers/Popovers.js +++ b/src/views/base/popovers/Popovers.js @@ -1,71 +1,77 @@ -import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/react' -import { DocsComponents, DocsExample } from 'src/components' +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 Button from '@mui/material/Button' +import Popover from '@mui/material/Popover' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' + +const PopoverButton = ({ label, placement }) => { + const [anchorEl, setAnchorEl] = useState(null) + + const handleClick = (event) => { + setAnchorEl(event.currentTarget) + } + + const handleClose = () => { + setAnchorEl(null) + } + + const open = Boolean(anchorEl) + + return ( + <> + + + + + Popover Title + + + And here's some amazing content. It's very engaging. + + + + + ) +} const Popovers = () => { return ( - - - - - - React Popover Basic example - - - - - - Click to toggle popover - - - - - - - - - - React Popover Four directions - - -

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

    - - - Popover on top - - - Popover on right - - - Popover on bottom - - - Popover on left - - -     -     -     -     + + + + + + + Click the buttons below to see popovers in different positions. + + + + + + + + + + + ) } diff --git a/src/views/base/progress/Progress.js b/src/views/base/progress/Progress.js index 78715d305d..5e337d3f6a 100644 --- a/src/views/base/progress/Progress.js +++ b/src/views/base/progress/Progress.js @@ -1,186 +1,70 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CProgress, CProgressBar, CRow } from '@coreui/react' -import { DocsComponents, DocsExample } 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 LinearProgress from '@mui/material/LinearProgress' +import Box from '@mui/material/Box' +import Typography from '@mui/material/Typography' 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 Labels - - -

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

    - - - 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 Backgrounds - - -

    - Use 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 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. -

    - - - - - - - - - - - - - - -     -     -     -     + + + + + + + + + + + + + + + + + + + + {[25, 50, 75].map((value) => ( + + + + + + + {value}% + + + + ))} + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/src/views/base/spinners/Spinners.js b/src/views/base/spinners/Spinners.js index 5553dbc0f7..a536163d8d 100644 --- a/src/views/base/spinners/Spinners.js +++ b/src/views/base/spinners/Spinners.js @@ -1,120 +1,57 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react' -import { DocsComponents, DocsExample } 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 CircularProgress from '@mui/material/CircularProgress' +import Box from '@mui/material/Box' const Spinners = () => { return ( - - - - - - React Spinner Border - - -

    - Use the border spinners 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. -

    - - - - - - - - - - -     -     -     - - - - 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! -

    - - - -

    - 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 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. -

    - - - - - - - - - - - - -     -     -     -     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js index 3a3f7fd864..f1c7c54c54 100644 --- a/src/views/base/tables/Tables.js +++ b/src/views/base/tables/Tables.js @@ -1,986 +1,88 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CTable, - CTableBody, - CTableCaption, - CTableDataCell, - CTableHead, - CTableHeaderCell, - CTableRow, -} from '@coreui/react' -import { DocsComponents, DocsExample } 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 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' + +const createData = (id, name, heading1, heading2) => ({ id, name, heading1, heading2 }) + +const rows = [ + createData(1, 'Mark', 'Otto', '@mdo'), + createData(2, 'Jacob', 'Thornton', '@fat'), + createData(3, 'Larry', 'the Bird', '@twitter'), +] const Tables = () => { return ( - - - - - - React Table Basic example - - -

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

    - - - - - # - 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 - - - - - - - - - # - 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 - 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 - - - - -     -     -     -     + + + + + + + + + + # + Name + Heading 1 + Heading 2 + + + + {rows.map((row) => ( + + {row.id} + {row.name} + {row.heading1} + {row.heading2} + + ))} + +
    +     +     +     +     + + + + + + + + + # + Name + Heading 1 + Heading 2 + + + + {rows.map((row, index) => ( + + {row.id} + {row.name} + {row.heading1} + {row.heading2} + + ))} + +
    +     +     +     +     +     ) } diff --git a/src/views/base/tabs/Tabs.js b/src/views/base/tabs/Tabs.js index eae58d8f8c..ec67865de7 100644 --- a/src/views/base/tabs/Tabs.js +++ b/src/views/base/tabs/Tabs.js @@ -1,234 +1,88 @@ -import React from 'react' -import { - CRow, - CCol, - CCard, - CCardBody, - CCardHeader, - CTab, - CTabContent, - CTabList, - CTabPanel, - CTabs, -} from '@coreui/react' -import { DocsComponents, DocsExample } from 'src/components' +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 MuiTabs from '@mui/material/Tabs' +import Tab from '@mui/material/Tab' +import Box from '@mui/material/Box' +import Typography from '@mui/material/Typography' + +const TabPanel = ({ children, value, index }) => ( + +) + +const Tabs = () => { + const [value1, setValue1] = useState(0) + const [value2, setValue2] = useState(0) -const Navs = () => { return ( - - - - - - 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 - - - - -     -     -     - - - - 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 - - - - -     -     -     - - - - 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 - - - - -     -     -     - - - - 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 - - - - -     -     -     - - - - 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 - - - - -     -     -     -     + + + + + + + setValue1(v)}> + + + + + + + + Home tab content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + + + Profile tab content. Sed do eiusmod tempor incididunt ut labore. + + + + + Contact tab content. Ut enim ad minim veniam, quis nostrud exercitation. + + + + + + + + + + + setValue2(v)} + variant="scrollable" + scrollButtons="auto" + > + + + + + + + + + + + Content for Item One + + + Content for Item Two + + + Content for Item Three + + + + + ) } -export default Navs +export default Tabs diff --git a/src/views/base/tooltips/Tooltips.js b/src/views/base/tooltips/Tooltips.js index 86a229420c..f80aafefde 100644 --- a/src/views/base/tooltips/Tooltips.js +++ b/src/views/base/tooltips/Tooltips.js @@ -1,77 +1,55 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react' -import { DocsComponents, DocsExample } 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 Button from '@mui/material/Button' +import Tooltip from '@mui/material/Tooltip' +import Box from '@mui/material/Box' const Tooltips = () => { return ( - - - - - - 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 - american apparel - - 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 - - scenester farm-to-table banksy Austin - - 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. -

    - - - 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..d2337c0b20 100644 --- a/src/views/buttons/button-groups/ButtonGroups.js +++ b/src/views/buttons/button-groups/ButtonGroups.js @@ -1,439 +1,107 @@ 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 { DocsComponents, DocsExample } 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 Button from '@mui/material/Button' +import ButtonGroup from '@mui/material/ButtonGroup' +import Box from '@mui/material/Box' const ButtonGroups = () => { return ( - - - - - - React Button Group Basic example - - -

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

    - - - 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 - - - - - - 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. -

    - - - - - - - - - - - - - - -     -     -     - - - - 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 - - - -

    - 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. -

    - - - - 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..99d28c68f2 100644 --- a/src/views/buttons/buttons/Buttons.js +++ b/src/views/buttons/buttons/Buttons.js @@ -1,401 +1,135 @@ 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 { DocsComponents, DocsExample } 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 Button from '@mui/material/Button' +import Box from '@mui/material/Box' +import IconButton from '@mui/material/IconButton' +import DeleteIcon from '@mui/icons-material/Delete' +import SendIcon from '@mui/icons-material/Send' +import AddIcon from '@mui/icons-material/Add' const Buttons = () => { 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. -

    - - {['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 with icons - - -

    - You can combine button with our CoreUI 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 - - - - - -     -     -     - - - - React Button outline - - -

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

    - - {['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 ghost - - -

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

    - - {['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 - - - - - 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. -

    - -
    - 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. -

    - -
    - - Button - - Button -
    -     -     -     -     -     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/src/views/buttons/dropdowns/Dropdowns.js b/src/views/buttons/dropdowns/Dropdowns.js index a6885a416a..a604eb252e 100644 --- a/src/views/buttons/dropdowns/Dropdowns.js +++ b/src/views/buttons/dropdowns/Dropdowns.js @@ -1,338 +1,80 @@ -import React from 'react' -import { - CButton, - CButtonGroup, - CCard, - CCardBody, - CCardHeader, - CCol, - CDropdown, - CDropdownDivider, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CRow, -} from '@coreui/react' -import { DocsComponents, DocsExample } from 'src/components' +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 Button from '@mui/material/Button' +import Menu from '@mui/material/Menu' +import MenuItem from '@mui/material/MenuItem' +import Box from '@mui/material/Box' +import Divider from '@mui/material/Divider' +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown' + +const DropdownButton = ({ label, color = 'primary', variant = 'contained' }) => { + const [anchorEl, setAnchorEl] = useState(null) + const open = Boolean(anchorEl) + + const handleClick = (event) => { + setAnchorEl(event.currentTarget) + } + + const handleClose = () => { + setAnchorEl(null) + } + + return ( + <> + + + Action + Another action + Something else here + + Separated link + + + ) +} const Dropdowns = () => { return ( - - - - - - React Dropdown Single button - - -

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

    - - - 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 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 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..c6590bc3d5 100644 --- a/src/views/charts/Charts.js +++ b/src/views/charts/Charts.js @@ -1,182 +1,184 @@ import React from 'react' -import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Box from '@mui/material/Box' +import { Line, Bar, Doughnut, Pie, PolarArea, Radar } from 'react-chartjs-2' import { - CChartBar, - CChartDoughnut, - CChartLine, - CChartPie, - CChartPolarArea, - CChartRadar, -} from '@coreui/react-chartjs' -import { DocsLink } from 'src/components' + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + BarElement, + ArcElement, + RadialLinearScale, + Filler, + Tooltip, + Legend, +} from 'chart.js' -const Charts = () => { - const random = () => Math.round(Math.random() * 100) +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + BarElement, + ArcElement, + RadialLinearScale, + Filler, + Tooltip, + Legend, +) +const Charts = () => { return ( - - - - - - Bar Chart - - - - - - - - - - Line Chart - - - - - - - - - - Doughnut Chart - - - - - - - - - - Pie Chart {' '} - - - - - - - - - - Polar Area Chart - - - - - - - - - - - Radar Chart - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js index 57a55290d9..0885d6d2ed 100644 --- a/src/views/dashboard/Dashboard.js +++ b/src/views/dashboard/Dashboard.js @@ -1,47 +1,29 @@ 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 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 Avatar from '@mui/material/Avatar' +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 LinearProgress from '@mui/material/LinearProgress' +import IconButton from '@mui/material/IconButton' +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 TwitterIcon from '@mui/icons-material/Twitter' +import LinkedInIcon from '@mui/icons-material/LinkedIn' import avatar1 from 'src/assets/images/avatars/1.jpg' import avatar2 from 'src/assets/images/avatars/2.jpg' @@ -50,7 +32,6 @@ import avatar4 from 'src/assets/images/avatars/4.jpg' import avatar5 from 'src/assets/images/avatars/5.jpg' import avatar6 from 'src/assets/images/avatars/6.jpg' -import WidgetsBrand from '../widgets/WidgetsBrand' import WidgetsDropdown from '../widgets/WidgetsDropdown' import MainChart from './MainChart' @@ -59,7 +40,7 @@ const Dashboard = () => { { title: 'Visits', value: '29.703 Users', percent: 40, color: 'success' }, { title: 'Unique', value: '24.093 Users', percent: 20, color: 'info' }, { title: 'Pageviews', value: '78.706 Views', percent: 60, color: 'warning' }, - { title: 'New Users', value: '22.123 Users', percent: 80, color: 'danger' }, + { title: 'New Users', value: '22.123 Users', percent: 80, color: 'error' }, { title: 'Bounce Rate', value: 'Average Rate', percent: 40.15, color: 'primary' }, ] @@ -74,312 +55,346 @@ const Dashboard = () => { ] const progressGroupExample2 = [ - { title: 'Male', icon: cilUser, value: 53 }, - { title: 'Female', icon: cilUserFemale, value: 43 }, + { title: 'Male', icon: PersonIcon, value: 53 }, + { title: 'Female', icon: PersonOutlineIcon, 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: GoogleIcon, percent: 56, value: '191,235' }, + { title: 'Facebook', icon: FacebookIcon, percent: 15, value: '51,223' }, + { title: 'Twitter', icon: TwitterIcon, percent: 11, value: '37,564' }, + { title: 'LinkedIn', icon: LinkedInIcon, 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: 'USA', + usage: { value: 50, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'success' }, + payment: '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 }, + avatar: { src: avatar2, status: 'error' }, + user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2023' }, + country: 'Brazil', + usage: { value: 22, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'info' }, + payment: '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: 'India', + usage: { value: 74, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'warning' }, + payment: '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: 'France', + usage: { value: 98, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'error' }, + payment: '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: 'Spain', + usage: { value: 22, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'primary' }, + payment: '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 }, + avatar: { src: avatar6, status: 'error' }, + user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2023' }, + country: 'Poland', + usage: { value: 43, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'success' }, + payment: 'Amex', activity: 'Last week', }, ] return ( <> - - - - - -

    + + + + + + Traffic -

    -
    January - July 2023
    -     - - - - - - {['Day', 'Month', 'Year'].map((value) => ( - - {value} - - ))} - - -     + + + 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}%) - -
    -
    - -
    -
    - ))} -     -     + + + -
    + + + + + + + + + + + + New Clients + + 9,123 + + + + + + Recurring Clients + + 22,643 + + + + + {progressGroupExample1.map((item, index) => ( + + + {item.title} + + + + + ))} + + + + + + + + Pageviews + + 78,623 + + + + + + Organic + + 49,123 + + + + + {progressGroupExample2.map((item, index) => { + const Icon = item.icon + return ( + + + + {item.title} + + + {item.value}% + + + ) + })} + {progressGroupExample2.map((item, index) => ( + + ))} + + + {progressGroupExample3.map((item, index) => { + const Icon = item.icon + return ( + + + + + {item.title} + + + {item.value}{' '} + + ({item.percent}%) + + + + + + ) + })} + + + - - - - - - - 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}
    -     -     - ))} -     -     -     -     -     -     + + + + + + + + User + Country + Usage + Payment Method + Activity + + + + {tableExample.map((item, index) => ( + + + + + + {item.user.name} + + {item.user.new ? 'New' : 'Recurring'} | Registered:{' '} + {item.user.registered} + + + + {item.country} + + + + + {item.usage.value}% + + + {item.usage.period} + + + + + + {item.payment} + + + + Last login + + + {item.activity} + + + + ))} + +
    +     + + + + ) } diff --git a/src/views/dashboard/MainChart.js b/src/views/dashboard/MainChart.js index 98b7eec3cf..4c04b5d43e 100644 --- a/src/views/dashboard/MainChart.js +++ b/src/views/dashboard/MainChart.js @@ -1,136 +1,121 @@ -import React, { useEffect, useRef } from 'react' +import React, { useMemo } from 'react' +import { Line } from 'react-chartjs-2' +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + Filler, +} from 'chart.js' +import { useTheme } from '@mui/material/styles' +import Box from '@mui/material/Box' -import { CChartLine } from '@coreui/react-chartjs' -import { getStyle } from '@coreui/utils' +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + Filler, +) const MainChart = () => { - const chartRef = useRef(null) + const theme = useTheme() - 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() - }) - } - } - - 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( + () => ({ + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'Dataset 1', + backgroundColor: 'rgba(51, 153, 255, 0.1)', + borderColor: theme.palette.info.main, + pointHoverBackgroundColor: theme.palette.info.main, + borderWidth: 2, + data: [165, 89, 132, 178, 94, 115, 142], + fill: true, + }, + { + label: 'Dataset 2', + backgroundColor: 'transparent', + borderColor: theme.palette.success.main, + pointHoverBackgroundColor: theme.palette.success.main, + borderWidth: 2, + data: [78, 156, 112, 89, 145, 167, 98], + }, + { + label: 'Dataset 3', + backgroundColor: 'transparent', + borderColor: theme.palette.error.main, + pointHoverBackgroundColor: theme.palette.error.main, + borderWidth: 1, + borderDash: [8, 5], + data: [65, 65, 65, 65, 65, 65, 65], + }, + ], + }), + [theme], + ) - return ( - <> - ({ + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + x: { + grid: { + color: theme.palette.divider, + drawOnChartArea: false, + }, + ticks: { + color: theme.palette.text.secondary, }, - scales: { - x: { - grid: { - color: getStyle('--cui-border-color-translucent'), - drawOnChartArea: false, - }, - ticks: { - color: getStyle('--cui-body-color'), - }, - }, - y: { - beginAtZero: true, - border: { - color: getStyle('--cui-border-color-translucent'), - }, - grid: { - color: getStyle('--cui-border-color-translucent'), - }, - max: 250, - ticks: { - color: getStyle('--cui-body-color'), - maxTicksLimit: 5, - stepSize: Math.ceil(250 / 5), - }, - }, + }, + y: { + beginAtZero: true, + border: { + color: theme.palette.divider, }, - elements: { - line: { - tension: 0.4, - }, - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - hoverBorderWidth: 3, - }, + grid: { + color: theme.palette.divider, }, - }} - /> - + max: 250, + ticks: { + color: theme.palette.text.secondary, + maxTicksLimit: 5, + stepSize: Math.ceil(250 / 5), + }, + }, + }, + elements: { + line: { + tension: 0.4, + }, + point: { + radius: 0, + hitRadius: 10, + hoverRadius: 4, + hoverBorderWidth: 3, + }, + }, + }), + [theme], + ) + + return ( + + + ) } diff --git a/src/views/forms/checks-radios/ChecksRadios.js b/src/views/forms/checks-radios/ChecksRadios.js index ef073dee55..a78020b038 100644 --- a/src/views/forms/checks-radios/ChecksRadios.js +++ b/src/views/forms/checks-radios/ChecksRadios.js @@ -1,392 +1,93 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CFormSwitch, CRow } from '@coreui/react' -import { DocsComponents, DocsExample } from 'src/components' +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 FormGroup from '@mui/material/FormGroup' +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 FormControl from '@mui/material/FormControl' +import FormLabel from '@mui/material/FormLabel' const ChecksRadios = () => { + const [radioValue, setRadioValue] = useState('option1') + return ( - - - - - - 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. -

    - - - - -     -     -     - - - - 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. -

    - - - - -     -     -     - - - - 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). -

    - -
    - -
    -
    - -
    -     -     -     -     - - - - 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="Default checkbox" /> + } label="Unchecked checkbox" /> + } label="Disabled checkbox" /> + } + label="Disabled checked checkbox" + /> + + + + + + + + + + Select an option + setRadioValue(e.target.value)}> + } label="Option 1" /> + } label="Option 2" /> + } label="Option 3" /> + } label="Disabled" /> + + + + + + + + + + + } label="Default switch" /> + } label="Unchecked switch" /> + } label="Disabled switch" /> + } + label="Disabled checked switch" + /> + + + + + + + + + + } + label="Primary" + /> + } + label="Secondary" + /> + } + label="Success" + /> + } label="Error" /> + + + + + ) } diff --git a/src/views/forms/floating-labels/FloatingLabels.js b/src/views/forms/floating-labels/FloatingLabels.js index 2a637fd21c..84c51ce61d 100644 --- a/src/views/forms/floating-labels/FloatingLabels.js +++ b/src/views/forms/floating-labels/FloatingLabels.js @@ -1,170 +1,71 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CFormInput, - CFormLabel, - CFormFloating, - CFormSelect, - CFormTextarea, - CRow, -} from '@coreui/react' -import { DocsComponents, DocsExample } 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 TextField from '@mui/material/TextField' +import FormControl from '@mui/material/FormControl' +import InputLabel from '@mui/material/InputLabel' +import Select from '@mui/material/Select' +import MenuItem from '@mui/material/MenuItem' +import Box from '@mui/material/Box' 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., ~). -

    - - - - 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). -

    - - - - 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. - -

    - - - - - - - - - Works with selects - - -     -     -     - - - - React Floating labels Layout - - -

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

    - - - - - - Email address - - - - - - - - - - - Works with selects - - - - -     -     -     -     + + + + + + + + + + + + + + + + + + + Works with selects + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/src/views/forms/form-control/FormControl.js b/src/views/forms/form-control/FormControl.js index 7b972ffd86..150d783146 100644 --- a/src/views/forms/form-control/FormControl.js +++ b/src/views/forms/form-control/FormControl.js @@ -1,248 +1,64 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CForm, - CFormInput, - CFormLabel, - CFormTextarea, - CRow, -} from '@coreui/react' -import { DocsComponents, DocsExample } 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 TextField from '@mui/material/TextField' +import Box from '@mui/material/Box' const FormControl = () => { return ( - - - - - - React Form Control - - - - -
    - Email address - -
    -
    - Example textarea - -
    -     -     -     -     -     - - - - React Form Control Sizing - - -

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

    - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
    - -
    - -     -     -     -     - - - - 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 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 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..33351f3a5f 100644 --- a/src/views/forms/input-group/InputGroup.js +++ b/src/views/forms/input-group/InputGroup.js @@ -1,503 +1,96 @@ 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 { DocsComponents, DocsExample } 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 TextField from '@mui/material/TextField' +import InputAdornment from '@mui/material/InputAdornment' +import Box from '@mui/material/Box' +import IconButton from '@mui/material/IconButton' +import SearchIcon from '@mui/icons-material/Search' +import VisibilityIcon from '@mui/icons-material/Visibility' +import AttachMoneyIcon from '@mui/icons-material/AttachMoney' 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. -

    - - - @ - - - - - @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. -

    - - - @ - - - -     -     -     - - - - 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. -

    - - - 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 - - - - - - - Button - - - - - - -     + + + + + + + @, + }} + fullWidth + /> + @example.com, + }} + fullWidth + /> + https://, + }} + fullWidth + /> + + + + + + + + + + + + + ), + }} + fullWidth + /> + + + + + + ), + }} + fullWidth + /> + + + + ), + endAdornment: .00, + }} + fullWidth + /> + + + + + ) } diff --git a/src/views/forms/layout/Layout.js b/src/views/forms/layout/Layout.js index 6a6bf56451..0e0fb3235f 100644 --- a/src/views/forms/layout/Layout.js +++ b/src/views/forms/layout/Layout.js @@ -1,424 +1,104 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CForm, - CFormCheck, - CFormInput, - CFormLabel, - CFormSelect, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' -import { DocsComponents, DocsExample } 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 TextField from '@mui/material/TextField' +import Button from '@mui/material/Button' +import Box from '@mui/material/Box' +import FormControlLabel from '@mui/material/FormControlLabel' +import Checkbox from '@mui/material/Checkbox' 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 Gutters - - -

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

    - - - - - - - - - - -

    - 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. -

    - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + } label="Check me out" /> + + + + + + + + + + + + + + + + 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 - - - - -     -     -     -     + + + + + + + + + + + + + + + + + + + + + + + } label="Remember me" /> + + + + + + ) } diff --git a/src/views/forms/range/Range.js b/src/views/forms/range/Range.js index 78a43dbfd2..143a353f3e 100644 --- a/src/views/forms/range/Range.js +++ b/src/views/forms/range/Range.js @@ -1,82 +1,80 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CFormLabel, CFormRange, CRow } from '@coreui/react' -import { DocsComponents, DocsExample } from 'src/components' +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 Slider from '@mui/material/Slider' +import Box from '@mui/material/Box' +import Typography from '@mui/material/Typography' const Range = () => { + const [value, setValue] = useState(50) + return ( - - - - - - React Range - - -

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

    - - 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 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 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 - - -     -     -     -     + + + + + + + setValue(v)} valueLabelDisplay="auto" /> + + Value: {value} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/src/views/forms/select/Select.js b/src/views/forms/select/Select.js index d817644493..84355b400f 100644 --- a/src/views/forms/select/Select.js +++ b/src/views/forms/select/Select.js @@ -1,99 +1,82 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react' -import { DocsComponents, DocsExample } from 'src/components' +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 FormControl from '@mui/material/FormControl' +import InputLabel from '@mui/material/InputLabel' +import MuiSelect from '@mui/material/Select' +import MenuItem from '@mui/material/MenuItem' +import Box from '@mui/material/Box' const Select = () => { + const [value, setValue] = useState('') + return ( - - - - - - React Select Default - - - - - - - - - - - - - - - - - React Select Sizing - - -

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

    - - - - - - - - - - - - - - -

    - 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. -

    - - - - - - - - -     -     -     -     + + + + + + + Select an option + setValue(e.target.value)} + > + + Open this select menu + + One + Two + Three + + + + + + + + + + + + Small + + One + Two + Three + + + + Normal + + One + Two + Three + + + + + + + + + + + + Disabled + + One + Two + Three + + + + + + ) } diff --git a/src/views/forms/validation/Validation.js b/src/views/forms/validation/Validation.js index d0017b6b2c..e0070c95d3 100644 --- a/src/views/forms/validation/Validation.js +++ b/src/views/forms/validation/Validation.js @@ -1,503 +1,156 @@ 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 { DocsComponents, DocsExample } 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 TextField from '@mui/material/TextField' +import Button from '@mui/material/Button' +import Box from '@mui/material/Box' +import FormControlLabel from '@mui/material/FormControlLabel' +import Checkbox from '@mui/material/Checkbox' -const CustomStyles = () => { +const Validation = () => { const [validated, setValidated] = useState(false) - const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } + const [formData, setFormData] = useState({ + firstName: '', + lastName: '', + username: '', + city: '', + state: '', + zip: '', + terms: false, + }) + + const handleSubmit = (e) => { + e.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 BrowserDefaults = () => { - const [validated, setValidated] = useState(false) - const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() - } - setValidated(true) + const handleChange = (field) => (e) => { + const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value + setFormData({ ...formData, [field]: value }) } - 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) + const getError = (field) => { + if (!validated) return false + if (field === 'terms') return !formData.terms + return !formData[field] + } + + const getHelperText = (field) => { + if (!validated) return '' + if (field === 'terms') return !formData.terms ? 'You must agree before submitting.' : '' + return !formData[field] ? 'This field is required.' : '' } - 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 - - @ - - 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 -
    - -
    - + + + + + + + } + label="Agree to terms and conditions" + /> + {getError('terms') && ( + + {getHelperText('terms')} + + )} + + +
    -     -     -     -     -     - - - - 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..1e97670c3d 100644 --- a/src/views/icons/brands/Brands.js +++ b/src/views/icons/brands/Brands.js @@ -1,34 +1,74 @@ 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 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 Grid from '@mui/material/Grid' +import FacebookIcon from '@mui/icons-material/Facebook' +import TwitterIcon from '@mui/icons-material/Twitter' +import InstagramIcon from '@mui/icons-material/Instagram' +import LinkedInIcon from '@mui/icons-material/LinkedIn' +import YouTubeIcon from '@mui/icons-material/YouTube' +import GitHubIcon from '@mui/icons-material/GitHub' +import GoogleIcon from '@mui/icons-material/Google' +import AppleIcon from '@mui/icons-material/Apple' +import AndroidIcon from '@mui/icons-material/Android' +import RedditIcon from '@mui/icons-material/Reddit' +import PinterestIcon from '@mui/icons-material/Pinterest' +import WhatsAppIcon from '@mui/icons-material/WhatsApp' -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 brandIcons = [ + { icon: FacebookIcon, name: 'Facebook', color: '#1877F2' }, + { icon: TwitterIcon, name: 'Twitter', color: '#1DA1F2' }, + { icon: InstagramIcon, name: 'Instagram', color: '#E4405F' }, + { icon: LinkedInIcon, name: 'LinkedIn', color: '#0A66C2' }, + { icon: YouTubeIcon, name: 'YouTube', color: '#FF0000' }, + { icon: GitHubIcon, name: 'GitHub', color: '#181717' }, + { icon: GoogleIcon, name: 'Google', color: '#4285F4' }, + { icon: AppleIcon, name: 'Apple', color: '#000000' }, + { icon: AndroidIcon, name: 'Android', color: '#3DDC84' }, + { icon: RedditIcon, name: 'Reddit', color: '#FF4500' }, + { icon: PinterestIcon, name: 'Pinterest', color: '#BD081C' }, + { icon: WhatsAppIcon, name: 'WhatsApp', color: '#25D366' }, +] -const CoreUIIcons = () => { +const Brands = () => { return ( - <> - - - Brand Icons - - {getIconsView(brandSet)} - - - + + + + + Material UI includes popular brand icons. Here are some commonly used ones. + + + {brandIcons.map(({ icon: Icon, name, color }) => ( + + + + + {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..fdc96f6023 100644 --- a/src/views/icons/coreui-icons/CoreUIIcons.js +++ b/src/views/icons/coreui-icons/CoreUIIcons.js @@ -1,20 +1,86 @@ 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 Box from '@mui/material/Box' +import Typography from '@mui/material/Typography' +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 NotificationsIcon from '@mui/icons-material/Notifications' +import MailIcon from '@mui/icons-material/Mail' +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 RemoveIcon from '@mui/icons-material/Remove' +import CheckIcon from '@mui/icons-material/Check' +import CloseIcon from '@mui/icons-material/Close' +import MenuIcon from '@mui/icons-material/Menu' +import MoreVertIcon from '@mui/icons-material/MoreVert' + +const icons = [ + { icon: HomeIcon, name: 'Home' }, + { icon: SettingsIcon, name: 'Settings' }, + { icon: PersonIcon, name: 'Person' }, + { icon: SearchIcon, name: 'Search' }, + { icon: NotificationsIcon, name: 'Notifications' }, + { icon: MailIcon, name: 'Mail' }, + { icon: FavoriteIcon, name: 'Favorite' }, + { icon: StarIcon, name: 'Star' }, + { icon: DeleteIcon, name: 'Delete' }, + { icon: EditIcon, name: 'Edit' }, + { icon: AddIcon, name: 'Add' }, + { icon: RemoveIcon, name: 'Remove' }, + { icon: CheckIcon, name: 'Check' }, + { icon: CloseIcon, name: 'Close' }, + { icon: MenuIcon, name: 'Menu' }, + { icon: MoreVertIcon, name: 'MoreVert' }, +] const CoreUIIcons = () => { return ( - <> - - - Free Icons - - {getIconsView(freeSet)} - - - + + + + + Material UI provides over 2,100 official Material icons. Here are some commonly used ones. + Visit{' '} + + MUI Icons + {' '} + for the full list. + + + {icons.map(({ icon: Icon, name }) => ( + + + + + {name} + + + + ))} + + + ) } diff --git a/src/views/icons/flags/Flags.js b/src/views/icons/flags/Flags.js index 5db7e56705..acc808a7ec 100644 --- a/src/views/icons/flags/Flags.js +++ b/src/views/icons/flags/Flags.js @@ -1,21 +1,65 @@ 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 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 Grid from '@mui/material/Grid' +import FlagIcon from '@mui/icons-material/Flag' +import PublicIcon from '@mui/icons-material/Public' +import LanguageIcon from '@mui/icons-material/Language' -const CoreUIIcons = () => { +const Flags = () => { return ( - <> - - - Flag Icons - - {getIconsView(flagSet)} - - - + + + + + Material UI does not include country flag icons by default. For flag icons, consider using + a dedicated library like{' '} + + flag-icons + {' '} + or{' '} + + react-world-flags + + . + + + Here are some related Material UI icons: + + + {[ + { icon: FlagIcon, name: 'Flag' }, + { icon: PublicIcon, name: 'Public' }, + { icon: LanguageIcon, name: 'Language' }, + ].map(({ icon: Icon, name }) => ( + + + + {name} + + + ))} + + + ) } -export default CoreUIIcons +export default Flags diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js index 70e1108a11..9af5c106d3 100644 --- a/src/views/notifications/alerts/Alerts.js +++ b/src/views/notifications/alerts/Alerts.js @@ -1,145 +1,96 @@ import React from 'react' -import { - CAlert, - CAlertHeading, - CAlertLink, - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, -} from '@coreui/react' -import { DocsComponents, DocsExample } 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 Alert from '@mui/material/Alert' +import AlertTitle from '@mui/material/AlertTitle' +import Box from '@mui/material/Box' const Alerts = () => { 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 - . -

    - - 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! - -     -     -     - - - - React Alert Link color - - -

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

    - - - 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. - - -     -     -     - - - - React Alert Additional content - - -

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

    - - - 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. -

    -     -     -     -     -     - - - - React Alert Dismissing - - -

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

    - - { - alert('👋 Well, hi there! Thanks for dismissing me.') - }} - > - Go right ahead and click that dimiss over there on the right. - - -     -     -     -     + + + + + + + This is a success alert. + This is an info alert. + This is a warning alert. + This is an error alert. + + + + + + + + + + + Success + This is a success alert with a title. + + + Info + This is an info alert with a title. + + + Warning + This is a warning alert with a title. + + + Error + This is an error alert with a title. + + + + + + + + + + + + This is an outlined success alert. + + + This is an outlined info alert. + + + This is an outlined warning alert. + + + This is an outlined error alert. + + + + + + + + + + + + This is a filled success alert. + + + This is a filled info alert. + + + This is a filled warning alert. + + + This is a filled error alert. + + + + + + ) } diff --git a/src/views/notifications/badges/Badges.js b/src/views/notifications/badges/Badges.js index 81dd6b5ac4..162db4efcf 100644 --- a/src/views/notifications/badges/Badges.js +++ b/src/views/notifications/badges/Badges.js @@ -1,124 +1,92 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CBadge, CRow } from '@coreui/react' -import { DocsComponents, DocsExample } 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 Badge from '@mui/material/Badge' +import Chip from '@mui/material/Chip' +import Box from '@mui/material/Box' +import IconButton from '@mui/material/IconButton' +import MailIcon from '@mui/icons-material/Mail' +import NotificationsIcon from '@mui/icons-material/Notifications' +import ShoppingCartIcon from '@mui/icons-material/ShoppingCart' 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. -

    - -

    - 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. -

    - - primary - success - danger - warning - info - light - dark - -     -     - - - React Badges Pill badges - - -

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

    - - - 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..c492bf1126 100644 --- a/src/views/notifications/modals/Modals.js +++ b/src/views/notifications/modals/Modals.js @@ -1,752 +1,117 @@ import React, { useState } from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CLink, - CModal, - CModalBody, - CModalFooter, - CModalHeader, - CModalTitle, - CPopover, - CRow, - CTooltip, -} from '@coreui/react' -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 - - ... - - - ) -} +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 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' const Modals = () => { + const [open, setOpen] = useState(false) + const [scrollOpen, setScrollOpen] = useState(false) + const [sizeOpen, setSizeOpen] = useState(false) + const [maxWidth, setMaxWidth] = useState('sm') + 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. -

    - - - - 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()} - -     -     -     - - - - 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 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()} -     -     -     -     + + + + + + + setOpen(false)}> + Modal title + + + Woohoo, you're reading this text in a modal! This is a basic modal dialog. + + + + + + + + + + + + + + + + setScrollOpen(false)} scroll="paper"> + Scrolling Modal + + + {[...Array(20)].map((_, i) => ( +

    + 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. +

    + ))} +     +     + + + + +     +     +     +     + + + + + + {['xs', 'sm', 'md', 'lg', 'xl'].map((size) => ( + + ))} + + setSizeOpen(false)} + maxWidth={maxWidth} + fullWidth + > + {maxWidth.toUpperCase()} Modal + + + This is a {maxWidth} sized modal dialog. You can set different max widths for + different use cases. + + + + + + + + + +     ) } diff --git a/src/views/notifications/toasts/Toasts.js b/src/views/notifications/toasts/Toasts.js index 9ccf859ad3..bc3615a7ea 100644 --- a/src/views/notifications/toasts/Toasts.js +++ b/src/views/notifications/toasts/Toasts.js @@ -1,252 +1,125 @@ -import React, { useRef, useState } from 'react' -import { - CCard, - CCardHeader, - CCardBody, - CButton, - CRow, - CCol, - CToast, - CToastBody, - CToastClose, - CToastHeader, - CToaster, -} from '@coreui/react' -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 - - - - ) -} +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 Button from '@mui/material/Button' +import Snackbar from '@mui/material/Snackbar' +import Alert from '@mui/material/Alert' +import Box from '@mui/material/Box' const Toasts = () => { + const [open, setOpen] = useState(false) + const [severity, setSeverity] = useState('success') + const [position, setPosition] = useState({ vertical: 'top', horizontal: 'right' }) + + const handleClick = (sev) => { + setSeverity(sev) + setOpen(true) + } + + const handleClose = (event, reason) => { + if (reason === 'clickaway') return + setOpen(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. - - - {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. -

    - - + + + + + + + + + + + + + This is a {severity} message! + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js index 1b2ee0baa2..fb46eda262 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..b6ef4b0325 100644 --- a/src/views/pages/page404/Page404.js +++ b/src/views/pages/page404/Page404.js @@ -1,40 +1,55 @@ 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..7fe32c211e 100644 --- a/src/views/pages/page500/Page500.js +++ b/src/views/pages/page500/Page500.js @@ -1,40 +1,55 @@ 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..8cb8051f19 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 EmailIcon from '@mui/icons-material/Email' +import LockIcon from '@mui/icons-material/Lock' 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..28f91277c8 100644 --- a/src/views/theme/colors/Colors.js +++ b/src/views/theme/colors/Colors.js @@ -1,89 +1,80 @@ -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 Box from '@mui/material/Box' +import Card from '@mui/material/Card' +import CardContent from '@mui/material/CardContent' +import CardHeader from '@mui/material/CardHeader' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' -const ThemeView = () => { - const [color, setColor] = useState('rgb(255, 255, 255)') - const ref = createRef() - - 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 ThemeColor = ({ color, title }) => ( + + + {title} + + {color}.main + +) const Colors = () => { + const colors = [ + { color: 'primary', title: 'Primary' }, + { color: 'secondary', title: 'Secondary' }, + { color: 'success', title: 'Success' }, + { color: 'error', title: 'Error' }, + { color: 'warning', title: 'Warning' }, + { color: 'info', title: 'Info' }, + ] + 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
    -     -     -     -     + + + + + Material UI provides a rich color palette that can be customized through the theme. + + + {colors.map((item) => ( + + + + ))} + + + + + + + + + {['#212121', '#424242', '#616161', '#757575', '#9e9e9e', '#bdbdbd', '#e0e0e0'].map( + (gray, index) => ( + + + {gray} + + + ), + )} + + + ) } diff --git a/src/views/theme/typography/Typography.js b/src/views/theme/typography/Typography.js index 1cae4f6c99..de19c828e1 100644 --- a/src/views/theme/typography/Typography.js +++ b/src/views/theme/typography/Typography.js @@ -1,229 +1,77 @@ import React from 'react' -import { CCard, CCardHeader, CCardBody } from '@coreui/react' -import { DocsLink } from 'src/components' +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 Divider from '@mui/material/Divider' +import Box from '@mui/material/Box' -const Typography = () => { +const TypographyPage = () => { 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. -

    -
    -

    - 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 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.
    + + + + + h1. Heading + + + h2. Heading + + + h3. Heading + + + h4. Heading + + + h5. Heading + + + h6. Heading + + + -
    Euismod
    -
    -

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

    -

    Donec id elit non mi porta gravida at eget metus.

    -
    + + + + + body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur + unde suscipit, quam beatae rerum inventore consectetur. + + + body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur + unde suscipit, quam beatae rerum inventore consectetur. + + + + subtitle1. Lorem ipsum dolor sit amet + + + subtitle2. Lorem ipsum dolor sit amet + + + -
    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. -
    -
    -
    -
    -
    -     -     + + + + + + button text + + + caption text + + + overline text + + + + ) } -export default Typography +export default TypographyPage diff --git a/src/views/widgets/Widgets.js b/src/views/widgets/Widgets.js index 4a34afe4c0..366d539a1c 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..fef17cb781 100644 --- a/src/views/widgets/WidgetsBrand.js +++ b/src/views/widgets/WidgetsBrand.js @@ -1,181 +1,133 @@ 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 { Line } from 'react-chartjs-2' +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Filler, +} from 'chart.js' -const WidgetsBrand = (props) => { - const chartOptions = { - elements: { - line: { - tension: 0.4, - }, - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - hoverBorderWidth: 3, +ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler) + +const BrandWidget = ({ icon: Icon, color, value, title, chartData, withCharts }) => ( + + + + + + + {value} + + + {title} + + + + + {withCharts && ( + + + + )} + +) + +BrandWidget.propTypes = { + icon: PropTypes.elementType.isRequired, + color: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + chartData: PropTypes.object, + withCharts: PropTypes.bool, +} + +const WidgetsBrand = ({ withCharts }) => { + const widgets = [ + { + icon: FacebookIcon, + color: '#3b5998', + value: '89k', + title: 'friends', + chartData: { + labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], + datasets: [ + { + data: [65, 59, 84, 84, 51, 55, 40], + borderColor: 'rgba(255,255,255,.55)', + backgroundColor: 'transparent', + }, + ], }, }, - maintainAspectRatio: false, - plugins: { - legend: { - display: false, + { + icon: TwitterIcon, + color: '#00aced', + value: '973k', + title: 'followers', + chartData: { + labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], + datasets: [ + { + data: [1, 13, 9, 17, 34, 41, 38], + borderColor: 'rgba(255,255,255,.55)', + backgroundColor: 'transparent', + }, + ], }, }, - scales: { - x: { - display: false, - }, - y: { - display: false, + { + icon: LinkedInIcon, + color: '#4875b4', + value: '500+', + title: 'contacts', + chartData: { + labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], + datasets: [ + { + data: [78, 81, 80, 45, 34, 12, 40], + borderColor: 'rgba(255,255,255,.55)', + backgroundColor: 'transparent', + }, + ], }, }, - } + ] return ( - - - - ), - })} - icon={} - values={[ - { title: 'friends', value: '89K' }, - { title: 'feeds', value: '459' }, - ]} - style={{ - '--cui-card-cap-bg': '#3b5998', - }} - /> - - - - ), - })} - icon={} - values={[ - { title: 'followers', value: '973k' }, - { title: 'tweets', value: '1.792' }, - ]} - style={{ - '--cui-card-cap-bg': '#00aced', - }} - /> - - - - ), - })} - icon={} - values={[ - { title: 'contacts', value: '500' }, - { title: 'feeds', value: '1.292' }, - ]} - style={{ - '--cui-card-cap-bg': '#4875b4', - }} - /> - - - - ), - })} - icon={} - values={[ - { title: 'events', value: '12+' }, - { title: 'meetings', value: '4' }, - ]} - /> - - + + {widgets.map((widget, index) => ( + + + + ))} + ) } WidgetsBrand.propTypes = { - className: PropTypes.string, withCharts: PropTypes.bool, } diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js index 85e2fc969d..3a983aa7c8 100644 --- a/src/views/widgets/WidgetsDropdown.js +++ b/src/views/widgets/WidgetsDropdown.js @@ -1,396 +1,222 @@ -import React, { useEffect, useRef } from 'react' +import React 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 MoreVertIcon from '@mui/icons-material/MoreVert' +import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward' +import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward' +import { Line, Bar } from 'react-chartjs-2' 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' + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + BarElement, + Filler, +} from 'chart.js' + +ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Filler) + +const StatWidget = ({ title, value, change, changeType, color, chartData, chartType }) => { + const [anchorEl, setAnchorEl] = React.useState(null) + const open = Boolean(anchorEl) + + const handleClick = (event) => { + setAnchorEl(event.currentTarget) + } + + const handleClose = () => { + setAnchorEl(null) + } -const WidgetsDropdown = (props) => { - const widgetChartRef1 = useRef(null) - const widgetChartRef2 = useRef(null) + const chartOptions = { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { display: false }, + }, + scales: { + x: { display: false }, + y: { display: false }, + }, + elements: { + line: { borderWidth: 2, tension: 0.4 }, + point: { radius: 0, hitRadius: 10, hoverRadius: 4 }, + }, + } - useEffect(() => { - document.documentElement.addEventListener('ColorSchemeChange', () => { - if (widgetChartRef1.current) { - setTimeout(() => { - widgetChartRef1.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-primary') - widgetChartRef1.current.update() - }) - } + return ( + + + + + + {value} + + ({change}{' '} + {changeType === 'up' ? ( + + ) : ( + + )} + ) + + + + {title} + + + + + + + Action + Another action + Something else + + + + + {chartType === 'line' ? ( + + ) : ( + + )} + + + ) +} + +StatWidget.propTypes = { + title: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, + change: PropTypes.string.isRequired, + changeType: PropTypes.oneOf(['up', 'down']).isRequired, + color: PropTypes.string.isRequired, + chartData: PropTypes.object.isRequired, + chartType: PropTypes.oneOf(['line', 'bar']).isRequired, +} - if (widgetChartRef2.current) { - setTimeout(() => { - widgetChartRef2.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-info') - widgetChartRef2.current.update() - }) - } - }) - }, [widgetChartRef1, widgetChartRef2]) +const WidgetsDropdown = () => { + const widgets = [ + { + title: 'Users', + value: '26K', + change: '-12.4%', + changeType: 'down', + color: 'primary', + chartType: 'line', + chartData: { + labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], + datasets: [ + { + data: [65, 59, 84, 84, 51, 55, 40], + borderColor: 'rgba(255,255,255,.55)', + backgroundColor: 'transparent', + }, + ], + }, + }, + { + title: 'Income', + value: '$6,200', + change: '40.9%', + changeType: 'up', + color: 'info', + chartType: 'line', + chartData: { + labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], + datasets: [ + { + data: [1, 18, 9, 17, 34, 22, 11], + borderColor: 'rgba(255,255,255,.55)', + backgroundColor: 'transparent', + }, + ], + }, + }, + { + title: 'Conversion Rate', + value: '2.49%', + change: '84.7%', + changeType: 'up', + color: 'warning', + chartType: 'line', + chartData: { + labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], + datasets: [ + { + data: [78, 81, 80, 45, 34, 12, 40], + borderColor: 'rgba(255,255,255,.55)', + backgroundColor: 'rgba(255,255,255,.2)', + fill: true, + }, + ], + }, + }, + { + title: 'Sessions', + value: '44K', + change: '-23.6%', + changeType: 'down', + color: 'error', + chartType: 'bar', + chartData: { + labels: [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec', + ], + datasets: [ + { + data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98], + backgroundColor: 'rgba(255,255,255,.2)', + borderColor: 'rgba(255,255,255,.55)', + }, + ], + }, + }, + ] return ( - - - - 26K{' '} - - (-12.4% ) - - - } - title="Users" - action={ - - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } - /> - - - - $6.200{' '} - - (40.9% ) - - - } - title="Income" - action={ - - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } - /> - - - - 2.49%{' '} - - (84.7% ) - - - } - title="Conversion Rate" - action={ - - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } - /> - - - - 44K{' '} - - (-23.6% ) - - - } - title="Sessions" - action={ - - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } - /> - - + + {widgets.map((widget, index) => ( + + + + ))} + ) } WidgetsDropdown.propTypes = { className: PropTypes.string, - withCharts: PropTypes.bool, } export default WidgetsDropdown