From 2f793d1746c60c9cf6f715687b42f89259519336 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Fri, 9 Apr 2021 23:21:48 +0200 Subject: [PATCH] styles: improve syntax using prettier --- src/App.js | 44 +- src/App.test.js | 7 +- src/assets/icons/index.js | 277 ++++--- src/assets/icons/logo-negative.js | 7 +- src/assets/icons/logo.js | 7 +- src/assets/icons/sygnet.js | 7 +- src/components/AppBreadcrumb.js | 36 +- src/components/AppFooter.js | 8 +- src/components/AppHeader.js | 60 +- src/components/AppSidebar.js | 23 +- src/components/header/AppHeaderDropdown.js | 39 +- .../header/AppHeaderDropdownMssg.js | 37 +- .../header/AppHeaderDropdownNotif.js | 59 +- .../header/AppHeaderDropdownTasks.js | 57 +- src/containers/TheContent.js | 31 +- src/containers/_nav.js | 38 +- src/containers/index.js | 2 +- src/index.js | 22 +- src/layout/DefaultLayout.js | 16 +- src/polyfill.js | 32 +- src/reusable/DocsLink.js | 10 +- src/reusable/index.js | 4 +- src/routes.js | 76 +- src/serviceWorker.js | 70 +- src/setupTests.js | 8 +- src/store.js | 6 +- src/views/base/breadcrumbs/Breadcrumbs.js | 12 +- src/views/base/cards/Cards.js | 289 ++++---- src/views/base/carousels/Carousels.js | 107 +-- src/views/base/collapses/Collapses.js | 189 +++-- src/views/base/forms/BasicForms.js | 579 +++++++++++---- src/views/base/index.js | 46 +- src/views/base/jumbotrons/Jumbotrons.js | 38 +- src/views/base/list-groups/ListGroups.js | 204 ++++-- src/views/base/navbars/Navbars.js | 98 +-- src/views/base/navs/Navs.js | 42 +- src/views/base/paginations/Pagnations.js | 17 +- src/views/base/popovers/Popovers.js | 68 +- src/views/base/progress-bar/ProgressBar.js | 26 +- src/views/base/tables/Tables.js | 120 ++-- src/views/base/tabs/Tabs.js | 28 +- src/views/base/tooltips/Tooltips.js | 70 +- .../buttons/brand-buttons/BrandButtons.js | 504 +++++++++---- .../button-dropdowns/ButtonDropdowns.js | 138 ++-- .../buttons/button-groups/ButtonGroups.js | 16 +- src/views/buttons/buttons/Buttons.js | 674 +++++++++++++----- src/views/buttons/index.js | 4 +- src/views/charts/ChartBarSimple.js | 46 +- src/views/charts/ChartLineSimple.js | 85 +-- src/views/charts/Charts.js | 112 ++- src/views/charts/MainChartExample.js | 99 ++- src/views/dashboard/Dashboard.js | 136 ++-- src/views/icons/brands/Brands.js | 10 +- src/views/icons/coreui-icons/CoreUIIcons.js | 6 +- src/views/icons/flags/Flags.js | 6 +- src/views/icons/index.js | 10 +- src/views/notifications/alerts/Alerts.js | 84 +-- src/views/notifications/badges/Badges.js | 129 +++- src/views/notifications/index.js | 12 +- src/views/notifications/modals/Modals.js | 220 +++--- src/views/notifications/toaster/Toaster.js | 90 +-- src/views/pages/login/Login.js | 26 +- src/views/pages/page404/Page404.js | 2 +- src/views/pages/page500/Page500.js | 6 +- src/views/pages/register/Register.js | 26 +- src/views/theme/colors/Colors.js | 37 +- src/views/theme/typography/Typography.js | 231 +++--- src/views/users/User.js | 41 -- src/views/users/Users.js | 86 --- src/views/users/UsersData.js | 29 - src/views/widgets/Widgets.js | 315 +++++--- src/views/widgets/WidgetsBrand.js | 330 ++++----- src/views/widgets/WidgetsDropdown.js | 34 +- 73 files changed, 3741 insertions(+), 2719 deletions(-) delete mode 100644 src/views/users/User.js delete mode 100644 src/views/users/Users.js delete mode 100644 src/views/users/UsersData.js diff --git a/src/App.js b/src/App.js index 491ec8a..14c614f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ -import React, { Component } from 'react'; -import { HashRouter, Route, Switch } from 'react-router-dom'; -import './scss/style.scss'; +import React, { Component } from 'react' +import { HashRouter, Route, Switch } from 'react-router-dom' +import './scss/style.scss' const loading = (
@@ -9,31 +9,35 @@ const loading = ( ) // Containers -const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout')); +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 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')) class App extends Component { - render() { return ( - - - } /> - } /> - } /> - } /> - } /> - - + + + } /> + } + /> + } /> + } /> + } /> + + - ); + ) } } -export default App; +export default App diff --git a/src/App.test.js b/src/App.test.js index 87ba6fb..10ea132 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -4,18 +4,17 @@ import App from './App' import ChartLineSimple from './views/charts/ChartLineSimple' import Dashboard from './views/dashboard/Dashboard.js' - it('mounts App without crashing', () => { - const wrapper = shallow() + const wrapper = shallow() wrapper.unmount() }) it('mounts Dashboard without crashing', () => { - const wrapper = shallow() + const wrapper = shallow() wrapper.unmount() }) it('mounts Charts without crashing', () => { - const wrapper = shallow( ) + const wrapper = shallow() wrapper.unmount() }) diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js index 8b016f5..505b704 100644 --- a/src/assets/icons/index.js +++ b/src/assets/icons/index.js @@ -26,16 +26,9 @@ import { cibStripe, cibPaypal, cibGooglePay, - cibCcAmex -} from '@coreui/icons' -import { - cifUs, - cifBr, - cifIn, - cifFr, - cifEs, - cifPl + cibCcAmex, } from '@coreui/icons' +import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from '@coreui/icons' import { cilAlignCenter, cilAlignLeft, @@ -127,135 +120,141 @@ import { cilUserUnfollow, cilX, cilXCircle, - cilWarning + cilWarning, } from '@coreui/icons' -export const icons = Object.assign({}, { - sygnet, - logo, - logoNegative -}, { - cilAlignCenter, - cilAlignLeft, - cilAlignRight, - cilApplicationsSettings, - cilArrowRight, - cilArrowTop, - cilAsterisk, - cilBan, - cilBasket, - cilBell, - cilBold, - cilBookmark, - cilCalculator, - cilCalendar, - cilCloudDownload, - cilChartPie, - cilCheck, - cilChevronBottom, - cilChevronLeft, - cilChevronRight, - cilChevronTop, - cilCircle, - cilCheckCircle, - cilCode, - cilCommentSquare, - cilCreditCard, - cilCursor, - cilCursorMove, - cilDrop, - cilDollar, - cilEnvelopeClosed, - cilEnvelopeLetter, - cilEnvelopeOpen, - cilEuro, - cilGlobeAlt, - cilGrid, - cilFile, - cilFullscreen, - cilFullscreenExit, - cilGraph, - cilHome, - cilInbox, - cilIndentDecrease, - cilIndentIncrease, - cilInputPower, - cilItalic, - cilJustifyCenter, - cilJustifyLeft, - cilLaptop, - cilLayers, - cilLightbulb, - cilList, - cilListNumbered, - cilListRich, - cilLocationPin, - cilLockLocked, - cilMagnifyingGlass, - cilMap, - cilMoon, - cilNotes, - cilOptions, - cilPaperclip, - cilPaperPlane, - cilPencil, - cilPeople, - cilPhone, - cilPrint, - cilPuzzle, - cilSave, - cilScrubber, - cilSettings, - cilShare, - cilShareAll, - cilShareBoxed, - cilShieldAlt, - cilSpeech, - cilSpeedometer, - cilSpreadsheet, - cilStar, - cilSun, - cilTags, - cilTask, - cilTrash, - cilUnderline, - cilUser, - cilUserFemale, - cilUserFollow, - cilUserUnfollow, - cilX, - cilXCircle, - cilWarning -}, { - cifUs, - cifBr, - cifIn, - cifFr, - cifEs, - cifPl -}, { - cibSkype, - cibFacebook, - cibTwitter, - cibLinkedin, - cibFlickr, - cibTumblr, - cibXing, - cibGithub, - cibStackoverflow, - cibYoutube, - cibDribbble, - cibInstagram, - cibPinterest, - cibVk, - cibYahoo, - cibBehance, - cibReddit, - cibVimeo, - cibCcMastercard, - cibCcVisa, - cibStripe, - cibPaypal, - cibGooglePay, - cibCcAmex -}) +export const icons = Object.assign( + {}, + { + sygnet, + logo, + logoNegative, + }, + { + cilAlignCenter, + cilAlignLeft, + cilAlignRight, + cilApplicationsSettings, + cilArrowRight, + cilArrowTop, + cilAsterisk, + cilBan, + cilBasket, + cilBell, + cilBold, + cilBookmark, + cilCalculator, + cilCalendar, + cilCloudDownload, + cilChartPie, + cilCheck, + cilChevronBottom, + cilChevronLeft, + cilChevronRight, + cilChevronTop, + cilCircle, + cilCheckCircle, + cilCode, + cilCommentSquare, + cilCreditCard, + cilCursor, + cilCursorMove, + cilDrop, + cilDollar, + cilEnvelopeClosed, + cilEnvelopeLetter, + cilEnvelopeOpen, + cilEuro, + cilGlobeAlt, + cilGrid, + cilFile, + cilFullscreen, + cilFullscreenExit, + cilGraph, + cilHome, + cilInbox, + cilIndentDecrease, + cilIndentIncrease, + cilInputPower, + cilItalic, + cilJustifyCenter, + cilJustifyLeft, + cilLaptop, + cilLayers, + cilLightbulb, + cilList, + cilListNumbered, + cilListRich, + cilLocationPin, + cilLockLocked, + cilMagnifyingGlass, + cilMap, + cilMoon, + cilNotes, + cilOptions, + cilPaperclip, + cilPaperPlane, + cilPencil, + cilPeople, + cilPhone, + cilPrint, + cilPuzzle, + cilSave, + cilScrubber, + cilSettings, + cilShare, + cilShareAll, + cilShareBoxed, + cilShieldAlt, + cilSpeech, + cilSpeedometer, + cilSpreadsheet, + cilStar, + cilSun, + cilTags, + cilTask, + cilTrash, + cilUnderline, + cilUser, + cilUserFemale, + cilUserFollow, + cilUserUnfollow, + cilX, + cilXCircle, + cilWarning, + }, + { + cifUs, + cifBr, + cifIn, + cifFr, + cifEs, + cifPl, + }, + { + cibSkype, + cibFacebook, + cibTwitter, + cibLinkedin, + cibFlickr, + cibTumblr, + cibXing, + cibGithub, + cibStackoverflow, + cibYoutube, + cibDribbble, + cibInstagram, + cibPinterest, + cibVk, + cibYahoo, + cibBehance, + cibReddit, + cibVimeo, + cibCcMastercard, + cibCcVisa, + cibStripe, + cibPaypal, + cibGooglePay, + cibCcAmex, + }, +) diff --git a/src/assets/icons/logo-negative.js b/src/assets/icons/logo-negative.js index 337875e..114a6a0 100644 --- a/src/assets/icons/logo-negative.js +++ b/src/assets/icons/logo-negative.js @@ -1,4 +1,6 @@ -export const logoNegative = ['608 134', ` +export const logoNegative = [ + '608 134', + ` coreui react pro logo @@ -27,4 +29,5 @@ export const logoNegative = ['608 134', ` -`] +`, +] diff --git a/src/assets/icons/logo.js b/src/assets/icons/logo.js index 01d6ddd..7a2d7e0 100644 --- a/src/assets/icons/logo.js +++ b/src/assets/icons/logo.js @@ -1,4 +1,6 @@ -export const logo = ['608 134', ` +export const logo = [ + '608 134', + ` coreui react pro @@ -26,4 +28,5 @@ export const logo = ['608 134', ` -`] +`, +] diff --git a/src/assets/icons/sygnet.js b/src/assets/icons/sygnet.js index fddab7e..3a57fbd 100644 --- a/src/assets/icons/sygnet.js +++ b/src/assets/icons/sygnet.js @@ -1,4 +1,6 @@ -export const sygnet = ['160 160', ` +export const sygnet = [ + '160 160', + ` coreui logo @@ -6,4 +8,5 @@ export const sygnet = ['160 160', ` -`] +`, +] diff --git a/src/components/AppBreadcrumb.js b/src/components/AppBreadcrumb.js index be202ea..874e243 100644 --- a/src/components/AppBreadcrumb.js +++ b/src/components/AppBreadcrumb.js @@ -1,16 +1,16 @@ import React from 'react' -import { useLocation } from "react-router-dom"; +import { useLocation } from 'react-router-dom' -import routes from "../routes"; +import routes from '../routes' -import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react-ts'; +import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react-ts' const AppBreadcrumb = () => { const currentLocation = useLocation().pathname //array1.find(element => element > 10); const getRouteName = (pathname, routes) => { - const currentRoute = routes.find(route => route.path === pathname) + const currentRoute = routes.find((route) => route.path === pathname) return currentRoute.name } @@ -19,9 +19,9 @@ const AppBreadcrumb = () => { location.split('/').reduce((prev, curr, index, array) => { const currentPathname = `${prev}/${curr}` breadcrumbs.push({ - 'pathname': currentPathname, - 'name': getRouteName(currentPathname, routes), - 'active': index + 1 === array.length ? true : false + pathname: currentPathname, + name: getRouteName(currentPathname, routes), + active: index + 1 === array.length ? true : false, }) return currentPathname }) @@ -33,18 +33,16 @@ const AppBreadcrumb = () => { return ( Home - { - breadcrumbs.map((breadcrumb, index) => { - return ( - - {breadcrumb.name} - - ) - }) - } + {breadcrumbs.map((breadcrumb, index) => { + return ( + + {breadcrumb.name} + + ) + })} ) } diff --git a/src/components/AppFooter.js b/src/components/AppFooter.js index 68d326a..e6fffd8 100644 --- a/src/components/AppFooter.js +++ b/src/components/AppFooter.js @@ -5,12 +5,16 @@ const AppFooter = () => { return (
- CoreUI + + CoreUI + © 2020 creativeLabs.
) diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js index 0338f1d..1baf349 100644 --- a/src/components/AppHeader.js +++ b/src/components/AppHeader.js @@ -1,6 +1,6 @@ -import React from "react"; -import { NavLink } from "react-router-dom"; -import { useSelector, useDispatch } from "react-redux"; +import React from 'react' +import { NavLink } from 'react-router-dom' +import { useSelector, useDispatch } from 'react-redux' import { CContainer, CHeader, @@ -10,8 +10,8 @@ import { CHeaderToggler, CNavLink, CNavItem, -} from "@coreui/react-ts"; -import CIcon from "@coreui/icons-react"; +} from '@coreui/react-ts' +import CIcon from '@coreui/icons-react' import { AppBreadcrumb, @@ -19,57 +19,39 @@ import { AppHeaderDropdownMssg, AppHeaderDropdownNotif, AppHeaderDropdownTasks, -} from "../containers/index"; +} from '../containers/index' const AppHeader = () => { - const dispatch = useDispatch(); - const sidebarShow = useSelector((state) => state.sidebarShow); + const dispatch = useDispatch() + const sidebarShow = useSelector((state) => state.sidebarShow) const toggleSidebar = () => { - const val = [true, "responsive"].includes(sidebarShow) - ? false - : "responsive"; - dispatch({ type: "set", sidebarShow: val }); - }; + const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive' + dispatch({ type: 'set', sidebarShow: val }) + } const toggleSidebarMobile = () => { - const val = [false, "responsive"].includes(sidebarShow) - ? true - : "responsive"; - dispatch({ type: "set", sidebarShow: val }); - }; + const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive' + dispatch({ type: 'set', sidebarShow: val }) + } return ( - - + + - + Dashboard - - Users - + Users Settings @@ -85,10 +67,10 @@ const AppHeader = () => { - + - ); -}; + ) +} export default AppHeader diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js index fea87d8..77c0b64 100644 --- a/src/components/AppSidebar.js +++ b/src/components/AppSidebar.js @@ -16,7 +16,7 @@ import navigation from '../containers/_nav' const AppSidebar = () => { const dispatch = useDispatch() - const unfoldable = useSelector(state => state.sidebarUnfoldable) + const unfoldable = useSelector((state) => state.sidebarUnfoldable) // const visible = useSelector(state => state.sidebarUnfoldable) return ( @@ -28,23 +28,16 @@ const AppSidebar = () => { // onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })} > - - + + - + - dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}/> + dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })} + /> ) } diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js index b99939c..f8cdeb5 100644 --- a/src/components/header/AppHeaderDropdown.js +++ b/src/components/header/AppHeaderDropdown.js @@ -13,41 +13,44 @@ import CIcon from '@coreui/icons-react' const AppHeaderDropdown = () => { return ( - + - - Account - + Account Updates - 42 + + 42 + Messages - 42 + + 42 + Tasks - 42 + + 42 + Comments - 42 + + 42 + - - Settings - + Settings - Profile + + Profile @@ -56,12 +59,16 @@ const AppHeaderDropdown = () => { Payments - 42 + + 42 + Projects - 42 + + 42 + diff --git a/src/components/header/AppHeaderDropdownMssg.js b/src/components/header/AppHeaderDropdownMssg.js index 3b41d79..9a281f5 100644 --- a/src/components/header/AppHeaderDropdownMssg.js +++ b/src/components/header/AppHeaderDropdownMssg.js @@ -6,26 +6,22 @@ import { CDropdownItem, CDropdownMenu, CDropdownToggle, - CImage + CImage, } from '@coreui/react-ts' import CIcon from '@coreui/icons-react' const AppHeaderDropdownMssg = () => { const itemsCount = 4 return ( - + - {itemsCount} + + + {itemsCount} + - + You have {itemsCount} messages @@ -41,7 +37,8 @@ const AppHeaderDropdownMssg = () => { Important message
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt...
@@ -56,7 +53,9 @@ const AppHeaderDropdownMssg = () => { 5 minutes ago
Lorem ipsum dolor sit amet
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt...
@@ -71,7 +70,9 @@ const AppHeaderDropdownMssg = () => { 1:52 PM
Lorem ipsum dolor sit amet
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt...
@@ -86,11 +87,15 @@ const AppHeaderDropdownMssg = () => { 4:03 AM
Lorem ipsum dolor sit amet
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt...
- View all messages + + View all messages + ) diff --git a/src/components/header/AppHeaderDropdownNotif.js b/src/components/header/AppHeaderDropdownNotif.js index 1ddd07b..b07d0c4 100644 --- a/src/components/header/AppHeaderDropdownNotif.js +++ b/src/components/header/AppHeaderDropdownNotif.js @@ -5,58 +5,65 @@ import { CDropdownItem, CDropdownMenu, CDropdownToggle, - CProgress + CProgress, } from '@coreui/react-ts' import CIcon from '@coreui/icons-react' const AppHeaderDropdownNotif = () => { const itemsCount = 5 return ( - + - - {itemsCount} + + + {itemsCount} + - - + + You have {itemsCount} notifications - New user registered - User deleted - Sales report is ready - New client - Server overloaded - + + New user registered + + + User deleted + + + Sales report is ready + + + New client + + + Server overloaded + + Server
- CPU Usage + + CPU Usage +
348 Processes. 1/4 Cores.
- Memory Usage + + Memory Usage +
11444GB/16384MB
- SSD 1 Usage + + SSD 1 Usage +
243GB/256GB diff --git a/src/components/header/AppHeaderDropdownTasks.js b/src/components/header/AppHeaderDropdownTasks.js index 444c3ca..8e59e4a 100644 --- a/src/components/header/AppHeaderDropdownTasks.js +++ b/src/components/header/AppHeaderDropdownTasks.js @@ -5,51 +5,72 @@ import { CDropdownItem, CDropdownMenu, CDropdownToggle, - CProgress + CProgress, } from '@coreui/react-ts' import CIcon from '@coreui/icons-react' const AppHeaderDropdownTasks = () => { const itemsCount = 5 return ( - + - {itemsCount} + + {itemsCount} + - + You have {itemsCount} pending tasks -
Upgrade NPM & Bower 0%
+
+ Upgrade NPM & Bower{' '} + + 0% + +
-
ReactJS Version 25%
+
+ ReactJS Version{' '} + + 25% + +
-
VueJS Version 50%
+
+ VueJS Version{' '} + + 50% + +
-
Add new layouts 75%
+
+ Add new layouts{' '} + + 75% + +
-
Angular 2 Cli Version 100%
+
+ Angular 2 Cli Version{' '} + + 100% + +
- View all tasks + + View all tasks + ) diff --git a/src/containers/TheContent.js b/src/containers/TheContent.js index c932ce0..5652660 100644 --- a/src/containers/TheContent.js +++ b/src/containers/TheContent.js @@ -1,9 +1,5 @@ import React, { Suspense } from 'react' -import { - Redirect, - Route, - Switch -} from 'react-router-dom' +import { Redirect, Route, Switch } from 'react-router-dom' import { CContainer, CFade } from '@coreui/react-ts' // routes config @@ -22,17 +18,20 @@ const TheContent = () => { {routes.map((route, idx) => { - return route.component && ( - ( - - - - )} /> + return ( + route.component && ( + ( + + + + )} + /> + ) ) })} diff --git a/src/containers/_nav.js b/src/containers/_nav.js index 1e64f38..958e648 100644 --- a/src/containers/_nav.js +++ b/src/containers/_nav.js @@ -1,47 +1,47 @@ import React from 'react' import CIcon from '@coreui/icons-react' -import { NavLink } from "react-router-dom" +import { NavLink } from 'react-router-dom' -const _nav = [ +const _nav = [ { _component: 'CNavItem', as: NavLink, anchor: 'Dashboard', to: '/dashboard', - icon: , + icon: , badge: { color: 'info', text: 'NEW', - } + }, }, { _component: 'CNavTitle', - anchor: 'Theme' + anchor: 'Theme', }, { _component: 'CNavItem', as: NavLink, anchor: 'Colors', to: '/theme/colors', - icon: , + icon: , }, { _component: 'CNavItem', as: NavLink, anchor: 'Typography', to: '/theme/typography', - icon: , + icon: , }, { _component: 'CNavTitle', - anchor: 'Components' + anchor: 'Components', }, { _component: 'CNavGroup', as: NavLink, anchor: 'Base', to: '/to', - icon: , + icon: , items: [ { _component: 'CNavItem', @@ -139,7 +139,7 @@ const _nav = [ _component: 'CNavGroup', anchor: 'Buttons', // route: '/buttons', - icon: , + icon: , items: [ { _component: 'CNavItem', @@ -164,7 +164,7 @@ const _nav = [ as: NavLink, anchor: 'Dropdowns', to: '/buttons/button-dropdowns', - } + }, ], }, { @@ -172,13 +172,13 @@ const _nav = [ as: NavLink, anchor: 'Charts', to: '/charts', - icon: + icon: , }, { _component: 'CNavGroup', anchor: 'Icons', // route: '/icons', - icon: , + icon: , items: [ { _component: 'CNavItem', @@ -208,7 +208,7 @@ const _nav = [ _component: 'CNavGroup', anchor: 'Notifications', // route: '/notifications', - icon: , + icon: , items: [ { _component: 'CNavItem', @@ -232,16 +232,16 @@ const _nav = [ _component: 'CNavItem', as: NavLink, anchor: 'Toaster', - to: '/notifications/toaster' - } - ] + to: '/notifications/toaster', + }, + ], }, { _component: 'CNavItem', as: NavLink, anchor: 'Widgets', to: '/widgets', - icon: , + icon: , badge: { color: 'info', text: 'NEW', @@ -257,7 +257,7 @@ const _nav = [ { _component: 'CNavGroup', anchor: 'Pages', - icon: , + icon: , items: [ { _component: 'CNavItem', diff --git a/src/containers/index.js b/src/containers/index.js index 72e513e..045c65e 100644 --- a/src/containers/index.js +++ b/src/containers/index.js @@ -19,5 +19,5 @@ export { AppHeaderDropdownNotif, AppHeaderDropdownTasks, DefaultLayout, - AppSidebar + AppSidebar, } diff --git a/src/index.js b/src/index.js index 189fecc..d879cd1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,11 @@ -import 'react-app-polyfill/ie11'; // For IE 11 support -import 'react-app-polyfill/stable'; -import 'core-js'; +import 'react-app-polyfill/ie11' // For IE 11 support +import 'react-app-polyfill/stable' +import 'core-js' import './polyfill' -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; -import * as serviceWorker from './serviceWorker'; +import React from 'react' +import ReactDOM from 'react-dom' +import App from './App' +import * as serviceWorker from './serviceWorker' import { icons } from './assets/icons' @@ -16,12 +16,12 @@ React.icons = icons ReactDOM.render( - + , - document.getElementById('root') -); + document.getElementById('root'), +) // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: http://bit.ly/CRA-PWA -serviceWorker.unregister(); +serviceWorker.unregister() diff --git a/src/layout/DefaultLayout.js b/src/layout/DefaultLayout.js index 262e85c..fca04f5 100644 --- a/src/layout/DefaultLayout.js +++ b/src/layout/DefaultLayout.js @@ -1,22 +1,16 @@ import React from 'react' -import { - TheContent, - AppSidebar, - AppFooter, - AppHeader -} from '../containers/index' +import { TheContent, AppSidebar, AppFooter, AppHeader } from '../containers/index' const DefaultLayout = () => { - return (
- +
- +
- +
- +
) diff --git a/src/polyfill.js b/src/polyfill.js index 1e73bf5..ee36d18 100644 --- a/src/polyfill.js +++ b/src/polyfill.js @@ -1,6 +1,6 @@ /* -* required polyfills -*/ + * required polyfills + */ /** IE9, IE10 and IE11 requires all of the following polyfills. **/ // import "core-js"; @@ -28,14 +28,13 @@ // import 'core-js/features/reflect' // CustomEvent() constructor functionality in IE9, IE10, IE11 -(function () { +;(function () { + if (typeof window.CustomEvent === 'function') return false - if ( typeof window.CustomEvent === "function" ) return false - - function CustomEvent ( event, params ) { + function CustomEvent(event, params) { params = params || { bubbles: false, cancelable: false, detail: undefined } - var evt = document.createEvent( 'CustomEvent' ) - evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ) + var evt = document.createEvent('CustomEvent') + evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail) return evt } @@ -46,18 +45,17 @@ if (!Element.prototype.matches) { Element.prototype.matches = - Element.prototype.msMatchesSelector || - Element.prototype.webkitMatchesSelector; + Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector } if (!Element.prototype.closest) { - Element.prototype.closest = function(s) { - var el = this; + Element.prototype.closest = function (s) { + var el = this do { - if (Element.prototype.matches.call(el, s)) return el; - el = el.parentElement || el.parentNode; - } while (el !== null && el.nodeType === 1); - return null; - }; + if (Element.prototype.matches.call(el, s)) return el + el = el.parentElement || el.parentNode + } while (el !== null && el.nodeType === 1) + return null + } } diff --git a/src/reusable/DocsLink.js b/src/reusable/DocsLink.js index f9f4a14..7251933 100644 --- a/src/reusable/DocsLink.js +++ b/src/reusable/DocsLink.js @@ -1,12 +1,8 @@ import React from 'react' import { CLink } from '@coreui/react-ts' -const DocsLink = props => { - const { - name, - text, - ...rest - } = props +const DocsLink = (props) => { + const { name, text, ...rest } = props const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href @@ -19,7 +15,7 @@ const DocsLink = props => { target="_blank" className="card-header-action" > - { text || 'docs' } + {text || 'docs'} ) diff --git a/src/reusable/index.js b/src/reusable/index.js index 6b2e38a..bb9757e 100644 --- a/src/reusable/index.js +++ b/src/reusable/index.js @@ -1,5 +1,3 @@ import DocsLink from './DocsLink' -export { - DocsLink -} \ No newline at end of file +export { DocsLink } diff --git a/src/routes.js b/src/routes.js index 122f3d4..06655b1 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,44 +1,42 @@ -import React from 'react'; +import React from 'react' -const Toaster = React.lazy(() => import('./views/notifications/toaster/Toaster')); -const Tables = React.lazy(() => import('./views/base/tables/Tables')); +const Toaster = React.lazy(() => import('./views/notifications/toaster/Toaster')) +const Tables = React.lazy(() => import('./views/base/tables/Tables')) -const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs')); -const Cards = React.lazy(() => import('./views/base/cards/Cards')); -const Carousels = React.lazy(() => import('./views/base/carousels/Carousels')); -const Collapses = React.lazy(() => import('./views/base/collapses/Collapses')); -const BasicForms = React.lazy(() => import('./views/base/forms/BasicForms')); +const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs')) +const Cards = React.lazy(() => import('./views/base/cards/Cards')) +const Carousels = React.lazy(() => import('./views/base/carousels/Carousels')) +const Collapses = React.lazy(() => import('./views/base/collapses/Collapses')) +const BasicForms = React.lazy(() => import('./views/base/forms/BasicForms')) -const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons')); -const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups')); -const Navbars = React.lazy(() => import('./views/base/navbars/Navbars')); -const Navs = React.lazy(() => import('./views/base/navs/Navs')); -const Paginations = React.lazy(() => import('./views/base/paginations/Pagnations')); -const Popovers = React.lazy(() => import('./views/base/popovers/Popovers')); -const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressBar')); +const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons')) +const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups')) +const Navbars = React.lazy(() => import('./views/base/navbars/Navbars')) +const Navs = React.lazy(() => import('./views/base/navs/Navs')) +const Paginations = React.lazy(() => import('./views/base/paginations/Pagnations')) +const Popovers = React.lazy(() => import('./views/base/popovers/Popovers')) +const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressBar')) -const Tabs = React.lazy(() => import('./views/base/tabs/Tabs')); -const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips')); -const BrandButtons = React.lazy(() => import('./views/buttons/brand-buttons/BrandButtons')); -const ButtonDropdowns = React.lazy(() => import('./views/buttons/button-dropdowns/ButtonDropdowns')); -const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups')); -const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons')); -const Charts = React.lazy(() => import('./views/charts/Charts')); -const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard')); -const CoreUIIcons = React.lazy(() => import('./views/icons/coreui-icons/CoreUIIcons')); -const Flags = React.lazy(() => import('./views/icons/flags/Flags')); -const Brands = React.lazy(() => import('./views/icons/brands/Brands')); -const Alerts = React.lazy(() => import('./views/notifications/alerts/Alerts')); -const Badges = React.lazy(() => import('./views/notifications/badges/Badges')); -const Modals = React.lazy(() => import('./views/notifications/modals/Modals')); -const Colors = React.lazy(() => import('./views/theme/colors/Colors')); -const Typography = React.lazy(() => import('./views/theme/typography/Typography')); -const Widgets = React.lazy(() => import('./views/widgets/Widgets')); -const Users = React.lazy(() => import('./views/users/Users')); -const User = React.lazy(() => import('./views/users/User')); +const Tabs = React.lazy(() => import('./views/base/tabs/Tabs')) +const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips')) +const BrandButtons = React.lazy(() => import('./views/buttons/brand-buttons/BrandButtons')) +const ButtonDropdowns = React.lazy(() => import('./views/buttons/button-dropdowns/ButtonDropdowns')) +const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups')) +const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons')) +const Charts = React.lazy(() => import('./views/charts/Charts')) +const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard')) +const CoreUIIcons = React.lazy(() => import('./views/icons/coreui-icons/CoreUIIcons')) +const Flags = React.lazy(() => import('./views/icons/flags/Flags')) +const Brands = React.lazy(() => import('./views/icons/brands/Brands')) +const Alerts = React.lazy(() => import('./views/notifications/alerts/Alerts')) +const Badges = React.lazy(() => import('./views/notifications/badges/Badges')) +const Modals = React.lazy(() => import('./views/notifications/modals/Modals')) +const Colors = React.lazy(() => import('./views/theme/colors/Colors')) +const Typography = React.lazy(() => import('./views/theme/typography/Typography')) +const Widgets = React.lazy(() => import('./views/widgets/Widgets')) -const Login = React.lazy(() => import('./views/pages/login/Login')); -const Register = React.lazy(() => import('./views/pages/register/Register')); +const Login = React.lazy(() => import('./views/pages/login/Login')) +const Register = React.lazy(() => import('./views/pages/register/Register')) const routes = [ { path: '/', exact: true, name: 'Home' }, @@ -80,8 +78,6 @@ const routes = [ { path: '/pages/login', name: 'Login', component: Login }, { path: '/pages/register', name: 'Register', component: Register }, { path: '/widgets', name: 'Widgets', component: Widgets }, - { path: '/users', exact: true, name: 'Users', component: Users }, - { path: '/users/:id', exact: true, name: 'User Details', component: User } -]; +] -export default routes; +export default routes diff --git a/src/serviceWorker.js b/src/serviceWorker.js index 8859a0c..d4f72f2 100644 --- a/src/serviceWorker.js +++ b/src/serviceWorker.js @@ -13,51 +13,49 @@ const isLocalhost = Boolean( // [::1] is the IPv6 localhost address. window.location.hostname === '[::1]' || // 127.0.0.1/8 is considered localhost for IPv4. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) -); + window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/), +) export function register(config) { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location); + const publicUrl = new URL(process.env.PUBLIC_URL, window.location) if (publicUrl.origin !== window.location.origin) { // Our service worker won't work if PUBLIC_URL is on a different origin // from what our page is served on. This might happen if a CDN is used to // serve assets; see https://github.com/facebook/create-react-app/issues/2374 - return; + return } window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js` if (isLocalhost) { // This is running on localhost. Let's check if a service worker still exists or not. - checkValidServiceWorker(swUrl, config); + checkValidServiceWorker(swUrl, config) // Add some additional logging to localhost, pointing developers to the // service worker/PWA documentation. navigator.serviceWorker.ready.then(() => { console.log( 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://goo.gl/SC7cgQ' - ); - }); + 'worker. To learn more, visit https://goo.gl/SC7cgQ', + ) + }) } else { // Is not local host. Just register service worker - registerValidSW(swUrl, config); + registerValidSW(swUrl, config) } - }); + }) } } function registerValidSW(swUrl, config) { navigator.serviceWorker .register(swUrl) - .then(registration => { + .then((registration) => { registration.onupdatefound = () => { - const installingWorker = registration.installing; + const installingWorker = registration.installing installingWorker.onstatechange = () => { if (installingWorker.state === 'installed') { if (navigator.serviceWorker.controller) { @@ -65,63 +63,61 @@ function registerValidSW(swUrl, config) { // the fresh content will have been added to the cache. // It's the perfect time to display a "New content is // available; please refresh." message in your web app. - console.log('New content is available; please refresh.'); + console.log('New content is available; please refresh.') // Execute callback if (config.onUpdate) { - config.onUpdate(registration); + config.onUpdate(registration) } } else { // At this point, everything has been precached. // It's the perfect time to display a // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); + console.log('Content is cached for offline use.') // Execute callback if (config.onSuccess) { - config.onSuccess(registration); + config.onSuccess(registration) } } } - }; - }; + } + } + }) + .catch((error) => { + console.error('Error during service worker registration:', error) }) - .catch(error => { - console.error('Error during service worker registration:', error); - }); } function checkValidServiceWorker(swUrl, config) { // Check if the service worker can be found. If it can't reload the page. fetch(swUrl) - .then(response => { + .then((response) => { // Ensure service worker exists, and that we really are getting a JS file. if ( response.status === 404 || response.headers.get('content-type').indexOf('javascript') === -1 ) { // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { + navigator.serviceWorker.ready.then((registration) => { registration.unregister().then(() => { - window.location.reload(); - }); - }); + window.location.reload() + }) + }) } else { // Service worker found. Proceed as normal. - registerValidSW(swUrl, config); + registerValidSW(swUrl, config) } }) .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.' - ); - }); + console.log('No internet connection found. App is running in offline mode.') + }) } export function unregister() { if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { - registration.unregister(); - }); + navigator.serviceWorker.ready.then((registration) => { + registration.unregister() + }) } } diff --git a/src/setupTests.js b/src/setupTests.js index 6f2c9fc..2b9d164 100644 --- a/src/setupTests.js +++ b/src/setupTests.js @@ -1,7 +1,7 @@ -import {configure} from 'enzyme'; -import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; +import { configure } from 'enzyme' +import Adapter from '@wojtekmaj/enzyme-adapter-react-17' -configure({adapter: new Adapter()}); +configure({ adapter: new Adapter() }) if (global.document) { document.createRange = () => ({ @@ -11,5 +11,5 @@ if (global.document) { nodeName: 'BODY', ownerDocument: document, }, - }); + }) } diff --git a/src/store.js b/src/store.js index 0267b34..034944a 100644 --- a/src/store.js +++ b/src/store.js @@ -1,17 +1,17 @@ import { createStore } from 'redux' const initialState = { - sidebarShow: 'responsive' + sidebarShow: 'responsive', } const changeState = (state = initialState, { type, ...rest }) => { switch (type) { case 'set': - return {...state, ...rest } + return { ...state, ...rest } default: return state } } const store = createStore(changeState) -export default store \ No newline at end of file +export default store diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/base/breadcrumbs/Breadcrumbs.js index bf13366..1b9854c 100644 --- a/src/views/base/breadcrumbs/Breadcrumbs.js +++ b/src/views/base/breadcrumbs/Breadcrumbs.js @@ -1,4 +1,4 @@ -import React from "react"; +import React from 'react' import { CBreadcrumb, CBreadcrumbItem, @@ -8,8 +8,8 @@ import { CCol, CRow, CLink, -} from "@coreui/react-ts"; -import { DocsLink } from "src/reusable"; +} from '@coreui/react-ts' +import { DocsLink } from 'src/reusable' const Breadcrumbs = () => { return ( @@ -52,7 +52,7 @@ const Breadcrumbs = () => { - ); -}; + ) +} -export default Breadcrumbs; +export default Breadcrumbs diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js index b3eadfc..e876924 100644 --- a/src/views/base/cards/Cards.js +++ b/src/views/base/cards/Cards.js @@ -8,11 +8,10 @@ import { CCol, CFormCheck, CRow, -} from '@coreui/react-ts' +} from '@coreui/react-ts' import CIcon from '@coreui/icons-react' import { DocsLink } from 'src/reusable' - const Cards = () => { const [collapsed, setCollapsed] = React.useState(true) const [showCard, setShowCard] = React.useState(true) @@ -24,21 +23,23 @@ const Cards = () => { Card title - + - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. Card footer @@ -47,12 +48,13 @@ const Cards = () => { Card with icon - + - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. @@ -60,12 +62,13 @@ const Cards = () => { Card with switch - + - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. @@ -73,12 +76,15 @@ const Cards = () => { Card with label - Success + + Success + - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. @@ -86,12 +92,15 @@ const Cards = () => { Card with label - 42 + + 42 + - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. @@ -99,73 +108,67 @@ const Cards = () => { - - Card outline primary - + Card outline primary - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. - - Card outline secondary - + Card outline secondary - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. - - Card outline success - + Card outline success - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. - - Card outline info - + Card outline info - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. - - Card outline warning - + Card outline warning - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. - - Card outline danger - + Card outline danger - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. @@ -174,73 +177,67 @@ const Cards = () => { - - Card with accent - + Card with accent - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. - - Card with accent - + Card with accent - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. - - Card with accent - + Card with accent - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. - - Card with accent - + Card with accent - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. - - Card with accent - + Card with accent - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. - - Card with accent - + Card with accent - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. @@ -250,8 +247,13 @@ const Cards = () => {
-

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

-
Someone famous in Source Title
+

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

+
+ Someone famous in Source Title +
@@ -260,8 +262,13 @@ const Cards = () => {
-

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

-
Someone famous in Source Title
+

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

+
+ Someone famous in Source Title +
@@ -270,8 +277,13 @@ const Cards = () => {
-

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

-
Someone famous in Source Title
+

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

+
+ Someone famous in Source Title +
@@ -280,8 +292,13 @@ const Cards = () => {
-

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

-
Someone famous in Source Title
+

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

+
+ Someone famous in Source Title +
@@ -290,8 +307,13 @@ const Cards = () => {
-

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

-
Someone famous in Source Title
+

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

+
+ Someone famous in Source Title +
@@ -300,8 +322,13 @@ const Cards = () => {
-

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

-
Someone famous in Source Title
+

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

+
+ Someone famous in Source Title +
@@ -310,49 +337,45 @@ const Cards = () => { - - Card title - + Card title - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. - - Card title - + Card title - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. - - Card title - + Card title - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. - - Card title - + Card title - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh + euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim + veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea + commodo consequat. diff --git a/src/views/base/carousels/Carousels.js b/src/views/base/carousels/Carousels.js index fd075c9..d1c92fd 100644 --- a/src/views/base/carousels/Carousels.js +++ b/src/views/base/carousels/Carousels.js @@ -10,7 +10,7 @@ import { CCarouselInner, CCarouselItem, CCol, - CRow + CRow, } from '@coreui/react-ts' import { DocsLink } from 'src/reusable' @@ -29,107 +29,128 @@ const Carousels = () => { Carousel with controls - + - slide 1 + slide 1 - slide 2 + slide 2 - slide 3 + slide 3 - - + + - - Carousel with controls, indicators and caption - + Carousel with controls, indicators and caption - + - slide 1 -

Slide 1

Slide 1

 + slide 1 + +

Slide 1

+

Slide 1

+ - slide 2 -

Slide 2

Slide 2

 + slide 2 + +

Slide 2

+

Slide 2

+ - slide 3 -

Slide 3

Slide 3

 + slide 3 + +

Slide 3

+

Slide 3

+ - - + + - - Carousel animation - + Carousel animation - + - slide 1 -

Slide 1

Slide 1

 + slide 1 + +

Slide 1

+

Slide 1

+ - slide 2 -

Slide 2

Slide 2

 + slide 2 + +

Slide 2

+

Slide 2

+ - slide 3 -

Slide 3

Slide 3

 + slide 3 + +

Slide 3

+

Slide 3

+ - - + + - - Carousel animation with autoSlide - + Carousel animation with autoSlide - + - slide 1 -

Slide 1

Slide 1

 + slide 1 + +

Slide 1

+

Slide 1

+ - slide 2 -

Slide 2

Slide 2

 + slide 2 + +

Slide 2

+

Slide 2

+ - slide 3 -

Slide 3

Slide 3

 + slide 3 + +

Slide 3

+

Slide 3

+ - - + + diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js index 35a27dd..f250e78 100644 --- a/src/views/base/collapses/Collapses.js +++ b/src/views/base/collapses/Collapses.js @@ -8,12 +8,11 @@ import { CCol, CCollapse, CFade, - CRow -} from '@coreui/react-ts'; + CRow, +} from '@coreui/react-ts' import { DocsLink } from 'src/reusable' const Collapses = () => { - const [collapse, setCollapse] = useState(false) const [collapseMulti, setCollapseMulti] = useState([false, false]) const [accordion, setAccordion] = useState(1) @@ -27,16 +26,16 @@ const Collapses = () => { const toggleMulti = (type) => { let newCollapse = collapseMulti.slice() switch (type) { - case "left": - newCollapse[0] = !collapseMulti[0]; - break; - case "right": - newCollapse[1] = !collapseMulti[1]; - break; - case "both": - newCollapse[0] = !collapseMulti[0]; - newCollapse[1] = !collapseMulti[1]; - break; + case 'left': + newCollapse[0] = !collapseMulti[0] + break + case 'right': + newCollapse[1] = !collapseMulti[1] + break + case 'both': + newCollapse[0] = !collapseMulti[0] + newCollapse[1] = !collapseMulti[1] + break default: } setCollapseMulti(newCollapse) @@ -52,35 +51,34 @@ const Collapses = () => { Collapse - +

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

- Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non pulvinar risus. Aenean - elementum eleifend nunc, pellentesque dapibus arcu hendrerit fringilla. Aliquam in nibh massa. Cras - ultricies lorem non enim volutpat, a eleifend urna placerat. Fusce id luctus urna. In sed leo tellus. - Mauris tristique leo a nisl feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis - sollicitudin vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel turpis - purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus tellus, a luctus enim orci non - augue. Aenean ullamcorper nisl urna, non feugiat tortor volutpat in. Vivamus lobortis massa dolor, eget - faucibus ipsum varius eget. Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu, + Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non + pulvinar risus. Aenean elementum eleifend nunc, pellentesque dapibus arcu hendrerit + fringilla. Aliquam in nibh massa. Cras ultricies lorem non enim volutpat, a eleifend + urna placerat. Fusce id luctus urna. In sed leo tellus. Mauris tristique leo a nisl + feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis sollicitudin + vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel + turpis purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus + tellus, a luctus enim orci non augue. Aenean ullamcorper nisl urna, non feugiat + tortor volutpat in. Vivamus lobortis massa dolor, eget faucibus ipsum varius eget. + Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu, vehicula sagittis elit leo id nisi.

- Toggling button + + Toggling button + @@ -89,44 +87,66 @@ const Collapses = () => { Collapse multi target - -

- {toggleMulti('left')}}> - Left{' '} - {toggleMulti('right')}}> - Right{' '} - {toggleMulti('both')}}> - Both{' '} -

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

+ { + toggleMulti('left') + }} + > + Left + {' '} + { + toggleMulti('right') + }} + > + Right + {' '} + { + toggleMulti('both') + }} + > + Both + {' '} +

+ + + + + + 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. + + + + + + -
+
Fade - + @@ -134,7 +154,9 @@ const Collapses = () => { - Toggle Fade + + Toggle Fade + @@ -159,11 +181,14 @@ const Collapses = () => { - 1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non - cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird - on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred - nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft - beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS. + 1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry + richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor + brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, + sunt aliqua put a bird on it squid single-origin coffee nulla assumenda + shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson + cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. + Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt + you probably haven''t heard of them accusamus labore sustainable VHS. @@ -180,11 +205,14 @@ const Collapses = () => { - 2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non - cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird - on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred - nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft - beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS. + 2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry + richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor + brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, + sunt aliqua put a bird on it squid single-origin coffee nulla assumenda + shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson + cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. + Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt + you probably haven''t heard of them accusamus labore sustainable VHS. @@ -201,11 +229,14 @@ const Collapses = () => { - 3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non - cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird - on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred - nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft - beer farm-to-table, raw denim aesthetic synth nesciunt you probably havent heard of them accusamus labore sustainable VHS. + 3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry + richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor + brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, + sunt aliqua put a bird on it squid single-origin coffee nulla assumenda + shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson + cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. + Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt + you probably havent heard of them accusamus labore sustainable VHS. diff --git a/src/views/base/forms/BasicForms.js b/src/views/base/forms/BasicForms.js index 825622c..9a3520e 100644 --- a/src/views/base/forms/BasicForms.js +++ b/src/views/base/forms/BasicForms.js @@ -38,7 +38,7 @@ const BasicForms = () => { Credit Card Form - + @@ -97,7 +97,7 @@ const BasicForms = () => {
CVV/CVC - +
@@ -153,7 +153,12 @@ const BasicForms = () => { Elements - + Static @@ -176,7 +181,13 @@ const BasicForms = () => { Email Input - + Please enter your email @@ -185,7 +196,13 @@ const BasicForms = () => { Password - + Please enter a complex password @@ -194,7 +211,12 @@ const BasicForms = () => { Date Input - + @@ -202,7 +224,12 @@ const BasicForms = () => { Disabled Input - + @@ -284,10 +311,30 @@ const BasicForms = () => { Switch checkboxes - - - - + + + + @@ -296,13 +343,31 @@ const BasicForms = () => {
- +
- +
- +
@@ -312,28 +377,56 @@ const BasicForms = () => {
- - - + + +
- Checkboxes + + Checkboxes + +
+ +
- -
-
- +
@@ -350,15 +443,29 @@ const BasicForms = () => { value="option1" label="One" /> - - + + - File input + + File input + - + @@ -366,7 +473,8 @@ const BasicForms = () => { Multiple File input - { - Custom file input + + Custom file input + - + Choose file... @@ -388,8 +498,12 @@ const BasicForms = () => { - Submit - Reset + + Submit + + + Reset + @@ -400,18 +514,31 @@ const BasicForms = () => {
- Name + + Name +
- Email - + + Email + +
- Submit - Reset + + Submit + + + Reset + @@ -428,7 +555,13 @@ const BasicForms = () => { Email - + Please enter your email @@ -437,14 +570,25 @@ const BasicForms = () => { Password - + Please enter your password - Submit Reset + + Submit + {' '} + + Reset + @@ -456,18 +600,35 @@ const BasicForms = () => {
Email - + Please enter your email
Password - + Please enter your password
- Submit Reset + + Submit + {' '} + + Reset + @@ -530,7 +691,12 @@ const BasicForms = () => { - Login Reset + + Login + {' '} + + Reset + @@ -541,28 +707,52 @@ const BasicForms = () => { - Small Input + + Small Input + - + - Normal Input + + Normal Input + - Large Input + + Large Input + - + - Submit - Reset + + Submit + + + Reset + @@ -590,9 +780,7 @@ const BasicForms = () => { - - Validation feedback Form - + Validation feedback Form
@@ -603,9 +791,7 @@ const BasicForms = () => {
Required input - - Please provide a valid information - + Please provide a valid information Input provided
@@ -616,9 +802,7 @@ const BasicForms = () => { - - Icon/Text Groups - + Icon/Text Groups @@ -627,14 +811,23 @@ const BasicForms = () => { - + - + @@ -655,56 +848,77 @@ const BasicForms = () => { - Submit - Reset + + Submit + + + Reset + - - Button Groups - + Button Groups - Search - + + Search + + - - Submit + + + Submit + - + + + - + + + - Submit - Reset + + Submit + + + Reset + - - Dropdowns Groups - + Dropdowns Groups @@ -722,18 +936,25 @@ const BasicForms = () => { Separated link - + - + - - Dropdown - + Dropdown Action Another Action @@ -777,8 +998,12 @@ const BasicForms = () => { - Submit - Reset + + Submit + + + Reset + @@ -788,7 +1013,10 @@ const BasicForms = () => { Use the grid for big devices! - .col-lg-* .col-md-* .col-sm-* + + {' '} + .col-lg-* .col-md-* .col-sm-* + @@ -835,11 +1063,21 @@ const BasicForms = () => { - Action - Action - Action - Action - Action + + Action + + + Action + + + Action + + + Action + + + Action + @@ -847,7 +1085,10 @@ const BasicForms = () => { Input Grid for small devices! - .col-* + + {' '} + .col-* + @@ -894,11 +1135,21 @@ const BasicForms = () => { - Action - Action - Action - Action - Action + + Action + + + Action + + + Action + + + Action + + + Action + @@ -906,34 +1157,50 @@ const BasicForms = () => { - - Example Form - + Example Form
Username - - + + + +
Email - - + + + +
Password - - + + + +
- Submit + + Submit +
@@ -941,31 +1208,54 @@ const BasicForms = () => { - - Example Form - + Example Form
- - + + + +
- - + + + +
- - + + + +
- Submit + + Submit +
@@ -973,31 +1263,54 @@ const BasicForms = () => { - - Example Form - + Example Form
- - + + + +
- - + + + +
- - + + + +
- Submit + + Submit +
@@ -1019,7 +1332,7 @@ const BasicForms = () => { className="card-header-action btn-minimize" onClick={() => setCollapsed(!collapsed)} > - + {
- Save changes + + Save changes + Cancel
diff --git a/src/views/base/index.js b/src/views/base/index.js index 2e7f42e..2b7656c 100644 --- a/src/views/base/index.js +++ b/src/views/base/index.js @@ -1,19 +1,31 @@ -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 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' export { - Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Tabs, Tooltips, Paginations, -}; - + Breadcrumbs, + Cards, + Carousels, + Collapses, + Dropdowns, + Jumbotrons, + ListGroups, + Navbars, + Navs, + Popovers, + ProgressBar, + Tabs, + Tooltips, + Paginations, +} diff --git a/src/views/base/jumbotrons/Jumbotrons.js b/src/views/base/jumbotrons/Jumbotrons.js index 51c1ed3..a2c7895 100644 --- a/src/views/base/jumbotrons/Jumbotrons.js +++ b/src/views/base/jumbotrons/Jumbotrons.js @@ -1,43 +1,49 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CContainer, - CRow, -} from '@coreui/react-ts' +import { CButton, CCard, CCardBody, CCardHeader, CCol, CContainer, CRow } from '@coreui/react-ts' import { DocsLink } from 'src/reusable' const Jumbotrons = () => { - return ( <> Jumbotron - +

Custom jumbotron

-

Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.

+

+ Using a series of utilities, you can create this jumbotron, just like the one in + previous versions of Bootstrap. Check out the examples below for how you can remix and + restyle it to your liking. +

Example button

Change the background

-

Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.

- Example button +

+ Swap the background-color utility and add a `.text-*` color utility to mix up the + jumbotron look. Then, mix and match with additional component themes and more. +

+ + Example button +

Add borders

-

Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.

- Example button +

+ Or, keep it light and add a border for some added definition to the boundaries of + your content. Be sure to look under the hood at the source HTML here as we've + adjusted the alignment and sizing of both column's content for equal-height. +

+ + Example button +
diff --git a/src/views/base/list-groups/ListGroups.js b/src/views/base/list-groups/ListGroups.js index d141d33..4c189fb 100644 --- a/src/views/base/list-groups/ListGroups.js +++ b/src/views/base/list-groups/ListGroups.js @@ -9,11 +9,10 @@ import { CListGroupItem, CRow, CTabContent, - CTabPane + CTabPane, } from '@coreui/react-ts' import { DocsLink } from 'src/reusable' - const ListGroups = () => { const [activeTab, setActiveTab] = useState(1) @@ -21,11 +20,10 @@ const ListGroups = () => { <> - List group - + @@ -37,7 +35,6 @@ const ListGroups = () => { - @@ -47,11 +44,15 @@ const ListGroups = () => { - Cras justo odio + + Cras justo odio + Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac - Vestibulum at eros + + Vestibulum at eros + @@ -60,7 +61,6 @@ const ListGroups = () => { - List group @@ -70,7 +70,9 @@ const ListGroups = () => { Dapibus ac facilisis in This is a primary list group item - This is a secondary list group item + + This is a secondary list group item + This is a success list group item This is a danger list group item This is a warning list group item @@ -80,10 +82,8 @@ const ListGroups = () => { - - List group @@ -92,18 +92,33 @@ const ListGroups = () => { Dapibus ac facilisis in - This is a primary list group item - This is a secondary list group item - This is a success list group item - This is a danger list group item - This is a warning list group item - This is a info list group item - This is a light list group item - This is a dark list group item + + This is a primary list group item + + + This is a secondary list group item + + + This is a success list group item + + + This is a danger list group item + + + This is a warning list group item + + + This is a info list group item + + + This is a light list group item + + + This is a dark list group item + - @@ -116,7 +131,9 @@ const ListGroups = () => { This is a primary list group item - This is a secondary list group item + + This is a secondary list group item + This is a success list group item This is a danger list group item This is a warning list group item @@ -135,14 +152,30 @@ const ListGroups = () => { - This is a primary list group item - This is a secondary list group item - This is a success list group item - This is a danger list group item - This is a warning list group item - This is a info list group item - This is a light list group item - This is a dark list group item + + This is a primary list group item + + + This is a secondary list group item + + + This is a success list group item + + + This is a danger list group item + + + This is a warning list group item + + + This is a info list group item + + + This is a light list group item + + + This is a dark list group item + @@ -159,30 +192,33 @@ const ListGroups = () => { Cras justo odio - 14 + + 14 + Dapibus ac facilisis in - 2 + + 2 + Morbi leo risus - 1 + + 1 + - - List group custom content -
@@ -190,26 +226,28 @@ const ListGroups = () => { 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 gravida at eget metus. Maecenas sed diam eget risus + varius blandit. Donec id elit non mi porta.
List group item heading
- Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. + Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus + varius blandit.
Small.
List group item heading
- Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. + Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus + varius blandit.
Small. - @@ -225,39 +263,81 @@ const ListGroups = () => { - setActiveTab(0)} component="button" active={activeTab === 0} >Home - setActiveTab(1)} component="button" active={activeTab === 1} >Profile - setActiveTab(2)} component="button" active={activeTab === 2} >Messages - setActiveTab(3)} component="button" active={activeTab === 3} >Settings + setActiveTab(0)} + component="button" + active={activeTab === 0} + > + Home + + setActiveTab(1)} + component="button" + active={activeTab === 1} + > + Profile + + setActiveTab(2)} + component="button" + active={activeTab === 2} + > + Messages + + setActiveTab(3)} + component="button" + active={activeTab === 3} + > + Settings + - -

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt - nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim - tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip - eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

+ +

+ Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing + exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat + proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim + tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat + aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. + Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam + minim. +

-

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia - dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt - anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum - reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

+

+ Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur + consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore + sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt + laboris deserunt anim aute dolor incididunt veniam aute dolore do + exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris + ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt + veniam ad. +

-

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris - nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur - est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et - deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla - laborum elit adipisicing pariatur cillum.

+

+ Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo + reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet + cupidatat cupidatat anim do ut velit mollit consequat enim tempor. + Consectetur est minim nostrud nostrud consectetur irure labore voluptate + irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et + deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod + aliquip nulla laborum elit adipisicing pariatur cillum. +

-

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna - sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore - aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco - nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor - eiusmod eu pariatur culpa mollit in irure.

+

+ Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. + Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat + laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua + labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation + irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet + qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt + dolor eiusmod eu pariatur culpa mollit in irure. +

diff --git a/src/views/base/navbars/Navbars.js b/src/views/base/navbars/Navbars.js index 964f533..27b23a4 100644 --- a/src/views/base/navbars/Navbars.js +++ b/src/views/base/navbars/Navbars.js @@ -31,14 +31,12 @@ const CNavbars = () => { CNavbar - + - + setVisible(!visible)} /> - - NavbarBrand - + NavbarBrand Home @@ -46,19 +44,13 @@ const CNavbars = () => { - - Search + + + Search + - - - Lang - + + Lang EN ES @@ -66,12 +58,8 @@ const CNavbars = () => { FA - - - User - + + User Account Settings @@ -84,9 +72,7 @@ const CNavbars = () => { - - CNavbar brand - + CNavbar brand @@ -102,14 +88,14 @@ const CNavbars = () => { - - CNavbar text - + CNavbar text { setNavbarText(!navbarText)}} + onClick={() => { + setNavbarText(!navbarText) + }} /> NavbarBrand @@ -122,22 +108,21 @@ const CNavbars = () => { - - CNavbar dropdown - + CNavbar dropdown - - {setIsOpenDropdown(!isOpenDropdown)}} /> + + { + setIsOpenDropdown(!isOpenDropdown) + }} + /> Home Link - - - Lang - + + Lang EN ES @@ -145,12 +130,8 @@ const CNavbars = () => { FA - - - User - + + User Account Settings @@ -163,34 +144,25 @@ const CNavbars = () => { - - CNavbar form - + CNavbar form - - Search + + + Search + - - CNavbar input group - + CNavbar input group - + diff --git a/src/views/base/navs/Navs.js b/src/views/base/navs/Navs.js index f5cf8a2..777eb63 100644 --- a/src/views/base/navs/Navs.js +++ b/src/views/base/navs/Navs.js @@ -11,7 +11,7 @@ import { CDropdownToggle, CNav, CNavItem, - CNavLink + CNavLink, } from '@coreui/react-ts' import { DocsLink } from 'src/reusable' @@ -23,7 +23,7 @@ const Navs = () => { Navs - + List Based @@ -175,10 +175,14 @@ const Navs = () => {
- Active + + Active + Link Link - Disabled + + Disabled +
@@ -201,12 +205,15 @@ const Navs = () => {
- Active + + Active + Link Link - Disabled + + Disabled + - @@ -221,10 +228,14 @@ const Navs = () => { - Active - Link - Link - Disabled + + Active + + Link + Link + + Disabled + @@ -232,7 +243,6 @@ const Navs = () => { - @@ -245,9 +255,7 @@ const Navs = () => { Link - - Dropdown - + Dropdown Action Another action @@ -279,9 +287,7 @@ const Navs = () => { Link - - Dropdown - + Dropdown Action Another action diff --git a/src/views/base/paginations/Pagnations.js b/src/views/base/paginations/Pagnations.js index 2014f96..71aa005 100644 --- a/src/views/base/paginations/Pagnations.js +++ b/src/views/base/paginations/Pagnations.js @@ -1,14 +1,7 @@ import React, { useState } from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CPagination, - CPaginationItem -} from '@coreui/react-ts' +import { CCard, CCardBody, CCardHeader, CPagination, CPaginationItem } from '@coreui/react-ts' import { DocsLink } from 'src/reusable' - const Paginations = () => { const [currentPage, setCurrentPage] = useState(2) @@ -17,7 +10,7 @@ const Paginations = () => { Pagination - +
Default
@@ -60,11 +53,7 @@ const Paginations = () => {
Left alignment (default)
- +

Center alignment
diff --git a/src/views/base/popovers/Popovers.js b/src/views/base/popovers/Popovers.js index b66a501..807e6ed 100644 --- a/src/views/base/popovers/Popovers.js +++ b/src/views/base/popovers/Popovers.js @@ -13,10 +13,18 @@ import { DocsLink } from 'src/reusable' const Popovers = () => { const placements = [ - 'top-start', 'top', 'top-end', - 'bottom-start', 'bottom', 'bottom-end', - 'right-start', 'right', 'right-end', - 'left-start', 'left', 'left-end' + 'top-start', + 'top', + 'top-end', + 'bottom-start', + 'bottom', + 'bottom-end', + 'right-start', + 'right', + 'right-end', + 'left-start', + 'left', + 'left-end', ] return ( @@ -24,31 +32,27 @@ const Popovers = () => { Popovers - + {/*eslint-disable-next-line*/} -

- Hover over the links below to see popover: -

+

Hover over the links below to see popover:

Tight pants next level keffiyeh you probably - haven't heard of them. - Photo booth beard raw denim letterpress vegan messenger - bag stumptown. Farm-to-table seitan, mcsweeney's fixie - sustainable quinoa 8-bit american apparel + haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag + stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american + apparel have a - 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 + 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 @@ -56,13 +60,12 @@ const Popovers = () => { twitter handle - freegan cred raw denim single-origin coffee viral.

-
+
@@ -72,22 +75,19 @@ const Popovers = () => {
- {placements.map(placement => { - return ( - - - { placement } - - - ) + {placements.map((placement) => { + return ( + + + {placement} + + + ) })}
diff --git a/src/views/base/progress-bar/ProgressBar.js b/src/views/base/progress-bar/ProgressBar.js index d6613ab..6e561ec 100644 --- a/src/views/base/progress-bar/ProgressBar.js +++ b/src/views/base/progress-bar/ProgressBar.js @@ -1,11 +1,5 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CProgress, - CProgressBar -} from '@coreui/react-ts' +import { CCard, CCardBody, CCardHeader, CProgress, CProgressBar } from '@coreui/react-ts' import { DocsLink } from 'src/reusable' const ProgressBar = () => { @@ -14,7 +8,7 @@ const ProgressBar = () => { Progress - + @@ -30,9 +24,9 @@ const ProgressBar = () => { labels - - - + + + @@ -41,8 +35,8 @@ const ProgressBar = () => { heights - - + + @@ -64,9 +58,9 @@ const ProgressBar = () => { - - - + + + diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js index 2484d06..9f97f43 100644 --- a/src/views/base/tables/Tables.js +++ b/src/views/base/tables/Tables.js @@ -23,7 +23,7 @@ const Tables = () => { Simple Table - + @@ -40,31 +40,41 @@ const Tables = () => { Samppa Nori 2012/01/01 Member - Active + + Active + Estavan Lykos 2012/02/01 Staff - Banned + + Banned + Chetan Mohamed 2012/02/01 Admin - Inactive + + Inactive + Derick Maximinus 2012/03/01 Member - Pending + + Pending + Friderik Dávid 2012/01/21 Staff - Active + + Active + @@ -74,9 +84,7 @@ const Tables = () => { - - Striped Table - + Striped Table @@ -92,31 +100,41 @@ const Tables = () => { Yiorgos Avraamu 2012/01/01 Member - Active + + Active + Avram Tarasios 2012/02/01 Staff - Banned + + Banned + Quintin Ed 2012/02/01 Admin - Inactive + + Inactive + Enéas Kwadwo 2012/03/01 Member - Pending + + Pending + Agapetus Tadeáš 2012/01/21 Staff - Active + + Active + @@ -126,12 +144,9 @@ const Tables = () => { - - - Condensed Table - + Condensed Table @@ -147,31 +162,41 @@ const Tables = () => { Carwyn Fachtna 2012/01/01 Member - Active + + Active + Nehemiah Tatius 2012/02/01 Staff - Banned + + Banned + Ebbe Gemariah 2012/02/01 Admin - Inactive + + Inactive + Eustorgios Amulius 2012/03/01 Member - Pending + + Pending + Leopold Gáspár 2012/01/21 Staff - Active + + Active + @@ -181,9 +206,7 @@ const Tables = () => { - - Bordered Table - + Bordered Table @@ -199,46 +222,53 @@ const Tables = () => { Pompeius René 2012/01/01 Member - Active + + Active + Paĉjo Jadon 2012/02/01 Staff - Banned + + Banned + Micheal Mercurius 2012/02/01 Admin - Inactive + + Inactive + Ganesha Dubhghall 2012/03/01 Member - Pending + + Pending + Hiroto Šimun 2012/01/21 Staff - Active + + Active + - - - Combined All Table - + Combined All Table @@ -254,31 +284,41 @@ const Tables = () => { Vishnu Serghei 2012/01/01 Member - Active + + Active + Zbyněk Phoibos 2012/02/01 Staff - Banned + + Banned + Einar Randall 2012/02/01 Admin - Inactive + + Inactive + Félix Troels 2012/03/01 Member - Pending + + Pending + Aulus Agmundr 2012/01/21 Staff - Active + + Active + diff --git a/src/views/base/tabs/Tabs.js b/src/views/base/tabs/Tabs.js index 066714a..afb949b 100644 --- a/src/views/base/tabs/Tabs.js +++ b/src/views/base/tabs/Tabs.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState } from 'react' import { CCol, CNav, @@ -10,15 +10,13 @@ import { CCard, CCardBody, CCardHeader, -} from "@coreui/react-ts"; -import CIcon from "@coreui/icons-react"; -import { DocsLink } from "src/reusable"; +} from '@coreui/react-ts' +import { DocsLink } from 'src/reusable' const Tabs = () => { const [activeKey, setActiveKey] = useState(1) - const [active, setActive] = useState(1); const lorem = - "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit."; + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.' return ( @@ -31,13 +29,19 @@ const Tabs = () => { - setActiveKey(1)}>Home + setActiveKey(1)}> + Home + - setActiveKey(2)}>Profile + setActiveKey(2)}> + Profile + - setActiveKey(3)}>Messages + setActiveKey(3)}> + Messages + @@ -144,7 +148,7 @@ const Tabs = () => { */} - ); -}; + ) +} -export default Tabs; +export default Tabs diff --git a/src/views/base/tooltips/Tooltips.js b/src/views/base/tooltips/Tooltips.js index 41e7a5a..400f0fe 100644 --- a/src/views/base/tooltips/Tooltips.js +++ b/src/views/base/tooltips/Tooltips.js @@ -13,10 +13,18 @@ import { DocsLink } from 'src/reusable' const Tooltips = () => { const placements = [ - 'top-start', 'top', 'top-end', - 'bottom-start', 'bottom', 'bottom-end', - 'right-start', 'right', 'right-end', - 'left-start', 'left', 'left-end' + 'top-start', + 'top', + 'top-end', + 'bottom-start', + 'bottom', + 'bottom-end', + 'right-start', + 'right', + 'right-end', + 'left-start', + 'left', + 'left-end', ] return ( @@ -24,31 +32,24 @@ const Tooltips = () => { Tooltips - + - {/*eslint-disable-next-line*/} - -

- Hover over the links below to see tooltips: -

- +

Hover over the links below to see tooltips:

Tight pants next level keffiyeh you probably - haven't heard of them. - Photo booth beard raw denim letterpress vegan messenger - bag stumptown. Farm-to-table seitan, mcsweeney's fixie - sustainable quinoa 8-bit american apparel + haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag + stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american + apparel have a - 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 + 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 @@ -56,13 +57,12 @@ const Tooltips = () => { twitter handle - freegan cred raw denim single-origin coffee viral.

-
+
@@ -72,21 +72,17 @@ const Tooltips = () => {
- {placements.map(placement => { - return ( - - - { placement } - - - ) + {placements.map((placement) => { + return ( + + + {placement} + + + ) })}
@@ -96,4 +92,4 @@ const Tooltips = () => { ) } -export default Tooltips; +export default Tooltips diff --git a/src/views/buttons/brand-buttons/BrandButtons.js b/src/views/buttons/brand-buttons/BrandButtons.js index b981d07..d59189a 100644 --- a/src/views/buttons/brand-buttons/BrandButtons.js +++ b/src/views/buttons/brand-buttons/BrandButtons.js @@ -1,12 +1,5 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CRow -} from '@coreui/react-ts' +import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react-ts' import CIcon from '@coreui/icons-react' const BrandButtons = () => { @@ -14,73 +7,232 @@ const BrandButtons = () => { - - Brand button - + Brand button -
Size Small - size="sm" +
+ Size Small + + {' '} + size="sm" +

- Facebook - Twitter - LinkedIn - Flickr - Tumblr - Xing - Github - StackOverflow - YouTube - Dribbble - Instagram - Pinterest - VK - Yahoo - Behance - Reddit - Vimeo + + + Facebook + + + + Twitter + + + + LinkedIn + + + + Flickr + + + + Tumblr + + + + Xing + + + + Github + + + + StackOverflow + + + + YouTube + + + + Dribbble + + + + Instagram + + + + Pinterest + + + + VK + + + + Yahoo + + + + Behance + + + + Reddit + + + + Vimeo +

Size Normal

- Facebook - Twitter - LinkedIn - Flickr - Tumblr - Xing - Github - StackOverflow - YouTube - Dribbble - Instagram - Pinterest - VK - Yahoo - Behance - Reddit - Vimeo + + + Facebook + + + + Twitter + + + + LinkedIn + + + + Flickr + + + + Tumblr + + + + Xing + + + + Github + + + + StackOverflow + + + + YouTube + + + + Dribbble + + + + Instagram + + + + Pinterest + + + + VK + + + + Yahoo + + + + Behance + + + + Reddit + + + + Vimeo +

-
Size Large - size="lg" +
+ Size Large + + {' '} + size="lg" +

- Facebook - Twitter - LinkedIn - Flickr - Tumblr - Xing - Github - StackOverflow - YouTube - Dribbble - Instagram - Pinterest - VK - Yahoo - Behance - Reddit - Vimeo + + + Facebook + + + + Twitter + + + + LinkedIn + + + + Flickr + + + + Tumblr + + + + Xing + + + + Github + + + + StackOverflow + + + + YouTube + + + + Dribbble + + + + Instagram + + + + Pinterest + + + + VK + + + + Yahoo + + + + Behance + + + + Reddit + + + + Vimeo +

@@ -93,69 +245,179 @@ const BrandButtons = () => { only icons -
Size Small - size="sm" +
+ Size Small + + {' '} + size="sm" +

- - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Size Normal

- - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

-
Size Large - size="lg" +
+ Size Large + + {' '} + size="lg" +

- - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

diff --git a/src/views/buttons/button-dropdowns/ButtonDropdowns.js b/src/views/buttons/button-dropdowns/ButtonDropdowns.js index 8218b38..25e3f92 100644 --- a/src/views/buttons/button-dropdowns/ButtonDropdowns.js +++ b/src/views/buttons/button-dropdowns/ButtonDropdowns.js @@ -15,7 +15,7 @@ import { CRow, CFormLabel, CFormControl, - CFormCheck + CFormCheck, } from '@coreui/react-ts' import { DocsLink } from 'src/reusable' @@ -26,14 +26,11 @@ const ButtonDropdowns = () => { Dropdowns - + - - - Dropdown button - + Dropdown button Header Action Disabled @@ -42,13 +39,9 @@ const ButtonDropdowns = () => { Another Action - -
- +
- - Primary - + Primary Header Action Disabled @@ -58,9 +51,7 @@ const ButtonDropdowns = () => { - - Secondary - + Secondary Header Action Disabled @@ -70,9 +61,7 @@ const ButtonDropdowns = () => { - - Success - + Success Header Action Disabled @@ -82,9 +71,7 @@ const ButtonDropdowns = () => { - - Info - + Info Header Action Disabled @@ -94,9 +81,7 @@ const ButtonDropdowns = () => { - - Warning - + Warning Header Action Disabled @@ -106,9 +91,7 @@ const ButtonDropdowns = () => { - - Danger - + Danger Header Action Disabled @@ -117,8 +100,7 @@ const ButtonDropdowns = () => { Another Action - -
+
Primary @@ -191,13 +173,9 @@ const ButtonDropdowns = () => { Another Action - -
- +
- - Large button - + Large button Header Action Disabled @@ -205,8 +183,7 @@ const ButtonDropdowns = () => { Another Action - - {' '} + {' '} Large split button @@ -219,9 +196,7 @@ const ButtonDropdowns = () => { Another Action - -
- +
Small button @@ -233,8 +208,7 @@ const ButtonDropdowns = () => { Another Action - - {' '} + {' '} Small split button @@ -247,13 +221,9 @@ const ButtonDropdowns = () => { Another Action - -
- +
- - Dropup button - + Dropup button Header Action Disabled @@ -272,19 +242,13 @@ const ButtonDropdowns = () => { Another Action - - - Menus - + Menus - - - Direction Up - + Direction Up Header Action Disabled @@ -294,9 +258,7 @@ const ButtonDropdowns = () => { - - Direction Left - + Direction Left Header Action Disabled @@ -306,9 +268,7 @@ const ButtonDropdowns = () => { - - Direction Right - + Direction Right Header Action Disabled @@ -318,13 +278,8 @@ const ButtonDropdowns = () => { - - Default Down - - + Default Down + Header Action Disabled Action @@ -336,7 +291,7 @@ const ButtonDropdowns = () => { - This dropdown{'\''}s menu is right-aligned + This dropdown{"'"}s menu is right-aligned Header @@ -349,9 +304,7 @@ const ButtonDropdowns = () => {
- - Dropdown with header - + Dropdown with header Header Action @@ -362,9 +315,7 @@ const ButtonDropdowns = () => {
- - Dropdown with divider - + Dropdown with divider Action @@ -375,9 +326,7 @@ const ButtonDropdowns = () => {
- - Dropdown with disabled item - + Dropdown with disabled item Action Disabled Action @@ -387,32 +336,41 @@ const ButtonDropdowns = () => {
- - Dropdown with form - + Dropdown with form - +
Email address - +
Password - +
- +
- Sign in + + Sign in +
- - Register + + Register Forgot password? - diff --git a/src/views/buttons/button-groups/ButtonGroups.js b/src/views/buttons/button-groups/ButtonGroups.js index abaa248..b462540 100644 --- a/src/views/buttons/button-groups/ButtonGroups.js +++ b/src/views/buttons/button-groups/ButtonGroups.js @@ -26,19 +26,17 @@ const ButtonGroups = () => { Callout - + - - Callout - + Callout Button Group - + @@ -111,10 +109,8 @@ const ButtonGroups = () => { - - Button Group @@ -126,13 +122,15 @@ const ButtonGroups = () => { Middle Right -

+
+
Left Middle Right -

+
+
Left Middle diff --git a/src/views/buttons/buttons/Buttons.js b/src/views/buttons/buttons/Buttons.js index 1e03f92..242a17b 100644 --- a/src/views/buttons/buttons/Buttons.js +++ b/src/views/buttons/buttons/Buttons.js @@ -1,12 +1,5 @@ import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CRow -} from '@coreui/react-ts' +import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react-ts' import CIcon from '@coreui/icons-react' import { DocsLink } from 'src/reusable' @@ -16,7 +9,7 @@ const Buttons = () => { Standard Buttons - + @@ -24,7 +17,9 @@ const Buttons = () => { Normal - Primary + + Primary + Secondary @@ -56,31 +51,49 @@ const Buttons = () => { Active State - Primary + + Primary + - Secondary + + Secondary + - Success + + Success + - Warning + + Warning + - Danger + + Danger + - Info + + Info + - Light + + Light + - Dark + + Dark + - Link + + Link + @@ -88,39 +101,55 @@ const Buttons = () => { Disabled - Primary + + Primary + - Secondary + + Secondary + - Success + + Success + - Warning + + Warning + - Danger + + Danger + - Info + + Info + - Light + + Light + - Dark + + Dark + - Link + + Link + - - layout="outline" Buttons - + layout="outline" Buttons

With outline prop. @@ -130,28 +159,44 @@ const Buttons = () => { Normal - Primary + + Primary + - Secondary + + Secondary + - Success + + Success + - Warning + + Warning + - Danger + + Danger + - Info + + Info + - Light + + Light + - Dark + + Dark + @@ -160,28 +205,44 @@ const Buttons = () => { Active State - Primary + + Primary + - Secondary + + Secondary + - Success + + Success + - Warning + + Warning + - Danger + + Danger + - Info + + Info + - Light + + Light + - Dark + + Dark + @@ -190,37 +251,51 @@ const Buttons = () => { Disabled - Primary + + Primary + - Secondary + + Secondary + - Success + + Success + - Warning + + Warning + - Danger + + Danger + - Info + + Info + - Light + + Light + - Dark + + Dark + - - layout="ghost" Buttons - + layout="ghost" Buttons

Use .btn-ghost-* class for layout="ghost" buttons. @@ -230,28 +305,44 @@ const Buttons = () => { Normal - Primary + + Primary + - Secondary + + Secondary + - Success + + Success + - Warning + + Warning + - Danger + + Danger + - Info + + Info + - Light + + Light + - Dark + + Dark + @@ -260,28 +351,44 @@ const Buttons = () => { Active State - Primary + + Primary + - Secondary + + Secondary + - Success + + Success + - Warning + + Warning + - Danger + + Danger + - Info + + Info + - Light + + Light + - Dark + + Dark + @@ -290,37 +397,51 @@ const Buttons = () => { Disabled - Primary + + Primary + - Secondary + + Secondary + - Success + + Success + - Warning + + Warning + - Danger + + Danger + - Info + + Info + - Light + + Light + - Dark + + Dark + - - Square Buttons - + Square Buttons

Use .btn-square class for square buttons. @@ -330,31 +451,49 @@ const Buttons = () => { Normal - Primary + + Primary + - Secondary + + Secondary + - Success + + Success + - Warning + + Warning + - Danger + + Danger + - Info + + Info + - Light + + Light + - Dark + + Dark + - Link + + Link + @@ -362,31 +501,49 @@ const Buttons = () => { Active State - Primary + + Primary + - Secondary + + Secondary + - Success + + Success + - Warning + + Warning + - Danger + + Danger + - Info + + Info + - Light + + Light + - Dark + + Dark + - Link + + Link + @@ -394,39 +551,55 @@ const Buttons = () => { Disabled - Primary + + Primary + - Secondary + + Secondary + - Success + + Success + - Warning + + Warning + - Danger + + Danger + - Info + + Info + - Light + + Light + - Dark + + Dark + - Link + + Link + - - Pill Buttons - + Pill Buttons

Use .btn-pill class for pill buttons. @@ -436,31 +609,49 @@ const Buttons = () => { Normal - Primary + + Primary + - Secondary + + Secondary + - Success + + Success + - Warning + + Warning + - Danger + + Danger + - Info + + Info + - Light + + Light + - Dark + + Dark + - Link + + Link + @@ -468,31 +659,49 @@ const Buttons = () => { Active State - Primary + + Primary + - Secondary + + Secondary + - Success + + Success + - Warning + + Warning + - Danger + + Danger + - Info + + Info + - Light + + Light + - Dark + + Dark + - Link + + Link + @@ -500,60 +709,89 @@ const Buttons = () => { Disabled - Primary + + Primary + - Secondary + + Secondary + - Success + + Success + - Warning + + Warning + - Danger + + Danger + - Info + + Info + - Light + + Light + - Dark + + Dark + - Link + + Link + - - Sizes - + Sizes -

Fancy larger or smaller buttons? Add size="lg" or size="sm" for additional sizes.

+

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

Small - Standard Button + + Standard Button + - Outline Button + + Outline Button + - Ghost Button + + Ghost Button + - Square Button + + Square Button + - Pill Button + + Pill Button + @@ -564,16 +802,24 @@ const Buttons = () => { Standard Button - Outline Button + + Outline Button + - Ghost Button + + Ghost Button + - Square Button + + Square Button + - Pill Button + + Pill Button + @@ -581,53 +827,63 @@ const Buttons = () => { Large - Standard Button - - - Outline Button + + Standard Button + - Ghost Button + + Outline Button + - Square Button + + Ghost Button + - Pill Button + + Square Button + + + + + Pill Button + - - With Icons - + With Icons - - Standard Button - + Standard Button - - Outline Button + + + Outline Button - Ghost Button + + Ghost Button - Square Button + + Square Button - Pill Button + + Pill Button @@ -636,35 +892,63 @@ const Buttons = () => { - - Level Buttons - + Level Buttons -

Add prop block

- Block level button - Block level button - Block level button - Block level button - Block level button - Block level button - Block level button +

+ Add prop block +

+ + Block level button + + + Block level button + + + Block level button + + + Block level button + + + Block level button + + + Block level button + + + Block level button + - - Level Buttons - + Level Buttons -

Add prop block

- Block level button - Block level button - Block level button - Block level button - Block level button - Block level button - Block level button +

+ Add prop block +

+ + Block level button + + + Block level button + + + Block level button + + + Block level button + + + Block level button + + + Block level button + + + Block level button + diff --git a/src/views/buttons/index.js b/src/views/buttons/index.js index f9a39ce..f2a2767 100644 --- a/src/views/buttons/index.js +++ b/src/views/buttons/index.js @@ -3,6 +3,4 @@ import ButtonGroups from './ButtonGroups' import Buttons from './Buttons' import BrandButtons from './BrandButtons' -export { - ButtonDropdowns, ButtonGroups, Buttons, BrandButtons -} +export { ButtonDropdowns, ButtonGroups, Buttons, BrandButtons } diff --git a/src/views/charts/ChartBarSimple.js b/src/views/charts/ChartBarSimple.js index 1679cfe..105a3c1 100644 --- a/src/views/charts/ChartBarSimple.js +++ b/src/views/charts/ChartBarSimple.js @@ -3,8 +3,7 @@ import PropTypes from 'prop-types' import { getColor } from '@coreui/utils' import { CChartBar } from '@coreui/react-chartjs' -const ChartBarSimple = props => { - +const ChartBarSimple = (props) => { const { backgroundColor, pointHoverBackgroundColor, @@ -14,7 +13,7 @@ const ChartBarSimple = props => { ...attributes } = props - const defaultDatasets = (()=>{ + const defaultDatasets = (() => { return [ { data: dataPoints, @@ -22,36 +21,35 @@ const ChartBarSimple = props => { pointHoverBackgroundColor: getColor(pointHoverBackgroundColor), label: label, barPercentage: 0.5, - categoryPercentage: 1 - } + categoryPercentage: 1, + }, ] })() - const defaultOptions = (()=>{ + const defaultOptions = (() => { return { maintainAspectRatio: false, legend: { - display: false + display: false, }, scales: { - xAxes: [{ - display: false - }], - yAxes: [{ - display: false - }] - } + xAxes: [ + { + display: false, + }, + ], + yAxes: [ + { + display: false, + }, + ], + }, } })() // render return ( - + ) } @@ -63,13 +61,13 @@ ChartBarSimple.propTypes = { pointHoverBackgroundColor: PropTypes.string, dataPoints: PropTypes.array, label: PropTypes.string, - pointed: PropTypes.bool -}; + pointed: PropTypes.bool, +} ChartBarSimple.defaultProps = { backgroundColor: 'rgba(0,0,0,.2)', dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12], - label: 'Sales' -}; + label: 'Sales', +} export default ChartBarSimple diff --git a/src/views/charts/ChartLineSimple.js b/src/views/charts/ChartLineSimple.js index 91b17ba..44571e6 100644 --- a/src/views/charts/ChartLineSimple.js +++ b/src/views/charts/ChartLineSimple.js @@ -3,8 +3,7 @@ import PropTypes from 'prop-types' import { getColor, deepObjectsMerge } from '@coreui/utils' import { CChartLine } from '@coreui/react-chartjs' -const ChartLineSimple = props => { - +const ChartLineSimple = (props) => { const { borderColor, backgroundColor, @@ -15,7 +14,7 @@ const ChartLineSimple = props => { ...attributes } = props - const pointHoverColor = (()=>{ + const pointHoverColor = (() => { if (pointHoverBackgroundColor) { return pointHoverBackgroundColor } else if (backgroundColor !== 'transparent') { @@ -24,7 +23,7 @@ const ChartLineSimple = props => { return borderColor })() - const defaultDatasets = (()=>{ + const defaultDatasets = (() => { return [ { data: dataPoints, @@ -32,12 +31,12 @@ const ChartLineSimple = props => { backgroundColor: getColor(backgroundColor), pointBackgroundColor: getColor(pointHoverColor), pointHoverBackgroundColor: getColor(pointHoverColor), - label - } + label, + }, ] })() - const pointedOptions = (()=>{ + const pointedOptions = (() => { return { scales: { xAxes: [ @@ -45,13 +44,13 @@ const ChartLineSimple = props => { offset: true, gridLines: { color: 'transparent', - zeroLineColor: 'transparent' + zeroLineColor: 'transparent', }, ticks: { fontSize: 2, - fontColor: 'transparent' - } - } + fontColor: 'transparent', + }, + }, ], yAxes: [ { @@ -59,55 +58,59 @@ const ChartLineSimple = props => { ticks: { display: false, min: Math.min.apply(Math, dataPoints) - 5, - max: Math.max.apply(Math, dataPoints) + 5 - } - } - ] + max: Math.max.apply(Math, dataPoints) + 5, + }, + }, + ], }, elements: { line: { - borderWidth: 1 + borderWidth: 1, }, point: { radius: 4, hitRadius: 10, - hoverRadius: 4 - } - } + hoverRadius: 4, + }, + }, } })() - const straightOptions = (()=>{ + const straightOptions = (() => { return { scales: { - xAxes: [{ - display: false - }], - yAxes: [{ - display: false - }] + xAxes: [ + { + display: false, + }, + ], + yAxes: [ + { + display: false, + }, + ], }, elements: { line: { - borderWidth: 2 + borderWidth: 2, }, point: { radius: 0, hitRadius: 10, - hoverRadius: 4 - } - } + hoverRadius: 4, + }, + }, } })() - const defaultOptions = (()=>{ + const defaultOptions = (() => { const options = pointed ? pointedOptions : straightOptions - return Object.assign({}, options, { - maintainAspectRatio: false, - legend: { - display: false - } - }) + return Object.assign({}, options, { + maintainAspectRatio: false, + legend: { + display: false, + }, + }) })() const computedDatasets = (() => { @@ -139,14 +142,14 @@ ChartLineSimple.propTypes = { pointHoverBackgroundColor: PropTypes.string, dataPoints: PropTypes.array, label: PropTypes.string, - pointed: PropTypes.bool -}; + pointed: PropTypes.bool, +} ChartLineSimple.defaultProps = { borderColor: 'rgba(255,255,255,.55)', backgroundColor: 'transparent', dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12], - label: 'Sales' -}; + label: 'Sales', +} export default ChartLineSimple diff --git a/src/views/charts/Charts.js b/src/views/charts/Charts.js index 9392c49..476ec92 100644 --- a/src/views/charts/Charts.js +++ b/src/views/charts/Charts.js @@ -1,28 +1,22 @@ import React from 'react' -import { - CCard, - CCardBody, - CCardGroup, - CCardHeader -} from '@coreui/react-ts' +import { CCard, CCardBody, CCardGroup, CCardHeader } from '@coreui/react-ts' import { CChartBar, CChartLine, CChartDoughnut, CChartRadar, CChartPie, - CChartPolarArea + CChartPolarArea, } from '@coreui/react-chartjs' import { DocsLink } from 'src/reusable' const Charts = () => { - return ( - + Bar Chart - + { { label: 'GitHub Commits', backgroundColor: '#f87979', - data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11] - } + data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11], + }, ]} labels="months" options={{ tooltips: { - enabled: true - } + enabled: true, + }, }} /> - - Doughnut Chart - + Doughnut Chart - - Line Chart - + Line Chart @@ -99,36 +84,27 @@ const Charts = () => { - - Pie Chart - + Pie Chart - - Polar Area Chart - + Polar Area Chart { pointBorderColor: '#fff', pointHoverBackgroundColor: 'rgba(179,181,198,1)', pointHoverBorderColor: 'rgba(179,181,198,1)', - data: [65, 59, 90, 81, 56, 55, 40] + data: [65, 59, 90, 81, 56, 55, 40], }, { label: 'My Second dataset', @@ -148,27 +124,22 @@ const Charts = () => { pointBorderColor: '#fff', pointHoverBackgroundColor: 'rgba(255,99,132,1)', pointHoverBorderColor: 'rgba(255,99,132,1)', - data: [28, 48, 40, 19, 96, 27, 100] - } + data: [28, 48, 40, 19, 96, 27, 100], + }, ]} options={{ aspectRatio: 1.5, tooltips: { - enabled: true - } + enabled: true, + }, }} - labels={[ - 'Eating', 'Drinking', 'Sleeping', 'Designing', - 'Coding', 'Cycling', 'Running' - ]} + labels={['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running']} /> - - Radar Chart - + Radar Chart { pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(179,181,198,1)', tooltipLabelColor: 'rgba(179,181,198,1)', - data: [65, 59, 90, 81, 56, 55, 40] + data: [65, 59, 90, 81, 56, 55, 40], }, { label: '2020', @@ -192,19 +163,16 @@ const Charts = () => { pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(255,99,132,1)', tooltipLabelColor: 'rgba(255,99,132,1)', - data: [28, 48, 40, 19, 96, 27, 100] - } + data: [28, 48, 40, 19, 96, 27, 100], + }, ]} options={{ aspectRatio: 1.5, tooltips: { - enabled: true - } + enabled: true, + }, }} - labels={[ - 'Eating', 'Drinking', 'Sleeping', 'Designing', - 'Coding', 'Cycling', 'Running' - ]} + labels={['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running']} /> diff --git a/src/views/charts/MainChartExample.js b/src/views/charts/MainChartExample.js index 79363e4..5d107cf 100644 --- a/src/views/charts/MainChartExample.js +++ b/src/views/charts/MainChartExample.js @@ -6,12 +6,12 @@ const brandSuccess = getStyle('success') || '#4dbd74' const brandInfo = getStyle('info') || '#20a8d8' const brandDanger = getStyle('danger') || '#f86c6b' -const MainChartExample = attributes => { - const random = (min, max)=>{ +const MainChartExample = (attributes) => { + const random = (min, max) => { return Math.floor(Math.random() * (max - min + 1) + min) } - const defaultDatasets = (()=>{ + const defaultDatasets = (() => { let elements = 27 const data1 = [] const data2 = [] @@ -28,7 +28,7 @@ const MainChartExample = attributes => { borderColor: brandInfo, pointHoverBackgroundColor: brandInfo, borderWidth: 2, - data: data1 + data: data1, }, { label: 'My Second dataset', @@ -36,7 +36,7 @@ const MainChartExample = attributes => { borderColor: brandSuccess, pointHoverBackgroundColor: brandSuccess, borderWidth: 2, - data: data2 + data: data2, }, { label: 'My Third dataset', @@ -45,46 +45,49 @@ const MainChartExample = attributes => { pointHoverBackgroundColor: brandDanger, borderWidth: 1, borderDash: [8, 5], - data: data3 - } + data: data3, + }, ] })() - const defaultOptions = (()=>{ + const defaultOptions = (() => { return { - maintainAspectRatio: false, - legend: { - display: false - }, - scales: { - xAxes: [{ + maintainAspectRatio: false, + legend: { + display: false, + }, + scales: { + xAxes: [ + { gridLines: { - drawOnChartArea: false - } - }], - yAxes: [{ + drawOnChartArea: false, + }, + }, + ], + yAxes: [ + { ticks: { beginAtZero: true, maxTicksLimit: 5, stepSize: Math.ceil(250 / 5), - max: 250 + max: 250, }, gridLines: { - display: true - } - }] + display: true, + }, + }, + ], + }, + elements: { + point: { + radius: 0, + hitRadius: 10, + hoverRadius: 4, + hoverBorderWidth: 3, }, - elements: { - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - hoverBorderWidth: 3 - } - } - } + }, } - )() + })() // render return ( @@ -92,10 +95,38 @@ const MainChartExample = attributes => { {...attributes} datasets={defaultDatasets} options={defaultOptions} - labels={['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']} + labels={[ + 'Mo', + 'Tu', + 'We', + 'Th', + 'Fr', + 'Sa', + 'Su', + 'Mo', + 'Tu', + 'We', + 'Th', + 'Fr', + 'Sa', + 'Su', + 'Mo', + 'Tu', + 'We', + 'Th', + 'Fr', + 'Sa', + 'Su', + 'Mo', + 'Tu', + 'We', + 'Th', + 'Fr', + 'Sa', + 'Su', + ]} /> ) } - export default MainChartExample diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js index 170912b..06dca11 100644 --- a/src/views/dashboard/Dashboard.js +++ b/src/views/dashboard/Dashboard.js @@ -29,98 +29,71 @@ const Dashboard = () => { -

Traffic

+

+ Traffic +

November 2017
 - + - { - ['Day', 'Month', 'Year'].map(value => ( - - {value} - - )) - } + {['Day', 'Month', 'Year'].map((value) => ( + + {value} + + ))} - +
Visits
29.703 Users (40%) - +
Unique
24.093 Users (20%) - +
Pageviews
78.706 Views (60%) - +
New Users
22.123 Users (80%) - +
Bounce Rate
Average Rate (40.15%) - + - + - - Traffic {' & '} Sales - + Traffic {' & '} Sales - @@ -142,9 +115,7 @@ const Dashboard = () => {
- - Monday - + Monday
@@ -153,9 +124,7 @@ const Dashboard = () => {
- - Tuesday - + Tuesday
@@ -164,9 +133,7 @@ const Dashboard = () => {
- - Wednesday - + Wednesday
@@ -175,9 +142,7 @@ const Dashboard = () => {
- - Thursday - + Thursday
@@ -186,9 +151,7 @@ const Dashboard = () => {
- - Friday - + Friday
@@ -197,9 +160,7 @@ const Dashboard = () => {
- - Saturday - + Saturday
@@ -208,9 +169,7 @@ const Dashboard = () => {
- - Sunday - + Sunday
@@ -220,7 +179,6 @@ const Dashboard = () => { - @@ -265,7 +223,9 @@ const Dashboard = () => {
Organic Search - 191,235 (56%) + + 191,235 (56%) +
@@ -275,7 +235,9 @@ const Dashboard = () => {
Facebook - 51,223 (15%) + + 51,223 (15%) +
@@ -285,7 +247,9 @@ const Dashboard = () => {
Twitter - 37,564 (11%) + + 37,564 (11%) +
@@ -295,7 +259,9 @@ const Dashboard = () => {
LinkedIn - 27,319 (8%) + + 27,319 (8%) +
@@ -309,7 +275,9 @@ const Dashboard = () => { - + @@ -320,7 +288,7 @@ const Dashboard = () => { @@ -385,7 +352,7 @@ const Dashboard = () => {
+ + User Country Usage
- +
Yiorgos Avraamu
@@ -352,12 +320,11 @@ const Dashboard = () => {
- +
Avram Tarasios
- Recurring | Registered: Jan 1, 2015
- +
Quintin Ed
@@ -417,7 +384,7 @@ const Dashboard = () => {
- +
Enéas Kwadwo
@@ -449,7 +416,7 @@ const Dashboard = () => {
- +
Agapetus Tadeáš
@@ -472,7 +439,7 @@ const Dashboard = () => { 		- +
Last login
@@ -481,7 +448,7 @@ const Dashboard = () => {
- +
Friderik Dávid
@@ -513,7 +480,6 @@ const Dashboard = () => {
- diff --git a/src/views/icons/brands/Brands.js b/src/views/icons/brands/Brands.js index 3463bd0..82a3904 100644 --- a/src/views/icons/brands/Brands.js +++ b/src/views/icons/brands/Brands.js @@ -8,10 +8,10 @@ const toKebabCase = (str) => { return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase() } -export const getIconsView = iconset => { +export const getIconsView = (iconset) => { return Object.entries(iconset).map(([name, value]) => ( - +
{toKebabCase(name)}
 )) @@ -22,12 +22,10 @@ const CoreUIIcons = () => { Brand Icons - + - - {getIconsView(brandSet)} - + {getIconsView(brandSet)} ) diff --git a/src/views/icons/coreui-icons/CoreUIIcons.js b/src/views/icons/coreui-icons/CoreUIIcons.js index 3367542..e3ac32c 100644 --- a/src/views/icons/coreui-icons/CoreUIIcons.js +++ b/src/views/icons/coreui-icons/CoreUIIcons.js @@ -9,12 +9,10 @@ const CoreUIIcons = () => { Free Icons / as CIcon{' '} - + - - {getIconsView(freeSet)} - + {getIconsView(freeSet)} ) diff --git a/src/views/icons/flags/Flags.js b/src/views/icons/flags/Flags.js index 44fc32f..a438222 100644 --- a/src/views/icons/flags/Flags.js +++ b/src/views/icons/flags/Flags.js @@ -9,12 +9,10 @@ const CoreUIIcons = () => { Flag Icons - + - - {getIconsView(flagSet)} - + {getIconsView(flagSet)} ) diff --git a/src/views/icons/index.js b/src/views/icons/index.js index 8b88ed3..92db64e 100644 --- a/src/views/icons/index.js +++ b/src/views/icons/index.js @@ -1,7 +1,5 @@ -import CoreUIIcons from './coreui-icons'; -import Flags from './flags'; -import Brands from './brands'; +import CoreUIIcons from './coreui-icons' +import Flags from './flags' +import Brands from './brands' -export { - CoreUIIcons, Flags, Brands -}; +export { CoreUIIcons, Flags, Brands } diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js index c6fb976..bf5b81a 100644 --- a/src/views/notifications/alerts/Alerts.js +++ b/src/views/notifications/alerts/Alerts.js @@ -23,33 +23,17 @@ const Alerts = () => { Alerts - + - - This is a primary alert — check it out! - - - This is a secondary alert — check it out! - - - This is a success alert — check it out! - - - This is a danger alert — check it out! - - - This is a warning alert — check it out! - - - This is a info alert — check it out! - - - This is a light alert — check it out! - - - This is a dark alert — check it out! - + This is a primary alert — check it out! + This is a secondary alert — check it out! + This is a success alert — check it out! + This is a danger alert — check it out! + This is a warning alert — check it out! + This is a info alert — check it out! + This is a light alert — check it out! + This is a dark alert — check it out! @@ -57,56 +41,51 @@ const Alerts = () => { Alerts - use .alert-link to provide links + + {' '} + use .alert-link to provide links + {/*eslint-disable-next-line*/} This is a primary alert with  - an example link. - Give it a click if you like. + an example link. Give it a click if you like. {/*eslint-disable-next-line*/} This is a secondary alert with  - an example link. - Give it a click if you like. + an example link. Give it a click if you like. {/*eslint-disable-next-line*/} This is a success alert with  - an example link. - Give it a click if you like. + an example link. Give it a click if you like. {/*eslint-disable-next-line*/} This is a danger alert with  - an example link. - Give it a click if you like. + an example link. Give it a click if you like. {/*eslint-disable-next-line*/} This is a warning alert with  - an example link. - Give it a click if you like. + an example link. Give it a click if you like. {/*eslint-disable-next-line*/} This is a info alert with  - an example link. - Give it a click if you like. + an example link. Give it a click if you like. {/*eslint-disable-next-line*/} This is a light alert with  - an example link. - Give it a click if you like. + an example link. Give it a click if you like. {/*eslint-disable-next-line*/} This is a dark alert with  - an example link. - Give it a click if you like. + an example link. Give it a click if you like. @@ -123,13 +102,14 @@ const Alerts = () => { 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. + 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. + Whenever you need to, be sure to use margin utilities to keep things nice and + tidy.

@@ -142,18 +122,10 @@ const Alerts = () => { dismissing - + I am an dismissible alert! - + I will be closed in {visible} seconds! { Badges - + -

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
+

+ Example heading New +

+

+ Example heading New +

+

+ Example heading New +

+

+ Example heading New +

+
+ Example heading New +
+
+ Example heading New +
- Notifications 9 + Notifications{' '} + + 9 + @@ -42,14 +57,30 @@ const Badges = () => { contextual variations - Primary - Secondary - Success - Danger - Warning - Info - Light - Dark + + Primary + + + Secondary + + + Success + + + Danger + + + Warning + + + Info + + + Light + + + Dark + @@ -58,14 +89,30 @@ const Badges = () => { pill badges - Primary - Secondary - Success - Danger - Warning - Info - Light - Dark + + Primary + + + Secondary + + + Success + + + Danger + + + Warning + + + Info + + + Light + + + Dark + @@ -74,14 +121,30 @@ const Badges = () => { square badges - Primary - Secondary - Success - Danger - Warning - Info - Light - Dark + + Primary + + + Secondary + + + Success + + + Danger + + + Warning + + + Info + + + Light + + + Dark + diff --git a/src/views/notifications/index.js b/src/views/notifications/index.js index fa7a3a7..fd019d9 100644 --- a/src/views/notifications/index.js +++ b/src/views/notifications/index.js @@ -1,8 +1,6 @@ -import Alerts from './Alerts'; -import Badges from './Badges'; -import Modals from './Modals'; -import Toaster from './Toaster'; +import Alerts from './Alerts' +import Badges from './Badges' +import Modals from './Modals' +import Toaster from './Toaster' -export { - Alerts, Badges, Modals, Toaster -}; +export { Alerts, Badges, Modals, Toaster } diff --git a/src/views/notifications/modals/Modals.js b/src/views/notifications/modals/Modals.js index d8eb071..0fd6e3c 100644 --- a/src/views/notifications/modals/Modals.js +++ b/src/views/notifications/modals/Modals.js @@ -10,12 +10,11 @@ import { CModalFooter, CModalHeader, CModalTitle, - CRow + CRow, } from '@coreui/react-ts' import { DocsLink } from 'src/reusable' const Modals = () => { - const [modal, setModal] = useState(true) const [large, setLarge] = useState(false) const [small, setSmall] = useState(false) @@ -31,82 +30,79 @@ const Modals = () => { Bootstrap Modals - + - setModal(!modal)} - className="me-1" - >Launch demo modal + setModal(!modal)} className="me-1"> + Launch demo modal + setLarge(!large)} className="me-1"> Launch large modal setSmall(!large)} className="me-1"> Launch small modal - + Modal title - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. Do Something{' '} - setModal(false)} - >Cancel + setModal(false)}> + Cancel + - - setLarge(!large)} - size="lg" - > + setLarge(!large)} size="lg"> Modal title - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. - setLarge(!large)}>Do Something{' '} - setLarge(!large)}>Cancel + setLarge(!large)}> + Do Something + {' '} + setLarge(!large)}> + Cancel + - setSmall(!small)} - size="sm" - > + setSmall(!small)} size="sm"> Modal title - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. - setSmall(!small)}>Do Something{' '} - setSmall(!small)}>Cancel + setSmall(!small)}> + Do Something + {' '} + setSmall(!small)}> + Cancel + @@ -115,25 +111,30 @@ const Modals = () => { setPrimary(!primary)} className="me-1"> Primary modal - setSuccess(!success)} className="me-1">Success modal - setWarning(!warning)} className="me-1">Warning modal - setDanger(!danger)} className="me-1">Danger modal - setInfo(!info)} className="me-1">Info modal + setSuccess(!success)} className="me-1"> + Success modal + + setWarning(!warning)} className="me-1"> + Warning modal + + setDanger(!danger)} className="me-1"> + Danger modal + + setInfo(!info)} className="me-1"> + Info modal + - setPrimary(!primary)} - color="primary" - > + setPrimary(!primary)} color="primary"> Modal title - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. setPrimary(!primary)}> @@ -145,90 +146,93 @@ const Modals = () => { - setSuccess(!success)} - color="success" - > + setSuccess(!success)} color="success"> Modal title - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. - setSuccess(!success)}>Do Something{' '} - setSuccess(!success)}>Cancel + setSuccess(!success)}> + Do Something + {' '} + setSuccess(!success)}> + Cancel + - setWarning(!warning)} - color="warning" - > + setWarning(!warning)} color="warning"> Modal title - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. - setWarning(!warning)}>Do Something{' '} - setWarning(!warning)}>Cancel + setWarning(!warning)}> + Do Something + {' '} + setWarning(!warning)}> + Cancel + - setDanger(!danger)} - color="danger" - > + setDanger(!danger)} color="danger"> Modal title - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. - setDanger(!danger)}>Do Something{' '} - setDanger(!danger)}>Cancel + setDanger(!danger)}> + Do Something + {' '} + setDanger(!danger)}> + Cancel + - setInfo(!info)} - color="info" - > + setInfo(!info)} color="info"> Modal title - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. - setInfo(!info)}>Cancel - setInfo(!info)}>Do Something{' '} + setInfo(!info)}> + Cancel + + setInfo(!info)}> + Do Something + {' '} - diff --git a/src/views/notifications/toaster/Toaster.js b/src/views/notifications/toaster/Toaster.js index 576294d..3c7efa5 100644 --- a/src/views/notifications/toaster/Toaster.js +++ b/src/views/notifications/toaster/Toaster.js @@ -15,12 +15,11 @@ import { CToast, CToastBody, CToastHeader, - CToaster + CToaster, } from '@coreui/react-ts' import { DocsLink } from 'src/reusable' const Toaster = () => { - const placements = [ 'top-start', 'top-center', @@ -30,13 +29,13 @@ const Toaster = () => { 'middle-end', 'bottom-start', 'bottom-center', - 'bottom-end' + 'bottom-end', ] const [toasts, setToasts] = useState([ - { placement: 'static'}, - { placement: 'static'}, - { placement: 'top-right', autohide: 3000 } + { placement: 'static' }, + { placement: 'static' }, + { placement: 'top-right', autohide: 3000 }, ]) const [placement, setPlacement] = useState('top-right') @@ -46,14 +45,10 @@ const Toaster = () => { const [fade, setFade] = useState(true) const addToast = () => { - setToasts([ - ...toasts, - { placement, autohide: autohide && autohideValue, closeButton, fade } - ]) + setToasts([...toasts, { placement, autohide: autohide && autohideValue, closeButton, fade }]) } - - const toasters = (()=>{ + const toasters = (() => { return toasts.reduce((toasters, toast) => { toasters[toast.placement] = toasters[toast.placement] || [] toasters[toast.placement].push(toast) @@ -61,12 +56,11 @@ const Toaster = () => { }, {}) })() - return ( Toasts. - + @@ -79,39 +73,40 @@ const Toaster = () => { { setAutohide(e.target.checked) }} + onChange={(e) => { + setAutohide(e.target.checked) + }} custom /> Autohide of the toast
- { - autohide && + {autohide && (
Time to autohide { + onChange={(e) => { setAutohideValue(Number(e.target.value)) }} />
- } + )}
Placement {setPlacement(e.target.value)}} + onChange={(e) => { + setPlacement(e.target.value) + }} > - { - placements.map((placement, i)=>( - - )) - } + {placements.map((placement, i) => ( + + ))}
@@ -119,10 +114,14 @@ const Toaster = () => { { setFade(e.target.checked) }} + onChange={(e) => { + setFade(e.target.checked) + }} custom /> - fade + + fade +
@@ -130,32 +129,25 @@ const Toaster = () => { id="close" custom checked={closeButton} - onChange={e=> { setCloseButton(e.target.checked) }} + onChange={(e) => { + setCloseButton(e.target.checked) + }} /> closeButton
- + Add toast - {Object.keys(toasters).map((toasterKey) => ( - - { - toasters[toasterKey].map((toast, key)=>{ - return( + + {toasters[toasterKey].map((toast, key) => { + return ( { > {`Hello, ${toasterKey} world! This is a toast ${toasterKey} message.`} - // - // - // Toast title - // - // - // {`This is a toast in ${toasterKey} positioned toaster number ${key + 1}.`} - // - // ) - }) - } + })} ))} diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js index e423ded..3c67812 100644 --- a/src/views/pages/login/Login.js +++ b/src/views/pages/login/Login.js @@ -11,7 +11,7 @@ import { CFormControl, CInputGroup, CInputGroupText, - CRow + CRow, } from '@coreui/react-ts' import CIcon from '@coreui/icons-react' @@ -37,14 +37,22 @@ const Login = () => { - + - Login + + Login + - Forgot password? + + Forgot password? + @@ -54,10 +62,14 @@ const Login = () => {

Sign up

-

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

+

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

- Register Now! + + Register Now! +
diff --git a/src/views/pages/page404/Page404.js b/src/views/pages/page404/Page404.js index 9438b62..63aa1d6 100644 --- a/src/views/pages/page404/Page404.js +++ b/src/views/pages/page404/Page404.js @@ -18,7 +18,7 @@ const Page404 = () => {

404

-

Oops! You{'\''}re lost.

+

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 af5633b..16bf322 100644 --- a/src/views/pages/page500/Page500.js +++ b/src/views/pages/page500/Page500.js @@ -6,7 +6,7 @@ import { CFormControl, CInputGroup, CInputGroupText, - CRow + CRow, } from '@coreui/react-ts' import CIcon from '@coreui/icons-react' @@ -19,7 +19,9 @@ const Page500 = () => {

500

Houston, we have a problem!

-

The page you are looking for is temporarily unavailable.

+

+ 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 fcbd7ae..a719516 100644 --- a/src/views/pages/register/Register.js +++ b/src/views/pages/register/Register.js @@ -10,7 +10,7 @@ import { CFormControl, CInputGroup, CInputGroupText, - CRow + CRow, } from '@coreui/react-ts' import CIcon from '@coreui/icons-react' @@ -39,24 +39,38 @@ const Register = () => { - + - + - Create Account + + Create Account + - facebook + + facebook + - twitter + + twitter + diff --git a/src/views/theme/colors/Colors.js b/src/views/theme/colors/Colors.js index d562191..24ec102 100644 --- a/src/views/theme/colors/Colors.js +++ b/src/views/theme/colors/Colors.js @@ -1,16 +1,9 @@ import React, { useEffect, useState, createRef } from 'react' import classNames from 'classnames' -import { - CRow, - CCol, - CCard, - CCardHeader, - CCardBody -} from '@coreui/react-ts' +import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react-ts' import { rgbToHex } from '@coreui/utils' import { DocsLink } from 'src/reusable' - const ThemeView = () => { const [color, setColor] = useState('rgb(255, 255, 255)') const ref = createRef() @@ -24,26 +17,26 @@ const ThemeView = () => { return ( - - - - - - - - + + + + + + + +
HEX:{ rgbToHex(color) }
RGB:{ color }
HEX:{rgbToHex(color)}
RGB:{color}
) } -const ThemeColor = ({className, children}) => { +const ThemeColor = ({ className, children }) => { const classes = classNames(className, 'theme-color w-75 rounded mb-3') return ( -
+
{children} - + ) } @@ -54,7 +47,7 @@ const Colors = () => { Theme colors - + @@ -86,9 +79,7 @@ const Colors = () => { - - Grays - + Grays diff --git a/src/views/theme/typography/Typography.js b/src/views/theme/typography/Typography.js index de8503b..a7b1863 100644 --- a/src/views/theme/typography/Typography.js +++ b/src/views/theme/typography/Typography.js @@ -1,9 +1,5 @@ import React from 'react' -import { - CCard, - CCardHeader, - CCardBody -} from '@coreui/react-ts' +import { CCard, CCardHeader, CCardBody } from '@coreui/react-ts' import { DocsLink } from 'src/reusable' const Typography = () => { @@ -12,68 +8,94 @@ const Typography = () => { Headings - + -

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

+

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

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

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

@@ -85,64 +107,86 @@ const Typography = () => { -
- Display headings -
+
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.

+

+ 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
+ Display 1 +
+ Display 2 +
+ Display 3 +
+ Display 4 +
- - Inline text elements - + 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.

+

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

+

+ 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 no longer accurate. +

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

-

This line of text will render as underlined

+

+ This line of text will render as underlined +

This line of text is meant to be treated as fine print.

-

This line rendered as bold text.

-

This line rendered as italicized text.

+

+ This line rendered as bold text. +

+

+ This line rendered as italicized text. +

- - Description list alignment - + 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.

+

+ 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
@@ -150,7 +194,9 @@ const Typography = () => {
Euismod
-

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

+

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

Donec id elit non mi porta gravida at eget metus.

@@ -158,13 +204,18 @@ const Typography = () => {
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.
+
+ 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.
+
+ Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. +
diff --git a/src/views/users/User.js b/src/views/users/User.js deleted file mode 100644 index f0c66f0..0000000 --- a/src/views/users/User.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react-ts' -import CIcon from '@coreui/icons-react' - -import usersData from './UsersData' - -const User = ({match}) => { - const user = usersData.find( user => user.id.toString() === match.params.id) - const userDetails = user ? Object.entries(user) : - [['id', ( Not found)]] - - return ( - - - - - User id: {match.params.id} - - - - - { - userDetails.map(([key, value], index) => { - return ( - - - - - ) - }) - } - -
{`${key}:`}{value}
- - - - - ) -} - -export default User diff --git a/src/views/users/Users.js b/src/views/users/Users.js deleted file mode 100644 index 85fa857..0000000 --- a/src/views/users/Users.js +++ /dev/null @@ -1,86 +0,0 @@ -import React, { useState, useEffect } from 'react' -import { useHistory, useLocation } from 'react-router-dom' -import { - CBadge, - CCard, - CCardBody, - CCardHeader, - CCol, - CDataTable, - CRow, - CPagination -} from '@coreui/react' - -import usersData from './UsersData' - -const getBadge = status => { - switch (status) { - case 'Active': return 'success' - case 'Inactive': return 'secondary' - case 'Pending': return 'warning' - case 'Banned': return 'danger' - default: return 'primary' - } -} - -const Users = () => { - const history = useHistory() - const queryPage = useLocation().search.match(/page=([0-9]+)/, '') - const currentPage = Number(queryPage && queryPage[1] ? queryPage[1] : 1) - const [page, setPage] = useState(currentPage) - - const pageChange = newPage => { - currentPage !== newPage && history.push(`/users?page=${newPage}`) - } - - useEffect(() => { - currentPage !== page && setPage(currentPage) - }, [currentPage, page]) - - return ( - - - - - Users - example - - - history.push(`/users/${item.id}`)} - scopedSlots = {{ - 'status': - (item)=>( - - - {item.status} - - - ) - }} - /> - - - - - - ) -} - -export default Users diff --git a/src/views/users/UsersData.js b/src/views/users/UsersData.js deleted file mode 100644 index f5f923a..0000000 --- a/src/views/users/UsersData.js +++ /dev/null @@ -1,29 +0,0 @@ -const usersData = [ - {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'}, - {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'}, - {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, - {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'}, - {id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'}, - {id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'}, - {id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'}, - {id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, - {id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'}, - {id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'}, - {id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'}, - {id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'}, - {id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, - {id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'}, - {id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'}, - {id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'}, - {id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'}, - {id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, - {id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'}, - {id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'}, - {id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'}, - {id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'}, - {id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, - {id: 23, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'}, - {id: 42, name: 'Ford Prefect', registered: '2001/05/25', role: 'Alien', status: 'Don\'t panic!'} -] - -export default usersData diff --git a/src/views/widgets/Widgets.js b/src/views/widgets/Widgets.js index 68fa615..5835696 100644 --- a/src/views/widgets/Widgets.js +++ b/src/views/widgets/Widgets.js @@ -7,7 +7,7 @@ import { CWidgetIcon, CWidgetProgress, CWidgetProgressIcon, - CWidgetSimple + CWidgetSimple, } from '@coreui/react-ts' import WidgetsBrand from './WidgetsBrand' @@ -24,146 +24,297 @@ const Widgets = () => { - + - + - + - + - + - + - + - + - } iconPadding={3} title="income" value="$1.999,50" color="primary" /> + } + iconPadding={3} + title="income" + value="$1.999,50" + color="primary" + /> - } iconPadding={3} title="income" value="$1.999,50" color="info"/> + } + iconPadding={3} + title="income" + value="$1.999,50" + color="info" + /> - } iconPadding={3} title="income" value="$1.999,50" color="warning"/> + } + iconPadding={3} + title="income" + value="$1.999,50" + color="warning" + /> - } iconPadding={3} title="income" value="$1.999,50" color="danger"/> + } + iconPadding={3} + title="income" + value="$1.999,50" + color="danger" + /> - } iconPadding={3} title="income" value="$1.999,50" color="primary" footer={ - - View more - - + } + iconPadding={3} + title="income" + value="$1.999,50" + color="primary" + footer={ + + View more + + } /> - } iconPadding={3} title="income" value="$1.999,50" color="info" footer={ - - View more - - + } + iconPadding={3} + title="income" + value="$1.999,50" + color="info" + footer={ + + View more + + } /> - } iconPadding={3} title="income" value="$1.999,50" color="warning" footer={ - - View more - - + } + iconPadding={3} + title="income" + value="$1.999,50" + color="warning" + footer={ + + View more + + } /> - } iconPadding={3} title="income" value="$1.999,50" color="danger" footer={ - - View more - - + } + iconPadding={3} + title="income" + value="$1.999,50" + color="danger" + footer={ + + View more + + } /> - } iconPadding={4} title="income" value="$1.999,50" color="primary" /> + } + iconPadding={4} + title="income" + value="$1.999,50" + color="primary" + /> - } iconPadding={4} title="income" value="$1.999,50" color="info"/> + } + iconPadding={4} + title="income" + value="$1.999,50" + color="info" + /> - } iconPadding={4} title="income" value="$1.999,50" color="warning"/> + } + iconPadding={4} + title="income" + value="$1.999,50" + color="warning" + /> - } iconPadding={4} title="income" value="$1.999,50" color="danger"/> + } + iconPadding={4} + title="income" + value="$1.999,50" + color="danger" + /> - - + + } + icon={} value="87.500" title="Visitors" progressColor="info" progressValue={75} /> } + icon={} value="385" title="New Clients" progressColor="success" progressValue={75} /> } + icon={} value="1238" title="Products sold" progressColor="warning" progressValue={75} /> } + icon={} value="28%" title="Returning Visitors" progressValue={75} /> } + icon={} value="5:34:11" title="Avg. Time" progressColor="danger" @@ -173,7 +324,7 @@ const Widgets = () => { } + icon={} value="87.500" title="Visitors" progressColor="info" @@ -182,7 +333,7 @@ const Widgets = () => { } + icon={} value="385" title="New Clients" progressColor="success" @@ -191,7 +342,7 @@ const Widgets = () => { } + icon={} value="1238" title="Products sold" progressColor="warning" @@ -200,7 +351,7 @@ const Widgets = () => { } + icon={} value="28%" title="Returning Visitors" progressColor="primary" @@ -209,7 +360,7 @@ const Widgets = () => { } + icon={} value="5:34:11" title="Avg. Time" progressColor="danger" @@ -218,7 +369,7 @@ const Widgets = () => { } + icon={} value="972" title="comments" progressColor="info" @@ -230,7 +381,7 @@ const Widgets = () => { } + icon={} value="87.500" title="Visitors" progressValue={75} @@ -240,7 +391,7 @@ const Widgets = () => { } + icon={} value="385" title="New Clients" progressValue={75} @@ -250,7 +401,7 @@ const Widgets = () => { } + icon={} value="1238" title="Products sold" progressValue={75} @@ -260,7 +411,7 @@ const Widgets = () => { } + icon={} value="28%" title="Returning Visitors" progressValue={75} @@ -270,7 +421,7 @@ const Widgets = () => { } + icon={} value="5:34:11" title="Avg. Time" progressValue={75} @@ -280,7 +431,7 @@ const Widgets = () => { } + icon={} value="972" title="comments" progressValue={75} @@ -291,32 +442,32 @@ const Widgets = () => { - + - + - + - + - + - + diff --git a/src/views/widgets/WidgetsBrand.js b/src/views/widgets/WidgetsBrand.js index 88ae7d8..471d753 100644 --- a/src/views/widgets/WidgetsBrand.js +++ b/src/views/widgets/WidgetsBrand.js @@ -1,187 +1,173 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { CWidgetBrand, CRow, CCol } from '@coreui/react-ts'; -import CIcon from '@coreui/icons-react'; -import ChartLineSimple from '../charts/ChartLineSimple'; - -const WidgetsBrand = ({withCharts})=>{ +import React from 'react' +import PropTypes from 'prop-types' +import { CWidgetBrand, CRow, CCol } from '@coreui/react-ts' +import CIcon from '@coreui/icons-react' +import ChartLineSimple from '../charts/ChartLineSimple' +const WidgetsBrand = ({ withCharts }) => { // render - return withCharts ? - - - - - - - } - values={[['89k', 'friends'], ['459', 'feeds']]} - style={{ - "--cui-card-cap-bg": "#3b5998" - }} - /> - + return withCharts ? ( + + + + + + + } + values={[ + ['89k', 'friends'], + ['459', 'feeds'], + ]} + style={{ + '--cui-card-cap-bg': '#3b5998', + }} + /> + - - - - - - } - values={[['973k', 'followers'], ['1.792', 'tweets']]} - style={{ - "--cui-card-cap-bg": "#00aced" - }} - /> - + + + + + + } + values={[ + ['973k', 'followers'], + ['1.792', 'tweets'], + ]} + style={{ + '--cui-card-cap-bg': '#00aced', + }} + /> + - - - - - - } - values={[['500+', 'contacts'], ['292', 'feeds']]} - style={{ - "--cui-card-cap-bg": "#4875b4" - }} - /> - + + + + + + } + values={[ + ['500+', 'contacts'], + ['292', 'feeds'], + ]} + style={{ + '--cui-card-cap-bg': '#4875b4', + }} + /> + - - - - - - } - values={[['12+', 'events'], ['4', 'meetings']]} - /> - - : - - - } - values={[['89k', 'friends'], ['459', 'feeds']]} - style={{ - "--cui-card-cap-bg": "#3b5998" - }} - /> - + + + + + + } + values={[ + ['12+', 'events'], + ['4', 'meetings'], + ]} + /> + + + ) : ( + + + } + values={[ + ['89k', 'friends'], + ['459', 'feeds'], + ]} + style={{ + '--cui-card-cap-bg': '#3b5998', + }} + /> + - - - } - values={[['973k', 'followers'], ['1.792', 'tweets']]} - style={{ - "--cui-card-cap-bg": "#00aced" - }} - /> - + + } + values={[ + ['973k', 'followers'], + ['1.792', 'tweets'], + ]} + style={{ + '--cui-card-cap-bg': '#00aced', + }} + /> + - - - } - values={[['500+', 'contacts'], ['292', 'feeds']]} - style={{ - "--cui-card-cap-bg": "#4875b4" - }} - /> - + + } + values={[ + ['500+', 'contacts'], + ['292', 'feeds'], + ]} + style={{ + '--cui-card-cap-bg': '#4875b4', + }} + /> + - - - } - values={[['12+', 'events'], ['4', 'meetings']]} - /> - - + + } + values={[ + ['12+', 'events'], + ['4', 'meetings'], + ]} + /> + + + ) } WidgetsBrand.propTypes = { - withCharts: PropTypes.bool + withCharts: PropTypes.bool, } export default WidgetsBrand diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js index 56d87cd..4ab99a2 100644 --- a/src/views/widgets/WidgetsDropdown.js +++ b/src/views/widgets/WidgetsDropdown.js @@ -6,7 +6,7 @@ import { CDropdownMenu, CDropdownItem, CDropdownToggle, - CWidgetDropdown + CWidgetDropdown, } from '@coreui/react-ts' import CIcon from '@coreui/icons-react' import ChartLineSimple from '../charts/ChartLineSimple' @@ -17,14 +17,15 @@ const WidgetsDropdown = () => { return ( - - + {/* TODO: placement doesn't work */} @@ -39,7 +40,7 @@ const WidgetsDropdown = () => { { - - + Action @@ -71,10 +73,10 @@ const WidgetsDropdown = () => { @@ -83,14 +85,15 @@ const WidgetsDropdown = () => { - - + Action @@ -103,10 +106,10 @@ const WidgetsDropdown = () => { chart={ { - - + Action @@ -136,7 +140,7 @@ const WidgetsDropdown = () => { chart={