From c5421714bae3580ad42e20ec2316e28ba230e700 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 17 May 2021 23:31:45 +0200 Subject: [PATCH] refactor: update example views --- src/App.js | 8 +- src/App.test.js | 2 +- src/containers/_nav.js | 20 +- src/layout/DefaultLayout.js | 2 +- src/routes.js | 87 +- src/scss/style.scss | 1 + src/views/base/tables/Tables.js | 333 ------ src/views/base/tooltips/Tooltips.js | 86 -- .../button-dropdowns/ButtonDropdowns.js | 381 ------- .../buttons/button-groups/ButtonGroups.js | 190 ---- src/views/buttons/buttons/Buttons.js | 960 ----------------- src/views/charts/Charts.js | 206 ---- src/views/charts/MainChartExample.js | 132 --- src/views/dashboard/Dashboard.js | 139 ++- .../base/accordion/Accordion.js | 0 .../base/breadcrumbs/Breadcrumbs.js | 0 src/views/{ => examples}/base/cards/Cards.js | 0 .../base/carousels/Carousels.js | 0 .../base/collapses/Collapses.js | 0 src/views/{ => examples}/base/index.js | 0 .../base/jumbotrons/Jumbotrons.js | 0 .../base/list-groups/ListGroups.js | 0 .../{ => examples}/base/navbars/Navbars.js | 0 src/views/{ => examples}/base/navs/Navs.js | 0 .../base/paginations/Paginations.js | 0 .../{ => examples}/base/popovers/Popovers.js | 2 +- .../{ => examples}/base/progress/Progress.js | 0 src/views/examples/base/tables/Tables.js | 988 ++++++++++++++++++ src/views/{ => examples}/base/tabs/Tabs.js | 0 src/views/examples/base/tooltips/Tooltips.js | 94 ++ .../buttons/button-groups/ButtonGroups.js | 451 ++++++++ src/views/examples/buttons/buttons/Buttons.js | 399 +++++++ .../examples/buttons/dropdowns/Dropdowns.js | 345 ++++++ src/views/{ => examples}/buttons/index.js | 0 .../{ => examples}/charts/ChartBarSimple.js | 59 +- .../{ => examples}/charts/ChartLineSimple.js | 79 +- src/views/examples/charts/Charts.js | 171 +++ src/views/examples/charts/MainChartExample.js | 95 ++ .../forms/checks-radios/ChecksRadios.js | 0 .../forms/form-control/FormControl.js | 0 .../forms/input-group/InputGroup.js | 0 .../{ => examples}/forms/layout/Layout.js | 0 src/views/{ => examples}/forms/range/Range.js | 0 .../{ => examples}/forms/select/Select.js | 0 .../forms/validation/Validation.js | 0 .../{ => examples}/icons/brands/Brands.js | 0 .../icons/coreui-icons/CoreUIIcons.js | 0 src/views/{ => examples}/icons/flags/Flags.js | 0 src/views/{ => examples}/icons/index.js | 0 .../notifications/alerts/Alerts.js | 0 .../notifications/badges/Badges.js | 0 .../{ => examples}/notifications/index.js | 0 .../notifications/modals/Modals.js | 0 .../notifications/toasts/Toasts.js | 0 src/views/{ => examples}/pages/login/Login.js | 0 .../{ => examples}/pages/page404/Page404.js | 0 .../{ => examples}/pages/page500/Page500.js | 0 .../{ => examples}/pages/register/Register.js | 0 .../{ => examples}/theme/colors/Colors.js | 0 .../theme/typography/Typography.js | 0 src/views/{ => examples}/widgets/Widgets.js | 320 +++++- src/views/examples/widgets/WidgetsBrand.js | 195 ++++ src/views/examples/widgets/WidgetsDropdown.js | 341 ++++++ src/views/widgets/WidgetsBrand.js | 173 --- src/views/widgets/WidgetsDropdown.js | 155 --- 65 files changed, 3637 insertions(+), 2777 deletions(-) delete mode 100644 src/views/base/tables/Tables.js delete mode 100644 src/views/base/tooltips/Tooltips.js delete mode 100644 src/views/buttons/button-dropdowns/ButtonDropdowns.js delete mode 100644 src/views/buttons/button-groups/ButtonGroups.js delete mode 100644 src/views/buttons/buttons/Buttons.js delete mode 100644 src/views/charts/Charts.js delete mode 100644 src/views/charts/MainChartExample.js rename src/views/{ => examples}/base/accordion/Accordion.js (100%) rename src/views/{ => examples}/base/breadcrumbs/Breadcrumbs.js (100%) rename src/views/{ => examples}/base/cards/Cards.js (100%) rename src/views/{ => examples}/base/carousels/Carousels.js (100%) rename src/views/{ => examples}/base/collapses/Collapses.js (100%) rename src/views/{ => examples}/base/index.js (100%) rename src/views/{ => examples}/base/jumbotrons/Jumbotrons.js (100%) rename src/views/{ => examples}/base/list-groups/ListGroups.js (100%) rename src/views/{ => examples}/base/navbars/Navbars.js (100%) rename src/views/{ => examples}/base/navs/Navs.js (100%) rename src/views/{ => examples}/base/paginations/Paginations.js (100%) rename src/views/{ => examples}/base/popovers/Popovers.js (96%) rename src/views/{ => examples}/base/progress/Progress.js (100%) create mode 100644 src/views/examples/base/tables/Tables.js rename src/views/{ => examples}/base/tabs/Tabs.js (100%) create mode 100644 src/views/examples/base/tooltips/Tooltips.js create mode 100644 src/views/examples/buttons/button-groups/ButtonGroups.js create mode 100644 src/views/examples/buttons/buttons/Buttons.js create mode 100644 src/views/examples/buttons/dropdowns/Dropdowns.js rename src/views/{ => examples}/buttons/index.js (100%) rename src/views/{ => examples}/charts/ChartBarSimple.js (61%) rename src/views/{ => examples}/charts/ChartLineSimple.js (74%) create mode 100644 src/views/examples/charts/Charts.js create mode 100644 src/views/examples/charts/MainChartExample.js rename src/views/{ => examples}/forms/checks-radios/ChecksRadios.js (100%) rename src/views/{ => examples}/forms/form-control/FormControl.js (100%) rename src/views/{ => examples}/forms/input-group/InputGroup.js (100%) rename src/views/{ => examples}/forms/layout/Layout.js (100%) rename src/views/{ => examples}/forms/range/Range.js (100%) rename src/views/{ => examples}/forms/select/Select.js (100%) rename src/views/{ => examples}/forms/validation/Validation.js (100%) rename src/views/{ => examples}/icons/brands/Brands.js (100%) rename src/views/{ => examples}/icons/coreui-icons/CoreUIIcons.js (100%) rename src/views/{ => examples}/icons/flags/Flags.js (100%) rename src/views/{ => examples}/icons/index.js (100%) rename src/views/{ => examples}/notifications/alerts/Alerts.js (100%) rename src/views/{ => examples}/notifications/badges/Badges.js (100%) rename src/views/{ => examples}/notifications/index.js (100%) rename src/views/{ => examples}/notifications/modals/Modals.js (100%) rename src/views/{ => examples}/notifications/toasts/Toasts.js (100%) rename src/views/{ => examples}/pages/login/Login.js (100%) rename src/views/{ => examples}/pages/page404/Page404.js (100%) rename src/views/{ => examples}/pages/page500/Page500.js (100%) rename src/views/{ => examples}/pages/register/Register.js (100%) rename src/views/{ => examples}/theme/colors/Colors.js (100%) rename src/views/{ => examples}/theme/typography/Typography.js (100%) rename src/views/{ => examples}/widgets/Widgets.js (57%) create mode 100644 src/views/examples/widgets/WidgetsBrand.js create mode 100644 src/views/examples/widgets/WidgetsDropdown.js delete mode 100644 src/views/widgets/WidgetsBrand.js delete mode 100644 src/views/widgets/WidgetsDropdown.js diff --git a/src/App.js b/src/App.js index 14c614f..2caaca5 100644 --- a/src/App.js +++ b/src/App.js @@ -12,10 +12,10 @@ const loading = ( 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/examples/pages/login/Login')) +const Register = React.lazy(() => import('./views/examples/pages/register/Register')) +const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404')) +const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500')) class App extends Component { render() { diff --git a/src/App.test.js b/src/App.test.js index 10ea132..0bf5705 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,7 +1,7 @@ import React from 'react' import { shallow } from 'enzyme/build' import App from './App' -import ChartLineSimple from './views/charts/ChartLineSimple' +import ChartLineSimple from './views/examples/charts/ChartLineSimple' import Dashboard from './views/dashboard/Dashboard.js' it('mounts App without crashing', () => { diff --git a/src/containers/_nav.js b/src/containers/_nav.js index 0e59edb..2c33f78 100644 --- a/src/containers/_nav.js +++ b/src/containers/_nav.js @@ -73,12 +73,6 @@ const _nav = [ anchor: 'Collapse', to: '/base/collapses', }, - { - _component: 'CNavItem', - as: NavLink, - anchor: 'Jumbotron', - to: '/base/jumbotrons', - }, { _component: 'CNavItem', as: NavLink, @@ -88,15 +82,9 @@ const _nav = [ { _component: 'CNavItem', as: NavLink, - anchor: 'Navs', + anchor: 'Navs & Tabs', to: '/base/navs', }, - { - _component: 'CNavItem', - as: NavLink, - anchor: 'Navbars', - to: '/base/navbars', - }, { _component: 'CNavItem', as: NavLink, @@ -121,12 +109,6 @@ const _nav = [ anchor: 'Tables', to: '/base/tables', }, - { - _component: 'CNavItem', - as: NavLink, - anchor: 'Tabs', - to: '/base/tabs', - }, { _component: 'CNavItem', as: NavLink, diff --git a/src/layout/DefaultLayout.js b/src/layout/DefaultLayout.js index fca04f5..42b87a5 100644 --- a/src/layout/DefaultLayout.js +++ b/src/layout/DefaultLayout.js @@ -7,7 +7,7 @@ const DefaultLayout = () => {
-
+
diff --git a/src/routes.js b/src/routes.js index 9934c2e..9a60c48 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,49 +1,51 @@ import React from 'react' -const Toasts = React.lazy(() => import('./views/notifications/toasts/Toasts')) -const Tables = React.lazy(() => import('./views/base/tables/Tables')) +// examples -const Accordion = React.lazy(() => import('./views/base/accordion/Accordion')) -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 Colors = React.lazy(() => import('./views/examples/theme/colors/Colors')) +const Typography = React.lazy(() => import('./views/examples/theme/typography/Typography')) -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/Paginations')) -const Popovers = React.lazy(() => import('./views/base/popovers/Popovers')) -const Progress = React.lazy(() => import('./views/base/progress/Progress')) +const Accordion = React.lazy(() => import('./views/examples/base/accordion/Accordion')) +const Breadcrumbs = React.lazy(() => import('./views/examples/base/breadcrumbs/Breadcrumbs')) +const Cards = React.lazy(() => import('./views/examples/base/cards/Cards')) +const Carousels = React.lazy(() => import('./views/examples/base/carousels/Carousels')) +const Collapses = React.lazy(() => import('./views/examples/base/collapses/Collapses')) +const ListGroups = React.lazy(() => import('./views/examples/base/list-groups/ListGroups')) +const Navs = React.lazy(() => import('./views/examples/base/navs/Navs')) +const Paginations = React.lazy(() => import('./views/examples/base/paginations/Paginations')) +const Popovers = React.lazy(() => import('./views/examples/base/popovers/Popovers')) +const Progress = React.lazy(() => import('./views/examples/base/progress/Progress')) +const Tables = React.lazy(() => import('./views/examples/base/tables/Tables')) +const Tooltips = React.lazy(() => import('./views/examples/base/tooltips/Tooltips')) -const Tabs = React.lazy(() => import('./views/base/tabs/Tabs')) -const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips')) -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 Buttons = React.lazy(() => import('./views/examples/buttons/buttons/Buttons')) +const ButtonGroups = React.lazy(() => import('./views/examples/buttons/button-groups/ButtonGroups')) +const Dropdowns = React.lazy(() => import('./views/examples/buttons/dropdowns/Dropdowns')) + +const ChecksRadios = React.lazy(() => import('./views/examples/forms/checks-radios/ChecksRadios')) +const FormControl = React.lazy(() => import('./views/examples/forms/form-control/FormControl')) +const InputGroup = React.lazy(() => import('./views/examples/forms/input-group/InputGroup')) +const Layout = React.lazy(() => import('./views/examples/forms/layout/Layout')) +const Range = React.lazy(() => import('./views/examples/forms/range/Range')) +const Select = React.lazy(() => import('./views/examples/forms/select/Select')) +const Validation = React.lazy(() => import('./views/examples/forms/validation/Validation')) + +const CoreUIIcons = React.lazy(() => import('./views/examples/icons/coreui-icons/CoreUIIcons')) +const Flags = React.lazy(() => import('./views/examples/icons/flags/Flags')) +const Brands = React.lazy(() => import('./views/examples/icons/brands/Brands')) + +const Alerts = React.lazy(() => import('./views/examples/notifications/alerts/Alerts')) +const Badges = React.lazy(() => import('./views/examples/notifications/badges/Badges')) +const Modals = React.lazy(() => import('./views/examples/notifications/modals/Modals')) +const Toasts = React.lazy(() => import('./views/examples/notifications/toasts/Toasts')) + +const Login = React.lazy(() => import('./views/examples/pages/login/Login')) +const Register = React.lazy(() => import('./views/examples/pages/register/Register')) + +const Widgets = React.lazy(() => import('./views/examples/widgets/Widgets')) + +const Charts = React.lazy(() => import('./views/examples/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 ChecksRadios = React.lazy(() => import('./views/forms/checks-radios/ChecksRadios')) -const FormControl = React.lazy(() => import('./views/forms/form-control/FormControl')) -const InputGroup = React.lazy(() => import('./views/forms/input-group/InputGroup')) -const Layout = React.lazy(() => import('./views/forms/layout/Layout')) -const Range = React.lazy(() => import('./views/forms/range/Range')) -const Select = React.lazy(() => import('./views/forms/select/Select')) -const Validation = React.lazy(() => import('./views/forms/validation/Validation')) - -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' }, @@ -57,19 +59,16 @@ const routes = [ { path: '/base/cards', name: 'Cards', component: Cards }, { path: '/base/carousels', name: 'Carousel', component: Carousels }, { path: '/base/collapses', name: 'Collapse', component: Collapses }, - { path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons }, { path: '/base/list-groups', name: 'List Groups', component: ListGroups }, - { path: '/base/navbars', name: 'Navbars', component: Navbars }, { path: '/base/navs', name: 'Navs', component: Navs }, { path: '/base/paginations', name: 'Paginations', component: Paginations }, { path: '/base/popovers', name: 'Popovers', component: Popovers }, { path: '/base/progress', name: 'Progress', component: Progress }, { path: '/base/tables', name: 'Tables', component: Tables }, - { path: '/base/tabs', name: 'Tabs', component: Tabs }, { path: '/base/tooltips', name: 'Tooltips', component: Tooltips }, { path: '/buttons', name: 'Buttons', component: Buttons, exact: true }, { path: '/buttons/buttons', name: 'Buttons', component: Buttons }, - { path: '/buttons/button-dropdowns', name: 'Dropdowns', component: ButtonDropdowns }, + { path: '/buttons/dropdowns', name: 'Dropdowns', component: Dropdowns }, { path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups }, { path: '/charts', name: 'Charts', component: Charts }, { path: '/forms', name: 'Forms', component: FormControl, exact: true }, diff --git a/src/scss/style.scss b/src/scss/style.scss index 3285dd3..65e3d38 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -6,6 +6,7 @@ $enable-rtl: true; // Import styles @import "@coreui/coreui/scss/coreui"; +@import "@coreui/chartjs/dist/css/coreui-chartjs.css"; @import "layout"; @import "example"; diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js deleted file mode 100644 index 0994673..0000000 --- a/src/views/base/tables/Tables.js +++ /dev/null @@ -1,333 +0,0 @@ -import React from 'react' -import { - CBadge, - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CTable, - CTableBody, - CTableDataCell, - CTableHead, - CTableHeaderCell, - CTableRow, -} from '@coreui/react' -import { DocsLink } from 'src/reusable' - -const Tables = () => { - return ( - <> - - - - - Simple Table - - - - - - - Username - Date registered - Role - Status - - - - - Samppa Nori - 2012/01/01 - Member - - Active - - - - Estavan Lykos - 2012/02/01 - Staff - - Banned - - - - Chetan Mohamed - 2012/02/01 - Admin - - Inactive - - - - Derick Maximinus - 2012/03/01 - Member - - Pending - - - - Friderik Dávid - 2012/01/21 - Staff - - Active - - - - - - - - - - - Striped Table - - - - - Username - Date registered - Role - Status - - - - - Yiorgos Avraamu - 2012/01/01 - Member - - Active - - - - Avram Tarasios - 2012/02/01 - Staff - - Banned - - - - Quintin Ed - 2012/02/01 - Admin - - Inactive - - - - Enéas Kwadwo - 2012/03/01 - Member - - Pending - - - - Agapetus Tadeáš - 2012/01/21 - Staff - - Active - - - - - - - - - - - - - Condensed Table - - - - - Username - Date registered - Role - Status - - - - - Carwyn Fachtna - 2012/01/01 - Member - - Active - - - - Nehemiah Tatius - 2012/02/01 - Staff - - Banned - - - - Ebbe Gemariah - 2012/02/01 - Admin - - Inactive - - - - Eustorgios Amulius - 2012/03/01 - Member - - Pending - - - - Leopold Gáspár - 2012/01/21 - Staff - - Active - - - - - - - - - - - Bordered Table - - - - - Username - Date registered - Role - Status - - - - - Pompeius René - 2012/01/01 - Member - - Active - - - - Paĉjo Jadon - 2012/02/01 - Staff - - Banned - - - - Micheal Mercurius - 2012/02/01 - Admin - - Inactive - - - - Ganesha Dubhghall - 2012/03/01 - Member - - Pending - - - - Hiroto Šimun - 2012/01/21 - Staff - - Active - - - - - - - - - - - - - Combined All Table - - - - - Username - Date registered - Role - Status - - - - - Vishnu Serghei - 2012/01/01 - Member - - Active - - - - Zbyněk Phoibos - 2012/02/01 - Staff - - Banned - - - - Einar Randall - 2012/02/01 - Admin - - Inactive - - - - Félix Troels - 2012/03/01 - Member - - Pending - - - - Aulus Agmundr - 2012/01/21 - Staff - - Active - - - - - - - - - - ) -} - -export default Tables diff --git a/src/views/base/tooltips/Tooltips.js b/src/views/base/tooltips/Tooltips.js deleted file mode 100644 index ba6c8c7..0000000 --- a/src/views/base/tooltips/Tooltips.js +++ /dev/null @@ -1,86 +0,0 @@ -import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react' -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', - ] - - return ( - <> - - - 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 - - have a - - terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. - Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A - really ironic artisan - - whatever keytar - - scenester farm-to-table banksy Austin - - twitter handle - - freegan cred raw denim single-origin coffee viral. -

