From 8bed060e3557f77f3679c7758d93553784f6c8d6 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 4 Feb 2026 06:28:49 +0000 Subject: [PATCH] feat: migrate from CoreUI to Material UI (MUI) - Replace CoreUI dependencies with MUI packages (@mui/material, @mui/icons-material, @emotion/react, @emotion/styled) - Create MUI theme configuration with light/dark mode support - Update Redux store for MUI theme management - Migrate all layout components (DefaultLayout, AppHeader, AppSidebar, AppFooter, AppContent) to MUI - Implement MUI responsive drawer for sidebar navigation - Migrate dashboard and widget components to MUI with Recharts - Migrate all base UI component demos (accordion, cards, tables, etc.) to MUI - Migrate buttons, forms, notifications, pages, theme, icons, charts to MUI - Add loading states and skeleton components - Implement smooth transitions and animations using MUI transition components - Add responsive feedback for user interactions (ripple effects, hover states) - Improve form validation with real-time feedback - Remove SCSS files and migrate to MUI sx prop styling --- package.json | 15 +- src/App.js | 81 +- src/_nav.js | 494 ++----- src/components/AppBreadcrumb.js | 73 +- src/components/AppContent.js | 25 +- src/components/AppFooter.js | 62 +- src/components/AppHeader.js | 449 +++++-- src/components/AppSidebar.js | 407 +++++- src/components/AppSidebarNav.js | 73 -- src/components/DocsComponents.js | 90 +- src/components/DocsExample.js | 68 +- src/components/DocsIcons.js | 71 +- src/components/DocsLink.js | 19 +- src/components/header/AppHeaderDropdown.js | 96 -- src/components/header/index.js | 3 - src/components/index.js | 2 - src/layout/DefaultLayout.js | 39 +- src/scss/examples.scss | 116 -- src/scss/style.scss | 67 - src/scss/vendors/simplebar.scss | 5 - src/store.js | 1 + src/theme.js | 234 ++++ src/views/base/accordion/Accordion.js | 349 ++--- src/views/base/breadcrumbs/Breadcrumbs.js | 143 ++- src/views/base/cards/Cards.js | 1136 +++------------- src/views/base/carousels/Carousels.js | 347 +++-- src/views/base/collapses/Collapses.js | 246 ++-- src/views/base/index.js | 40 +- src/views/base/list-groups/ListGroups.js | 506 +++----- src/views/base/navs/Navs.js | 500 ++------ src/views/base/paginations/Paginations.js | 237 ++-- src/views/base/placeholders/Placeholders.js | 298 ++--- src/views/base/popovers/Popovers.js | 148 ++- src/views/base/progress/Progress.js | 283 ++-- src/views/base/spinners/Spinners.js | 211 ++- src/views/base/tables/Tables.js | 1142 +++-------------- src/views/base/tabs/Tabs.js | 340 ++--- src/views/base/tooltips/Tooltips.js | 149 ++- .../buttons/button-groups/ButtonGroups.js | 564 ++------ src/views/buttons/buttons/Buttons.js | 569 +++----- src/views/buttons/dropdowns/Dropdowns.js | 514 +++----- src/views/buttons/index.js | 8 +- src/views/charts/Charts.js | 386 +++--- src/views/charts/index.js | 3 + src/views/dashboard/Dashboard.js | 741 ++++++----- src/views/dashboard/MainChart.js | 204 ++- src/views/forms/checks-radios/ChecksRadios.js | 491 ++----- .../forms/floating-labels/FloatingLabels.js | 250 ++-- src/views/forms/form-control/FormControl.js | 355 ++--- src/views/forms/index.js | 10 + src/views/forms/input-group/InputGroup.js | 614 ++------- src/views/forms/layout/Layout.js | 555 +++----- src/views/forms/range/Range.js | 185 ++- src/views/forms/select/Select.js | 190 +-- src/views/forms/validation/Validation.js | 655 +++------- src/views/icons/brands/Brands.js | 96 +- src/views/icons/coreui-icons/CoreUIIcons.js | 112 +- src/views/icons/flags/Flags.js | 71 +- src/views/icons/index.js | 6 +- src/views/notifications/alerts/Alerts.js | 264 ++-- src/views/notifications/badges/Badges.js | 249 ++-- src/views/notifications/index.js | 10 +- src/views/notifications/modals/Modals.js | 900 +++---------- src/views/notifications/toasts/Toasts.js | 370 ++---- src/views/pages/index.js | 6 + src/views/pages/login/Login.js | 181 +-- src/views/pages/page404/Page404.js | 97 +- src/views/pages/page500/Page500.js | 97 +- src/views/pages/register/Register.js | 197 ++- src/views/theme/colors/Colors.js | 197 +-- src/views/theme/index.js | 4 + src/views/theme/typography/Typography.js | 353 ++--- src/views/widgets/Widgets.js | 1030 ++++----------- src/views/widgets/WidgetsBrand.js | 308 ++--- src/views/widgets/WidgetsDropdown.js | 573 +++------ 75 files changed, 7556 insertions(+), 12424 deletions(-) delete mode 100644 src/components/AppSidebarNav.js delete mode 100644 src/components/header/AppHeaderDropdown.js delete mode 100644 src/components/header/index.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 create mode 100644 src/views/charts/index.js create mode 100644 src/views/forms/index.js create mode 100644 src/views/pages/index.js create mode 100644 src/views/theme/index.js diff --git a/package.json b/package.json index fccb0aebe9..ecfb30ff9f 100644 --- a/package.json +++ b/package.json @@ -19,13 +19,10 @@ "start": "vite" }, "dependencies": { - "@coreui/chartjs": "^4.1.0", - "@coreui/coreui": "^5.5.0", - "@coreui/icons": "^3.0.1", - "@coreui/icons-react": "^2.3.0", - "@coreui/react": "^5.9.2", - "@coreui/react-chartjs": "^3.0.0", - "@coreui/utils": "^2.0.2", + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.1", + "@mui/icons-material": "^7.3.7", + "@mui/material": "^7.3.7", "@popperjs/core": "^2.11.8", "chart.js": "^4.5.1", "classnames": "^2.5.1", @@ -35,8 +32,8 @@ "react-dom": "^19.2.3", "react-redux": "^9.2.0", "react-router-dom": "^7.11.0", - "redux": "5.0.1", - "simplebar-react": "^3.3.2" + "recharts": "^3.7.0", + "redux": "5.0.1" }, "devDependencies": { "@vitejs/plugin-react": "^5.1.2", diff --git a/src/App.js b/src/App.js index f5b22393e1..c4e2ba286d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,58 +1,65 @@ -import React, { Suspense, useEffect } from 'react' +import React, { Suspense, useEffect, useMemo } from 'react' import { HashRouter, Route, Routes } from 'react-router-dom' -import { useSelector } from 'react-redux' +import { useSelector, useDispatch } 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 Fade from '@mui/material/Fade' -import { CSpinner, useColorModes } from '@coreui/react' -import './scss/style.scss' +import { createAppTheme } from './theme' -// We use those styles to show code examples, you should remove them in your application. -import './scss/examples.scss' - -// Containers const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout')) -// Pages const Login = React.lazy(() => import('./views/pages/login/Login')) const Register = React.lazy(() => import('./views/pages/register/Register')) const Page404 = React.lazy(() => import('./views/pages/page404/Page404')) const Page500 = React.lazy(() => import('./views/pages/page500/Page500')) +const LoadingFallback = () => ( + + + + + +) + const App = () => { - const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme') + const dispatch = useDispatch() const storedTheme = useSelector((state) => state.theme) + const theme = useMemo(() => createAppTheme(storedTheme), [storedTheme]) + 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) + const themeParam = urlParams.get('theme') + if (themeParam && (themeParam === 'light' || themeParam === 'dark')) { + dispatch({ type: 'set', theme: themeParam }) } - - if (isColorModeSet()) { - return - } - - setColorMode(storedTheme) - }, []) // eslint-disable-line react-hooks/exhaustive-deps + }, [dispatch]) return ( - - - - - } - > - - } /> - } /> - } /> - } /> - } /> - - - + + + + }> + + } /> + } /> + } /> + } /> + } /> + + + + ) } diff --git a/src/_nav.js b/src/_nav.js index e43f1df1ee..7e153afffe 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -1,506 +1,228 @@ -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 PaletteIcon from '@mui/icons-material/Palette' +import TextFieldsIcon from '@mui/icons-material/TextFields' +import ExtensionIcon from '@mui/icons-material/Extension' +import SmartButtonIcon from '@mui/icons-material/SmartButton' +import DescriptionIcon from '@mui/icons-material/Description' +import BarChartIcon from '@mui/icons-material/BarChart' +import StarIcon from '@mui/icons-material/Star' +import NotificationsIcon from '@mui/icons-material/Notifications' +import WidgetsIcon from '@mui/icons-material/Widgets' +import ArticleIcon from '@mui/icons-material/Article' 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: PaletteIcon, }, { - component: CNavItem, name: 'Typography', to: '/theme/typography', - icon: , + icon: TextFieldsIcon, }, { - component: CNavTitle, - name: 'Components', + title: 'Components', }, { - component: CNavGroup, name: 'Base', to: '/base', - icon: , + icon: ExtensionIcon, items: [ + { name: 'Accordion', to: '/base/accordion' }, + { name: 'Breadcrumb', to: '/base/breadcrumbs' }, { - component: CNavItem, - name: 'Accordion', - to: '/base/accordion', - }, - { - component: CNavItem, - name: 'Breadcrumb', - to: '/base/breadcrumbs', - }, - { - component: CNavItem, - name: ( - - {'Calendar'} - - - ), + 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', - }, + external: true, + badge: { color: 'error', text: 'PRO' }, + }, + { 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' }, { - 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', - }, + external: true, + badge: { color: 'error', text: 'PRO' }, }, { - component: CNavItem, - name: ( - - {'Smart Table'} - - - ), + 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', + external: true, + badge: { color: 'error', text: 'PRO' }, }, + { name: 'Spinners', to: '/base/spinners' }, + { name: 'Tables', to: '/base/tables' }, + { name: 'Tabs', to: '/base/tabs' }, + { name: 'Tooltips', to: '/base/tooltips' }, { - component: CNavItem, - name: 'Tooltips', - to: '/base/tooltips', - }, - { - component: CNavItem, - name: ( - - {'Virtual Scroller'} - - - ), + name: 'Virtual Scroller', href: 'https://coreui.io/react/docs/components/virtual-scroller/', - badge: { - color: 'danger', - text: 'PRO', - }, + external: true, + badge: { color: 'error', text: 'PRO' }, }, ], }, { - component: CNavGroup, name: 'Buttons', to: '/buttons', - icon: , + icon: SmartButtonIcon, items: [ + { name: 'Buttons', to: '/buttons/buttons' }, + { name: 'Button groups', to: '/buttons/button-groups' }, + { name: 'Dropdowns', to: '/buttons/dropdowns' }, { - 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'} - - - ), + name: 'Loading Button', href: 'https://coreui.io/react/docs/components/loading-button/', - badge: { - color: 'danger', - text: 'PRO', - }, + external: true, + badge: { color: 'error', text: 'PRO' }, }, ], }, { - component: CNavGroup, name: 'Forms', - icon: , + icon: DescriptionIcon, items: [ { - component: CNavItem, - name: ( - - {'Autocomplete'} - - - ), + name: 'Autocomplete', href: 'https://coreui.io/react/docs/forms/autocomplete/', - badge: { - color: 'danger', - text: 'PRO', - }, + external: true, + badge: { color: 'error', text: 'PRO' }, }, + { name: 'Checks & Radios', to: '/forms/checks-radios' }, { - component: CNavItem, - name: 'Checks & Radios', - to: '/forms/checks-radios', - }, - { - component: CNavItem, - name: ( - - {'Date Picker'} - - - ), + name: 'Date Picker', href: 'https://coreui.io/react/docs/forms/date-picker/', - badge: { - color: 'danger', - text: 'PRO', - }, + external: true, + badge: { color: 'error', 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', + external: true, + badge: { color: 'error', text: 'PRO' }, }, + { name: 'Floating Labels', to: '/forms/floating-labels' }, + { name: 'Form Control', to: '/forms/form-control' }, + { name: 'Input Group', to: '/forms/input-group' }, { - component: CNavItem, - name: 'Input Group', - to: '/forms/input-group', - }, - { - component: CNavItem, - name: ( - - {'Multi Select'} - - - ), + name: 'Multi Select', href: 'https://coreui.io/react/docs/forms/multi-select/', - badge: { - color: 'danger', - text: 'PRO', - }, + external: true, + badge: { color: 'error', text: 'PRO' }, }, { - component: CNavItem, - name: ( - - {'OTP Input'} - - - ), + name: 'OTP Input', href: 'https://coreui.io/react/docs/forms/one-time-password-input/', - badge: { - color: 'danger', - text: 'PRO', - }, + external: true, + badge: { color: 'error', text: 'PRO' }, }, { - component: CNavItem, - name: ( - - {'Password Input'} - - - ), + name: 'Password Input', href: 'https://coreui.io/react/docs/forms/password-input/', - badge: { - color: 'danger', - text: 'PRO', - }, + external: true, + badge: { color: 'error', text: 'PRO' }, }, + { name: 'Range', to: '/forms/range' }, { - component: CNavItem, - name: 'Range', - to: '/forms/range', - }, - { - component: CNavItem, - name: ( - - {'Range Slider'} - - - ), + name: 'Range Slider', href: 'https://coreui.io/react/docs/forms/range-slider/', - badge: { - color: 'danger', - text: 'PRO', - }, + external: true, + badge: { color: 'error', text: 'PRO' }, }, { - component: CNavItem, - name: ( - - {'Rating'} - - - ), + name: 'Rating', href: 'https://coreui.io/react/docs/forms/rating/', - badge: { - color: 'danger', - text: 'PRO', - }, + external: true, + badge: { color: 'error', text: 'PRO' }, }, + { name: 'Select', to: '/forms/select' }, { - component: CNavItem, - name: 'Select', - to: '/forms/select', - }, - { - component: CNavItem, - name: ( - - {'Stepper'} - - - ), + name: 'Stepper', href: 'https://coreui.io/react/docs/forms/stepper/', - badge: { - color: 'danger', - text: 'PRO', - }, + external: true, + badge: { color: 'error', text: 'PRO' }, }, { - component: CNavItem, - name: ( - - {'Time Picker'} - - - ), + 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', + external: true, + badge: { color: 'error', text: 'PRO' }, }, + { name: 'Layout', to: '/forms/layout' }, + { name: 'Validation', to: '/forms/validation' }, ], }, { - component: CNavItem, name: 'Charts', to: '/charts', - icon: , + icon: BarChartIcon, }, { - component: CNavGroup, name: 'Icons', - icon: , + icon: StarIcon, 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', - }, + { name: 'CoreUI Free', to: '/icons/coreui-icons' }, + { name: 'CoreUI Flags', to: '/icons/flags' }, + { name: 'CoreUI Brands', to: '/icons/brands' }, ], }, { - 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: WidgetsIcon, 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: , + icon: ArticleIcon, + external: true, }, ] diff --git a/src/components/AppBreadcrumb.js b/src/components/AppBreadcrumb.js index d37de8ce9b..90d13b2596 100644 --- a/src/components/AppBreadcrumb.js +++ b/src/components/AppBreadcrumb.js @@ -1,15 +1,16 @@ import React from 'react' -import { useLocation } from 'react-router-dom' +import { useLocation, Link as RouterLink } from 'react-router-dom' +import { Breadcrumbs, Link, Typography, Box } from '@mui/material' +import NavigateNextIcon from '@mui/icons-material/NavigateNext' +import HomeIcon from '@mui/icons-material/Home' import routes from '../routes' -import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react' - const AppBreadcrumb = () => { const currentLocation = useLocation().pathname - const getRouteName = (pathname, routes) => { - const currentRoute = routes.find((route) => route.path === pathname) + const getRouteName = (pathname, routesList) => { + const currentRoute = routesList.find((route) => route.path === pathname) return currentRoute ? currentRoute.name : false } @@ -18,12 +19,13 @@ const AppBreadcrumb = () => { location.split('/').reduce((prev, curr, index, array) => { const currentPathname = `${prev}/${curr}` const routeName = getRouteName(currentPathname, routes) - routeName && + if (routeName) { breadcrumbs.push({ pathname: currentPathname, name: routeName, - active: index + 1 === array.length ? true : false, + active: index + 1 === array.length, }) + } return currentPathname }) return breadcrumbs @@ -32,19 +34,56 @@ const AppBreadcrumb = () => { const breadcrumbs = getBreadcrumbs(currentLocation) return ( - - Home - {breadcrumbs.map((breadcrumb, index) => { - return ( - } + aria-label="breadcrumb" + sx={{ + '& .MuiBreadcrumbs-separator': { + mx: 0.5, + }, + }} + > + + + Home + + {breadcrumbs.map((breadcrumb, index) => + breadcrumb.active ? ( + + {breadcrumb.name} + + ) : ( + {breadcrumb.name} - - ) - })} - + + ), + )} + ) } diff --git a/src/components/AppContent.js b/src/components/AppContent.js index b9a39ef505..ca60fa7ee1 100644 --- a/src/components/AppContent.js +++ b/src/components/AppContent.js @@ -1,14 +1,29 @@ import React, { Suspense } from 'react' import { Navigate, Route, Routes } from 'react-router-dom' -import { CContainer, CSpinner } from '@coreui/react' +import { Box, CircularProgress, Container, Fade } from '@mui/material' -// routes config import routes from '../routes' +const LoadingSpinner = () => ( + + + + + +) + const AppContent = () => { return ( - - }> + + }> {routes.map((route, idx) => { return ( @@ -26,7 +41,7 @@ const AppContent = () => { } /> - + ) } diff --git a/src/components/AppFooter.js b/src/components/AppFooter.js index 217c5a04c3..fa10e8c728 100644 --- a/src/components/AppFooter.js +++ b/src/components/AppFooter.js @@ -1,22 +1,54 @@ import React from 'react' -import { CFooter } from '@coreui/react' +import { Box, Typography, Link, useTheme } from '@mui/material' const AppFooter = () => { + const theme = useTheme() + return ( - -
- - CoreUI - - © 2025 creativeLabs. -
- - + + + + MUI Admin + + + © 2025 creativeLabs. + + + + Powered by{' '} + + Material UI React Admin Template + + + ) } diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js index 534dadaa89..15f294a10c 100644 --- a/src/components/AppHeader.js +++ b/src/components/AppHeader.js @@ -1,143 +1,340 @@ -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 { AppBreadcrumb } from './index' -import { AppHeaderDropdown } from './header/index' + AppBar, + Toolbar, + IconButton, + Typography, + Box, + Button, + Menu, + MenuItem, + Avatar, + Tooltip, + Badge, + Divider, + ListItemIcon, + useTheme, + alpha, + Fade, +} from '@mui/material' +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 PersonIcon from '@mui/icons-material/Person' +import SettingsIcon from '@mui/icons-material/Settings' +import PaymentIcon from '@mui/icons-material/Payment' +import AssignmentIcon from '@mui/icons-material/Assignment' +import LogoutIcon from '@mui/icons-material/Logout' +import LockIcon from '@mui/icons-material/Lock' -const AppHeader = () => { - const headerRef = useRef() - const { colorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme') +import AppBreadcrumb from './AppBreadcrumb' +import { drawerWidth, collapsedDrawerWidth } from '../theme' +const AppHeader = () => { const dispatch = useDispatch() + const theme = useTheme() const sidebarShow = useSelector((state) => state.sidebarShow) + const sidebarUnfoldable = useSelector((state) => state.sidebarUnfoldable) + const currentTheme = useSelector((state) => state.theme) - useEffect(() => { - const handleScroll = () => { - headerRef.current && - headerRef.current.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0) - } + const [themeAnchorEl, setThemeAnchorEl] = React.useState(null) + const [profileAnchorEl, setProfileAnchorEl] = React.useState(null) + + const currentDrawerWidth = sidebarUnfoldable ? collapsedDrawerWidth : drawerWidth + + const handleThemeMenuOpen = (event) => { + setThemeAnchorEl(event.currentTarget) + } + + const handleThemeMenuClose = () => { + setThemeAnchorEl(null) + } - document.addEventListener('scroll', handleScroll) - return () => document.removeEventListener('scroll', handleScroll) - }, []) + const handleProfileMenuOpen = (event) => { + setProfileAnchorEl(event.currentTarget) + } + + const handleProfileMenuClose = () => { + setProfileAnchorEl(null) + } + + const handleThemeChange = (newTheme) => { + dispatch({ type: 'set', theme: newTheme }) + handleThemeMenuClose() + } + + const toggleSidebar = () => { + dispatch({ type: 'set', sidebarShow: !sidebarShow }) + } + + const getThemeIcon = () => { + switch (currentTheme) { + case 'dark': + return + case 'auto': + return + default: + return + } + } return ( - - - dispatch({ type: 'set', sidebarShow: !sidebarShow })} - style={{ marginInlineStart: '-14px' }} + + + - - - - - - Dashboard - - - - Users - - - Settings - - - - - - - - - - - - - - - - - - - - -
  • -
    -
    • - - - {colorMode === 'dark' ? ( - - ) : colorMode === 'auto' ? ( - - ) : ( - - )} - - - setColorMode('light')} - > - Light - - setColorMode('dark')} - > - Dark - - setColorMode('auto')} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {getThemeIcon()} + + + + + handleThemeChange('light')} + selected={currentTheme === 'light'} + > + + + + Light + + handleThemeChange('dark')} selected={currentTheme === 'dark'}> + + + + Dark + + + + + + + + - Auto - - - -
  • -
    -
    • - -     -     - + A + + + + + + + + Admin User + + + admin@example.com + + + + + + + + Profile + + + + + + Settings + + + + + + Payments + + + + + + Projects + + + + + + + Lock Account + + + + + + Logout + + + + + + - -     + + ) } diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js index 021cb52c34..ddbcc923c8 100644 --- a/src/components/AppSidebar.js +++ b/src/components/AppSidebar.js @@ -1,58 +1,381 @@ -import React from 'react' +import React, { useState } from 'react' import { useSelector, useDispatch } from 'react-redux' - +import { NavLink, useLocation } from 'react-router-dom' import { - CCloseButton, - CSidebar, - CSidebarBrand, - CSidebarFooter, - CSidebarHeader, - CSidebarToggler, -} from '@coreui/react' -import CIcon from '@coreui/icons-react' + Box, + Drawer, + List, + ListItem, + ListItemButton, + ListItemIcon, + ListItemText, + Collapse, + Typography, + Chip, + IconButton, + Divider, + useTheme, + useMediaQuery, + Fade, + alpha, +} from '@mui/material' +import ExpandLess from '@mui/icons-material/ExpandLess' +import ExpandMore from '@mui/icons-material/ExpandMore' +import ChevronLeftIcon from '@mui/icons-material/ChevronLeft' +import OpenInNewIcon from '@mui/icons-material/OpenInNew' +import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord' -import { AppSidebarNav } from './AppSidebarNav' +import navigation from '../_nav' +import { drawerWidth, collapsedDrawerWidth } from '../theme' -import { logo } from 'src/assets/brand/logo' -import { sygnet } from 'src/assets/brand/sygnet' +const NavItem = ({ item, depth = 0, collapsed }) => { + const location = useLocation() + const theme = useTheme() + const isActive = item.to && location.pathname === item.to -// sidebar nav config -import navigation from '../_nav' + const handleClick = () => { + if (item.href) { + window.open(item.href, '_blank', 'noopener,noreferrer') + } + } + + const content = ( + + {item.icon && ( + + + + )} + {!item.icon && depth > 0 && ( + + + + )} + + + + {!collapsed && item.external && ( + + )} + {!collapsed && item.badge && ( + + )} + + ) + + return {content} +} + +const NavGroup = ({ item, collapsed }) => { + const [open, setOpen] = useState(false) + const location = useLocation() + const theme = useTheme() + + const isChildActive = item.items?.some( + (child) => + child.to === location.pathname || + child.items?.some((grandChild) => grandChild.to === location.pathname), + ) + + const handleToggle = () => { + if (!collapsed) { + setOpen(!open) + } + } + + return ( + <> + + + {item.icon && ( + + + + )} + + + + {!collapsed && (open ? : )} + + + + + {item.items?.map((subItem, index) => + subItem.items ? ( + + ) : ( + + ), + )} + + + + ) +} + +const NavTitle = ({ item, collapsed }) => { + const theme = useTheme() + + if (collapsed) return null + + return ( + + + {item.title} + + + ) +} const AppSidebar = () => { const dispatch = useDispatch() - const unfoldable = useSelector((state) => state.sidebarUnfoldable) + const theme = useTheme() + const isMobile = useMediaQuery(theme.breakpoints.down('lg')) const sidebarShow = useSelector((state) => state.sidebarShow) + const sidebarUnfoldable = useSelector((state) => state.sidebarUnfoldable) + + const collapsed = !isMobile && sidebarUnfoldable + const currentDrawerWidth = collapsed ? collapsedDrawerWidth : drawerWidth + + const handleClose = () => { + dispatch({ type: 'set', sidebarShow: false }) + } + + const drawerContent = ( + + + + + MUI Admin + + + {isMobile && ( + + + + )} + + + + + {navigation.map((item, index) => { + if (item.title) { + return + } + if (item.items) { + return + } + return + })} + + + + + + dispatch({ type: 'set', sidebarUnfoldable: !sidebarUnfoldable })} + sx={{ + display: { xs: 'none', lg: 'flex' }, + transition: theme.transitions.create('transform'), + transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)', + }} + > + + + + + ) 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 deleted file mode 100644 index 7583abf49e..0000000000 --- a/src/components/AppSidebarNav.js +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react' -import { NavLink } from 'react-router-dom' -import PropTypes from 'prop-types' - -import SimpleBar from 'simplebar-react' -import 'simplebar-react/dist/simplebar.min.css' - -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 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 navGroup = (item, index) => { - const { component, name, icon, items, to, ...rest } = item - const Component = component - return ( - - {items?.map((item, index) => - item.items ? navGroup(item, index) : navItem(item, index, true), - )} - - ) - } - - return ( - - {items && - items.map((item, index) => (item.items ? navGroup(item, index) : navItem(item, index)))} - - ) -} - -AppSidebarNav.propTypes = { - items: PropTypes.arrayOf(PropTypes.any).isRequired, -} diff --git a/src/components/DocsComponents.js b/src/components/DocsComponents.js index b0968b8fe6..e08dfdfd3f 100644 --- a/src/components/DocsComponents.js +++ b/src/components/DocsComponents.js @@ -1,43 +1,63 @@ import PropTypes from 'prop-types' import React from 'react' +import { Box, Typography, Button, Paper, Grid, alpha, useTheme } from '@mui/material' +import OpenInNewIcon from '@mui/icons-material/OpenInNew' 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. -
    - -
    -
    -) +const DocsComponents = (props) => { + const theme = useTheme() + + return ( + + + + + + + + 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, diff --git a/src/components/DocsExample.js b/src/components/DocsExample.js index 2adedad493..bcb143b538 100644 --- a/src/components/DocsExample.js +++ b/src/components/DocsExample.js @@ -1,36 +1,54 @@ import PropTypes from 'prop-types' import React from 'react' -import { CNav, CNavItem, CNavLink, CTabContent, CTabPane } from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { cilCode, cilMediaPlay } from '@coreui/icons' +import { Box, Paper, Tabs, Tab, Link, useTheme } from '@mui/material' +import PlayArrowIcon from '@mui/icons-material/PlayArrow' +import CodeIcon from '@mui/icons-material/Code' const DocsExample = (props) => { const { children, href, tabContentClassName } = props + const theme = useTheme() - const _href = `https://coreui.io/react/docs/${href}` + const _href = `https://mui.com/material-ui/${href || ''}` return ( -
    - - - - - Preview - - - - - - Code - - - - - - {children} - - -
    + + + + } + iconPosition="start" + label="Preview" + sx={{ textTransform: 'none', minHeight: 48 }} + /> + } + iconPosition="start" + label="Code" + component={Link} + href={_href} + target="_blank" + rel="noopener noreferrer" + sx={{ textTransform: 'none', minHeight: 48 }} + /> + + + + {children} + + ) } diff --git a/src/components/DocsIcons.js b/src/components/DocsIcons.js index e3fab60a72..ab4c2afd0f 100644 --- a/src/components/DocsIcons.js +++ b/src/components/DocsIcons.js @@ -1,31 +1,52 @@ import React from 'react' +import { Box, Typography, Button, Paper, Grid, alpha, useTheme } from '@mui/material' +import OpenInNewIcon from '@mui/icons-material/OpenInNew' 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. -
    - -
    -
    -) +const DocsIcons = () => { + const theme = useTheme() + + return ( + + + + + + + + Material UI Icons package is delivered with more than 2000 icons in multiple formats. + MUI Icons are beautifully crafted symbols for common actions and items. You can use them + in your digital products for web or mobile app. For more information please visit our + documentation. + + + + + + + + ) +} export default DocsIcons diff --git a/src/components/DocsLink.js b/src/components/DocsLink.js index 7c72aa1284..cd2914cf0d 100644 --- a/src/components/DocsLink.js +++ b/src/components/DocsLink.js @@ -1,24 +1,27 @@ import PropTypes from 'prop-types' import React from 'react' -import { CLink } from '@coreui/react' +import { Box, Link, Typography } from '@mui/material' const DocsLink = (props) => { const { href, name, text, ...rest } = props - const _href = name ? `https://coreui.io/react/docs/components/${name}` : href + const _href = name ? `https://mui.com/material-ui/${name}` : href return ( -
    - + - {text || 'docs'} - -
    + + {text || 'docs'} + + + ) } diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js deleted file mode 100644 index 30c0df82ba..0000000000 --- a/src/components/header/AppHeaderDropdown.js +++ /dev/null @@ -1,96 +0,0 @@ -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 avatar8 from './../../assets/images/avatars/8.jpg' - -const AppHeaderDropdown = () => { - return ( - - - - - - Account - - - Updates - - 42 - - - - - Messages - - 42 - - - - - Tasks - - 42 - - - - - Comments - - 42 - - - Settings - - - Profile - - - - Settings - - - - Payments - - 42 - - - - - Projects - - 42 - - - - - - Lock Account - - - - ) -} - -export default AppHeaderDropdown diff --git a/src/components/header/index.js b/src/components/header/index.js deleted file mode 100644 index bf8af6c1cc..0000000000 --- a/src/components/header/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import AppHeaderDropdown from './AppHeaderDropdown' - -export { AppHeaderDropdown } diff --git a/src/components/index.js b/src/components/index.js index 93fb52c43a..edf69d02fa 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -2,7 +2,6 @@ import AppBreadcrumb from './AppBreadcrumb' import AppContent from './AppContent' 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' @@ -14,7 +13,6 @@ export { AppContent, AppFooter, AppHeader, - AppHeaderDropdown, AppSidebar, DocsComponents, DocsIcons, diff --git a/src/layout/DefaultLayout.js b/src/layout/DefaultLayout.js index 19fbf225fd..81b9c179ca 100644 --- a/src/layout/DefaultLayout.js +++ b/src/layout/DefaultLayout.js @@ -1,18 +1,45 @@ import React from 'react' +import { useSelector } from 'react-redux' +import { Box, useTheme, useMediaQuery } from '@mui/material' + import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index' +import { drawerWidth, collapsedDrawerWidth } from '../theme' const DefaultLayout = () => { + const theme = useTheme() + const isMobile = useMediaQuery(theme.breakpoints.down('lg')) + const sidebarUnfoldable = useSelector((state) => state.sidebarUnfoldable) + + const currentDrawerWidth = sidebarUnfoldable ? collapsedDrawerWidth : drawerWidth + return ( -
    + -
    + -
    + -
    +     -
    -
    + + ) } 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..cc43185871 100644 --- a/src/store.js +++ b/src/store.js @@ -2,6 +2,7 @@ import { legacy_createStore as createStore } from 'redux' const initialState = { sidebarShow: true, + sidebarUnfoldable: false, theme: 'light', } diff --git a/src/theme.js b/src/theme.js new file mode 100644 index 0000000000..5a43681e21 --- /dev/null +++ b/src/theme.js @@ -0,0 +1,234 @@ +import { createTheme, alpha } from '@mui/material/styles' + +const getDesignTokens = (mode) => ({ + palette: { + mode, + ...(mode === 'light' + ? { + primary: { + main: '#321fdb', + light: '#5c4de0', + dark: '#2316a0', + contrastText: '#ffffff', + }, + secondary: { + main: '#9da5b1', + light: '#b1b7c1', + dark: '#6c757d', + contrastText: '#ffffff', + }, + success: { + main: '#2eb85c', + light: '#51c97a', + dark: '#1f9d4a', + contrastText: '#ffffff', + }, + info: { + main: '#39f', + light: '#66b0ff', + dark: '#0066cc', + contrastText: '#ffffff', + }, + warning: { + main: '#f9b115', + light: '#fac043', + dark: '#c78c0e', + contrastText: '#000000', + }, + error: { + main: '#e55353', + light: '#ea7575', + dark: '#b83c3c', + contrastText: '#ffffff', + }, + background: { + default: '#ebedef', + paper: '#ffffff', + }, + text: { + primary: '#3c4b64', + secondary: '#768192', + }, + divider: 'rgba(0, 0, 21, 0.125)', + } + : { + primary: { + main: '#6c5dd3', + light: '#8a7fdc', + dark: '#4d42a3', + contrastText: '#ffffff', + }, + secondary: { + main: '#9da5b1', + light: '#b1b7c1', + dark: '#6c757d', + contrastText: '#ffffff', + }, + success: { + main: '#2eb85c', + light: '#51c97a', + dark: '#1f9d4a', + contrastText: '#ffffff', + }, + info: { + main: '#39f', + light: '#66b0ff', + dark: '#0066cc', + contrastText: '#ffffff', + }, + warning: { + main: '#f9b115', + light: '#fac043', + dark: '#c78c0e', + contrastText: '#000000', + }, + error: { + main: '#e55353', + light: '#ea7575', + dark: '#b83c3c', + contrastText: '#ffffff', + }, + background: { + default: '#1a1a2e', + paper: '#212631', + }, + text: { + primary: '#ffffff', + secondary: 'rgba(255, 255, 255, 0.7)', + }, + divider: 'rgba(255, 255, 255, 0.12)', + }), + }, + typography: { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + h1: { + fontSize: '2.5rem', + fontWeight: 500, + }, + h2: { + fontSize: '2rem', + fontWeight: 500, + }, + h3: { + fontSize: '1.75rem', + fontWeight: 500, + }, + h4: { + fontSize: '1.5rem', + fontWeight: 500, + }, + h5: { + fontSize: '1.25rem', + fontWeight: 500, + }, + h6: { + fontSize: '1rem', + fontWeight: 500, + }, + }, + shape: { + borderRadius: 8, + }, + components: { + MuiButton: { + styleOverrides: { + root: { + textTransform: 'none', + fontWeight: 500, + }, + }, + defaultProps: { + disableElevation: true, + }, + }, + MuiCard: { + styleOverrides: { + root: { + backgroundImage: 'none', + }, + }, + }, + MuiPaper: { + styleOverrides: { + root: { + backgroundImage: 'none', + }, + }, + }, + MuiDrawer: { + styleOverrides: { + paper: { + borderRight: 'none', + }, + }, + }, + MuiAppBar: { + styleOverrides: { + root: { + backgroundImage: 'none', + }, + }, + }, + MuiListItemButton: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + marginBottom: 4, + '&.Mui-selected': { + backgroundColor: alpha(theme.palette.primary.main, 0.12), + '&:hover': { + backgroundColor: alpha(theme.palette.primary.main, 0.18), + }, + }, + }), + }, + }, + MuiTableCell: { + styleOverrides: { + head: { + fontWeight: 600, + }, + }, + }, + MuiChip: { + styleOverrides: { + root: { + fontWeight: 500, + }, + }, + }, + MuiTextField: { + defaultProps: { + variant: 'outlined', + size: 'small', + }, + }, + MuiSkeleton: { + defaultProps: { + animation: 'wave', + }, + }, + }, + transitions: { + duration: { + shortest: 150, + shorter: 200, + short: 250, + standard: 300, + complex: 375, + enteringScreen: 225, + leavingScreen: 195, + }, + easing: { + easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)', + easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)', + easeIn: 'cubic-bezier(0.4, 0, 1, 1)', + sharp: 'cubic-bezier(0.4, 0, 0.6, 1)', + }, + }, +}) + +export const createAppTheme = (mode) => createTheme(getDesignTokens(mode)) + +export const drawerWidth = 256 +export const collapsedDrawerWidth = 64 diff --git a/src/views/base/accordion/Accordion.js b/src/views/base/accordion/Accordion.js index edcb5e7aeb..bcae162e38 100644 --- a/src/views/base/accordion/Accordion.js +++ b/src/views/base/accordion/Accordion.js @@ -1,177 +1,208 @@ import React from 'react' import { - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CAccordion, - CAccordionBody, - CAccordionHeader, - CAccordionItem, -} from '@coreui/react' + Accordion as MuiAccordion, + AccordionSummary, + AccordionDetails, + Card, + CardContent, + CardHeader, + Typography, + Grid, +} from '@mui/material' +import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import { DocsComponents, DocsExample } from 'src/components' const Accordion = () => { + const [expanded, setExpanded] = React.useState('panel2') + const [multiExpanded, setMultiExpanded] = React.useState(['panel1']) + + const handleChange = (panel) => (event, isExpanded) => { + setExpanded(isExpanded ? panel : false) + } + + const handleMultiChange = (panel) => (event, isExpanded) => { + if (isExpanded) { + setMultiExpanded([...multiExpanded, panel]) + } else { + setMultiExpanded(multiExpanded.filter((p) => p !== panel)) + } + } + return ( - - + + - - - React Accordion - - -

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

    + - - - Accordion Item #1 - - This is the first item's accordion body. It is hidden by - 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 + + }> + 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 #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. - - - + style each element. + + + + + }> + Accordion Item #2 + + + + This is the second item's accordion body. It is hidden by + default, until the collapse plugin adds the appropriate classes. + + + + + }> + Accordion Item #3 + + + + This is the third item's accordion body. It is hidden by + default, until the collapse plugin adds the appropriate classes. + + + -     -     - - - React Accordion Flush - - -

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

    + + + + + + React Accordion{' '} + + Flush + + + } + /> + + + Use disableGutters and square props to remove padding and + rounded corners. + - - - 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. + + + + + }> + Accordion Item #2 + + + + This is the second item's accordion body. + + + + + }> + Accordion Item #3 + + + + This is the third item's accordion body. + + + -     -     - - - React Accordion Always open - - -

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

    + + + + + + React Accordion{' '} + + Always open + + + } + /> + + + Control each accordion independently to allow multiple panels to stay open. + - - - 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. + + + + + }> + Accordion Item #2 + + + + This is the second item's accordion body. + + + + + }> + Accordion Item #3 + + + + This is the third item's accordion body. + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/base/breadcrumbs/Breadcrumbs.js index 3e1df44754..dbf1c456e1 100644 --- a/src/views/base/breadcrumbs/Breadcrumbs.js +++ b/src/views/base/breadcrumbs/Breadcrumbs.js @@ -1,74 +1,89 @@ import React from 'react' import { - CBreadcrumb, - CBreadcrumbItem, - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CLink, -} from '@coreui/react' + Breadcrumbs as MuiBreadcrumbs, + Card, + CardContent, + CardHeader, + Typography, + Grid, + Link, +} from '@mui/material' +import NavigateNextIcon from '@mui/icons-material/NavigateNext' import { DocsComponents, DocsExample } from 'src/components' 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 - + + + + + Breadcrumbs} /> + + + + + Home + + + + + Home + + Library + + + + Home + + + Library + + Data + -     -     -     -     + + + + + + Breadcrumbs{' '} + + Custom separator + + + } + /> + + + + + Home + + + Library + + Data + + } + aria-label="breadcrumb" + sx={{ mt: 2 }} + > + + Home + + + Library + + Data + + + + + + ) } diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js index daf44f60ef..ddd1ae43fd 100644 --- a/src/views/base/cards/Cards.js +++ b/src/views/base/cards/Cards.js @@ -1,934 +1,222 @@ 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' + Card, + CardContent, + CardHeader, + CardMedia, + CardActions, + Typography, + Grid, + Button, + Box, + Divider, + List, + ListItem, + ListItemText, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' -import ReactImg from 'src/assets/images/react.jpg' - 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 - - - - - -     -     -     -     + + + + + + + + Card title + + + Some quick example text to build on the card title and make up the bulk of the + card's content. + + + + + + + + + + + + + Card title + + + Card subtitle + + + 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. + + + + + + + + + + + + + + + + + + + + + Card Variants} /> + + + + + + + + + Some quick example text to build on the card title. + + + + + + + + + + Some quick example text to build on the card title. + + + + + + + + + + Some quick example text to build on the card title. + + + + + + + + + + Some quick example text to build on the card title. + + + + + + + + + + Some quick example text to build on the card title. + + + + + + + + + + Some quick example text to build on the card title. + + + + + + + + + + + + + Outlined Cards} /> + + + + + + + + + Some quick example text to build on the card title. + + + + + + + + + + Some quick example text to build on the card title. + + + + + + + + + + Some quick example text to build on the card title. + + + + + + + + + + Some quick example text to build on the card title. + + + + + + + + + + ) } diff --git a/src/views/base/carousels/Carousels.js b/src/views/base/carousels/Carousels.js index 6d8763902d..2f0fef8657 100644 --- a/src/views/base/carousels/Carousels.js +++ b/src/views/base/carousels/Carousels.js @@ -1,212 +1,163 @@ -import React from 'react' +import React, { useState } from 'react' import { - CCard, - CCardBody, - CCardHeader, - CCarousel, - CCarouselCaption, - CCarouselItem, - CCol, - CRow, -} from '@coreui/react' + Card, + CardContent, + CardHeader, + Typography, + Grid, + Box, + IconButton, + MobileStepper, + Button, +} from '@mui/material' +import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft' +import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight' import { DocsComponents, DocsExample } from 'src/components' -import AngularImg from 'src/assets/images/angular.jpg' -import ReactImg from 'src/assets/images/react.jpg' -import VueImg from 'src/assets/images/vue.jpg' - -const slidesLight = [ - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23AAA%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23F5F5F5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23BBB%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23EEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23E5E5E5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', +const images = [ + { label: 'First slide', imgPath: 'https://picsum.photos/800/400?random=1' }, + { label: 'Second slide', imgPath: 'https://picsum.photos/800/400?random=2' }, + { label: 'Third slide', imgPath: 'https://picsum.photos/800/400?random=3' }, ] const Carousels = () => { + const [activeStep, setActiveStep] = useState(0) + const maxSteps = images.length + + const handleNext = () => { + setActiveStep((prevActiveStep) => prevActiveStep + 1) + } + + const handleBack = () => { + setActiveStep((prevActiveStep) => prevActiveStep - 1) + } + return ( - - + + - - - Carousel Slide only - - -

    Here’s a carousel with slides

    + + Carousel} /> + + + A slideshow component for cycling through elements—images or slides of text. + - - - 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 - - + + + + Next + + + } + backButton={ + + } + /> + -     -     -     - - - - 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.

    -     -     -     + + + + + + Carousel{' '} + + with captions + + + } + /> + + + + + + + {images[activeStep].label} + + Some representative placeholder content for slide {activeStep + 1}. + + + + + Next + + + } + backButton={ + + } + /> + -     -     -     -     + + + + ) } diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js index d36f48f4a5..5a7075aa87 100644 --- a/src/views/base/collapses/Collapses.js +++ b/src/views/base/collapses/Collapses.js @@ -1,135 +1,143 @@ import React, { useState } from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CCollapse, CRow } from '@coreui/react' +import { + Card, + CardContent, + CardHeader, + Typography, + Grid, + Button, + Collapse, + Box, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' 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) + const [multiOpen, setMultiOpen] = useState({ first: false, second: false }) return ( - - + + - - - React Collapse - - -

    You can use a link or a button component.

    + + Collapse} /> + + + Toggle the visibility of content with a collapse transition. + - { - 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. - - - + + + + + + Some placeholder content for the collapse component. This panel is hidden by + default but revealed when the user activates the relevant trigger. + + + + -     -     -     - - - - React Collapse Horizontal - - -

    You can use a link or a button component.

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

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

    + + + + + + Collapse{' '} + + Multiple targets + + + } + /> + - 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. - - - - - + + + + + + + + + + + + Some placeholder content for the first collapse component. + + + + + + + + + + + Some placeholder content for the second collapse component. + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/index.js b/src/views/base/index.js index 2b7656c825..a597bacdc9 100644 --- a/src/views/base/index.js +++ b/src/views/base/index.js @@ -1,31 +1,33 @@ -import Breadcrumbs from './Breadcrumbs' -import Cards from './Cards' -import Carousels from './Carousels' -import Collapses from './Collapses' -import Dropdowns from './Dropdowns' -import Jumbotrons from './Jumbotrons' -import ListGroups from './ListGroups' -import Navbars from './Navbars' -import Navs from './Navs' -import Paginations from './Paginations' -import Popovers from './Popovers' -import ProgressBar from './ProgressBar' -import Tabs from './Tabs' -import Tooltips from './Tooltips' +import Accordion from './accordion/Accordion' +import Breadcrumbs from './breadcrumbs/Breadcrumbs' +import Cards from './cards/Cards' +import Carousels from './carousels/Carousels' +import Collapses from './collapses/Collapses' +import ListGroups from './list-groups/ListGroups' +import Navs from './navs/Navs' +import Paginations from './paginations/Paginations' +import Placeholders from './placeholders/Placeholders' +import Popovers from './popovers/Popovers' +import Progress from './progress/Progress' +import Spinners from './spinners/Spinners' +import Tables from './tables/Tables' +import Tabs from './tabs/Tabs' +import Tooltips from './tooltips/Tooltips' export { + Accordion, Breadcrumbs, Cards, Carousels, Collapses, - Dropdowns, - Jumbotrons, ListGroups, - Navbars, Navs, + Paginations, + Placeholders, Popovers, - ProgressBar, + Progress, + Spinners, + Tables, Tabs, Tooltips, - Paginations, } diff --git a/src/views/base/list-groups/ListGroups.js b/src/views/base/list-groups/ListGroups.js index a25e8bd6ef..84455dc1c8 100644 --- a/src/views/base/list-groups/ListGroups.js +++ b/src/views/base/list-groups/ListGroups.js @@ -1,346 +1,186 @@ import React from 'react' import { - CBadge, - CCard, - CCardBody, - CCardHeader, - CCol, - CFormCheck, - CListGroup, - CListGroupItem, - CRow, -} from '@coreui/react' + Card, + CardContent, + CardHeader, + Typography, + Grid, + List, + ListItem, + ListItemText, + ListItemButton, + ListItemIcon, + Divider, + Badge, + Chip, +} from '@mui/material' +import InboxIcon from '@mui/icons-material/Inbox' +import DraftsIcon from '@mui/icons-material/Drafts' import { DocsComponents, DocsExample } from 'src/components' 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 - + + + + + List Group} /> + + + + + + + + + + + + + + + + + + + + + + + -     -     -     - - - - 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 - - - + + + + + + List Group{' '} + + Active items + + + } + /> + + + + + + + + + + + + + + + + + + + + + + + -     -     -     - - - - 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. -     -     + + + + + + List Group{' '} + + With icons + + + } + /> + + + + + + + + + + + + + + + + + -     -     -     - - - - React List Group Checkboxes and radios - - -

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

    - - - - - - - - - - - - - - - - - - + + + + + + List Group{' '} + + With badges + + + } + /> + + + + }> + + + + }> + + + + }> + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/navs/Navs.js b/src/views/base/navs/Navs.js index 052ed6fc5c..199eb0ec48 100644 --- a/src/views/base/navs/Navs.js +++ b/src/views/base/navs/Navs.js @@ -1,397 +1,125 @@ -import React from 'react' -import { - CRow, - CCol, - CCard, - CCardBody, - CCardHeader, - CDropdown, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CNav, - CNavItem, - CNavLink, -} from '@coreui/react' +import React, { useState } from 'react' +import { Card, CardContent, CardHeader, Typography, Grid, Tabs, Tab, Box } from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' const Navs = () => { + const [value, setValue] = useState(0) + + const handleChange = (event, newValue) => { + setValue(newValue) + } + 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 - - - + + + + + Navigation Tabs} /> + + + + + + + + + + -     -     -     - - - - 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 - - + + + + + + Navigation{' '} + + Centered + + + } + /> + + + + + + + + + + -     -     -     - - - - React Navs Tabs with dropdowns - - - - - - - Active - - - - Dropdown button - - Action - Another action - Something else here - - - - Link - - - - Disabled - - - + + + + + + Navigation{' '} + + Vertical + + + } + /> + + + + + + + + + + Tab content {value + 1} + + - - - - - - - React Navs Pills with dropdowns - - - - - - - Active - - - - Dropdown button - - Action - Another action - Something else here - - - - Link - - - - Disabled - - - + + + + + + Navigation{' '} + + Scrollable + + + } + /> + + + + + + + + + + + + + - - - -     + + + + ) } diff --git a/src/views/base/paginations/Paginations.js b/src/views/base/paginations/Paginations.js index 24dc229a10..206a1d11d5 100644 --- a/src/views/base/paginations/Paginations.js +++ b/src/views/base/paginations/Paginations.js @@ -1,174 +1,91 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CPagination, - CPaginationItem, - CRow, -} from '@coreui/react' +import { Card, CardContent, CardHeader, Typography, Grid, Pagination, Stack } from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' 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". -

    + + Pagination} /> + - - 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 - + + + + + + Pagination{' '} + + Outlined + + + } + /> + + + + + + + -     -     -     - - - - React Pagination Alignment - - -

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

    - - - Previous - 1 - 2 - 3 - Next - + + + + + + Pagination{' '} + + Sizes + + + } + /> + + + + + + + - - - Previous - 1 - 2 - 3 - Next - + + + + + + Pagination{' '} + + Shapes + + + } + /> + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/placeholders/Placeholders.js b/src/views/base/placeholders/Placeholders.js index 743416d93d..5162c188fd 100644 --- a/src/views/base/placeholders/Placeholders.js +++ b/src/views/base/placeholders/Placeholders.js @@ -1,196 +1,132 @@ import React from 'react' import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCardImage, - CCardText, - CCardTitle, - CCol, - CPlaceholder, - CRow, -} from '@coreui/react' + Card, + CardContent, + CardHeader, + Typography, + Grid, + Skeleton, + Box, + Button, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' -import ReactImg from 'src/assets/images/react.jpg' - 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. -

    - - - + + + + + Skeleton / Placeholders} /> + + + Use loading skeletons to indicate that content is loading. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -     -     - - - 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. -

    - - + + - - - - - - - - + + + Skeleton{' '} + + Variants + + + } + /> + + + + + + + + -     -     - - - 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. -

    - - - - - + + + + + + Skeleton{' '} + + Animations + + + } + /> + + + + + + + -     -     - - - React Placeholder Animation - - -

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

    - - - - + + - - - + + + Skeleton{' '} + + Button placeholders + + + } + /> + + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/popovers/Popovers.js b/src/views/base/popovers/Popovers.js index 794e100258..237d16436c 100644 --- a/src/views/base/popovers/Popovers.js +++ b/src/views/base/popovers/Popovers.js @@ -1,71 +1,103 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/react' +import { + Card, + CardContent, + CardHeader, + Typography, + Grid, + Button, + Popover, + Box, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' const Popovers = () => { + const [anchorEl, setAnchorEl] = React.useState(null) + const [placement, setPlacement] = React.useState('top') + + const handleClick = (event, newPlacement) => { + setAnchorEl(event.currentTarget) + setPlacement(newPlacement) + } + + const handleClose = () => { + setAnchorEl(null) + } + + const open = Boolean(anchorEl) + return ( - - + + - - - React Popover Basic example - - + + Popover} /> + + + Popovers can be used to provide additional information or actions. + - handleClick(e, 'bottom')}> + Click to toggle popover + + - - Click to toggle popover - - + + + Popover title + + + And here's some amazing content. It's very engaging. Right? + + + - - - - - - - React Popover Four directions - - -

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

    - - - Popover on top - - - Popover on right - - - Popover on bottom - - - Popover on left - + + + + + + Popover{' '} + + Directions + + + } + /> + + + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/progress/Progress.js b/src/views/base/progress/Progress.js index 78715d305d..3af6971f95 100644 --- a/src/views/base/progress/Progress.js +++ b/src/views/base/progress/Progress.js @@ -1,186 +1,129 @@ import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CProgress, CProgressBar, CRow } from '@coreui/react' +import { + Card, + CardContent, + CardHeader, + Typography, + Grid, + LinearProgress, + Box, + Stack, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' const Progress = () => { return ( - - + + - - - React Progress Basic example - - -

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

    + + Progress} /> + - - - - - - - - - - - - - - - + + + + + + + -     -     -     - - - - React Progress Labels - - -

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

    + + + + + + Progress{' '} + + With labels + + + } + /> + - - 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. -

    - - - - - - - - - - - - - + + + + + + + 25% + + + -     -     -     - - - - React Progress Multiple bars - - -

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

    - - - - - - + + + + + + Progress{' '} + + Colors + + + } + /> + + + + + + + + + + -     -     -     - - - - React Progress Striped - - -

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

    - - - - - - - - - - - - - + + + + + + Progress{' '} + + Indeterminate + + + } + /> + + + + + + + -     -     -     - - - - 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. -

    - - - - - - - - - - - - - + + + + + + Progress{' '} + + Buffer + + + } + /> + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/spinners/Spinners.js b/src/views/base/spinners/Spinners.js index 5553dbc0f7..482c78364f 100644 --- a/src/views/base/spinners/Spinners.js +++ b/src/views/base/spinners/Spinners.js @@ -1,120 +1,115 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react' +import { + Card, + CardContent, + CardHeader, + Typography, + Grid, + CircularProgress, + Box, + Button, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' const Spinners = () => { return ( - - - - - - React Spinner Border - - -

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

    - - + + + + + Spinners} /> + + + Indicate the loading state of a component or page with spinners. + + + + + + + + + + -

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

    - - - + + + + + + Spinners{' '} + + Sizes + + + } + /> + + + + + + + + + -     -     -     - - - - 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. -

    - - - - - + + + + + + Spinners{' '} + + Determinate + + + } + /> + + + + + + + + - - - - - + + + + + + Spinners{' '} + + With buttons + + + } + /> + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js index 3a3f7fd864..d0693bce8b 100644 --- a/src/views/base/tables/Tables.js +++ b/src/views/base/tables/Tables.js @@ -1,986 +1,182 @@ import React from 'react' import { - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CTable, - CTableBody, - CTableCaption, - CTableDataCell, - CTableHead, - CTableHeaderCell, - CTableRow, -} from '@coreui/react' + Card, + CardContent, + CardHeader, + Typography, + Grid, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Paper, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' const Tables = () => { + const rows = [ + { id: 1, name: 'Mark', lastName: 'Otto', handle: '@mdo' }, + { id: 2, name: 'Jacob', lastName: 'Thornton', handle: '@fat' }, + { id: 3, name: 'Larry', lastName: 'the Bird', handle: '@twitter' }, + ] + return ( - - + + - - - React Table Basic example - - -

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

    + + Basic Table} /> + - - - - # - 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 - - - - + + + + + # + First + Last + Handle + + + + {rows.map((row) => ( + + {row.id} + {row.name} + {row.lastName} + {row.handle} + + ))} + +
    +     + + + + + + + Table{' '} + + Striped rows + + + } + /> + - - - - # - 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 - - - - + + + + + # + First + Last + Handle + + + + {rows.map((row, index) => ( + + {row.id} + {row.name} + {row.lastName} + {row.handle} + + ))} + +
    +     + + + + + + + Table{' '} + + Hoverable rows + + + } + /> + - - - - # - 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 - - - - -     -     -     -     + + + + + # + First + Last + Handle + + + + {rows.map((row) => ( + + {row.id} + {row.name} + {row.lastName} + {row.handle} + + ))} + +
    +     + + + + + + + Table{' '} + + Small table + + + } + /> + + + + + + + # + First + Last + Handle + + + + {rows.map((row) => ( + + {row.id} + {row.name} + {row.lastName} + {row.handle} + + ))} + +
    +     +     +     +     + + ) } diff --git a/src/views/base/tabs/Tabs.js b/src/views/base/tabs/Tabs.js index eae58d8f8c..d678673ce9 100644 --- a/src/views/base/tabs/Tabs.js +++ b/src/views/base/tabs/Tabs.js @@ -1,234 +1,128 @@ -import React from 'react' +import React, { useState } from 'react' import { - CRow, - CCol, - CCard, - CCardBody, - CCardHeader, - CTab, - CTabContent, - CTabList, - CTabPanel, - CTabs, -} from '@coreui/react' + Card, + CardContent, + CardHeader, + Typography, + Grid, + Tabs as MuiTabs, + Tab, + Box, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' -const Navs = () => { +function TabPanel(props) { + const { children, value, index, ...other } = props return ( - - + + ) +} + +const Tabs = () => { + const [value, setValue] = useState(0) + + const handleChange = (event, newValue) => { + setValue(newValue) + } + + 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 - - - + + Tabs} /> + + + + + + + + + + + + + + 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. + + + -     -     -     - - - - 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 - - - + + + + + + Tabs{' '} + + Colored + + + } + /> + + + + + + + + + + + -     -     -     - - - - 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 - - - + + + + + + Tabs{' '} + + Full width + + + } + /> + + + + + + + + + + + -     -     -     -     + + + + ) } -export default Navs +export default Tabs diff --git a/src/views/base/tooltips/Tooltips.js b/src/views/base/tooltips/Tooltips.js index 86a229420c..cd81363524 100644 --- a/src/views/base/tooltips/Tooltips.js +++ b/src/views/base/tooltips/Tooltips.js @@ -1,77 +1,98 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react' +import { + Card, + CardContent, + CardHeader, + Typography, + Grid, + Tooltip, + Button, + Box, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' const Tooltips = () => { return ( - - + + - - - React Tooltip Basic example - - -

    Hover over the links below to see tooltips:

    + + Tooltips} /> + + + Tooltips display informative text when users hover over, focus on, or tap an element. + -

    - 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 - - +     + + + + Tooltips{' '} + + Arrow + + + } + /> + + + + + + + + + + + + + + Tooltips{' '} + + Custom HTML + + + } + /> + + + + + Tooltip with HTML + + And here's some amazing content. + + } > - Tooltip on left - + + -     -     -     -     + + + + ) } diff --git a/src/views/buttons/button-groups/ButtonGroups.js b/src/views/buttons/button-groups/ButtonGroups.js index 1f366db2d0..9fe51b5412 100644 --- a/src/views/buttons/button-groups/ButtonGroups.js +++ b/src/views/buttons/button-groups/ButtonGroups.js @@ -1,439 +1,155 @@ 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' + Card, + CardContent, + CardHeader, + Typography, + Grid, + Button, + ButtonGroup, + Box, + Stack, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' const ButtonGroups = () => { return ( - - + + - - - React Button Group Basic example - - -

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

    + + Button Groups} /> + - - 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 Groups{' '} + + Sizes + + + } + /> + + + + + + + + + + + + + + + + + + + - - - 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 - - - + + + + + + Button Groups{' '} + + Vertical + + + } + /> + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + Button Groups{' '} + + Colors + + + } + /> + + + + + + + + + + + + + + + + + + + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/buttons/buttons/Buttons.js b/src/views/buttons/buttons/Buttons.js index ff6190ab9b..ea8cb50583 100644 --- a/src/views/buttons/buttons/Buttons.js +++ b/src/views/buttons/buttons/Buttons.js @@ -1,401 +1,196 @@ 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 { + Card, + CardContent, + CardHeader, + Typography, + Grid, + Button, + IconButton, + Box, + Stack, +} from '@mui/material' +import DeleteIcon from '@mui/icons-material/Delete' +import SendIcon from '@mui/icons-material/Send' import { DocsComponents, DocsExample } from 'src/components' 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 - - - ))} + + + + + Buttons} /> + + + + + + + + + + -     -     -     - - - - 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 - + + + + + + Buttons{' '} + + Outlined + + + } + /> + + + + + + + + + + -     -     -     - - - - React Button Block buttons - - -

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

    - -
    - Button - Button -
    + + + + + + Buttons{' '} + + Text + + + } + /> + + + + + + + + + + -

    - 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 -
    +     +     + + + + Buttons{' '} + + Sizes + + + } + /> + + + + + + + -

    - 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 -
    +     +     + + + + Buttons{' '} + + With icons + + + } + /> + + + + + + + + + + + + -

    - 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 -
    +     +     + + + + Buttons{' '} + + Disabled + + + } + /> + + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/buttons/dropdowns/Dropdowns.js b/src/views/buttons/dropdowns/Dropdowns.js index a6885a416a..0f435354cf 100644 --- a/src/views/buttons/dropdowns/Dropdowns.js +++ b/src/views/buttons/dropdowns/Dropdowns.js @@ -1,338 +1,202 @@ import React from 'react' import { - CButton, - CButtonGroup, - CCard, - CCardBody, - CCardHeader, - CCol, - CDropdown, - CDropdownDivider, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CRow, -} from '@coreui/react' + Card, + CardContent, + CardHeader, + Typography, + Grid, + Button, + Menu, + MenuItem, + Box, + Stack, +} from '@mui/material' +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown' import { DocsComponents, DocsExample } from 'src/components' const Dropdowns = () => { + const [anchorEl, setAnchorEl] = React.useState(null) + const open = Boolean(anchorEl) + + const handleClick = (event) => { + setAnchorEl(event.currentTarget) + } + + const handleClose = () => { + setAnchorEl(null) + } + 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 - - + Dropdown + + + Action + Another action + Something else here + + + + + + + + + + + + + + + + + + -     -     -     - - - - 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 - - + + + + + + Dropdowns{' '} + + Outlined + + + } + /> + + + + + + + + -     -     -     - - - - 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 - + + + + + + Dropdowns{' '} + + Sizes + + + } + /> + + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/buttons/index.js b/src/views/buttons/index.js index 6634d15214..0e6ee8d0d4 100644 --- a/src/views/buttons/index.js +++ b/src/views/buttons/index.js @@ -1,5 +1,5 @@ -import ButtonDropdowns from './ButtonDropdowns' -import ButtonGroups from './ButtonGroups' -import Buttons from './Buttons' +import Buttons from './buttons/Buttons' +import ButtonGroups from './button-groups/ButtonGroups' +import Dropdowns from './dropdowns/Dropdowns' -export { ButtonDropdowns, ButtonGroups, Buttons } +export { Buttons, ButtonGroups, Dropdowns } diff --git a/src/views/charts/Charts.js b/src/views/charts/Charts.js index d5df06bf70..b444574cca 100644 --- a/src/views/charts/Charts.js +++ b/src/views/charts/Charts.js @@ -1,182 +1,222 @@ import React from 'react' -import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react' +import { useTheme } from '@mui/material/styles' +import { Card, CardContent, CardHeader, Typography, Grid } from '@mui/material' import { - CChartBar, - CChartDoughnut, - CChartLine, - CChartPie, - CChartPolarArea, - CChartRadar, -} from '@coreui/react-chartjs' -import { DocsLink } from 'src/components' + LineChart, + Line, + BarChart, + Bar, + PieChart, + Pie, + Cell, + AreaChart, + Area, + RadarChart, + Radar, + PolarGrid, + PolarAngleAxis, + PolarRadiusAxis, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer, +} from 'recharts' + +const lineData = [ + { name: 'Jan', value: 65 }, + { name: 'Feb', value: 59 }, + { name: 'Mar', value: 80 }, + { name: 'Apr', value: 81 }, + { name: 'May', value: 56 }, + { name: 'Jun', value: 55 }, + { name: 'Jul', value: 40 }, +] + +const barData = [ + { name: 'Jan', value: 65 }, + { name: 'Feb', value: 59 }, + { name: 'Mar', value: 80 }, + { name: 'Apr', value: 81 }, + { name: 'May', value: 56 }, + { name: 'Jun', value: 55 }, + { name: 'Jul', value: 40 }, +] + +const pieData = [ + { name: 'Red', value: 300 }, + { name: 'Blue', value: 50 }, + { name: 'Yellow', value: 100 }, +] + +const radarData = [ + { subject: 'Eating', A: 65, B: 28 }, + { subject: 'Drinking', A: 59, B: 48 }, + { subject: 'Sleeping', A: 90, B: 40 }, + { subject: 'Designing', A: 81, B: 19 }, + { subject: 'Coding', A: 56, B: 96 }, + { subject: 'Cycling', A: 55, B: 27 }, + { subject: 'Running', A: 40, B: 100 }, +] const Charts = () => { - const random = () => Math.round(Math.random() * 100) + const theme = useTheme() + const primaryColor = theme.palette.primary.main + const secondaryColor = theme.palette.secondary.main + const successColor = theme.palette.success.main + const warningColor = theme.palette.warning.main + const errorColor = theme.palette.error.main + const infoColor = theme.palette.info.main + + const COLORS = [errorColor, primaryColor, warningColor] return ( - - - - - - Bar Chart - - - - - - - - - - Line Chart - - - - - - - - - - Doughnut Chart - - - - - - - - - - Pie Chart {' '} - - - - - - - - - - Polar Area Chart - - - - - - - - - - - Radar Chart - - - - - - - + + + + Line Chart} /> + + + + + + + + + + + + + + + + + + Bar Chart} /> + + + + + + + + + + + + + + + + + + Area Chart} /> + + + + + + + + + + + + + + + + + + Pie Chart} /> + + + + `${name} ${(percent * 100).toFixed(0)}%`} + > + {pieData.map((entry, index) => ( + + ))} + + + + + + + + + + + + Radar Chart} /> + + + + + + + + + + + + + + + + + + + Multi-Line Chart} /> + + + + + + + + + + + + + + + + ) } diff --git a/src/views/charts/index.js b/src/views/charts/index.js new file mode 100644 index 0000000000..fda026d953 --- /dev/null +++ b/src/views/charts/index.js @@ -0,0 +1,3 @@ +import Charts from './Charts' + +export { Charts } diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js index 57a55290d9..9bf63e9c2e 100644 --- a/src/views/dashboard/Dashboard.js +++ b/src/views/dashboard/Dashboard.js @@ -1,386 +1,433 @@ -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 React, { useState } from '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 avatar1 from 'src/assets/images/avatars/1.jpg' -import avatar2 from 'src/assets/images/avatars/2.jpg' -import avatar3 from 'src/assets/images/avatars/3.jpg' -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' + Box, + Card, + CardContent, + CardHeader, + Typography, + Grid, + Avatar, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + LinearProgress, + IconButton, + Menu, + MenuItem, + Button, + ButtonGroup, + Divider, + useTheme, + alpha, + Skeleton, + Fade, +} from '@mui/material' +import MoreVertIcon from '@mui/icons-material/MoreVert' +import CloudDownloadIcon from '@mui/icons-material/CloudDownload' +import PersonIcon from '@mui/icons-material/Person' +import SearchIcon from '@mui/icons-material/Search' +import ShoppingCartIcon from '@mui/icons-material/ShoppingCart' +import PaymentIcon from '@mui/icons-material/Payment' +import DescriptionIcon from '@mui/icons-material/Description' +import BugReportIcon from '@mui/icons-material/BugReport' -import WidgetsBrand from '../widgets/WidgetsBrand' import WidgetsDropdown from '../widgets/WidgetsDropdown' import MainChart from './MainChart' const Dashboard = () => { - const progressExample = [ - { 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: 'Bounce Rate', value: 'Average Rate', percent: 40.15, color: 'primary' }, - ] + const theme = useTheme() + const [loading, setLoading] = useState(false) - const progressGroupExample1 = [ - { title: 'Monday', value1: 34, value2: 78 }, - { title: 'Tuesday', value1: 56, value2: 94 }, - { title: 'Wednesday', value1: 12, value2: 67 }, - { title: 'Thursday', value1: 43, value2: 91 }, - { title: 'Friday', value1: 22, value2: 73 }, - { title: 'Saturday', value1: 53, value2: 82 }, - { title: 'Sunday', value1: 9, value2: 69 }, - ] - - const progressGroupExample2 = [ - { title: 'Male', icon: cilUser, value: 53 }, - { title: 'Female', icon: cilUserFemale, 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' }, - ] - - const tableExample = [ + const tableData = [ { - 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 }, + avatar: '/avatars/1.jpg', + user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2023' }, + country: { name: 'USA', flag: '🇺🇸' }, + usage: { value: 50, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'success' }, + payment: { name: 'Mastercard', icon: '💳' }, 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: '/avatars/2.jpg', + user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2023' }, + country: { name: 'Brazil', flag: '🇧🇷' }, + usage: { value: 22, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'info' }, + payment: { name: 'Visa', icon: '💳' }, activity: '5 minutes ago', }, { - avatar: { src: avatar3, status: 'warning' }, + avatar: '/avatars/3.jpg', user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' }, - country: { name: 'India', flag: cifIn }, - usage: { - value: 74, - period: 'Jun 11, 2023 - Jul 10, 2023', - color: 'warning', - }, - payment: { name: 'Stripe', icon: cibCcStripe }, + country: { name: 'India', flag: '🇮🇳' }, + usage: { value: 74, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'warning' }, + payment: { name: 'Stripe', icon: '💳' }, activity: '1 hour ago', }, { - avatar: { src: avatar4, status: 'secondary' }, + avatar: '/avatars/4.jpg', user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' }, - country: { name: 'France', flag: cifFr }, - usage: { - value: 98, - period: 'Jun 11, 2023 - Jul 10, 2023', - color: 'danger', - }, - payment: { name: 'PayPal', icon: cibCcPaypal }, + country: { name: 'France', flag: '🇫🇷' }, + usage: { value: 98, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'error' }, + payment: { name: 'PayPal', icon: '💳' }, 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 }, + avatar: '/avatars/5.jpg', + user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2023' }, + country: { name: 'Spain', flag: '🇪🇸' }, + usage: { value: 22, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'primary' }, + payment: { name: 'Google Wallet', icon: '💳' }, 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: '/avatars/6.jpg', + user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2023' }, + country: { name: 'Poland', flag: '🇵🇱' }, + usage: { value: 43, period: 'Jun 11, 2023 - Jul 10, 2023', color: 'success' }, + payment: { name: 'Amex', icon: '💳' }, activity: 'Last week', }, ] - return ( - <> - - - - - -

    - Traffic -

    -
    January - July 2023
    -     - - - - - - {['Day', 'Month', 'Year'].map((value) => ( - - {value} - - ))} - - -     - -     - - - {progressExample.map((item, index, items) => ( - -
    {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
    -
    -     -     + const progressGroupData1 = [ + { title: 'Monday', value1: 34, value2: 78 }, + { title: 'Tuesday', value1: 56, value2: 94 }, + { title: 'Wednesday', value1: 12, value2: 67 }, + { title: 'Thursday', value1: 43, value2: 91 }, + { title: 'Friday', value1: 22, value2: 73 }, + { title: 'Saturday', value1: 53, value2: 82 }, + { title: 'Sunday', value1: 9, value2: 69 }, + ] -
    + const progressGroupData2 = [ + { title: 'Male', value: 53, icon: PersonIcon, color: 'warning' }, + { title: 'Female', value: 43, icon: PersonIcon, color: 'success' }, + ] - {progressGroupExample2.map((item, index) => ( -
    -
    - - {item.title} - {item.value}% -
    -
    - -
    -
    - ))} + const progressGroupData3 = [ + { title: 'Organic Search', value: 191235, percent: 56, icon: SearchIcon, color: 'success' }, + { title: 'Facebook', value: 51223, percent: 15, icon: PersonIcon, color: 'info' }, + { title: 'Twitter', value: 37564, percent: 11, icon: PersonIcon, color: 'warning' }, + { title: 'LinkedIn', value: 27319, percent: 8, icon: PersonIcon, color: 'error' }, + ] -
    + return ( + + + - {progressGroupExample3.map((item, index) => ( -
    -
    - - {item.title} - - {item.value}{' '} - ({item.percent}%) - -
    -
    - -
    -
    - ))} -     -     + + + + + + Traffic + + + January - July 2023 + + + + + + + + + + + + + + + + -
    + + + + + + + } + /> + + + + + + + + New Clients + + + 9,123 + + + + + + + + + Recurring Clients + + + 22,643 + + + + + + + + + + + Pageviews + + + 78,623 + + + + + + + + + Organic + + + 49,123 + + + + + + + + {progressGroupData1.map((item, index) => ( + + + {item.title} + + {item.value1}% / {item.value2}% + + + + + + + + ))} + + + + + + + + + } + /> + + {progressGroupData2.map((item, index) => ( + + + + + {item.title} + + + {item.value}% + + + + + ))} + + {progressGroupData3.map((item, index) => ( + + + + + {item.title} + + + + {item.value.toLocaleString()} + + + ({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 + + + + {tableData.map((row, index) => ( + + + + + {row.user.name.charAt(0)} + + + + {row.user.name} + + + {row.user.new ? 'New' : 'Recurring'} | Registered:{' '} + {row.user.registered} + + + + + + + {row.country.flag} {row.country.name} + + + + + + + {row.usage.value}% + + + + + {row.usage.period} + + + + + + {row.payment.icon} {row.payment.name} + + + + + {row.activity} + + + ))} - - - - - - - + +
    +     +     +     + + ) } diff --git a/src/views/dashboard/MainChart.js b/src/views/dashboard/MainChart.js index 98b7eec3cf..6303c7dcfb 100644 --- a/src/views/dashboard/MainChart.js +++ b/src/views/dashboard/MainChart.js @@ -1,136 +1,84 @@ -import React, { useEffect, useRef } from 'react' +import React from 'react' +import { useTheme } from '@mui/material/styles' +import { Box } from '@mui/material' +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer, + Legend, +} from 'recharts' -import { CChartLine } from '@coreui/react-chartjs' -import { getStyle } from '@coreui/utils' +const data = [ + { name: 'January', dataset1: 168, dataset2: 132, dataset3: 65 }, + { name: 'February', dataset1: 142, dataset2: 178, dataset3: 65 }, + { name: 'March', dataset1: 189, dataset2: 95, dataset3: 65 }, + { name: 'April', dataset1: 112, dataset2: 156, dataset3: 65 }, + { name: 'May', dataset1: 175, dataset2: 88, dataset3: 65 }, + { name: 'June', dataset1: 98, dataset2: 145, dataset3: 65 }, + { name: 'July', dataset1: 156, dataset2: 112, dataset3: 65 }, +] const MainChart = () => { - const chartRef = useRef(null) - - useEffect(() => { - const handleColorSchemeChange = () => { - if (chartRef.current) { - setTimeout(() => { - chartRef.current.options.scales.x.grid.borderColor = getStyle( - '--cui-border-color-translucent', - ) - chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent') - chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color') - chartRef.current.options.scales.y.grid.borderColor = getStyle( - '--cui-border-color-translucent', - ) - chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent') - chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color') - chartRef.current.update() - }) - } - } - - 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 theme = useTheme() return ( - <> - - + + + + + + + + + + + + + + ) } diff --git a/src/views/forms/checks-radios/ChecksRadios.js b/src/views/forms/checks-radios/ChecksRadios.js index ef073dee55..3a1b979b3f 100644 --- a/src/views/forms/checks-radios/ChecksRadios.js +++ b/src/views/forms/checks-radios/ChecksRadios.js @@ -1,392 +1,129 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CFormSwitch, CRow } from '@coreui/react' +import React, { useState } from 'react' +import { + Card, + CardContent, + CardHeader, + Typography, + Grid, + FormControl, + FormControlLabel, + FormGroup, + FormLabel, + Checkbox, + Radio, + RadioGroup, + Switch, + Box, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' const ChecksRadios = () => { + const [checked, setChecked] = useState(true) + 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). -

    - -
    - -
    -
    - + + + + Checkboxes} /> + + + + } label="Default checkbox" /> + } label="Unchecked checkbox" /> + } label="Disabled checkbox" /> + } + label="Disabled checked" /> -
    -     -     -     -     - - - - 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

    - - - - - + + + + + Radio Buttons} /> + + + + Select an option + setRadioValue(e.target.value)}> + } label="Option 1" /> + } label="Option 2" /> + } label="Option 3" /> + } + label="Disabled" + disabled + /> + + + + + + + + Switches} /> + + + + setChecked(e.target.checked)} /> + } + label="Default switch" + /> + } label="Checked switch" /> + } label="Disabled switch" /> + } + label="Disabled checked switch" + /> + -

    Outlined styles

    -

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

    - -
    - + + + + + Checkboxes{' '} + + Colors + + + } + /> + + + + } label="Primary" /> + } + label="Secondary" /> -
    -
    - } + label="Success" /> -
    -
    - } + label="Error" /> - } + label="Warning" /> -
    + } label="Info" /> +     -     -     -     -     + + + + ) } diff --git a/src/views/forms/floating-labels/FloatingLabels.js b/src/views/forms/floating-labels/FloatingLabels.js index 2a637fd21c..b85109f748 100644 --- a/src/views/forms/floating-labels/FloatingLabels.js +++ b/src/views/forms/floating-labels/FloatingLabels.js @@ -1,170 +1,106 @@ import React from 'react' import { - CCard, - CCardBody, - CCardHeader, - CCol, - CFormInput, - CFormLabel, - CFormFloating, - CFormSelect, - CFormTextarea, - CRow, -} from '@coreui/react' + Card, + CardContent, + CardHeader, + Typography, + Grid, + TextField, + FormControl, + InputLabel, + Select, + MenuItem, + Box, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' const FloatingLabels = () => { return ( - - - - - - React Floating labels - - -

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

    - - - - Email address - - - - Password - + + + + + Floating Labels} /> + + + MUI TextField components have floating labels by default. + + + + + + -

    - 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 - + + + + + + Floating Labels{' '} + + Textarea + + + } + /> + + + -     -     -     - - - - 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 - + + + + + + Floating Labels{' '} + + Select + + + } + /> + + + + 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 - - - + + + + + + Floating Labels{' '} + + Variants + + + } + /> + + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/forms/form-control/FormControl.js b/src/views/forms/form-control/FormControl.js index 7b972ffd86..2029ceb2c9 100644 --- a/src/views/forms/form-control/FormControl.js +++ b/src/views/forms/form-control/FormControl.js @@ -1,248 +1,131 @@ -import React from 'react' +import React, { useState } from 'react' import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CForm, - CFormInput, - CFormLabel, - CFormTextarea, - CRow, -} from '@coreui/react' + Card, + CardContent, + CardHeader, + Typography, + Grid, + TextField, + Box, + InputAdornment, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' const FormControl = () => { + const [values, setValues] = useState({ + email: '', + password: '', + text: '', + }) + + const handleChange = (prop) => (event) => { + setValues({ ...values, [prop]: event.target.value }) + } + 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. -

    - - + + + + + Form Controls} /> + + + + + + + -     -     -     - - - - 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 - -
    -     + + + + + + Form Controls{' '} + + Sizes + + + } + /> + + + + + + -     -     -     - - - - 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 - -
    + + + + + + Form Controls{' '} + + Disabled & Readonly + + + } + /> + + + + + + -     -     -     - - - - React Form Control Color - - - - Color picker - + + + + + + Form Controls{' '} + + Variants + + + } + /> + + + + + + + - - - -     + + + + ) } diff --git a/src/views/forms/index.js b/src/views/forms/index.js new file mode 100644 index 0000000000..94bd07d3d9 --- /dev/null +++ b/src/views/forms/index.js @@ -0,0 +1,10 @@ +import FormControl from './form-control/FormControl' +import Select from './select/Select' +import ChecksRadios from './checks-radios/ChecksRadios' +import Range from './range/Range' +import InputGroup from './input-group/InputGroup' +import FloatingLabels from './floating-labels/FloatingLabels' +import Layout from './layout/Layout' +import Validation from './validation/Validation' + +export { FormControl, Select, ChecksRadios, Range, InputGroup, FloatingLabels, Layout, Validation } diff --git a/src/views/forms/input-group/InputGroup.js b/src/views/forms/input-group/InputGroup.js index 73ccac2629..26b4455578 100644 --- a/src/views/forms/input-group/InputGroup.js +++ b/src/views/forms/input-group/InputGroup.js @@ -1,503 +1,151 @@ 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' + Card, + CardContent, + CardHeader, + Typography, + Grid, + TextField, + InputAdornment, + Box, +} from '@mui/material' +import PersonIcon from '@mui/icons-material/Person' +import EmailIcon from '@mui/icons-material/Email' +import AttachMoneyIcon from '@mui/icons-material/AttachMoney' import { DocsComponents, DocsExample } from 'src/components' const InputGroup = () => { return ( - - - - - - React Input group Basic example - - -

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

    - - - @ - + + + + Input Group} /> + + + + @, + }, + }} /> - - - @example.com, + }, + }} /> - @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 - https://, + }, + }} /> - - - 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 - - + + + + + Input Group{' '} + + With icons + + + } + /> + + + + + + + ), + }, + }} /> - - - + + + ), + }, + }} /> - - Button - - - - - Button - - - Button - - - - - + + + ), + endAdornment: .00, + }, + }} /> - - 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 - - + + + + + Input Group{' '} + + Sizes + + + } + /> + + + + @, + }, + }} /> - - - @, + }, + }} /> - - Button - - + - - - -     + + + + ) } diff --git a/src/views/forms/layout/Layout.js b/src/views/forms/layout/Layout.js index 6a6bf56451..c27d9fe44f 100644 --- a/src/views/forms/layout/Layout.js +++ b/src/views/forms/layout/Layout.js @@ -1,424 +1,157 @@ import React from 'react' import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CForm, - CFormCheck, - CFormInput, - CFormLabel, - CFormSelect, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' + Card, + CardContent, + CardHeader, + Typography, + Grid, + TextField, + Button, + Box, + FormControlLabel, + Checkbox, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' const Layout = () => { return ( - - - - - - Layout Form grid - - -

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

    - - - - - - - - - + + + + + Form Layout} /> + + + + + + } label="Check me out" /> + + -     -     -     - - - - 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. -

    - - - - - 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 - - - + + + + + + Form Layout{' '} + + Horizontal + + + } + /> + + + + + + Email + + + + + + + + Password + + + + + + + + + + + -

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

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

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

    - - Example range - + + + + + Range / Slider} /> + + + + Default slider + setValue(newValue)} + valueLabelDisplay="auto" + /> + + + + + + + + Slider{' '} + + Disabled + + + } + /> + + + + + -     -     -     - - - - React Range Disabled - - -

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

    - - Disabled range - + + + + + + Slider{' '} + + Min and max + + + } + /> + + + + Temperature (0-100) + + -     -     -     - - - - 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 - + + + + + + Slider{' '} + + Steps + + + } + /> + + + + Step: 10 + + -     -     -     - - - - 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 - + + + + + + Slider{' '} + + Colors + + + } + /> + + + + + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/forms/select/Select.js b/src/views/forms/select/Select.js index d817644493..1091a03c44 100644 --- a/src/views/forms/select/Select.js +++ b/src/views/forms/select/Select.js @@ -1,99 +1,111 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react' +import React, { useState } from 'react' +import { + Card, + CardContent, + CardHeader, + Typography, + Grid, + FormControl, + InputLabel, + Select as MuiSelect, + MenuItem, + Box, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' const Select = () => { + const [value, setValue] = useState('') + + const handleChange = (event) => { + setValue(event.target.value) + } + return ( - - - - - - React Select Default - - - - - - - - - - - - - - - - - React Select Sizing - - -

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

    - - - - - - - - - - - - - + + + + + Select} /> + + + + + Select option + + Open this select menu + One + Two + Three + + + -

    - The multiple attribute is also supported: -

    - - - - - - - - -

    - As is the htmlSize property: -

    - - - - - - - +     +     + + + + Select{' '} + + Sizes + + + } + /> + + + + + Small + + One + Two + Three + + + + Normal + + One + Two + Three + + + -     -     -     - - - - React Select Disabled - - -

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

    - - - - - - - + + + + + + Select{' '} + + Disabled + + + } + /> + + + + + Disabled + + One + Two + Three + + + -     -     -     -     + + + + ) } diff --git a/src/views/forms/validation/Validation.js b/src/views/forms/validation/Validation.js index d0017b6b2c..d44ee1aa17 100644 --- a/src/views/forms/validation/Validation.js +++ b/src/views/forms/validation/Validation.js @@ -1,503 +1,192 @@ import React, { useState } from 'react' import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CForm, - CFormCheck, - CFormInput, - CFormFeedback, - CFormLabel, - CFormSelect, - CFormTextarea, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' + Card, + CardContent, + CardHeader, + Typography, + Grid, + TextField, + Button, + Box, + FormControlLabel, + Checkbox, + FormControl, + InputLabel, + Select, + MenuItem, + FormHelperText, + Alert, + Fade, +} from '@mui/material' import { DocsComponents, DocsExample } from 'src/components' -const CustomStyles = () => { - const [validated, setValidated] = useState(false) - const handleSubmit = (event) => { - const form = event.currentTarget - if (form.checkValidity() === false) { - event.preventDefault() - event.stopPropagation() +const Validation = () => { + const [formData, setFormData] = useState({ + firstName: '', + lastName: '', + username: '', + city: '', + state: '', + zip: '', + terms: false, + }) + const [errors, setErrors] = useState({}) + const [submitted, setSubmitted] = useState(false) + const [showSuccess, setShowSuccess] = useState(false) + + const handleChange = (field) => (event) => { + const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value + setFormData({ ...formData, [field]: value }) + if (errors[field]) { + setErrors({ ...errors, [field]: '' }) } - 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 validate = () => { + const newErrors = {} + if (!formData.firstName) newErrors.firstName = 'Please provide a first name.' + if (!formData.lastName) newErrors.lastName = 'Please provide a last name.' + if (!formData.username) newErrors.username = 'Please choose a username.' + if (!formData.city) newErrors.city = 'Please provide a valid city.' + if (!formData.state) newErrors.state = 'Please select a valid state.' + if (!formData.zip) newErrors.zip = 'Please provide a valid zip.' + if (!formData.terms) newErrors.terms = 'You must agree before submitting.' + return newErrors } - 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() + event.preventDefault() + setSubmitted(true) + const newErrors = validate() + if (Object.keys(newErrors).length > 0) { + setErrors(newErrors) + setShowSuccess(false) + } else { + setErrors({}) + setShowSuccess(true) + setTimeout(() => setShowSuccess(false), 3000) } - setValidated(true) } - return ( - - - Email - - - Looks good! - - - - Email - - - Looks good! - - - - Username - - @ - - - Please choose a username. - - - - - City - - - Please provide a valid city. - - - - City - - - - - - Please provide a valid city. - - - - City - - - Please provide a valid zip. - - - - - Submit form - - - - ) -} -const Validation = () => { return ( - - - - - - Validation Custom styles - - -

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

    -

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

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

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

    -

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

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

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

    -

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

    - - - - Email - - Looks good! - - - Email - - Looks good! - - - Username - - @ - + + + + Form Validation} /> + + + Provide valuable, actionable feedback to your users with form validation. + + + + + Form submitted successfully! + + + + + + - Please choose a username. - - - - City - - Please provide a valid city. - - - City - - - - - Please provide a valid city. - - - City - - Please provide a valid zip. - - - - You must agree before submitting. - - - - Submit form - - - - -     -     -     - - - - Validation Supported elements - - -

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

    -
      -
    • - <CFormInput>s -
      • -
    • - <CFormSelect>s -
      • -
    • - <CFormCheck>s -
      • -
    - - -
    - - Textarea - - - Please enter a message in the textarea. -
    - - Example invalid feedback text - - - - - More example invalid feedback text - -
    - - - - - - - Example invalid select feedback -
    - -
    - - Example invalid form file feedback -
    - -
    - - Submit form - -
    -     + + + + + + @, + }, + }} + /> + + + + + + + State + + {submitted && errors.state && {errors.state}} + + + + + + + + } + label="Agree to terms and conditions" + /> + {submitted && errors.terms && ( + {errors.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..b32b220515 100644 --- a/src/views/icons/brands/Brands.js +++ b/src/views/icons/brands/Brands.js @@ -1,34 +1,76 @@ 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, CardContent, CardHeader, Typography, Grid, Paper } from '@mui/material' +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 RedditIcon from '@mui/icons-material/Reddit' +import PinterestIcon from '@mui/icons-material/Pinterest' +import WhatsAppIcon from '@mui/icons-material/WhatsApp' +import TelegramIcon from '@mui/icons-material/Telegram' +import AppleIcon from '@mui/icons-material/Apple' +import AndroidIcon from '@mui/icons-material/Android' +import WindowsIcon from '@mui/icons-material/Window' +import GoogleIcon from '@mui/icons-material/Google' +import AmazonIcon from '@mui/icons-material/Shop' -const toKebabCase = (str) => { - return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase() -} - -export const getIconsView = (iconset) => { - return Object.entries(iconset).map(([name, value]) => ( - - -
    {toKebabCase(name)}
    -     - )) -} +const brands = [ + { icon: FacebookIcon, name: 'Facebook' }, + { icon: TwitterIcon, name: 'Twitter' }, + { icon: InstagramIcon, name: 'Instagram' }, + { icon: LinkedInIcon, name: 'LinkedIn' }, + { icon: YouTubeIcon, name: 'YouTube' }, + { icon: GitHubIcon, name: 'GitHub' }, + { icon: RedditIcon, name: 'Reddit' }, + { icon: PinterestIcon, name: 'Pinterest' }, + { icon: WhatsAppIcon, name: 'WhatsApp' }, + { icon: TelegramIcon, name: 'Telegram' }, + { icon: AppleIcon, name: 'Apple' }, + { icon: AndroidIcon, name: 'Android' }, + { icon: WindowsIcon, name: 'Windows' }, + { icon: GoogleIcon, name: 'Google' }, + { icon: AmazonIcon, name: 'Shop' }, +] -const CoreUIIcons = () => { +const Brands = () => { return ( - <> - - - Brand Icons - - {getIconsView(brandSet)} - - - + + Brand Icons} + subheader={ + + MUI provides some brand and social media icons. For more brand icons, consider using + react-icons or similar libraries. + + } + /> + + + {brands.map(({ icon: Icon, name }) => ( + + + + + {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..3f9810a5c4 100644 --- a/src/views/icons/coreui-icons/CoreUIIcons.js +++ b/src/views/icons/coreui-icons/CoreUIIcons.js @@ -1,20 +1,106 @@ 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 { Card, CardContent, CardHeader, Typography, Grid, Box, Paper } from '@mui/material' +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 EmailIcon from '@mui/icons-material/Email' +import FavoriteIcon from '@mui/icons-material/Favorite' +import StarIcon from '@mui/icons-material/Star' +import ShoppingCartIcon from '@mui/icons-material/ShoppingCart' +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' +import ArrowBackIcon from '@mui/icons-material/ArrowBack' +import ArrowForwardIcon from '@mui/icons-material/ArrowForward' +import RefreshIcon from '@mui/icons-material/Refresh' +import DownloadIcon from '@mui/icons-material/Download' +import UploadIcon from '@mui/icons-material/Upload' +import PrintIcon from '@mui/icons-material/Print' +import ShareIcon from '@mui/icons-material/Share' +import LockIcon from '@mui/icons-material/Lock' +import VisibilityIcon from '@mui/icons-material/Visibility' +import VisibilityOffIcon from '@mui/icons-material/VisibilityOff' +import InfoIcon from '@mui/icons-material/Info' +import WarningIcon from '@mui/icons-material/Warning' +import ErrorIcon from '@mui/icons-material/Error' +import HelpIcon from '@mui/icons-material/Help' + +const icons = [ + { icon: HomeIcon, name: 'Home' }, + { icon: SettingsIcon, name: 'Settings' }, + { icon: PersonIcon, name: 'Person' }, + { icon: SearchIcon, name: 'Search' }, + { icon: NotificationsIcon, name: 'Notifications' }, + { icon: EmailIcon, name: 'Email' }, + { icon: FavoriteIcon, name: 'Favorite' }, + { icon: StarIcon, name: 'Star' }, + { icon: ShoppingCartIcon, name: 'ShoppingCart' }, + { 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' }, + { icon: ArrowBackIcon, name: 'ArrowBack' }, + { icon: ArrowForwardIcon, name: 'ArrowForward' }, + { icon: RefreshIcon, name: 'Refresh' }, + { icon: DownloadIcon, name: 'Download' }, + { icon: UploadIcon, name: 'Upload' }, + { icon: PrintIcon, name: 'Print' }, + { icon: ShareIcon, name: 'Share' }, + { icon: LockIcon, name: 'Lock' }, + { icon: VisibilityIcon, name: 'Visibility' }, + { icon: VisibilityOffIcon, name: 'VisibilityOff' }, + { icon: InfoIcon, name: 'Info' }, + { icon: WarningIcon, name: 'Warning' }, + { icon: ErrorIcon, name: 'Error' }, + { icon: HelpIcon, name: 'Help' }, +] const CoreUIIcons = () => { return ( - <> - - - Free Icons - - {getIconsView(freeSet)} - - - + + Material Icons} + subheader={ + + MUI provides over 2,100 official Material icons. Here are some commonly used ones. + + } + /> + + + {icons.map(({ icon: Icon, name }) => ( + + + + + {name} + + + + ))} + + + ) } diff --git a/src/views/icons/flags/Flags.js b/src/views/icons/flags/Flags.js index 5db7e56705..64cb27f589 100644 --- a/src/views/icons/flags/Flags.js +++ b/src/views/icons/flags/Flags.js @@ -1,21 +1,62 @@ 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, CardContent, CardHeader, Typography, Grid, Paper } from '@mui/material' +import FlagIcon from '@mui/icons-material/Flag' +import PublicIcon from '@mui/icons-material/Public' +import LanguageIcon from '@mui/icons-material/Language' +import PlaceIcon from '@mui/icons-material/Place' +import LocationOnIcon from '@mui/icons-material/LocationOn' +import MapIcon from '@mui/icons-material/Map' +import ExploreIcon from '@mui/icons-material/Explore' +import TravelExploreIcon from '@mui/icons-material/TravelExplore' -const CoreUIIcons = () => { +const flags = [ + { icon: FlagIcon, name: 'Flag' }, + { icon: PublicIcon, name: 'Public' }, + { icon: LanguageIcon, name: 'Language' }, + { icon: PlaceIcon, name: 'Place' }, + { icon: LocationOnIcon, name: 'LocationOn' }, + { icon: MapIcon, name: 'Map' }, + { icon: ExploreIcon, name: 'Explore' }, + { icon: TravelExploreIcon, name: 'TravelExplore' }, +] + +const Flags = () => { return ( - <> - - - Flag Icons - - {getIconsView(flagSet)} - - - + + Location & Map Icons} + subheader={ + + MUI provides location and map-related icons. For country flags, consider using a + dedicated flag icon library. + + } + /> + + + {flags.map(({ icon: Icon, name }) => ( + + + + + {name} + + + + ))} + + + ) } -export default CoreUIIcons +export default Flags diff --git a/src/views/icons/index.js b/src/views/icons/index.js index 92db64e574..ce95069766 100644 --- a/src/views/icons/index.js +++ b/src/views/icons/index.js @@ -1,5 +1,5 @@ -import CoreUIIcons from './coreui-icons' -import Flags from './flags' -import Brands from './brands' +import CoreUIIcons from './coreui-icons/CoreUIIcons' +import Flags from './flags/Flags' +import Brands from './brands/Brands' export { CoreUIIcons, Flags, Brands } diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js index 70e1108a11..5fa2c2a17b 100644 --- a/src/views/notifications/alerts/Alerts.js +++ b/src/views/notifications/alerts/Alerts.js @@ -1,145 +1,147 @@ -import React from 'react' +import React, { useState } from 'react' import { - CAlert, - CAlertHeading, - CAlertLink, - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, -} from '@coreui/react' + Card, + CardContent, + CardHeader, + Typography, + Grid, + Alert, + AlertTitle, + Button, + Collapse, + IconButton, + Box, +} from '@mui/material' +import CloseIcon from '@mui/icons-material/Close' import { DocsComponents, DocsExample } from 'src/components' const Alerts = () => { + const [open, setOpen] = useState(true) + return ( - - + + - - - React Alert - - -

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

    + + Alerts} /> + - 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! + + This is a success alert! + This is an info alert! + This is a warning alert! + This is an error alert! + -     -     -     - - - - 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. - + + + + + + Alerts{' '} + + With title + + + } + /> + + + + + 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. + + -     -     -     - - - - 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. -

    -     + + + + + + Alerts{' '} + + Outlined + + + } + /> + + + + + This is an outlined success alert! + + + This is an outlined info alert! + + + This is an outlined warning alert! + + + This is an outlined error alert! + + -     -     -     - - - - 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. - + + + + + + Alerts{' '} + + Dismissible + + + } + /> + + + + + setOpen(false)} + > + + + } + sx={{ mb: 2 }} + > + Close me! + + + + -     -     -     -     + + + + ) } diff --git a/src/views/notifications/badges/Badges.js b/src/views/notifications/badges/Badges.js index 81dd6b5ac4..e07aac7ca2 100644 --- a/src/views/notifications/badges/Badges.js +++ b/src/views/notifications/badges/Badges.js @@ -1,124 +1,155 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CBadge, CRow } from '@coreui/react' +import { + Card, + CardContent, + CardHeader, + Typography, + Grid, + Badge, + Button, + Box, + Chip, + IconButton, +} from '@mui/material' +import MailIcon from '@mui/icons-material/Mail' +import NotificationsIcon from '@mui/icons-material/Notifications' import { DocsComponents, DocsExample } from 'src/components' const Badges = () => { return ( - - + + - - - - - React Badges Dismissing - - -

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

    + + Badges} /> + -

    - 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 - +     +     + + + + Badges{' '} + + With buttons + + + } + /> + + + + + + + + + + -

    - 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 - +     +     + + + + Chips{' '} + + (Badge alternative) + + + } + /> + + + + + + + + + + -     -     -     - - - - 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 + + + + + + Chips{' '} + + Outlined + + + } + /> + + + + + + + + + + -     -     - - - React Badges Pill badges - - -

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

    - - - primary - - - success - - - danger - - - warning - - - info - - - light - - - dark - + + + + + + Chips{' '} + + Sizes + + + } + /> + + + + + + -     -     -     -     + + + + ) } diff --git a/src/views/notifications/index.js b/src/views/notifications/index.js index 08e31cd726..8e1b09f5a6 100644 --- a/src/views/notifications/index.js +++ b/src/views/notifications/index.js @@ -1,6 +1,6 @@ -import Alerts from './Alerts' -import Badges from './Badges' -import Modals from './Modals' -import Toaster from './toasts' +import Alerts from './alerts/Alerts' +import Badges from './badges/Badges' +import Modals from './modals/Modals' +import Toasts from './toasts/Toasts' -export { Alerts, Badges, Modals, Toaster } +export { Alerts, Badges, Modals, Toasts } diff --git a/src/views/notifications/modals/Modals.js b/src/views/notifications/modals/Modals.js index 7be7294a12..8ea5e832e4 100644 --- a/src/views/notifications/modals/Modals.js +++ b/src/views/notifications/modals/Modals.js @@ -1,752 +1,174 @@ import React, { useState } from 'react' import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CLink, - CModal, - CModalBody, - CModalFooter, - CModalHeader, - CModalTitle, - CPopover, - CRow, - CTooltip, -} from '@coreui/react' + Card, + CardContent, + CardHeader, + Typography, + Grid, + Button, + Dialog, + DialogTitle, + DialogContent, + DialogContentText, + DialogActions, + Box, + IconButton, +} from '@mui/material' +import CloseIcon from '@mui/icons-material/Close' 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 Modals = () => { + const [open, setOpen] = useState(false) + const [scrollOpen, setScrollOpen] = useState(false) + const [sizeOpen, setSizeOpen] = useState({ sm: false, lg: false, xl: false }) -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) + + + + + Modal / Dialog} /> + + + + setOpen(false)}> + + Modal title + setOpen(false)} + sx={{ position: 'absolute', right: 8, top: 8 }} + > + + + + + + Modal body text goes here. This is a simple modal example. + + + + + + + + + + - 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 - - ... - - - ) -} + + + Modal{' '} + + Scrolling content + + + } + /> + + + + setScrollOpen(false)} scroll="paper"> + Modal with scrolling content + + {[...Array(20)].map((_, i) => ( + + This is some placeholder content to show the scrolling behavior for modals. We + use repeated line breaks to demonstrate how content can exceed minimum inner + height, thereby showing inner scrolling. + + ))} + + + + + + + + + -const Modals = () => { - 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{' '} + + Sizes + + + } + /> + + + + + + + + setSizeOpen({ ...sizeOpen, sm: false })} + maxWidth="sm" + fullWidth > - - 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()} + Small modal + + This is a small modal. + + + + + + setSizeOpen({ ...sizeOpen, lg: false })} + maxWidth="lg" + fullWidth + > + Large modal + + This is a large modal. + + + + + + setSizeOpen({ ...sizeOpen, xl: false })} + maxWidth="xl" + fullWidth + > + Extra large modal + + This is an extra large modal. + + + + + -     -     -     - - - - React Modal Optional sizes - - -

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

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

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

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Property fullscreanAvailability
    - true - Always
    - 'sm' - - Below 576px -
    - 'md' - - Below 768px -
    - 'lg' - - Below 992px -
    - 'xl' - - Below 1200px -
    - 'xxl' - - Below 1400px -
    - {FullscreenModal()} -     -     -     -     + + +     +     ) } diff --git a/src/views/notifications/toasts/Toasts.js b/src/views/notifications/toasts/Toasts.js index 9ccf859ad3..0b2f076820 100644 --- a/src/views/notifications/toasts/Toasts.js +++ b/src/views/notifications/toasts/Toasts.js @@ -1,252 +1,140 @@ -import React, { useRef, useState } from 'react' +import React, { useState } from 'react' import { - CCard, - CCardHeader, - CCardBody, - CButton, - CRow, - CCol, - CToast, - CToastBody, - CToastClose, - CToastHeader, - CToaster, -} from '@coreui/react' + Card, + CardContent, + CardHeader, + Typography, + Grid, + Button, + Snackbar, + Alert, + Box, + IconButton, +} from '@mui/material' +import CloseIcon from '@mui/icons-material/Close' import { DocsComponents, DocsExample } from 'src/components' -const ExampleToast = () => { - const [toast, addToast] = useState(0) - const toaster = useRef() - const exampleToast = ( - - - - - - CoreUI for React.js - 7 min ago - - Hello, world! This is a toast message. - - ) - return ( - <> - addToast(exampleToast)}> - Send a toast - - - - ) -} - const Toasts = () => { + const [open, setOpen] = useState(false) + const [severity, setSeverity] = useState('success') + + const handleClick = (newSeverity) => { + setSeverity(newSeverity) + 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. - -
    -     + + + + + Toasts / Snackbar} /> + + + Push notifications to your visitors with a toast, a lightweight and easily + customizable alert message. + + + + + + + + + + + This is a {severity} message! + + -

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

    - - - - Hello, world! This is a toast message. -
    - - Take action - - - Close - -
    -     -     +     +     + + + + Toasts{' '} + + Positions + + + } + /> + + + Snackbars can be positioned in different corners of the screen. + + + + + + + + + + -     -     -     - - - - 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. -

    - - -
    - Hello, world! This is a toast message. - -
    -     + + + + + + Toasts{' '} + + Auto hide + + + } + /> + + + Snackbars can automatically hide after a specified duration using the{' '} + autoHideDuration prop. + + + -     -     -     -     + + + + ) } diff --git a/src/views/pages/index.js b/src/views/pages/index.js new file mode 100644 index 0000000000..a6f84e7079 --- /dev/null +++ b/src/views/pages/index.js @@ -0,0 +1,6 @@ +import Login from './login/Login' +import Register from './register/Register' +import Page404 from './page404/Page404' +import Page500 from './page500/Page500' + +export { Login, Register, Page404, Page500 } diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js index 1b2ee0baa2..eb01ae1c59 100644 --- a/src/views/pages/login/Login.js +++ b/src/views/pages/login/Login.js @@ -1,85 +1,112 @@ -import React from 'react' +import React, { useState } 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' + Box, + Button, + Card, + CardContent, + Container, + Divider, + IconButton, + InputAdornment, + TextField, + Typography, +} from '@mui/material' +import PersonIcon from '@mui/icons-material/Person' +import LockIcon from '@mui/icons-material/Lock' +import Visibility from '@mui/icons-material/Visibility' +import VisibilityOff from '@mui/icons-material/VisibilityOff' const Login = () => { + const [showPassword, setShowPassword] = useState(false) + 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 + + + + + + ), + }, + }} + /> + + + + ), + endAdornment: ( + + setShowPassword(!showPassword)} edge="end"> + {showPassword ? : } + + + ), + }, + }} + /> + + + + + + + + + Don't have an account? + + + + + + + + + ) } diff --git a/src/views/pages/page404/Page404.js b/src/views/pages/page404/Page404.js index d7fe9a0a25..88ac7d334a 100644 --- a/src/views/pages/page404/Page404.js +++ b/src/views/pages/page404/Page404.js @@ -1,40 +1,71 @@ 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 { Link } from 'react-router-dom' +import { Box, Button, Container, TextField, Typography, InputAdornment } from '@mui/material' +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..02d51103b8 100644 --- a/src/views/pages/page500/Page500.js +++ b/src/views/pages/page500/Page500.js @@ -1,40 +1,71 @@ 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 { Link } from 'react-router-dom' +import { Box, Button, Container, TextField, Typography, InputAdornment } from '@mui/material' +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..ef12276ee1 100644 --- a/src/views/pages/register/Register.js +++ b/src/views/pages/register/Register.js @@ -1,70 +1,141 @@ -import React from 'react' +import React, { useState } from 'react' +import { Link } from 'react-router-dom' 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' + Box, + Button, + Card, + CardContent, + Container, + IconButton, + InputAdornment, + TextField, + Typography, +} from '@mui/material' +import PersonIcon from '@mui/icons-material/Person' +import EmailIcon from '@mui/icons-material/Email' +import LockIcon from '@mui/icons-material/Lock' +import Visibility from '@mui/icons-material/Visibility' +import VisibilityOff from '@mui/icons-material/VisibilityOff' const Register = () => { + const [showPassword, setShowPassword] = useState(false) + const [showRepeatPassword, setShowRepeatPassword] = useState(false) + return ( -
    - - - - - - -

    Register

    -

    Create your account

    - - - - - - - - @ - - - - - - - - - - - - - - -
    - Create Account -
    -     -     -     -     -     -     -
    + + + + + + + + Register + + + Create your account + + + + + + ), + }, + }} + /> + + + + ), + }, + }} + /> + + + + ), + endAdornment: ( + + setShowPassword(!showPassword)} edge="end"> + {showPassword ? : } + + + ), + }, + }} + /> + + + + ), + endAdornment: ( + + setShowRepeatPassword(!showRepeatPassword)} + edge="end" + > + {showRepeatPassword ? : } + + + ), + }, + }} + /> + + + + + Already have an account?{' '} + + Login + + + + + + + + + ) } diff --git a/src/views/theme/colors/Colors.js b/src/views/theme/colors/Colors.js index ef844e1637..c3917671a0 100644 --- a/src/views/theme/colors/Colors.js +++ b/src/views/theme/colors/Colors.js @@ -1,89 +1,132 @@ -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 { useTheme } from '@mui/material/styles' +import { Card, CardContent, CardHeader, Typography, Grid, Box, Paper } from '@mui/material' -const ThemeView = () => { - const [color, setColor] = useState('rgb(255, 255, 255)') - const ref = createRef() +const ThemeColor = ({ color, title }) => { + const theme = useTheme() + const bgColor = color.includes('.') + ? color.split('.').reduce((obj, key) => obj[key], theme.palette) + : theme.palette[color]?.main || theme.palette[color] - 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} - -     + + + {title} + + {bgColor} + ) } -ThemeColor.propTypes = { - children: PropTypes.node, - className: PropTypes.string, -} - const Colors = () => { + const theme = useTheme() + return ( <> - - - Theme colors - - - - - -
    Brand Primary Color
    -     - -
    Brand Secondary Color
    -     - -
    Brand Success Color
    -     - -
    Brand Danger Color
    -     - -
    Brand Warning Color
    -     - -
    Brand Info Color
    -     - -
    Brand Light Color
    -     - -
    Brand Dark Color
    -     -     -     -     + + Theme Colors} /> + + + MUI provides a rich palette of colors that can be customized through the theme. + + + + + + + + + + + + + + + + + + + + + + + + + + Grey Palette} /> + + + {[50, 100, 200, 300, 400, 500, 600, 700, 800, 900].map((shade) => ( + + 500 ? '#fff' : '#000', + textAlign: 'center', + minHeight: 80, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }} + > + Grey {shade} + {theme.palette.grey[shade]} + + + ))} + + + + + + Background Colors} /> + + + + + Default + {theme.palette.background.default} + + + + + Paper + {theme.palette.background.paper} + + + + + ) } diff --git a/src/views/theme/index.js b/src/views/theme/index.js new file mode 100644 index 0000000000..0393770eb5 --- /dev/null +++ b/src/views/theme/index.js @@ -0,0 +1,4 @@ +import Colors from './colors/Colors' +import Typography from './typography/Typography' + +export { Colors, Typography } diff --git a/src/views/theme/typography/Typography.js b/src/views/theme/typography/Typography.js index 1cae4f6c99..d2916437f9 100644 --- a/src/views/theme/typography/Typography.js +++ b/src/views/theme/typography/Typography.js @@ -1,227 +1,146 @@ import React from 'react' -import { CCard, CCardHeader, CCardBody } from '@coreui/react' -import { DocsLink } from 'src/components' +import { + Card, + CardContent, + CardHeader, + Typography as MuiTypography, + Box, + Divider, +} from '@mui/material' const Typography = () => { 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.
    + + Headings} /> + + + MUI provides a set of typography variants for consistent text styling. + + + + h1. Heading + + variant="h1" + + + + + h2. Heading + + variant="h2" + + + + + h3. Heading + + variant="h3" + + + + + h4. Heading + + variant="h4" + + + + + h5. Heading + + variant="h5" + + + + + h6. Heading + + variant="h6" + + + + + -
    Euismod
    -
    -

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

    -

    Donec id elit non mi porta gravida at eget metus.

    -
    + + Body Text} /> + + + + + body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis + tenetur unde suscipit, quam beatae rerum inventore consectetur. + + + variant="body1" + + + + + + body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis + tenetur unde suscipit, quam beatae rerum inventore consectetur. + + + variant="body2" + + + + + -
    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. -
    -
    -
    -
    -
    -     -     + + Other Variants} /> + + + + + subtitle1. Lorem ipsum dolor sit amet + + + variant="subtitle1" + + + + + + subtitle2. Lorem ipsum dolor sit amet + + + variant="subtitle2" + + + + + + button text + + + variant="button" + + + + + + caption text + + + variant="caption" + + + + + + overline text + + + variant="overline" + + + + + ) } diff --git a/src/views/widgets/Widgets.js b/src/views/widgets/Widgets.js index 4a34afe4c0..8858617012 100644 --- a/src/views/widgets/Widgets.js +++ b/src/views/widgets/Widgets.js @@ -1,89 +1,179 @@ 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' + Box, + Card, + CardContent, + CardHeader, + Typography, + Grid, + LinearProgress, + Link, + useTheme, + alpha, +} from '@mui/material' +import SettingsIcon from '@mui/icons-material/Settings' +import PersonIcon from '@mui/icons-material/Person' +import NightsStayIcon from '@mui/icons-material/NightsStay' +import NotificationsIcon from '@mui/icons-material/Notifications' +import LaptopIcon from '@mui/icons-material/Laptop' +import ArrowForwardIcon from '@mui/icons-material/ArrowForward' +import { DocsExample } from 'src/components' import WidgetsBrand from './WidgetsBrand' import WidgetsDropdown from './WidgetsDropdown' +const WidgetStatsB = ({ value, title, progress, text, color, inverse }) => { + const theme = useTheme() + + return ( + + + + {value} + + + {title} + + + + + + {text} + + + + ) +} + +const WidgetStatsF = ({ icon: Icon, title, value, color, footer }) => { + const theme = useTheme() + + return ( + + + + + + + + {value} + + + {title} + + + + {footer && {footer}} + + ) +} + const Widgets = () => { - const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min) + const theme = useTheme() return ( - - Widgets - - + + + + - - - - + + + - - - + + - - - + + - - - + + - - + + - - - - + + + { progress={{ value: 89.9 }} text="Lorem ipsum dolor sit amet enim." /> - - - + + { progress={{ value: 89.9 }} text="Lorem ipsum dolor sit amet enim." /> - - - + + { progress={{ value: 89.9 }} text="Lorem ipsum dolor sit amet enim." /> - - - + + { progress={{ value: 89.9 }} text="Lorem ipsum dolor sit amet enim." /> - - + + - - - - - } - 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" - /> - - - } + + + + + + + + + + + - - - } + + + - - + + - - - - } + + + + + - View more - - + + View more + + + } /> - - - } + + + - View more - - + + View more + + + } /> - - - } + + + - View more - - + + View more + + + } /> - - - } + + + - View more - - + + 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..95c42eb15f 100644 --- a/src/views/widgets/WidgetsBrand.js +++ b/src/views/widgets/WidgetsBrand.js @@ -1,176 +1,190 @@ 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 { Box, Card, CardContent, Typography, Grid, useTheme } from '@mui/material' +import FacebookIcon from '@mui/icons-material/Facebook' +import TwitterIcon from '@mui/icons-material/Twitter' +import LinkedInIcon from '@mui/icons-material/LinkedIn' +import EventIcon from '@mui/icons-material/Event' +import { LineChart, Line, ResponsiveContainer } from 'recharts' + +const BrandWidget = ({ icon: Icon, iconBgColor, values, chartData, withChart }) => { + const theme = useTheme() + + return ( + + + {withChart && ( + + + + + + + + )} + + + + + {values.map((item, index) => ( + + + + {item.value} + + + {item.title} + + + + ))} + + + + ) +} + +BrandWidget.propTypes = { + icon: PropTypes.elementType.isRequired, + iconBgColor: PropTypes.string.isRequired, + values: PropTypes.arrayOf( + PropTypes.shape({ + title: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, + }), + ).isRequired, + chartData: PropTypes.array, + withChart: PropTypes.bool, +} const WidgetsBrand = (props) => { - const chartOptions = { - elements: { - line: { - tension: 0.4, - }, - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - hoverBorderWidth: 3, - }, - }, - maintainAspectRatio: false, - plugins: { - legend: { - display: false, - }, - }, - scales: { - x: { - display: false, - }, - y: { - display: false, - }, - }, - } + const chartData1 = [ + { value: 65 }, + { value: 59 }, + { value: 84 }, + { value: 84 }, + { value: 51 }, + { value: 55 }, + { value: 40 }, + ] + + const chartData2 = [ + { value: 1 }, + { value: 13 }, + { value: 9 }, + { value: 17 }, + { value: 34 }, + { value: 41 }, + { value: 38 }, + ] + + const chartData3 = [ + { value: 78 }, + { value: 81 }, + { value: 80 }, + { value: 45 }, + { value: 34 }, + { value: 12 }, + { value: 40 }, + ] + + const chartData4 = [ + { value: 35 }, + { value: 23 }, + { value: 56 }, + { value: 22 }, + { value: 97 }, + { value: 23 }, + { value: 64 }, + ] return ( - - - - ), - })} - icon={} + + + - - - - ), - })} - icon={} + + + - - - - ), - })} - icon={} + + + - - - - ), - })} - icon={} + + + - - + + ) } diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js index 85e2fc969d..0fa30afe3e 100644 --- a/src/views/widgets/WidgetsDropdown.js +++ b/src/views/widgets/WidgetsDropdown.js @@ -1,390 +1,221 @@ -import React, { useEffect, useRef } from 'react' +import React from 'react' import PropTypes from 'prop-types' - 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' + Box, + Card, + CardContent, + Typography, + Grid, + IconButton, + Menu, + MenuItem, + useTheme, + alpha, + Skeleton, +} from '@mui/material' +import MoreVertIcon from '@mui/icons-material/MoreVert' +import TrendingDownIcon from '@mui/icons-material/TrendingDown' +import TrendingUpIcon from '@mui/icons-material/TrendingUp' +import { LineChart, Line, BarChart, Bar, ResponsiveContainer } from 'recharts' + +const StatWidget = ({ title, value, trend, trendValue, color, chartType, chartData }) => { + const theme = useTheme() + const [anchorEl, setAnchorEl] = React.useState(null) + + const handleMenuOpen = (event) => { + setAnchorEl(event.currentTarget) + } + + const handleMenuClose = () => { + setAnchorEl(null) + } + + const isPositive = trend === 'up' + const TrendIcon = isPositive ? TrendingUpIcon : TrendingDownIcon + + return ( + + + + + + {value} + + ({trendValue} ) + + + + {title} + + + + + + + Action + Another action + Something else + Disabled action + + + + + + {chartType === 'bar' ? ( + + + + ) : ( + + + + )} + + + + ) +} + +StatWidget.propTypes = { + title: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, + trend: PropTypes.oneOf(['up', 'down']).isRequired, + trendValue: PropTypes.string.isRequired, + color: PropTypes.string.isRequired, + chartType: PropTypes.oneOf(['line', 'bar']), + chartData: PropTypes.array.isRequired, +} const WidgetsDropdown = (props) => { - const widgetChartRef1 = useRef(null) - const widgetChartRef2 = useRef(null) + const theme = useTheme() + + const lineData1 = [ + { value: 65 }, + { value: 59 }, + { value: 84 }, + { value: 84 }, + { value: 51 }, + { value: 55 }, + { value: 40 }, + ] + + const lineData2 = [ + { value: 1 }, + { value: 18 }, + { value: 9 }, + { value: 17 }, + { value: 34 }, + { value: 22 }, + { value: 11 }, + ] - useEffect(() => { - document.documentElement.addEventListener('ColorSchemeChange', () => { - if (widgetChartRef1.current) { - setTimeout(() => { - widgetChartRef1.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-primary') - widgetChartRef1.current.update() - }) - } + const lineData3 = [ + { value: 78 }, + { value: 81 }, + { value: 80 }, + { value: 45 }, + { value: 34 }, + { value: 12 }, + { value: 40 }, + ] - if (widgetChartRef2.current) { - setTimeout(() => { - widgetChartRef2.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-info') - widgetChartRef2.current.update() - }) - } - }) - }, [widgetChartRef1, widgetChartRef2]) + const barData = [ + { value: 78 }, + { value: 81 }, + { value: 80 }, + { value: 45 }, + { value: 34 }, + { value: 12 }, + { value: 40 }, + { value: 85 }, + { value: 65 }, + { value: 23 }, + { value: 12 }, + { value: 98 }, + { value: 34 }, + { value: 84 }, + { value: 67 }, + { value: 82 }, + ] return ( - - - - 26K{' '} - - (-12.4% ) - - - } + + + - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } + value="26K" + trend="down" + trendValue="-12.4%" + color={theme.palette.primary.main} + chartType="line" + chartData={lineData1} /> - - - - $6.200{' '} - - (40.9% ) - - - } + + + - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } + value="$6.200" + trend="up" + trendValue="40.9%" + color={theme.palette.info.main} + chartType="line" + chartData={lineData2} /> - - - - 2.49%{' '} - - (84.7% ) - - - } + + + - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } + value="2.49%" + trend="up" + trendValue="84.7%" + color={theme.palette.warning.main} + chartType="line" + chartData={lineData3} /> - - - - 44K{' '} - - (-23.6% ) - - - } + + + - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } + value="44K" + trend="down" + trendValue="-23.6%" + color={theme.palette.error.main} + chartType="bar" + chartData={barData} /> - - + + ) }