- - - -
- - - - Tooltips - placement - - -
- - {placements.map((placement) => { - return ( - - - {placement} - - - ) - })} - -
- - - - ) -} - -export default Tooltips diff --git a/src/views/buttons/button-dropdowns/ButtonDropdowns.js b/src/views/buttons/button-dropdowns/ButtonDropdowns.js deleted file mode 100644 index 49f58c2..0000000 --- a/src/views/buttons/button-dropdowns/ButtonDropdowns.js +++ /dev/null @@ -1,381 +0,0 @@ -import React from 'react' -import { - CButton, - CForm, - CCard, - CCardBody, - CCardHeader, - CCol, - CDropdown, - CDropdownDivider, - CDropdownHeader, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CRow, - CFormLabel, - CFormControl, - CFormCheck, -} from '@coreui/react' -import { DocsLink } from 'src/reusable' - -const ButtonDropdowns = () => { - return ( - - - - - Dropdowns - - - - - Dropdown button - - Header - Action Disabled - Action - - Another Action - - -
- - Primary - - Header - Action Disabled - Action - - Another Action - - - - Secondary - - Header - Action Disabled - Action - - Another Action - - - - Success - - Header - Action Disabled - Action - - Another Action - - - - Info - - Header - Action Disabled - Action - - Another Action - - - - Warning - - Header - Action Disabled - Action - - Another Action - - - - Danger - - Header - Action Disabled - Action - - Another Action - - -
- - - Primary - - - Header - Action Disabled - Action - - Another Action - - - - - Secondary - - - Header - Action Disabled - Action - - Another Action - - - - - Success - - - Header - Action Disabled - Action - - Another Action - - - - - Info - - - Header - Action Disabled - Action - - Another Action - - - - - Warning - - - Header - Action Disabled - Action - - Another Action - - - - - Danger - - - Header - Action Disabled - Action - - Another Action - - -
- - Large button - - Header - Action Disabled - Action - - Another Action - - {' '} - - - Large split button - - - Header - Action Disabled - Action - - Another Action - - -
- - - Small button - - - Header - Action Disabled - Action - - Another Action - - {' '} - - - Small split button - - - Header - Action Disabled - Action - - Another Action - - -
- - Dropup button - - Header - Action Disabled - Action - Another Action - - - - - Split dropup - - - Header - Action Disabled - Action - Another Action - - - - - - Menus - - - Direction Up - - Header - Action Disabled - Action - Another Action - - - - - Direction Left - - Header - Action Disabled - Action - Another Action - - - - - Direction Right - - Header - Action Disabled - Action - Another Action - - - - - Default Down - - Header - Action Disabled - Action - Another Action - - - -
- - - - This dropdown{"'"}s menu is right-aligned - - - Header - Action Disabled - Action - Another Action - - - -
- - - Dropdown with header - - Header - Action - Another Action - - - -
- - - Dropdown with divider - - Action - - Another Action - - - -
- - - Dropdown with disabled item - - Action - Disabled Action - - - -
- - - Dropdown with form - - -
- Email address - -
-
- Password - -
-
- -
-
- - Sign in - -
- - - Register - Forgot password? - - - - - - - ) -} - -export default ButtonDropdowns diff --git a/src/views/buttons/button-groups/ButtonGroups.js b/src/views/buttons/button-groups/ButtonGroups.js deleted file mode 100644 index 161fd10..0000000 --- a/src/views/buttons/button-groups/ButtonGroups.js +++ /dev/null @@ -1,190 +0,0 @@ -import React from 'react' -import { - CButton, - CCallout, - CDropdown, - CButtonGroup, - CButtonToolbar, - CCard, - CCardBody, - CCardHeader, - CCol, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CFormControl, - CInputGroup, - CInputGroupText, - CRow, -} from '@coreui/react' -import { DocsLink } from 'src/reusable' - -const ButtonGroups = () => { - return ( - - - - - Callout - - - - Callout - - - - - - Button Group - - - - - Left - Middle - Right - - - - - - - Button Group - toolbar - - - - - 1 - 2 - 3 - 4 - - - 5 - 6 - 7 - - - 8 - - - - - 1 - 2 - 3 - 4 - - - @ - - - - - - 1 - 2 - 3 - 4 - - - @ - - - - - - - - - Button Group - vertical variation - - - - 1 - 2 - 3 - - - - - - - - Button Group - sizing - - - - Left - Middle - Right - -
-
- - Left - Middle - Right - -
-
- - Left - Middle - Right - - - - - - - Button Group - nestingccc - - - - 1 - 2 - - - Dropdown - - - Dropdown Link - Dropdown Link - - - - - - - - - Button Group - vertical - - - - 1 - 2 - - - Dropdown - - - Dropdown Link - Dropdown Link - - - - - - - - ) -} - -export default ButtonGroups diff --git a/src/views/buttons/buttons/Buttons.js b/src/views/buttons/buttons/Buttons.js deleted file mode 100644 index 757f477..0000000 --- a/src/views/buttons/buttons/Buttons.js +++ /dev/null @@ -1,960 +0,0 @@ -import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { DocsLink } from 'src/reusable' - -const Buttons = () => { - return ( - <> - - - Standard Buttons - - - - - - Normal - - - - Primary - - - - Secondary - - - Success - - - Warning - - - Danger - - - Info - - - Light - - - Dark - - - Link - - - - - Active State - - - - Primary - - - - - Secondary - - - - - Success - - - - - Warning - - - - - Danger - - - - - Info - - - - - Light - - - - - Dark - - - - - Link - - - - - - Disabled - - - - Primary - - - - - Secondary - - - - - Success - - - - - Warning - - - - - Danger - - - - - Info - - - - - Light - - - - - Dark - - - - - Link - - - - - - - layout="outline" Buttons - -

- With outline prop. -

- - - Normal - - - - Primary - - - - - Secondary - - - - - Success - - - - - Warning - - - - - Danger - - - - - Info - - - - - Light - - - - - Dark - - - - - - - Active State - - - - Primary - - - - - Secondary - - - - - Success - - - - - Warning - - - - - Danger - - - - - Info - - - - - Light - - - - - Dark - - - - - - - Disabled - - - - Primary - - - - - Secondary - - - - - Success - - - - - Warning - - - - - Danger - - - - - Info - - - - - Light - - - - - Dark - - - - - - - - layout="ghost" Buttons - -

- Use .btn-ghost-* class for layout="ghost" buttons. -

- - - Normal - - - - Primary - - - - - Secondary - - - - - Success - - - - - Warning - - - - - Danger - - - - - Info - - - - - Light - - - - - Dark - - - - - - - Active State - - - - Primary - - - - - Secondary - - - - - Success - - - - - Warning - - - - - Danger - - - - - Info - - - - - Light - - - - - Dark - - - - - - - Disabled - - - - Primary - - - - - Secondary - - - - - Success - - - - - Warning - - - - - Danger - - - - - Info - - - - - Light - - - - - Dark - - - - - - - - Square Buttons - -

- Use .btn-square class for square buttons. -

- - - Normal - - - - Primary - - - - - Secondary - - - - - Success - - - - - Warning - - - - - Danger - - - - - Info - - - - - Light - - - - - Dark - - - - - Link - - - - - - Active State - - - - Primary - - - - - Secondary - - - - - Success - - - - - Warning - - - - - Danger - - - - - Info - - - - - Light - - - - - Dark - - - - - Link - - - - - - Disabled - - - - Primary - - - - - Secondary - - - - - Success - - - - - Warning - - - - - Danger - - - - - Info - - - - - Light - - - - - Dark - - - - - Link - - - - - - - Pill Buttons - -

- Use .btn-pill class for pill buttons. -

- - - Normal - - - - Primary - - - - - Secondary - - - - - Success - - - - - Warning - - - - - Danger - - - - - Info - - - - - Light - - - - - Dark - - - - - Link - - - - - - Active State - - - - Primary - - - - - Secondary - - - - - Success - - - - - Warning - - - - - Danger - - - - - Info - - - - - Light - - - - - Dark - - - - - Link - - - - - - Disabled - - - - Primary - - - - - Secondary - - - - - Success - - - - - Warning - - - - - Danger - - - - - Info - - - - - Light - - - - - Dark - - - - - Link - - - - - - - - Sizes - -

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

- - - Small - - - - Standard Button - - - - - Outline Button - - - - - Ghost Button - - - - - Square Button - - - - - Pill Button - - - - - - Normal - - - Standard Button - - - - Outline Button - - - - - Ghost Button - - - - - Square Button - - - - - Pill Button - - - - - - Large - - - - Standard Button - - - - - Outline Button - - - - - Ghost Button - - - - - Square Button - - - - - Pill Button - - - - - - - - With Icons - - - - Standard Button - - - - - Outline Button - - - - - - Ghost Button - - - - - - Square Button - - - - - - Pill Button - - - - - - - - - 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 - - - - - - - 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 - - - - - - - ) -} - -export default Buttons diff --git a/src/views/charts/Charts.js b/src/views/charts/Charts.js deleted file mode 100644 index 5f9b3ac..0000000 --- a/src/views/charts/Charts.js +++ /dev/null @@ -1,206 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react' -import { - CChartBar, - CChartLine, - CChartDoughnut, - CChartRadar, - CChartPie, - CChartPolarArea, -} from '@coreui/react-chartjs' -import { DocsLink } from 'src/reusable' - -const Charts = () => { - return ( - - - - - Bar Chart - - - - - - - - - - Doughnut Chart - - - - - - - - Line Chart - - - - - - - - Pie Chart - - - - - - - - Polar Area Chart - - - - - - - - Radar Chart - - - - - - - ) -} - -export default Charts diff --git a/src/views/charts/MainChartExample.js b/src/views/charts/MainChartExample.js deleted file mode 100644 index 5d107cf..0000000 --- a/src/views/charts/MainChartExample.js +++ /dev/null @@ -1,132 +0,0 @@ -import React from 'react' -import { CChartLine } from '@coreui/react-chartjs' -import { getStyle, hexToRgba } from '@coreui/utils' - -const brandSuccess = getStyle('success') || '#4dbd74' -const brandInfo = getStyle('info') || '#20a8d8' -const brandDanger = getStyle('danger') || '#f86c6b' - -const MainChartExample = (attributes) => { - const random = (min, max) => { - return Math.floor(Math.random() * (max - min + 1) + min) - } - - const defaultDatasets = (() => { - let elements = 27 - const data1 = [] - const data2 = [] - const data3 = [] - for (let i = 0; i <= elements; i++) { - data1.push(random(50, 200)) - data2.push(random(80, 100)) - data3.push(65) - } - return [ - { - label: 'My First dataset', - backgroundColor: hexToRgba(brandInfo, 10), - borderColor: brandInfo, - pointHoverBackgroundColor: brandInfo, - borderWidth: 2, - data: data1, - }, - { - label: 'My Second dataset', - backgroundColor: 'transparent', - borderColor: brandSuccess, - pointHoverBackgroundColor: brandSuccess, - borderWidth: 2, - data: data2, - }, - { - label: 'My Third dataset', - backgroundColor: 'transparent', - borderColor: brandDanger, - pointHoverBackgroundColor: brandDanger, - borderWidth: 1, - borderDash: [8, 5], - data: data3, - }, - ] - })() - - const defaultOptions = (() => { - return { - maintainAspectRatio: false, - legend: { - display: false, - }, - scales: { - xAxes: [ - { - gridLines: { - drawOnChartArea: false, - }, - }, - ], - yAxes: [ - { - ticks: { - beginAtZero: true, - maxTicksLimit: 5, - stepSize: Math.ceil(250 / 5), - max: 250, - }, - gridLines: { - display: true, - }, - }, - ], - }, - elements: { - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - hoverBorderWidth: 3, - }, - }, - } - })() - - // render - return ( - - ) -} - -export default MainChartExample diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js index 06dca11..8adef0f 100644 --- a/src/views/dashboard/Dashboard.js +++ b/src/views/dashboard/Dashboard.js @@ -2,7 +2,6 @@ import React, { lazy } from 'react' import { CAvatar, - CBadge, CButton, CButtonGroup, CCallout, @@ -13,15 +12,21 @@ import { CCol, CProgress, CRow, -} from '@coreui/react-ts' +} from '@coreui/react' +import { CChart } from '@coreui/react-chartjs' +import { getStyle, hexToRgba } from '@coreui/utils' import CIcon from '@coreui/icons-react' -import MainChartExample from '../charts/MainChartExample.js' +import MainChartExample from '../examples/charts/MainChartExample.js' -const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js')) -const WidgetsBrand = lazy(() => import('../widgets/WidgetsBrand.js')) +const WidgetsDropdown = lazy(() => import('../examples/widgets/WidgetsDropdown.js')) +const WidgetsBrand = lazy(() => import('../examples/widgets/WidgetsBrand.js')) const Dashboard = () => { + const random = (min, max) => { + return Math.floor(Math.random() * (max - min + 1) + min) + } + return ( <> @@ -32,7 +37,7 @@ const Dashboard = () => {

Traffic

-
November 2017
+
January - July 2021
@@ -52,7 +57,91 @@ const Dashboard = () => { - + @@ -96,18 +185,16 @@ const Dashboard = () => { - - New Clients -
- 9,123 - +
+
New Clients
+
9,123
+
- - Recurring Clients -
- 22,643 - +
+
Recurring Clients
+
22,643
+
@@ -181,18 +268,16 @@ const Dashboard = () => { - - Pageviews -
- 78,623 - +
+
Pageviews
+
78,623
+
- - Organic -
- 49,123 - +
+
Organic
+
49,123
+
diff --git a/src/views/base/accordion/Accordion.js b/src/views/examples/base/accordion/Accordion.js similarity index 100% rename from src/views/base/accordion/Accordion.js rename to src/views/examples/base/accordion/Accordion.js diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/examples/base/breadcrumbs/Breadcrumbs.js similarity index 100% rename from src/views/base/breadcrumbs/Breadcrumbs.js rename to src/views/examples/base/breadcrumbs/Breadcrumbs.js diff --git a/src/views/base/cards/Cards.js b/src/views/examples/base/cards/Cards.js similarity index 100% rename from src/views/base/cards/Cards.js rename to src/views/examples/base/cards/Cards.js diff --git a/src/views/base/carousels/Carousels.js b/src/views/examples/base/carousels/Carousels.js similarity index 100% rename from src/views/base/carousels/Carousels.js rename to src/views/examples/base/carousels/Carousels.js diff --git a/src/views/base/collapses/Collapses.js b/src/views/examples/base/collapses/Collapses.js similarity index 100% rename from src/views/base/collapses/Collapses.js rename to src/views/examples/base/collapses/Collapses.js diff --git a/src/views/base/index.js b/src/views/examples/base/index.js similarity index 100% rename from src/views/base/index.js rename to src/views/examples/base/index.js diff --git a/src/views/base/jumbotrons/Jumbotrons.js b/src/views/examples/base/jumbotrons/Jumbotrons.js similarity index 100% rename from src/views/base/jumbotrons/Jumbotrons.js rename to src/views/examples/base/jumbotrons/Jumbotrons.js diff --git a/src/views/base/list-groups/ListGroups.js b/src/views/examples/base/list-groups/ListGroups.js similarity index 100% rename from src/views/base/list-groups/ListGroups.js rename to src/views/examples/base/list-groups/ListGroups.js diff --git a/src/views/base/navbars/Navbars.js b/src/views/examples/base/navbars/Navbars.js similarity index 100% rename from src/views/base/navbars/Navbars.js rename to src/views/examples/base/navbars/Navbars.js diff --git a/src/views/base/navs/Navs.js b/src/views/examples/base/navs/Navs.js similarity index 100% rename from src/views/base/navs/Navs.js rename to src/views/examples/base/navs/Navs.js diff --git a/src/views/base/paginations/Paginations.js b/src/views/examples/base/paginations/Paginations.js similarity index 100% rename from src/views/base/paginations/Paginations.js rename to src/views/examples/base/paginations/Paginations.js diff --git a/src/views/base/popovers/Popovers.js b/src/views/examples/base/popovers/Popovers.js similarity index 96% rename from src/views/base/popovers/Popovers.js rename to src/views/examples/base/popovers/Popovers.js index 7dbad54..ded39a7 100644 --- a/src/views/base/popovers/Popovers.js +++ b/src/views/examples/base/popovers/Popovers.js @@ -1,5 +1,5 @@ import React from 'react' -import { CButton, CCard, CCardBody, CCardHeader, CLink, CPopover, CRow, CCol } from '@coreui/react' +import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/react' import { Example } from 'src/reusable' const Popovers = () => { diff --git a/src/views/base/progress/Progress.js b/src/views/examples/base/progress/Progress.js similarity index 100% rename from src/views/base/progress/Progress.js rename to src/views/examples/base/progress/Progress.js diff --git a/src/views/examples/base/tables/Tables.js b/src/views/examples/base/tables/Tables.js new file mode 100644 index 0000000..78d98b2 --- /dev/null +++ b/src/views/examples/base/tables/Tables.js @@ -0,0 +1,988 @@ +import React from 'react' +import { + CCard, + CCardBody, + CCardHeader, + CCol, + CRow, + CTable, + CTableBody, + CTableCaption, + CTableDataCell, + CTableHead, + CTableHeaderCell, + CTableRow, +} from '@coreui/react' +import { Example } from 'src/reusable' + +const Tables = () => { + return ( + + + + + React Table Basic example + + +

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

+ + + + + # + Class + Heading + Heading + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + + + + + + + + + React Table Variants + + +

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

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

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

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

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

+ + + + + # + Class + Heading + Heading + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + + + + + + + # + Class + Heading + Heading + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry the Bird + @twitter + + + + + + + + + + + React Table Hoverable rows + + +

+ Use hover property to enable a hover state on table rows + within a <CTableBody>. +

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

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

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

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

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

+ Add borderless property for a table without borders. +

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

+ Add small property to make any{' '} + <CTable> more compact by cutting all cell{' '} + padding in half. +

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

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

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

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

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

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

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

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

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

+ You can also put the <CTableCaption> on the top of + the table with caption="top". +

+ + + List of users + + + # + Class + Heading + Heading + + + + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 3 + Larry + the Bird + @twitter + + + + + + + + + ) +} + +export default Tables diff --git a/src/views/base/tabs/Tabs.js b/src/views/examples/base/tabs/Tabs.js similarity index 100% rename from src/views/base/tabs/Tabs.js rename to src/views/examples/base/tabs/Tabs.js diff --git a/src/views/examples/base/tooltips/Tooltips.js b/src/views/examples/base/tooltips/Tooltips.js new file mode 100644 index 0000000..38be2d9 --- /dev/null +++ b/src/views/examples/base/tooltips/Tooltips.js @@ -0,0 +1,94 @@ +import React from 'react' +import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react' +import { Example } 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', + ] + + return ( + + + + + React Tooltip Basic example + + +

+ 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 + + have a + + terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo + thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan + chambray. A really ironic artisan + + whatever keytar + + scenester farm-to-table banksy Austin + + twitter handle + + freegan cred raw denim single-origin coffee viral. +

+ +

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

+ + + Tooltip on top + + + Tooltip on right + + + Tooltip on bottom + + + Tooltip on left + + + + + + + ) +} + +export default Tooltips diff --git a/src/views/examples/buttons/button-groups/ButtonGroups.js b/src/views/examples/buttons/button-groups/ButtonGroups.js new file mode 100644 index 0000000..5d22284 --- /dev/null +++ b/src/views/examples/buttons/button-groups/ButtonGroups.js @@ -0,0 +1,451 @@ +import React from 'react' +import { + CButton, + CDropdown, + CDropdownDivider, + CDropdownItem, + CDropdownMenu, + CDropdownToggle, + CButtonGroup, + CButtonToolbar, + CCard, + CCardBody, + CCardHeader, + CCol, + CFormCheck, + CFormControl, + CInputGroup, + CInputGroupText, + CRow, +} from '@coreui/react' +import { Example } from 'src/reusable' + +const ButtonGroups = () => { + return ( + + + + + React Button Group Basic example + + +

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

+ + + Left + Middle + Right + + +

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

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

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

+ + + + + + + + + + + + + + + + + + + + + React Button Group Button toolbar + + +

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

+ + + + 1 + 2 + 3 + 4 + + + 5 + 6 + 7 + + + 8 + + + +

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

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

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

+ + + + Left + + + Middle + + + Right + + +
+ + + Left + + + Middle + + + Right + + +
+ + + Left + + + Middle + + + Right + + + + + + + + + + React Button Group Nesting + + +

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

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

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

+ + + Button + Button + Button + Button + Button + Button + Button + + + + + Button + Button + + Dropdown + + Action + Another action + Something else here + + Separated link + + + Button + Button + + Dropdown + + Action + Another action + Something else here + + Separated link + + + + Dropdown + + Action + Another action + Something else here + + Separated link + + + + Dropdown + + Action + Another action + Something else here + + Separated link + + + + + + + + + + + + + + + + ) +} + +export default ButtonGroups diff --git a/src/views/examples/buttons/buttons/Buttons.js b/src/views/examples/buttons/buttons/Buttons.js new file mode 100644 index 0000000..f6f4c74 --- /dev/null +++ b/src/views/examples/buttons/buttons/Buttons.js @@ -0,0 +1,399 @@ +import React from 'react' +import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' +import CIcon from '@coreui/icons-react' +import { Example } from 'src/reusable' + +const Buttons = () => { + return ( + + + + + React Button + + +

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

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

+ You can combine button with our CoreUI Icons. +

+ + {['normal', 'active', 'disabled'].map((state, index) => ( + + + {state.charAt(0).toUpperCase() + state.slice(1)} + + + {[ + 'primary', + 'secondary', + 'success', + 'danger', + 'warning', + 'info', + 'light', + 'dark', + ].map((color, index) => ( + + + {color.charAt(0).toUpperCase() + color.slice(1)} + + ))} + + + Link + + + + ))} + + + + + + + + React Button Button components + + +

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

+

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

+ + + Link + + + Button + + + + + + + + + + + + React Button outline + + +

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

+ + {['normal', 'active', 'disabled'].map((state, index) => ( + + + {state.charAt(0).toUpperCase() + state.slice(1)} + + + {[ + 'primary', + 'secondary', + 'success', + 'danger', + 'warning', + 'info', + 'light', + 'dark', + ].map((color, index) => ( + + {color.charAt(0).toUpperCase() + color.slice(1)} + + ))} + + + ))} + + + + + + + + React Button ghost + + +

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

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

+ Larger or smaller buttons? Add size="lg" or size="sm" for + additional sizes. +

+ + + Large button + + + Large button + + + + + Small button + + + Small button + + + + + + + + + React Button Pill + + + + {[ + 'primary', + 'secondary', + 'success', + 'danger', + 'warning', + 'info', + 'light', + 'dark', + ].map((color, index) => ( + + {color.charAt(0).toUpperCase() + color.slice(1)} + + ))} + + + + + + + + React Button Square + + + + {[ + 'primary', + 'secondary', + 'success', + 'danger', + 'warning', + 'info', + 'light', + 'dark', + ].map((color, index) => ( + + {color.charAt(0).toUpperCase() + color.slice(1)} + + ))} + + + + + + + + React Button Disabled state + + +

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

+ + + Primary button + + + Button + + +

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

+

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

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

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

+ +
+ Button + Button +
+ +

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

+ +
+ Button + Button +
+ +

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

+ +
+ Button + Button +
+ +

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

+ +
+ + Button + + Button +
+ + + + + + ) +} + +export default Buttons diff --git a/src/views/examples/buttons/dropdowns/Dropdowns.js b/src/views/examples/buttons/dropdowns/Dropdowns.js new file mode 100644 index 0000000..7ec42fd --- /dev/null +++ b/src/views/examples/buttons/dropdowns/Dropdowns.js @@ -0,0 +1,345 @@ +import React from 'react' +import { + CButton, + CCard, + CCardBody, + CCardHeader, + CCol, + CDropdown, + CDropdownDivider, + CDropdownItem, + CDropdownMenu, + CDropdownToggle, + CRow, +} from '@coreui/react' +import { Example } from 'src/reusable' + +const Dropdowns = () => { + return ( + + + + + React Dropdown Single button + + +

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

+ + + Dropdown button + + Action + Another action + Something else here + + + +

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

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

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

+

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

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

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

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

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

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

And putting it to use in a navbar:

+ + + + + + + + + + React Dropdown Dropup + + +

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

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

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

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

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

+ + + Dropdown + + Action + Another action + Something else here + + Separated link + + + + + Small split button + + Action + Another action + Something else here + + Separated link + + + + + + + + ) +} + +export default Dropdowns diff --git a/src/views/buttons/index.js b/src/views/examples/buttons/index.js similarity index 100% rename from src/views/buttons/index.js rename to src/views/examples/buttons/index.js diff --git a/src/views/charts/ChartBarSimple.js b/src/views/examples/charts/ChartBarSimple.js similarity index 61% rename from src/views/charts/ChartBarSimple.js rename to src/views/examples/charts/ChartBarSimple.js index 105a3c1..7f1e2d1 100644 --- a/src/views/charts/ChartBarSimple.js +++ b/src/views/examples/charts/ChartBarSimple.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { getColor } from '@coreui/utils' -import { CChartBar } from '@coreui/react-chartjs' +import { CChart } from '@coreui/react-chartjs' const ChartBarSimple = (props) => { const { @@ -13,8 +13,8 @@ const ChartBarSimple = (props) => { ...attributes } = props - const defaultDatasets = (() => { - return [ + const defaultDatasets = { + datasets: [ { data: dataPoints, backgroundColor: getColor(backgroundColor), @@ -23,33 +23,48 @@ const ChartBarSimple = (props) => { barPercentage: 0.5, categoryPercentage: 1, }, - ] - })() + ], + } - const defaultOptions = (() => { - return { - maintainAspectRatio: false, + const defaultOptions = { + maintainAspectRatio: false, + plugins: { legend: { display: false, }, - scales: { - xAxes: [ - { - display: false, - }, - ], - yAxes: [ - { - display: false, - }, - ], + }, + scales: { + x: { + grid: { + display: false, + drawTicks: false, + }, + ticks: { + display: false, + }, }, - } - })() + y: { + grid: { + display: false, + drawBorder: false, + drawTicks: false, + }, + ticks: { + display: false, + }, + }, + }, + } // render return ( - + ) } diff --git a/src/views/charts/ChartLineSimple.js b/src/views/examples/charts/ChartLineSimple.js similarity index 74% rename from src/views/charts/ChartLineSimple.js rename to src/views/examples/charts/ChartLineSimple.js index 44571e6..e52e1ce 100644 --- a/src/views/charts/ChartLineSimple.js +++ b/src/views/examples/charts/ChartLineSimple.js @@ -1,7 +1,12 @@ import React from 'react' import PropTypes from 'prop-types' -import { getColor, deepObjectsMerge } from '@coreui/utils' -import { CChartLine } from '@coreui/react-chartjs' +import { getColor, getStyle, hexToRgba, deepObjectsMerge } from '@coreui/utils' + +import { CChart } from '@coreui/react-chartjs' + +const brandSuccess = getStyle('success') || '#4dbd74' +const brandInfo = getStyle('info') || '#20a8d8' +const brandDanger = getStyle('danger') || '#f86c6b' const ChartLineSimple = (props) => { const { @@ -38,34 +43,36 @@ const ChartLineSimple = (props) => { const pointedOptions = (() => { return { + plugins: { + legend: { + display: false, + }, + }, + maintainAspectRatio: false, scales: { - xAxes: [ - { - offset: true, - gridLines: { - color: 'transparent', - zeroLineColor: 'transparent', - }, - ticks: { - fontSize: 2, - fontColor: 'transparent', - }, - }, - ], - yAxes: [ - { + x: { + grid: { display: false, - ticks: { - display: false, - min: Math.min.apply(Math, dataPoints) - 5, - max: Math.max.apply(Math, dataPoints) + 5, - }, + drawBorder: false, }, - ], + ticks: { + display: false, + }, + }, + y: { + display: false, + grid: { + display: false, + }, + ticks: { + display: false, + }, + }, }, elements: { line: { borderWidth: 1, + tension: 0.4, }, point: { radius: 4, @@ -78,21 +85,24 @@ const ChartLineSimple = (props) => { const straightOptions = (() => { return { + plugins: { + legend: { + display: false, + }, + }, + maintainAspectRatio: false, scales: { - xAxes: [ - { - display: false, - }, - ], - yAxes: [ - { - display: false, - }, - ], + x: { + display: false, + }, + y: { + display: false, + }, }, elements: { line: { borderWidth: 2, + tension: 0.4, }, point: { radius: 0, @@ -124,7 +134,8 @@ const ChartLineSimple = (props) => { // render return ( - { + const random = () => Math.round(Math.random() * 100) + + return ( + + + + + Bar Chart + + + + + + + + + + Doughnut Chart + + + + + + + + Line Chart + + + + + + + + Pie Chart + + + + + + + + Polar Area Chart + + + + + + + + Radar Chart + + + + + + + ) +} + +export default Charts diff --git a/src/views/examples/charts/MainChartExample.js b/src/views/examples/charts/MainChartExample.js new file mode 100644 index 0000000..5b5954a --- /dev/null +++ b/src/views/examples/charts/MainChartExample.js @@ -0,0 +1,95 @@ +import React from 'react' +import { CChart } from '@coreui/react-chartjs' +import { getStyle, hexToRgba } from '@coreui/utils' + +const brandSuccess = getStyle('success') || '#4dbd74' +const brandInfo = getStyle('info') || '#20a8d8' +const brandDanger = getStyle('danger') || '#f86c6b' + +const MainChartExample = (attributes) => { + const random = (min, max) => { + return Math.floor(Math.random() * (max - min + 1) + min) + } + + let elements = 27 + const data1 = [] + const data2 = [] + const data3 = [] + + for (let i = 0; i <= elements; i++) { + data1.push(random(50, 200)) + data2.push(random(80, 100)) + data3.push(65) + } + + const data = { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'My First dataset', + backgroundColor: hexToRgba(brandInfo, 10), + borderColor: brandInfo, + pointHoverBackgroundColor: brandInfo, + borderWidth: 2, + data: data1, + fill: true, + }, + { + label: 'My Second dataset', + backgroundColor: 'transparent', + borderColor: brandSuccess, + pointHoverBackgroundColor: brandSuccess, + borderWidth: 2, + data: data2, + }, + { + label: 'My Third dataset', + backgroundColor: 'transparent', + borderColor: brandDanger, + pointHoverBackgroundColor: brandDanger, + borderWidth: 1, + borderDash: [8, 5], + data: data3, + }, + ], + } + + const options = { + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + x: { + grid: { + drawOnChartArea: false, + }, + }, + y: { + ticks: { + beginAtZero: true, + maxTicksLimit: 5, + stepSize: Math.ceil(250 / 5), + max: 250, + }, + }, + }, + elements: { + line: { + tension: 0.4, + }, + point: { + radius: 0, + hitRadius: 10, + hoverRadius: 4, + hoverBorderWidth: 3, + }, + }, + } + + return +} + +export default MainChartExample diff --git a/src/views/forms/checks-radios/ChecksRadios.js b/src/views/examples/forms/checks-radios/ChecksRadios.js similarity index 100% rename from src/views/forms/checks-radios/ChecksRadios.js rename to src/views/examples/forms/checks-radios/ChecksRadios.js diff --git a/src/views/forms/form-control/FormControl.js b/src/views/examples/forms/form-control/FormControl.js similarity index 100% rename from src/views/forms/form-control/FormControl.js rename to src/views/examples/forms/form-control/FormControl.js diff --git a/src/views/forms/input-group/InputGroup.js b/src/views/examples/forms/input-group/InputGroup.js similarity index 100% rename from src/views/forms/input-group/InputGroup.js rename to src/views/examples/forms/input-group/InputGroup.js diff --git a/src/views/forms/layout/Layout.js b/src/views/examples/forms/layout/Layout.js similarity index 100% rename from src/views/forms/layout/Layout.js rename to src/views/examples/forms/layout/Layout.js diff --git a/src/views/forms/range/Range.js b/src/views/examples/forms/range/Range.js similarity index 100% rename from src/views/forms/range/Range.js rename to src/views/examples/forms/range/Range.js diff --git a/src/views/forms/select/Select.js b/src/views/examples/forms/select/Select.js similarity index 100% rename from src/views/forms/select/Select.js rename to src/views/examples/forms/select/Select.js diff --git a/src/views/forms/validation/Validation.js b/src/views/examples/forms/validation/Validation.js similarity index 100% rename from src/views/forms/validation/Validation.js rename to src/views/examples/forms/validation/Validation.js diff --git a/src/views/icons/brands/Brands.js b/src/views/examples/icons/brands/Brands.js similarity index 100% rename from src/views/icons/brands/Brands.js rename to src/views/examples/icons/brands/Brands.js diff --git a/src/views/icons/coreui-icons/CoreUIIcons.js b/src/views/examples/icons/coreui-icons/CoreUIIcons.js similarity index 100% rename from src/views/icons/coreui-icons/CoreUIIcons.js rename to src/views/examples/icons/coreui-icons/CoreUIIcons.js diff --git a/src/views/icons/flags/Flags.js b/src/views/examples/icons/flags/Flags.js similarity index 100% rename from src/views/icons/flags/Flags.js rename to src/views/examples/icons/flags/Flags.js diff --git a/src/views/icons/index.js b/src/views/examples/icons/index.js similarity index 100% rename from src/views/icons/index.js rename to src/views/examples/icons/index.js diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/examples/notifications/alerts/Alerts.js similarity index 100% rename from src/views/notifications/alerts/Alerts.js rename to src/views/examples/notifications/alerts/Alerts.js diff --git a/src/views/notifications/badges/Badges.js b/src/views/examples/notifications/badges/Badges.js similarity index 100% rename from src/views/notifications/badges/Badges.js rename to src/views/examples/notifications/badges/Badges.js diff --git a/src/views/notifications/index.js b/src/views/examples/notifications/index.js similarity index 100% rename from src/views/notifications/index.js rename to src/views/examples/notifications/index.js diff --git a/src/views/notifications/modals/Modals.js b/src/views/examples/notifications/modals/Modals.js similarity index 100% rename from src/views/notifications/modals/Modals.js rename to src/views/examples/notifications/modals/Modals.js diff --git a/src/views/notifications/toasts/Toasts.js b/src/views/examples/notifications/toasts/Toasts.js similarity index 100% rename from src/views/notifications/toasts/Toasts.js rename to src/views/examples/notifications/toasts/Toasts.js diff --git a/src/views/pages/login/Login.js b/src/views/examples/pages/login/Login.js similarity index 100% rename from src/views/pages/login/Login.js rename to src/views/examples/pages/login/Login.js diff --git a/src/views/pages/page404/Page404.js b/src/views/examples/pages/page404/Page404.js similarity index 100% rename from src/views/pages/page404/Page404.js rename to src/views/examples/pages/page404/Page404.js diff --git a/src/views/pages/page500/Page500.js b/src/views/examples/pages/page500/Page500.js similarity index 100% rename from src/views/pages/page500/Page500.js rename to src/views/examples/pages/page500/Page500.js diff --git a/src/views/pages/register/Register.js b/src/views/examples/pages/register/Register.js similarity index 100% rename from src/views/pages/register/Register.js rename to src/views/examples/pages/register/Register.js diff --git a/src/views/theme/colors/Colors.js b/src/views/examples/theme/colors/Colors.js similarity index 100% rename from src/views/theme/colors/Colors.js rename to src/views/examples/theme/colors/Colors.js diff --git a/src/views/theme/typography/Typography.js b/src/views/examples/theme/typography/Typography.js similarity index 100% rename from src/views/theme/typography/Typography.js rename to src/views/examples/theme/typography/Typography.js diff --git a/src/views/widgets/Widgets.js b/src/views/examples/widgets/Widgets.js similarity index 57% rename from src/views/widgets/Widgets.js rename to src/views/examples/widgets/Widgets.js index a4362ef..34429ff 100644 --- a/src/views/widgets/Widgets.js +++ b/src/views/examples/widgets/Widgets.js @@ -9,16 +9,20 @@ import { CWidgetProgressIcon, CWidgetSimple, } from '@coreui/react' +import { getStyle } from '@coreui/utils' +import { CChart } from '@coreui/react-chartjs' import WidgetsBrand from './WidgetsBrand' import WidgetsDropdown from './WidgetsDropdown' -import ChartLineSimple from '../charts/ChartLineSimple' -import ChartBarSimple from '../charts/ChartBarSimple' +// import ChartLineSimple from '../charts/ChartLineSimple' +// import ChartBarSimple from '../charts/ChartBarSimple' import CIcon from '@coreui/icons-react' const Widgets = () => { + const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min) + return ( <> @@ -442,32 +446,332 @@ const Widgets = () => { - + - + - + - + - + - + diff --git a/src/views/examples/widgets/WidgetsBrand.js b/src/views/examples/widgets/WidgetsBrand.js new file mode 100644 index 0000000..82e42c0 --- /dev/null +++ b/src/views/examples/widgets/WidgetsBrand.js @@ -0,0 +1,195 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { CWidgetBrand, CRow, CCol } from '@coreui/react' +import CIcon from '@coreui/icons-react' +import { CChart } from '@coreui/react-chartjs' + +const WidgetsBrand = ({ withCharts }) => { + const chartOptions = { + elements: { + line: { + tension: 0.4, + }, + point: { + radius: 0, + hitRadius: 10, + hoverRadius: 4, + hoverBorderWidth: 3, + }, + }, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + x: { + display: false, + }, + y: { + display: false, + }, + }, + } + + return ( + + + + + {withCharts && ( + + )} + + } + values={[ + ['89k', 'friends'], + ['459', 'feeds'], + ]} + style={{ + '--cui-card-cap-bg': '#3b5998', + }} + /> + + + + + + {withCharts && ( + + )} + + } + values={[ + ['973k', 'followers'], + ['1.792', 'tweets'], + ]} + style={{ + '--cui-card-cap-bg': '#00aced', + }} + /> + + + + + + {withCharts && ( + + )} + + } + values={[ + ['500+', 'contacts'], + ['292', 'feeds'], + ]} + style={{ + '--cui-card-cap-bg': '#4875b4', + }} + /> + + + + + + {withCharts && ( + + )} + + } + values={[ + ['12+', 'events'], + ['4', 'meetings'], + ]} + /> + + + ) +} + +WidgetsBrand.propTypes = { + withCharts: PropTypes.bool, +} + +export default WidgetsBrand diff --git a/src/views/examples/widgets/WidgetsDropdown.js b/src/views/examples/widgets/WidgetsDropdown.js new file mode 100644 index 0000000..ab0d33d --- /dev/null +++ b/src/views/examples/widgets/WidgetsDropdown.js @@ -0,0 +1,341 @@ +import React from 'react' +import { + CRow, + CCol, + CDropdown, + CDropdownMenu, + CDropdownItem, + CDropdownToggle, + CWidgetDropdown, +} from '@coreui/react' +import { getStyle } from '@coreui/utils' +import { CChart } from '@coreui/react-chartjs' +import CIcon from '@coreui/icons-react' + +const WidgetsDropdown = () => { + // render + return ( + + + + + + + {/* TODO: placement doesn't work */} + + Action + Another action + Something else here... + Disabled action + + + } + chart={ + + } + /> + + + + + + + + + Action + Another action + Something else here... + Disabled action + + + } + chart={ + + } + /> + + + + + + + + + Action + Another action + Something else here... + Disabled action + + + } + chart={ + + } + /> + + + + + + + + + Action + Another action + Something else here... + Disabled action + + + } + chart={ + + } + /> + + + ) +} + +export default WidgetsDropdown diff --git a/src/views/widgets/WidgetsBrand.js b/src/views/widgets/WidgetsBrand.js deleted file mode 100644 index 471d753..0000000 --- a/src/views/widgets/WidgetsBrand.js +++ /dev/null @@ -1,173 +0,0 @@ -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', - }} - /> - - - - - - - - } - values={[ - ['973k', 'followers'], - ['1.792', 'tweets'], - ]} - style={{ - '--cui-card-cap-bg': '#00aced', - }} - /> - - - - - - - - } - 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={[ - ['973k', 'followers'], - ['1.792', 'tweets'], - ]} - style={{ - '--cui-card-cap-bg': '#00aced', - }} - /> - - - - } - values={[ - ['500+', 'contacts'], - ['292', 'feeds'], - ]} - style={{ - '--cui-card-cap-bg': '#4875b4', - }} - /> - - - - } - values={[ - ['12+', 'events'], - ['4', 'meetings'], - ]} - /> - - - ) -} - -WidgetsBrand.propTypes = { - withCharts: PropTypes.bool, -} - -export default WidgetsBrand diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js deleted file mode 100644 index 4ab99a2..0000000 --- a/src/views/widgets/WidgetsDropdown.js +++ /dev/null @@ -1,155 +0,0 @@ -import React from 'react' -import { - CRow, - CCol, - CDropdown, - CDropdownMenu, - CDropdownItem, - CDropdownToggle, - CWidgetDropdown, -} from '@coreui/react-ts' -import CIcon from '@coreui/icons-react' -import ChartLineSimple from '../charts/ChartLineSimple' -import ChartBarSimple from '../charts/ChartBarSimple' - -const WidgetsDropdown = () => { - // render - return ( - - - - - - - {/* TODO: placement doesn't work */} - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } - /> - - - - - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } - /> - - - - - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } - /> - - - - - - - - - Action - Another action - Something else here... - Disabled action - - - } - chart={ - - } - /> - - - ) -} - -export default WidgetsDropdown