-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {routes.map((route, idx) => {
- return route.component ? (
- (
-
- )} />
- ) : (null);
- })}
-
-
-
-
-
-
-
-
-
-
+ return (
+
+ )
}
-export default DefaultLayout;
+export default DefaultLayout
diff --git a/src/containers/DefaultLayout/DefaultSidebar.js b/src/containers/DefaultLayout/DefaultSidebar.js
new file mode 100644
index 0000000..775960f
--- /dev/null
+++ b/src/containers/DefaultLayout/DefaultSidebar.js
@@ -0,0 +1,64 @@
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import {
+ CCreateElement,
+ CSidebar,
+ CSidebarBrand,
+ CSidebarNav,
+ CSidebarNavDivider,
+ CSidebarNavTitle,
+ CNavItem,
+ CProgress,
+ CSidebarMinimizer,
+ CSidebarNavDropdown,
+ CSidebarNavItem,
+} from '@coreui/react'
+
+import { CIcon } from '@coreui/icons-react'
+
+//logo
+import logo from '../../assets/img/brand/coreui-react-pro-neg.svg'
+import sygnet from '../../assets/img/brand/coreui-signet-white.svg'
+
+// sidebar nav config
+import navigation from '../../_nav'
+
+const DefaultSidebar = () => {
+ const dispatch = useDispatch()
+ const show = useSelector(state => state.sidebarShow)
+
+ return (
+
dispatch({type: 'set', sidebarShow: val })}
+ >
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default React.memo(DefaultSidebar)
diff --git a/src/containers/DefaultLayout/__tests__/DefaultAside.test.js b/src/containers/DefaultLayout/__tests__/DefaultAside.test.js
deleted file mode 100644
index 940c145..0000000
--- a/src/containers/DefaultLayout/__tests__/DefaultAside.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import DefaultAside from '../DefaultAside';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/containers/DefaultLayout/__tests__/DefaultFooter.test.js b/src/containers/DefaultLayout/__tests__/DefaultFooter.test.js
deleted file mode 100644
index d1ba9cf..0000000
--- a/src/containers/DefaultLayout/__tests__/DefaultFooter.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import DefaultFooter from '../DefaultFooter';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/containers/DefaultLayout/__tests__/DefaultHeader.test.js b/src/containers/DefaultLayout/__tests__/DefaultHeader.test.js
deleted file mode 100644
index 76887e0..0000000
--- a/src/containers/DefaultLayout/__tests__/DefaultHeader.test.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { MemoryRouter } from 'react-router-dom';
-import DefaultHeader from '../DefaultHeader';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/containers/DefaultLayout/__tests__/DefaultLayout.test.js b/src/containers/DefaultLayout/__tests__/DefaultLayout.test.js
deleted file mode 100644
index c0e1788..0000000
--- a/src/containers/DefaultLayout/__tests__/DefaultLayout.test.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import {MemoryRouter, Route} from 'react-router-dom';
-import DefaultLayout from '../DefaultLayout';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/containers/DefaultLayout/index.js b/src/containers/DefaultLayout/index.js
index d7dcb4c..ea3be31 100644
--- a/src/containers/DefaultLayout/index.js
+++ b/src/containers/DefaultLayout/index.js
@@ -1,3 +1,23 @@
-import DefaultLayout from './DefaultLayout';
+import DefaultAside from './DefaultAside'
+import DefaultContent from './DefaultContent'
+import DefaultFooter from './DefaultFooter'
+import DefaultHeader from './DefaultHeader'
+import DefaultHeaderDropdown from './DefaultHeaderDropdown'
+import DefaultHeaderDropdownMssg from './DefaultHeaderDropdownMssg'
+import DefaultHeaderDropdownNotif from './DefaultHeaderDropdownNotif'
+import DefaultHeaderDropdownTasks from './DefaultHeaderDropdownTasks'
+import DefaultLayout from './DefaultLayout'
+import DefaultSidebar from './DefaultSidebar'
-export default DefaultLayout;
+export {
+ DefaultAside,
+ DefaultContent,
+ DefaultFooter,
+ DefaultHeader,
+ DefaultHeaderDropdown,
+ DefaultHeaderDropdownMssg,
+ DefaultHeaderDropdownNotif,
+ DefaultHeaderDropdownTasks,
+ DefaultLayout,
+ DefaultSidebar
+}
diff --git a/src/index.js b/src/index.js
index 7e1e75c..0176c3f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
-import 'react-app-polyfill/ie9'; // For IE 9-11 support
+import 'react-app-polyfill/ie11'; // For IE 11 support
import 'react-app-polyfill/stable';
-// import 'react-app-polyfill/ie11'; // For IE 11 support
import './polyfill'
import React from 'react';
import ReactDOM from 'react-dom';
@@ -8,7 +7,19 @@ import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
-ReactDOM.render(
, document.getElementById('root'));
+import {freeSet, flagSet, brandSet} from '@coreui/icons';
+import { logo } from './assets/icons/logo'
+
+import { Provider } from 'react-redux'
+import store from './store'
+
+React.icons = {...freeSet, ...flagSet, ...brandSet, logo}
+ReactDOM.render(
+
+
+ ,
+ 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.
diff --git a/src/polyfill.js b/src/polyfill.js
index 4464dd5..d090a30 100644
--- a/src/polyfill.js
+++ b/src/polyfill.js
@@ -3,30 +3,31 @@
*/
import "core-js";
import 'core-js/features/set/map';
+import 'core-js/features/map';
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es/symbol'
-// import 'core-js/es/object'
-// import 'core-js/es/function'
-// import 'core-js/es/parse-int'
-// import 'core-js/es/parse-float'
-// import 'core-js/es/number'
-// import 'core-js/es/math'
-// import 'core-js/es/string'
-// import 'core-js/es/date'
-// import 'core-js/es/array'
-// import 'core-js/es/regexp'
-// import 'core-js/es/map'
-// import 'core-js/es/weak-map'
-// import 'core-js/es/set'
-// import 'core-js/es/object'
+// import 'core-js/es6/symbol'
+// import 'core-js/es6/object'
+// import 'core-js/es6/function'
+// import 'core-js/es6/parse-int'
+// import 'core-js/es6/parse-float'
+// import 'core-js/es6/number'
+// import 'core-js/es6/math'
+// import 'core-js/es6/string'
+// import 'core-js/es6/date'
+// import 'core-js/es6/array'
+// import 'core-js/es6/regexp'
+// import 'core-js/es6/map'
+// import 'core-js/es6/weak-map'
+// import 'core-js/es6/set'
+// import 'core-js/es7/object'
/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es/reflect'
+// import 'core-js/es6/reflect'
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-// import 'core-js/es/reflect'
+// import 'core-js/es7/reflect'
// CustomEvent() constructor functionality in IE9, IE10, IE11
(function () {
diff --git a/src/routes.js b/src/routes.js
index ec26cd6..6d330c9 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,58 +1,55 @@
import React from 'react';
-const Breadcrumbs = React.lazy(() => import('./views/Base/Breadcrumbs'));
-const Cards = React.lazy(() => import('./views/Base/Cards'));
-const Carousels = React.lazy(() => import('./views/Base/Carousels'));
-const Collapses = React.lazy(() => import('./views/Base/Collapses'));
-const Dropdowns = React.lazy(() => import('./views/Base/Dropdowns'));
-const Forms = React.lazy(() => import('./views/Base/Forms'));
-const Jumbotrons = React.lazy(() => import('./views/Base/Jumbotrons'));
-const ListGroups = React.lazy(() => import('./views/Base/ListGroups'));
-const Navbars = React.lazy(() => import('./views/Base/Navbars'));
-const Navs = React.lazy(() => import('./views/Base/Navs'));
-const Paginations = React.lazy(() => import('./views/Base/Paginations'));
-const Popovers = React.lazy(() => import('./views/Base/Popovers'));
-const ProgressBar = React.lazy(() => import('./views/Base/ProgressBar'));
-const Switches = React.lazy(() => import('./views/Base/Switches'));
-const Tables = React.lazy(() => import('./views/Base/Tables'));
-const Tabs = React.lazy(() => import('./views/Base/Tabs'));
-const Tooltips = React.lazy(() => import('./views/Base/Tooltips'));
-const BrandButtons = React.lazy(() => import('./views/Buttons/BrandButtons'));
-const ButtonDropdowns = React.lazy(() => import('./views/Buttons/ButtonDropdowns'));
-const ButtonGroups = React.lazy(() => import('./views/Buttons/ButtonGroups'));
-const Buttons = React.lazy(() => import('./views/Buttons/Buttons'));
-const Charts = React.lazy(() => import('./views/Charts'));
-const Dashboard = React.lazy(() => import('./views/Dashboard'));
-const CoreUIIcons = React.lazy(() => import('./views/Icons/CoreUIIcons'));
-const Flags = React.lazy(() => import('./views/Icons/Flags'));
-const FontAwesome = React.lazy(() => import('./views/Icons/FontAwesome'));
-const SimpleLineIcons = React.lazy(() => import('./views/Icons/SimpleLineIcons'));
-const Alerts = React.lazy(() => import('./views/Notifications/Alerts'));
-const Badges = React.lazy(() => import('./views/Notifications/Badges'));
-const Modals = React.lazy(() => import('./views/Notifications/Modals'));
-const Colors = React.lazy(() => import('./views/Theme/Colors'));
-const Typography = React.lazy(() => import('./views/Theme/Typography'));
+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/BasicForms/BasicForms'));
+
+const Jumbotrons = React.lazy(() => import('./views/Base/Jumbotrons/Jumbotrons'));
+const ListGroups = React.lazy(() => import('./views/Base/ListGroups/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/ProgressBar/ProgressBar'));
+const Switches = React.lazy(() => import('./views/Base/Switches/Switches'));
+
+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/BrandButtons/BrandButtons'));
+const ButtonDropdowns = React.lazy(() => import('./views/Buttons/ButtonDropdowns/ButtonDropdowns'));
+const ButtonGroups = React.lazy(() => import('./views/Buttons/ButtonGroups/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/CoreUIIcons/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'));
-// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
const routes = [
{ path: '/', exact: true, name: 'Home' },
{ path: '/dashboard', name: 'Dashboard', component: Dashboard },
- { path: '/theme', exact: true, name: 'Theme', component: Colors },
+ { path: '/theme', name: 'Theme', component: Colors, exact: true },
{ path: '/theme/colors', name: 'Colors', component: Colors },
{ path: '/theme/typography', name: 'Typography', component: Typography },
- { path: '/base', exact: true, name: 'Base', component: Cards },
- { path: '/base/cards', name: 'Cards', component: Cards },
- { path: '/base/forms', name: 'Forms', component: Forms },
- { path: '/base/switches', name: 'Switches', component: Switches },
- { path: '/base/tables', name: 'Tables', component: Tables },
- { path: '/base/tabs', name: 'Tabs', component: Tabs },
+ { path: '/base', name: 'Base', component: Cards, exact: true },
{ path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },
+ { path: '/base/cards', name: 'Cards', component: Cards },
{ path: '/base/carousels', name: 'Carousel', component: Carousels },
{ path: '/base/collapses', name: 'Collapse', component: Collapses },
- { path: '/base/dropdowns', name: 'Dropdowns', component: Dropdowns },
+ { path: '/base/forms', name: 'Forms', component: BasicForms },
{ path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons },
{ path: '/base/list-groups', name: 'List Groups', component: ListGroups },
{ path: '/base/navbars', name: 'Navbars', component: Navbars },
@@ -60,25 +57,28 @@ const routes = [
{ path: '/base/paginations', name: 'Paginations', component: Paginations },
{ path: '/base/popovers', name: 'Popovers', component: Popovers },
{ path: '/base/progress-bar', name: 'Progress Bar', component: ProgressBar },
+ { path: '/base/switches', name: 'Switches', component: Switches },
+ { path: '/base/tables', name: 'Tables', component: Tables },
+ { path: '/base/tabs', name: 'Tabs', component: Tabs },
{ path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
- { path: '/buttons', exact: true, name: 'Buttons', component: Buttons },
+ { path: '/buttons', name: 'Buttons', component: Buttons, exact: true },
{ path: '/buttons/buttons', name: 'Buttons', component: Buttons },
- { path: '/buttons/button-dropdowns', name: 'Button Dropdowns', component: ButtonDropdowns },
+ { path: '/buttons/button-dropdowns', name: 'Dropdowns', component: ButtonDropdowns },
{ path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
{ path: '/buttons/brand-buttons', name: 'Brand Buttons', component: BrandButtons },
+ { path: '/charts', name: 'Charts', component: Charts },
{ path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },
{ path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons },
{ path: '/icons/flags', name: 'Flags', component: Flags },
- { path: '/icons/font-awesome', name: 'Font Awesome', component: FontAwesome },
- { path: '/icons/simple-line-icons', name: 'Simple Line Icons', component: SimpleLineIcons },
- { path: '/notifications', exact: true, name: 'Notifications', component: Alerts },
+ { path: '/icons/brands', name: 'Brands', component: Brands },
+ { path: '/notifications', name: 'Notifications', component: Alerts, exact: true },
{ path: '/notifications/alerts', name: 'Alerts', component: Alerts },
{ path: '/notifications/badges', name: 'Badges', component: Badges },
{ path: '/notifications/modals', name: 'Modals', component: Modals },
+ { path: '/notifications/toaster', name: 'Toaster', component: Toaster },
{ path: '/widgets', name: 'Widgets', component: Widgets },
- { path: '/charts', name: 'Charts', component: Charts },
{ path: '/users', exact: true, name: 'Users', component: Users },
- { path: '/users/:id', exact: true, name: 'User Details', component: User },
+ { path: '/users/:id', exact: true, name: 'User Details', component: User }
];
export default routes;
diff --git a/src/scss/_ie-fix.scss b/src/scss/_ie-fix.scss
deleted file mode 100644
index a2ed71a..0000000
--- a/src/scss/_ie-fix.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-html body .app.flex-row.align-items-center {
- height: 100vh;
-}
-
-// ie11 floating footer temp fix, react only
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
- #root {
- display: flex;
- flex-direction: column;
- }
-}
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 421a2a2..0ae4b58 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -1,14 +1,12 @@
// If you want to override variables do it here
@import "variables";
-// Import styles
+// Import CoreUI styles
@import "~@coreui/coreui/scss/coreui.scss";
-// Temp fix for reactstrap
-@import '~@coreui/coreui/scss/_dropdown-menu-right.scss';
-
// If you want to add something do it here
@import "custom";
-// ie fixes
-@import "ie-fix";
+// Spinkit
+$spinkit-spinner-color: $body-color;
+@import '~spinkit/scss/spinkit.scss';
diff --git a/src/scss/vendors/.gitkeep b/src/scss/vendors/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/scss/vendors/_variables.scss b/src/scss/vendors/_variables.scss
deleted file mode 100644
index 3d8464b..0000000
--- a/src/scss/vendors/_variables.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Override Boostrap variables
-@import "../variables";
-@import "~bootstrap/scss/mixins";
-@import "~@coreui/coreui/scss/variables";
diff --git a/src/store.js b/src/store.js
new file mode 100644
index 0000000..129b6ba
--- /dev/null
+++ b/src/store.js
@@ -0,0 +1,18 @@
+import { createStore } from 'redux'
+
+const initialState = {
+ sidebarShow: 'responsive',
+ asideShow: false
+}
+
+const changeState = (state = initialState, { type, ...rest }) => {
+ switch (type) {
+ case 'set':
+ return {...state, ...rest }
+ default:
+ return state
+ }
+}
+
+const store = createStore(changeState)
+export default store
\ No newline at end of file
diff --git a/src/views/Base/BasicForms/BasicForms.js b/src/views/Base/BasicForms/BasicForms.js
new file mode 100644
index 0000000..7310fa7
--- /dev/null
+++ b/src/views/Base/BasicForms/BasicForms.js
@@ -0,0 +1,1164 @@
+import React from 'react'
+import {
+ CButton,
+ CCard,
+ CCardBody,
+ CCardFooter,
+ CCardHeader,
+ CCol,
+ CCollapse,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+ CFade,
+ CForm,
+ CFormGroup,
+ CFormText,
+ CValidFeedback,
+ CInvalidFeedback,
+ CTextarea,
+ CInput,
+ CInputFile,
+ CInputCheckbox,
+ CInputRadio,
+ CInputGroup,
+ CInputGroupAppend,
+ CInputGroupPrepend,
+ CDropdown,
+ CInputGroupText,
+ CLabel,
+ CSelect,
+ CRow
+} from '@coreui/react'
+import { CIcon } from '@coreui/icons-react'
+
+const BasicForms = () => {
+ const [collapsed, setCollapsed] = React.useState(true)
+ const [showElements, setShowElements] = React.useState(true)
+
+ return (
+ <>
+
+
+
+
+ Credit Card
+ Form
+
+
+
+
+
+ Name
+
+
+
+
+
+
+
+ Credit Card Number
+
+
+
+
+
+
+
+ Month
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Year
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ CVV/CVC
+
+
+
+
+
+
+
+
+
+
+ Company
+ Form
+
+
+
+ Company
+
+
+
+ VAT
+
+
+
+ Street
+
+
+
+
+
+ City
+
+
+
+
+
+ Postal Code
+
+
+
+
+
+ Country
+
+
+
+
+
+
+
+
+
+
+ Basic Form
+ Elements
+
+
+
+
+
+ Static
+
+
+ Username
+
+
+
+
+ Text Input
+
+
+
+ This is a help text
+
+
+
+
+ Email Input
+
+
+
+ Please enter your email
+
+
+
+
+ Password
+
+
+
+ Please enter a complex password
+
+
+
+
+ Date Input
+
+
+
+
+
+
+
+ Disabled Input
+
+
+
+
+
+
+
+ Textarea
+
+
+
+
+
+
+
+ Select
+
+
+
+
+
+
+
+
+
+
+
+
+ Select Large
+
+
+
+
+
+
+
+
+
+
+
+
+ Select Small
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Disabled Select
+
+
+
+
+
+
+
+
+
+
+
+
+ Radios
+
+
+
+
+ Option 1
+
+
+
+ Option 2
+
+
+
+ Option 3
+
+
+
+
+
+ Inline Radios
+
+
+
+
+ One
+
+
+
+ Two
+
+
+
+ Three
+
+
+
+
+ Checkboxes
+
+
+
+ Option 1
+
+
+
+ Option 2
+
+
+
+ Option 3
+
+
+
+
+
+ Inline Checkboxes
+
+
+
+
+ One
+
+
+
+ Two
+
+
+
+ Three
+
+
+
+
+ File input
+
+
+
+
+
+
+ Multiple File input
+
+
+
+
+ Choose Files...
+
+
+
+
+ Custom file input
+
+
+
+ Choose file...
+
+
+
+
+
+
+ Submit
+ Reset
+
+
+
+
+ Inline
+ Form
+
+
+
+
+ Name
+
+
+
+ Email
+
+
+
+
+
+ Submit
+ Reset
+
+
+
+
+
+
+ Horizontal
+ Form
+
+
+
+
+
+ Email
+
+
+
+ Please enter your email
+
+
+
+
+ Password
+
+
+
+ Please enter your password
+
+
+
+
+
+ Submit Reset
+
+
+
+
+ Normal
+ Form
+
+
+
+
+ Email
+
+ Please enter your email
+
+
+ Password
+
+ Please enter your password
+
+
+
+
+ Submit Reset
+
+
+
+
+ Input
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Login Reset
+
+
+
+
+ Input
+ Sizes
+
+
+
+
+ Small Input
+
+
+
+
+
+ Normal Input
+
+
+
+
+
+ Large Input
+
+
+
+
+
+
+
+ Submit
+ Reset
+
+
+
+
+
+
+
+
+ Form
+ validation feedback
+
+
+
+ Input is valid
+
+ Cool! Input is valid
+
+
+ Input is invalid
+
+ Houston, we have a problem...
+
+
+
+
+
+
+
+ Validation feedback Form
+
+
+
+
+ Non-required input
+
+ Non-required
+
+
+ Required input
+
+
+ Please provide a valid information
+
+ Input provided
+
+
+
+
+
+
+
+
+
+
+ Icon/Text Groups
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ .00
+
+
+
+
+
+
+
+ Submit
+ Reset
+
+
+
+
+
+
+ Button Groups
+
+
+
+
+
+
+
+ Search
+
+
+
+
+
+
+
+
+
+
+ Submit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Submit
+ Reset
+
+
+
+
+
+
+ Dropdowns Groups
+
+
+
+
+
+
+
+
+ Dropdown
+
+
+ Action
+ Another Action
+ Something else here
+
+ Separated link
+
+
+
+
+
+
+
+
+
+
+
+
+ Dropdown
+
+
+ Action
+ Another Action
+ Something else here
+
+ Separated link
+
+
+
+
+
+
+
+
+
+ Action
+
+ Action
+ Another Action
+ Something else here
+
+ Separated link
+
+
+
+
+
+ Dropdown
+
+
+ Action
+ Another Action
+ Something else here
+
+ Separated link
+
+
+
+
+
+
+
+
+ Submit
+ Reset
+
+
+
+
+
+
+
+
+ Use the grid for big devices!
+ .col-lg-* .col-md-* .col-sm-*
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Action
+ Action
+ Action
+ Action
+ Action
+
+
+
+
+
+
+ Input Grid for small devices!
+ .col-*
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Action
+ Action
+ Action
+ Action
+ Action
+
+
+
+
+
+
+
+
+ Example Form
+
+
+
+
+
+
+ Username
+
+
+
+
+
+
+
+
+
+
+ Email
+
+
+
+
+
+
+
+
+
+
+ Password
+
+
+
+
+
+
+
+
+ Submit
+
+
+
+
+
+
+
+
+ Example Form
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Submit
+
+
+
+
+
+
+
+
+ Example Form
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Submit
+
+
+
+
+
+
+
+
+
+
+
+ Form Elements
+
+
+
+
+ setCollapsed(!collapsed)}
+ >
+
+
+ setShowElements(false)}
+ >
+
+
+
+
+
+
+
+
+ Prepended text
+
+
+
+ @
+
+
+
+
Here's some help text
+
+
+
+
+ .00
+
+
+ Here's more help text
+
+
+
+ Append and prepend
+
+
+
+ $
+
+
+
+ .00
+
+
+
+
+
+ Append with button
+
+
+
+
+ Go!
+
+
+
+
+
+ Two-button append
+
+
+
+
+ Search
+ Options
+
+
+
+
+
+ Save changes
+ Cancel
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default BasicForms
diff --git a/src/views/Base/Breadcrumbs/Breadcrumbs.js b/src/views/Base/Breadcrumbs/Breadcrumbs.js
index 9b78f2f..c1bc3ec 100644
--- a/src/views/Base/Breadcrumbs/Breadcrumbs.js
+++ b/src/views/Base/Breadcrumbs/Breadcrumbs.js
@@ -1,50 +1,73 @@
-import React, { Component } from 'react';
-import { Breadcrumb, BreadcrumbItem, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
+import React from 'react'
+import {
+ CBreadcrumb,
+ CBreadcrumbItem,
+ CBreadcrumbRouter,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CLink,
+ CCol,
+ CRow
+} from '@coreui/react'
+import routes from '../../../routes'
-class Breadcrumbs extends Component {
- render() {
- return (
-
-
-
-
-
- Breadcrumbs
-
-
-
-
- Home
-
-
- {/*eslint-disable-next-line*/}
- Home
- Library
-
-
- {/*eslint-disable-next-line*/}
- Home
- {/* eslint-disable-next-line*/}
- Library
- Data
-
-
- Home
- Library
- Data
- Bootstrap
-
-
-
-
-
-
- );
- }
+const Breadcrumbs = () => {
+ return (
+
+
+
+
+ Bootstrap Breadcrumb
+
+
+
+ CBreadcrumbRouter wrapper component
+
+ Manual
+
+
+ Home
+
+ Library
+
+
+
+ Home
+
+
+ Library
+
+ Data
+
+
+
+ Home
+
+
+ Library
+
+
+ Data
+
+
+ Bootstrap
+
+
+
+
+
+
+ )
}
-export default Breadcrumbs;
+export default Breadcrumbs
diff --git a/src/views/Base/Breadcrumbs/Breadcrumbs.test.js b/src/views/Base/Breadcrumbs/Breadcrumbs.test.js
deleted file mode 100644
index 22303df..0000000
--- a/src/views/Base/Breadcrumbs/Breadcrumbs.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Breadcrumbs from './Breadcrumbs';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Base/Breadcrumbs/package.json b/src/views/Base/Breadcrumbs/package.json
deleted file mode 100644
index 10f4aaa..0000000
--- a/src/views/Base/Breadcrumbs/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Breadcrumbs",
- "version": "0.0.0",
- "private": true,
- "main": "./Breadcrumbs.js"
-}
diff --git a/src/views/Base/Cards/Cards.js b/src/views/Base/Cards/Cards.js
index 3690956..61de578 100644
--- a/src/views/Base/Cards/Cards.js
+++ b/src/views/Base/Cards/Cards.js
@@ -1,416 +1,411 @@
-import React, { Component } from 'react';
-import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Row, Collapse, Fade } from 'reactstrap';
-import { AppSwitch } from '@coreui/react'
+import React from 'react'
+import {
+ CBadge,
+ CCard,
+ CCardBody,
+ CCardFooter,
+ CCardHeader,
+ CCol,
+ CRow,
+ CCollapse,
+ CFade,
+ CSwitch,
+ CLink
+} from '@coreui/react'
+import { CIcon } from '@coreui/icons-react'
-class Cards extends Component {
- constructor(props) {
- super(props);
+const Cards = () => {
+ const [collapsed, setCollapsed] = React.useState(true)
+ const [showCard, setShowCard] = React.useState(true)
- this.toggle = this.toggle.bind(this);
- this.toggleFade = this.toggleFade.bind(this);
- this.state = {
- collapse: true,
- fadeIn: true,
- timeout: 300
- };
- }
+ return (
+ <>
+
+
+
+
+ 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 footer
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ Card with label
+
+ 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.
+
+
+
+
+
+
+ Card with label
+
+ 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.
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ 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.
+
+
+
+
- toggle() {
- this.setState({ collapse: !this.state.collapse });
- }
-
- toggleFade() {
- this.setState((prevState) => { return { fadeIn: !prevState }});
- }
-
- render() {
- return (
-
-
-
-
-
- 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 footer
-
-
-
-
-
- Card with icon
+
+
+
+
+ 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.
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ 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, consectetur adipiscing elit. Integer posuere erat a ante.
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
+
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+ Card title - gradient
+
+
+ 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 actions
-
+
+
+
+ setCollapsed(!collapsed)}>
+
+
+ setShowCard(false)}>
+
+
-
-
- 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 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.
-
-
-
-
-
-
- Card with label
-
- 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.
-
-
-
-
-
-
- Card with label
-
- 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.
-
-
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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, consectetur adipiscing elit. Integer posuere erat a ante.
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-
-
-
-
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
-
- Card actions
-
- {/*eslint-disable-next-line*/}
-
- {/*eslint-disable-next-line*/}
-
- {/*eslint-disable-next-line*/}
-
-
-
- );
- }
+
+
+
+ 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.
+
+
+
+
+
+
+
+ )
}
-export default Cards;
+export default Cards
diff --git a/src/views/Base/Cards/Cards.test.js b/src/views/Base/Cards/Cards.test.js
deleted file mode 100644
index 71d1b79..0000000
--- a/src/views/Base/Cards/Cards.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Cards from './Cards';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Base/Cards/package.json b/src/views/Base/Cards/package.json
deleted file mode 100644
index 2c51b3f..0000000
--- a/src/views/Base/Cards/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Cards",
- "version": "0.0.0",
- "private": true,
- "main": "./Cards.js"
-}
diff --git a/src/views/Base/Carousels/Carousels.js b/src/views/Base/Carousels/Carousels.js
index e7bed38..82a5e3c 100644
--- a/src/views/Base/Carousels/Carousels.js
+++ b/src/views/Base/Carousels/Carousels.js
@@ -1,124 +1,139 @@
-import React, { Component } from 'react';
-import { Card, CardBody, CardHeader, Carousel, CarouselCaption, CarouselControl, CarouselIndicators, CarouselItem, Col, Row } from 'reactstrap';
+import React, { useState } from 'react'
+import {
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCarousel,
+ CCarouselCaption,
+ CCarouselControl,
+ CCarouselIndicators,
+ CCarouselInner,
+ CCarouselItem,
+ CCol,
+ CRow
+} from '@coreui/react'
-const items = [
- {
- src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
- altText: 'Slide 1',
- caption: 'Slide 1',
- },
- {
- src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
- altText: 'Slide 2',
- caption: 'Slide 2',
- },
- {
- src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
- altText: 'Slide 3',
- caption: 'Slide 3',
- },
-];
+const slides = [
+ 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+ 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+ 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+]
-class Carousels extends Component {
+const Carousels = () => {
+ const [activeIndex] = useState(1)
- constructor(props) {
- super(props);
- this.state = { activeIndex: 0 };
- this.next = this.next.bind(this);
- this.previous = this.previous.bind(this);
- this.goToIndex = this.goToIndex.bind(this);
- this.onExiting = this.onExiting.bind(this);
- this.onExited = this.onExited.bind(this);
- }
-
- onExiting() {
- this.animating = true;
- }
-
- onExited() {
- this.animating = false;
- }
-
- next() {
- if (this.animating) return;
- const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
- this.setState({ activeIndex: nextIndex });
- }
-
- previous() {
- if (this.animating) return;
- const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
- this.setState({ activeIndex: nextIndex });
- }
-
- goToIndex(newIndex) {
- if (this.animating) return;
- this.setState({ activeIndex: newIndex });
- }
-
- render() {
- const { activeIndex } = this.state;
-
- const slides = items.map((item) => {
- return (
-
- 
-
- );
- });
-
- const slides2 = items.map((item) => {
- return (
-
-
-
-
- );
- });
-
- return (
-
-
-
-
-
- Carousel
-
-
-
-
- {slides}
-
-
-
-
-
-
-
- Carousel
-
-
-
-
- {slides2}
-
-
-
-
-
-
-
-
- );
- }
+ return (
+
+
+
+
+ Carousel with controls
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ Carousel with controls, indicators and caption
+
+
+
+
+
+
+
+ Slide 1
Slide 1
+
+
+
+ Slide 2
Slide 2
+
+
+
+ Slide 3
Slide 3
+
+
+
+
+
+
+
+
+
+
+
+ Carousel animation
+
+
+
+
+
+
+
+ Slide 1
Slide 1
+
+
+
+ Slide 2
Slide 2
+
+
+
+ Slide 3
Slide 3
+
+
+
+
+
+
+
+
+
+
+
+ Carousel animation with autoSlide
+
+
+
+
+
+
+
+ Slide 1
Slide 1
+
+
+
+ Slide 2
Slide 2
+
+
+
+ Slide 3
Slide 3
+
+
+
+
+
+
+
+
+
+ )
}
-export default Carousels;
\ No newline at end of file
+export default Carousels
diff --git a/src/views/Base/Carousels/Carousels.test.js b/src/views/Base/Carousels/Carousels.test.js
deleted file mode 100644
index 743daf4..0000000
--- a/src/views/Base/Carousels/Carousels.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Carousels from './Carousels';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Base/Carousels/package.json b/src/views/Base/Carousels/package.json
deleted file mode 100644
index 301df3b..0000000
--- a/src/views/Base/Carousels/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Carousels",
- "version": "0.0.0",
- "private": true,
- "main": "./Carousels.js"
-}
diff --git a/src/views/Base/Collapses/Collapses.js b/src/views/Base/Collapses/Collapses.js
index 210e247..35e09ff 100644
--- a/src/views/Base/Collapses/Collapses.js
+++ b/src/views/Base/Collapses/Collapses.js
@@ -1,233 +1,237 @@
-import React, { Component } from 'react';
-import { Badge, Button, Card, CardBody, CardFooter, CardHeader, Col, Collapse, Fade, Row } from 'reactstrap';
+import React, { useState } from 'react'
+import {
+ CButton,
+ CCard,
+ CCardBody,
+ CCardFooter,
+ CCardHeader,
+ CCol,
+ CCollapse,
+ CFade,
+ CRow
+} from '@coreui/react';
-class Collapses extends Component {
+const Collapses = () => {
- constructor(props) {
- super(props);
- this.onEntering = this.onEntering.bind(this);
- this.onEntered = this.onEntered.bind(this);
- this.onExiting = this.onExiting.bind(this);
- this.onExited = this.onExited.bind(this);
- this.toggle = this.toggle.bind(this);
- this.toggleAccordion = this.toggleAccordion.bind(this);
- this.toggleCustom = this.toggleCustom.bind(this);
- this.toggleFade = this.toggleFade.bind(this);
- this.state = {
- collapse: false,
- accordion: [true, false, false],
- custom: [true, false],
- status: 'Closed',
- fadeIn: true,
- timeout: 300,
- };
+ const [collapse, setCollapse] = useState(false)
+ const [collapseMulti, setCollapseMulti] = useState([false, false])
+ const [accordion, setAccordion] = useState(1)
+ const [fade, setFade] = useState(true)
+ const [status, setStatus] = useState('Closed')
+
+ const onEntering = () => {
+ setStatus('Opening...')
}
- onEntering() {
- this.setState({ status: 'Opening...' });
+ const onEntered = () => {
+ setStatus('Opened')
}
- onEntered() {
- this.setState({ status: 'Opened' });
+ const onExiting = () => {
+ setStatus('Closing...')
}
- onExiting() {
- this.setState({ status: 'Closing...' });
+ const onExited = () => {
+ setStatus('Closed')
}
- onExited() {
- this.setState({ status: 'Closed' });
+ const toggle = (e) => {
+ setCollapse(!collapse)
+ e.preventDefault()
}
- toggle() {
- this.setState({ collapse: !this.state.collapse });
+ 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;
+ default:
+ }
+ setCollapseMulti(newCollapse)
}
- toggleAccordion(tab) {
-
- const prevState = this.state.accordion;
- const state = prevState.map((x, index) => tab === index ? !x : false);
-
- this.setState({
- accordion: state,
- });
+ const toggleFade = () => {
+ setFade(!fade)
}
- toggleCustom(tab) {
+ return (
+
+
+
+
+ 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.
+
+
+ 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
+
+ Current state: {status}
+
+
- const prevState = this.state.custom;
- const state = prevState.map((x, index) => tab === index ? !x : false);
+
+
+ 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.
+
+
+
+
+
+
+
- this.setState({
- custom: state,
- });
- }
+
- toggleFade() {
- this.setState({ fadeIn: !this.state.fadeIn });
- }
-
- render() {
- return (
-
-
-
-
-
- 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.
-
-
- 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.
-
-
-
-
-
-
- Current state: {this.state.status}
-
-
-
-
- Fade
-
-
-
-
- This content will fade in and out as the button is pressed...
-
-
-
-
-
-
-
-
-
-
- Collapse accordion
-
- NEW
-
-
-
-
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
-
-
-
- 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 haven't heard of them accusamus labore sustainable VHS.
-
-
-
-
-
-
-
-
- Collapse custom accordion
-
- NEW
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget
- tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
-
-
-
-
-
-
-
- Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et
- malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes,
- nascetur ridiculus mus.
-
-
-
-
-
+
+
+ setAccordion(0)}>
+ Collapsible Group Item #1
+
+
+
+
+ 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.
+
+
+
+
+
+ setAccordion(1)}>
+ Collapsible Group Item #2
+
+
+
+
+ 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.
+
+
+
+
+
+ setAccordion(2)}>
+ Collapsible Group Item #3
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+ )
}
-export default Collapses;
+export default Collapses
diff --git a/src/views/Base/Collapses/Collapses.test.js b/src/views/Base/Collapses/Collapses.test.js
deleted file mode 100644
index 80d5434..0000000
--- a/src/views/Base/Collapses/Collapses.test.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Collapses from './Collapses';
-import {mount} from 'enzyme/build';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
-
-describe('toggle clicks', function() {
- it('collapse without crashing', () => {
- const wrapper = mount(
);
- let collapse = wrapper.find('#toggleCollapse1').at(0);
- collapse.simulate('click');
- expect(wrapper.state().collapse).toEqual(true);
- collapse.simulate('click');
- expect(wrapper.state().collapse).toEqual(false);
- collapse.simulate('click');
- expect(wrapper.state().collapse).toEqual(true);
- wrapper.unmount()
- });
- it('fade without crashing', () => {
- const wrapper = mount(
);
- let fade = wrapper.find('#toggleFade1').at(0);
- fade.simulate('click');
- expect(wrapper.state().fadeIn).toEqual(false);
- fade.simulate('click');
- expect(wrapper.state().fadeIn).toEqual(true);
- wrapper.unmount()
- });
- it('accordion without crashing', () => {
- const wrapper = mount(
);
- let accordion = wrapper.find('[aria-controls="collapseOne"]').at(0);
- accordion.simulate('click');
- expect(wrapper.state().accordion[0]).toEqual(false);
- expect(wrapper.state().accordion[1]).toEqual(false);
- expect(wrapper.state().accordion[2]).toEqual(false);
- accordion = wrapper.find('[aria-controls="collapseTwo"]').at(0);
- accordion.simulate('click');
- expect(wrapper.state().accordion[0]).toEqual(false);
- expect(wrapper.state().accordion[1]).toEqual(true);
- expect(wrapper.state().accordion[2]).toEqual(false);
- accordion = wrapper.find('[aria-controls="collapseThree"]').at(0);
- accordion.simulate('click');
- expect(wrapper.state().accordion[0]).toEqual(false);
- expect(wrapper.state().accordion[1]).toEqual(false);
- expect(wrapper.state().accordion[2]).toEqual(true);
- accordion = wrapper.find('[aria-controls="collapseOne"]').at(0);
- accordion.simulate('click');
- expect(wrapper.state().accordion[0]).toEqual(true);
- expect(wrapper.state().accordion[1]).toEqual(false);
- expect(wrapper.state().accordion[2]).toEqual(false);
- wrapper.unmount()
- });
- it('custom without crashing', () => {
- const wrapper = mount(
);
- let accordion = wrapper.find('[aria-controls="exampleAccordion1"]').at(0);
- accordion.simulate('click');
- expect(wrapper.state().custom[0]).toEqual(false);
- expect(wrapper.state().custom[1]).toEqual(false);
- accordion = wrapper.find('[aria-controls="exampleAccordion1"]').at(0);
- accordion.simulate('click');
- expect(wrapper.state().custom[0]).toEqual(true);
- expect(wrapper.state().custom[1]).toEqual(false);
- accordion = wrapper.find('[aria-controls="exampleAccordion2"]').at(0);
- accordion.simulate('click');
- expect(wrapper.state().custom[0]).toEqual(false);
- expect(wrapper.state().custom[1]).toEqual(true);
- wrapper.unmount()
- });
-});
diff --git a/src/views/Base/Collapses/package.json b/src/views/Base/Collapses/package.json
deleted file mode 100644
index 5428093..0000000
--- a/src/views/Base/Collapses/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Collapses",
- "version": "0.0.0",
- "private": true,
- "main": "./Collapses.js"
-}
diff --git a/src/views/Base/Dropdowns/Dropdowns.js b/src/views/Base/Dropdowns/Dropdowns.js
deleted file mode 100644
index aa9a8cc..0000000
--- a/src/views/Base/Dropdowns/Dropdowns.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import React, { Component } from 'react';
-import { Card, CardBody, CardHeader, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Row, UncontrolledDropdown } from 'reactstrap';
-
-class Dropdowns extends Component {
- constructor(props) {
- super(props);
-
- this.toggle = this.toggle.bind(this);
- this.state = {
- dropdownOpen: new Array(6).fill(false),
- };
- }
-
- toggle(i) {
- const newArray = this.state.dropdownOpen.map((element, index) => {
- return (index === i ? !element : false);
- });
- this.setState({
- dropdownOpen: newArray,
- });
- }
-
- render() {
- return (
-
-
-
-
-
- Dropdowns
-
-
-
- {
- this.toggle(0);
- }}>
-
- Dropdown
-
-
- Header
- Action
- Another Action
-
- Another Action
-
-
-
-
-
-
- Dropdowns
- alignment
-
-
- {this.toggle(1);}}>
-
- This dropdown's menu is right-aligned
-
-
- Header
- Action
- Another Action
-
- Another Action
-
-
-
-
-
-
- Dropdowns
- sizing
-
-
- {this.toggle(2);}} size="lg" className="mb-3">
-
- Large Dropdown
-
-
- Header
- Action
- Another Action
-
- Another Action
-
-
- {this.toggle(3);}} className="mb-3">
-
- Normal Dropdown
-
-
- Header
- Action
- Another Action
-
- Another Action
-
-
- {this.toggle(4);}} size="sm">
-
- Small Dropdown
-
-
- Header
- Action
- Another Action
-
- Another Action
-
-
-
-
-
-
- Custom Dropdowns
-
-
- {this.toggle(5);}}>
- {this.toggle(5);}}
- data-toggle="dropdown"
- aria-expanded={this.state.dropdownOpen[5]}
- >
- Custom Dropdown Content *
-
-
- {this.toggle(5);}}>Custom dropdown item 1
- {this.toggle(5);}}>Custom dropdown item 2
- {this.toggle(5);}}>Custom dropdown text 3
-
- {this.toggle(5);}}>Custom dropdown item 4
-
-
-
-
-
-
- Uncontrolled Dropdown
-
-
-
-
- Uncontrolled Dropdown
-
-
- Header
- Action
- Another Action
-
- Another Action
-
-
-
-
-
-
-
- );
- }
-}
-
-export default Dropdowns;
diff --git a/src/views/Base/Dropdowns/Dropdowns.test.js b/src/views/Base/Dropdowns/Dropdowns.test.js
deleted file mode 100644
index ecc269f..0000000
--- a/src/views/Base/Dropdowns/Dropdowns.test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { mount } from 'enzyme'
-import Dropdowns from './Dropdowns';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
-it('toggle click without crashing', () => {
- const wrapper = mount(
);
- for (let i=0; i<5; i++) {
- let Dropdown = wrapper.find('button.dropdown-toggle').at(i);
- Dropdown.simulate('click');
- expect(wrapper.state().dropdownOpen[i]).toEqual(true);
- }
- for (let i=0; i<2; i++) {
- let Dropdown = wrapper.find('[data-toggle="dropdown"]').at(0);
- Dropdown.simulate('click');
- expect(wrapper.state().dropdownOpen[5]).toEqual(true);
- let DropdownItem = wrapper.find('div.dropdown-menu > .dropdown-item').at(i);
- DropdownItem.simulate('click');
- expect(wrapper.state().dropdownOpen[5]).toEqual(false);
- }
- wrapper.unmount()
-});
diff --git a/src/views/Base/Dropdowns/package.json b/src/views/Base/Dropdowns/package.json
deleted file mode 100644
index 6681a6d..0000000
--- a/src/views/Base/Dropdowns/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Dropdowns",
- "version": "0.0.0",
- "private": true,
- "main": "./Dropdowns.js"
-}
diff --git a/src/views/Base/Forms/Forms.js b/src/views/Base/Forms/Forms.js
deleted file mode 100644
index 3c9f4fd..0000000
--- a/src/views/Base/Forms/Forms.js
+++ /dev/null
@@ -1,1161 +0,0 @@
-import React, { Component } from 'react';
-import {
- Badge,
- Button,
- Card,
- CardBody,
- CardFooter,
- CardHeader,
- Col,
- Collapse,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
- Fade,
- Form,
- FormGroup,
- FormText,
- FormFeedback,
- Input,
- InputGroup,
- InputGroupAddon,
- InputGroupButtonDropdown,
- InputGroupText,
- Label,
- Row,
-} from 'reactstrap';
-
-class Forms extends Component {
- constructor(props) {
- super(props);
-
- this.toggle = this.toggle.bind(this);
- this.toggleFade = this.toggleFade.bind(this);
- this.state = {
- collapse: true,
- fadeIn: true,
- timeout: 300
- };
- }
-
- toggle() {
- this.setState({ collapse: !this.state.collapse });
- }
-
- toggleFade() {
- this.setState((prevState) => { return { fadeIn: !prevState }});
- }
-
- render() {
- return (
-
- );
- }
-}
-
-export default Forms;
diff --git a/src/views/Base/Forms/Forms.test.js b/src/views/Base/Forms/Forms.test.js
deleted file mode 100644
index 952f0a9..0000000
--- a/src/views/Base/Forms/Forms.test.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Forms from './Forms';
-import {mount} from 'enzyme/build';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
-
-describe('toggle clicks', function() {
- it('dropdowns without crashing', () => {
- const wrapper = mount(
);
- for (let i = 0; i < 4; i++) {
- let count = i === 0 ? 'first' : i === 1 ? 'second' : i === 2 ? 'third' : 'fourth'
- let Dropdown = wrapper.find('button.dropdown-toggle').at(i);
- Dropdown.simulate('click');
- expect(wrapper.state()[count]).toEqual(true);
- }
- wrapper.unmount()
- });
- it('collapse without crashing', () => {
- const wrapper = mount(
);
- let collapse = wrapper.find('button.btn-minimize').at(0);
- collapse.simulate('click');
- expect(wrapper.state().collapse).toEqual(false);
- collapse.simulate('click');
- expect(wrapper.state().collapse).toEqual(true);
- wrapper.unmount()
- });
- it('fade without crashing', () => {
- const wrapper = mount(
);
- let fade = wrapper.find('button.btn-close').at(0);
- fade.simulate('click');
- expect(wrapper.state().fadeIn).toEqual(false);
- wrapper.unmount()
- });
-})
diff --git a/src/views/Base/Forms/package.json b/src/views/Base/Forms/package.json
deleted file mode 100644
index 19ca2ed..0000000
--- a/src/views/Base/Forms/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Forms",
- "version": "0.0.0",
- "private": true,
- "main": "./Forms.js"
-}
diff --git a/src/views/Base/Jumbotrons/Jumbotrons.js b/src/views/Base/Jumbotrons/Jumbotrons.js
index 56bdaca..ccaeacf 100644
--- a/src/views/Base/Jumbotrons/Jumbotrons.js
+++ b/src/views/Base/Jumbotrons/Jumbotrons.js
@@ -1,56 +1,79 @@
-import React, { Component } from 'react';
-import { Button, Card, CardBody, CardHeader, Col, Container, Jumbotron, Row } from 'reactstrap';
+import React from 'react'
+import {
+ CButton,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCol,
+ CContainer,
+ CJumbotron,
+ CRow,
+ CEmbed,
+ CEmbedItem
+} from '@coreui/react'
-class Jumbotrons extends Component {
+const Jumbotrons = () => {
- render() {
- return (
-
-
-
-
-
- Jumbotron
-
-
-
-
- Hello, world!
- This is a simple hero unit, a simple Jumbotron-style component for calling extra
- attention to featured content or information.
-
- It uses utility classes for typgraphy and spacing to space content out within the larger container.
-
-
-
-
-
-
-
-
-
-
- Jumbotron
- fluid
-
-
-
-
- Fluid jumbotron
- This is a modified jumbotron that occupies the entire horizontal space of its parent.
-
-
-
-
-
-
-
- );
- }
+ return (
+ <>
+
+
+
+
+ Jumbotron
+
+
+
+
+ Hello, world!
+ This is a simple hero unit, a simple Jumbotron - style component for calling extra
+ attention to featured content or information.
+
+ It uses utility classes for typgraphy and spacing to space content out within the larger container.
+
+ Learn More
+
+
+
+
+
+
+
+
+ Jumbotron
+ fluid
+
+
+
+
+ Fluid jumbotron
+ This is a modified jumbotron that occupies the entire horizontal space of its parent.
+
+
+
+
+
+
+
+
+
+
+ Embed
+
+
+
+
+
+
+
+
+
+
+ )
}
-export default Jumbotrons;
+export default Jumbotrons
diff --git a/src/views/Base/Jumbotrons/Jumbotrons.test.js b/src/views/Base/Jumbotrons/Jumbotrons.test.js
deleted file mode 100644
index 3214365..0000000
--- a/src/views/Base/Jumbotrons/Jumbotrons.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Jumbotrons from './Jumbotrons';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Base/Jumbotrons/package.json b/src/views/Base/Jumbotrons/package.json
deleted file mode 100644
index d3d3a1c..0000000
--- a/src/views/Base/Jumbotrons/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Jumbotrons",
- "version": "0.0.0",
- "private": true,
- "main": "./Jumbotrons.js"
-}
diff --git a/src/views/Base/ListGroups/ListGroups.js b/src/views/Base/ListGroups/ListGroups.js
index e42f784..5a857a3 100644
--- a/src/views/Base/ListGroups/ListGroups.js
+++ b/src/views/Base/ListGroups/ListGroups.js
@@ -1,229 +1,277 @@
-import React, { Component } from 'react';
-import { Badge, Card, CardBody, CardHeader, Col, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, Row, TabContent, TabPane } from 'reactstrap';
+import React, { useState } from 'react';
+import {
+ CBadge,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCol,
+ CListGroup,
+ CListGroupItem,
+ CListGroupItemHeading,
+ CListGroupItemText,
+ CRow,
+ CTabContent,
+ CTabPane
+} from '@coreui/react';
-class ListGroups extends Component {
+const ListGroups = () => {
+ const [activeTab, setActiveTab] = useState(1)
- constructor(props) {
- super(props);
+ return (
+ <>
+
+
- this.toggle = this.toggle.bind(this);
- this.state = {
- activeTab: 1
- };
- }
+
+
+ List group
+
+
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+ Vestibulum at eros
+
+
+
- toggle(tab) {
- if (this.state.activeTab !== tab) {
- this.setState({
- activeTab: tab
- });
- }
- }
+
+
+
+
+ List group links
+ with first item active and last item disabled
+
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+ Vestibulum at eros
+
+
+
+
+
- render() {
- return (
-
-
-
-
-
- List Group
-
-
-
-
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
-
-
-
-
-
-
-
- List Group
- tags
-
-
-
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
-
-
-
-
-
-
-
-
-
- List Group
- disabled items
-
-
-
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
-
-
-
-
-
-
-
- List Group
- contextual classes
-
-
-
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
-
-
-
-
-
-
-
-
-
- List Group
- anchors
-
-
- Be sure to not use the standard .btn classes here.
-
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
-
-
-
-
-
-
-
-
- List Group
- buttons
-
-
-
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
-
-
-
-
-
-
-
-
-
- List Group
- custom content
-
-
-
-
- List group item heading
-
- Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
-
-
-
- List group item heading
-
- Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
-
-
-
- List group item heading
-
- Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
-
-
-
-
-
-
-
-
-
-
-
- List Group with TabPanes
-
- NEW
-
-
-
-
-
-
- this.toggle(0)} action active={this.state.activeTab === 0} >Home
- this.toggle(1)} action active={this.state.activeTab === 1} >Profile
- this.toggle(2)} action active={this.state.activeTab === 2} >Messages
- this.toggle(3)} action active={this.state.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.
-
-
- 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.
-
-
- 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.
-
-
-
-
-
-
-
-
-
- );
- }
+
+
+
+
+
+ List group
+ contextual classes
+
+
+
+ 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
+
+
+
+
+
+
+
+
+
+ List group
+ contextual classes with .action
+
+
+
+ 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
+
+
+
+
+
+
+
+
+
+
+ List group
+ accent
+
+
+
+ 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
+
+
+
+
+
+
+
+ List group
+ accent with color
+
+
+
+ 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
+
+
+
+
+
+
+
+
+
+ List group
+ with badges
+
+
+
+
+ Cras justo odio
+ 14
+
+
+ Dapibus ac facilisis in
+ 2
+
+
+ Morbi leo risus
+ 1
+
+
+
+
+
+
+
+
+
+
+ List group
+ custom content
+
+
+
+
+
+
+ List group item heading
+ 3 days ago
+
+
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+ Donec id elit non mi porta.
+
+
+
+ List group item heading
+
+ 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.
+
+ Small.
+
+
+
+
+
+
+
+
+
+
+
+ List group
+ tab Javascript plugin
+
+
+
+
+
+ setActiveTab(0)} action active={activeTab === 0} >Home
+ setActiveTab(1)} action active={activeTab === 1} >Profile
+ setActiveTab(2)} action active={activeTab === 2} >Messages
+ setActiveTab(3)} action 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.
+
+
+ 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.
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+ )
}
-export default ListGroups;
+export default ListGroups
diff --git a/src/views/Base/ListGroups/ListGroups.test.js b/src/views/Base/ListGroups/ListGroups.test.js
deleted file mode 100644
index 6b9f398..0000000
--- a/src/views/Base/ListGroups/ListGroups.test.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ListGroups from './ListGroups';
-import {mount} from 'enzyme/build';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
-it('toggle click without crashing', () => {
- const wrapper = mount(
);
- for (let i=0; i<4; i++) {
- let ListGroup = wrapper.find('#list-tab .list-group-item-action.list-group-item').at(i);
- ListGroup.simulate('click');
- expect(wrapper.state().activeTab).toEqual(i);
- }
- wrapper.unmount()
-});
diff --git a/src/views/Base/ListGroups/package.json b/src/views/Base/ListGroups/package.json
deleted file mode 100644
index c542b75..0000000
--- a/src/views/Base/ListGroups/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "ListGroups",
- "version": "0.0.0",
- "private": true,
- "main": "./ListGroups.js"
-}
diff --git a/src/views/Base/Navbars/Navbars.js b/src/views/Base/Navbars/Navbars.js
index 4599da4..b9bf4f1 100644
--- a/src/views/Base/Navbars/Navbars.js
+++ b/src/views/Base/Navbars/Navbars.js
@@ -1,118 +1,202 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react'
import {
- Card,
- CardBody,
- CardHeader,
- Collapse,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
- Nav,
- Navbar,
- NavbarBrand,
- NavbarToggler,
- NavItem,
- NavLink,
- UncontrolledDropdown,
-} from 'reactstrap';
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCollapse,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+ CNavbar,
+ CNavbarNav,
+ CNavbarBrand,
+ CNavbarText,
+ CToggler,
+ CNavLink,
+ CDropdown,
+ CForm,
+ CInput,
+ CButton,
+ CImg
+} from '@coreui/react'
+// import { CIcon } from '@coreui/icons-react'
-class Navbars extends Component {
+const CNavbars = () => {
+ const [isOpen, setIsOpen] = useState(false)
+ const [isOpenDropdown, setIsOpenDropdown] = useState(false)
+ const [navbarText, setNavbarText] = useState(false)
- constructor(props) {
- super(props);
+ return (
+ <>
- this.toggle = this.toggle.bind(this);
- this.toggleNavbar = this.toggleNavbar.bind(this);
- this.state = {
- isOpen: false,
- collapsed: true,
- };
- }
+
+
+ CNavbar
+
+
+
+ setIsOpen(!isOpen)}/>
+
+ NavbarBrand
+
+
+
+ Home
+ Link
+
+
+
+
+ Search
+
+
+
+ Lang
+
+
+ EN
+ ES
+ RU
+ FA
+
+
+
+
+ User
+
+
+ Account
+ Settings
+
+
+
+
+
+
+
- toggle() {
- this.setState({
- isOpen: !this.state.isOpen,
- });
- }
+
+
+ CNavbar brand
+
+
+
+
+
+ CoreUI React
+
+
+
+
- toggleNavbar() {
- this.setState({
- collapsed: !this.state.collapsed,
- });
- }
+
+
+ CNavbar text
+
+
+
+ { setNavbarText(!navbarText)}}
+ />
+ NavbarBrand
+
+
+ Navbar text
+
+
+
+
+
- render() {
- return (
-
-
-
- Navbar
-
-
-
-
- Bootstrap
-
-
-
-
-
-
-
-
-
- Navbar Toggler
-
-
-
- Bootstrap
-
-
-
-
-
-
-
-
- );
- }
+
+
+ CNavbar dropdown
+
+
+
+ {setIsOpenDropdown(!isOpenDropdown)}} />
+
+
+ Home
+ Link
+
+
+ Lang
+
+
+ EN
+ ES
+ RU
+ FA
+
+
+
+
+ User
+
+
+ Account
+ Settings
+
+
+
+
+
+
+
+
+
+
+ CNavbar form
+
+
+
+
+
+ Search
+
+
+
+
+
+
+
+ CNavbar input group
+
+
+
+
+
+
+
+
+
+
+ )
}
-export default Navbars;
\ No newline at end of file
+export default CNavbars
diff --git a/src/views/Base/Navbars/Navbars.test.js b/src/views/Base/Navbars/Navbars.test.js
deleted file mode 100644
index 613a9bd..0000000
--- a/src/views/Base/Navbars/Navbars.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Navbars from './Navbars';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Base/Navbars/package.json b/src/views/Base/Navbars/package.json
deleted file mode 100644
index a33a6ad..0000000
--- a/src/views/Base/Navbars/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Navbars",
- "version": "0.0.0",
- "private": true,
- "main": "./Navbars.js"
-}
diff --git a/src/views/Base/Navs/Navs.js b/src/views/Base/Navs/Navs.js
index 71472b9..bac7f81 100644
--- a/src/views/Base/Navs/Navs.js
+++ b/src/views/Base/Navs/Navs.js
@@ -1,159 +1,311 @@
-import React, { Component } from 'react';
-import { Card, CardBody, CardHeader, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink } from 'reactstrap';
+import React from 'react'
+import {
+ CRow,
+ CCol,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CDropdown,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+ CNav,
+ CNavItem,
+ CNavLink
+} from '@coreui/react'
-class Navs extends Component {
+const Navs = () => {
+ return (
+ <>
+
+
+
+
+ Navs
+
+
+
+ List Based
+
+
+ Active
+
+
+ Link
+
+
+ Link
+
+
+
+ Link Based
+
+ Active
+ Link
+ Link
+ Disabled
+
+
+ Link Base
+
+ Active
+ Link
+ Link
+ Disabled
+
+
+ Link Based
+
+ Active
+ Link
+ Link
+ Disabled
+
+
+
+
+
+
+
+ Navs
+ vertical / links
+
+
+
+ Active
+ Link
+ Link
+ Disabled
+
+
+
+
+
+
+
+ Navs
+ vertical / list
+
+
+
+
+ Link
+
+
+ Link
+
+
+ Another Link
+
+
+ Disabled Link
+
+
+
+
+
+
- constructor(props) {
- super(props);
+
+
+
+
+ Navs
+ tabs
+
+
+
+ Active
+ Link
+ Link
+ Disabled
+
+
+
+
+
+
+
+ Navs
+ pills
+
+
+
+
+ Link
+
+
+ Link
+
+
+ Link
+
+
+ Disabled
+
+
+
+
+
+
+
+
+
+
+ Navs
+ fill and justify
+
+
+
+
+ Active
+
+
+ Longer nav link
+
+
+ Link
+
+
+ Disabled
+
+
- this.toggle = this.toggle.bind(this);
- this.state = {
- dropdownOpen: [false, false],
- };
- }
+
- toggle(i) {
- const newArray = this.state.dropdownOpen.map((element, index) => {
- return (index === i ? !element : false);
- });
- this.setState({
- dropdownOpen: newArray,
- });
- }
+
+ Active
+ Link
+ Link
+ Disabled
+
- render() {
- return (
-
-
-
- Navs
-
-
-
- List Based
-
-
- Link Based
-
-
-
-
-
- Navs Tabs
-
-
-
-
-
-
-
- Navs Pills
-
-
-
-
-
-
-
- Navs Vertical
-
-
- List Based
-
-
- Link based
-
-
-
-
+
+
+
+ Active
+
+
+ Longer nav link
+
+
+ Link
+
+
+ Disabled
+
+
+
+
+
+
+ Active
+ Link
+ Link
+ Disabled
+
+
+
+
+
+
+
+
+
+
+
+ Navs
+ with flex
+
+
+
+ Active
+ Link
+ Link
+ Disabled
+
+
+
+
+
+
+
+
+
+
+
+ Navs
+ tabs with dropdowns
+
+
+
+
+ Link
+
+
+
+ Dropdown
+
+
+ Action
+ Another action
+ Something else here
+
+ Separated link
+
+
+
+ Link
+
+
+ Disabled
+
+
+
+
+
+
+
+
+
+ Navs
+ pills with dropdowns
+
+
+
+
+ Link
+
+
+
+ Dropdown
+
+
+ Action
+ Another action
+ Something else here
+
+ Separated link
+
+
+
+ Link
+
+
+ Disabled
+
+
+
+
+
+
+
+ )
}
-export default Navs;
\ No newline at end of file
+export default Navs
diff --git a/src/views/Base/Navs/Navs.test.js b/src/views/Base/Navs/Navs.test.js
deleted file mode 100644
index d00d930..0000000
--- a/src/views/Base/Navs/Navs.test.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Navs from './Navs';
-import {mount} from 'enzyme/build';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
-it('toggle click without crashing', () => {
- const wrapper = mount(
);
- for (let i=0; i<2; i++) {
- let Nav = wrapper.find('a.dropdown-toggle').at(i);
- Nav.simulate('click');
- expect(wrapper.state().dropdownOpen[i]).toEqual(true);
- }
- wrapper.unmount()
-});
diff --git a/src/views/Base/Navs/package.json b/src/views/Base/Navs/package.json
deleted file mode 100644
index 9728cbf..0000000
--- a/src/views/Base/Navs/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Navs",
- "version": "0.0.0",
- "private": true,
- "main": "./Navs.js"
-}
diff --git a/src/views/Base/Paginations/Paginations.test.js b/src/views/Base/Paginations/Paginations.test.js
deleted file mode 100644
index 5c7a853..0000000
--- a/src/views/Base/Paginations/Paginations.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Paginations from './Pagnations';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Base/Paginations/Pagnations.js b/src/views/Base/Paginations/Pagnations.js
index b399116..c3d6524 100644
--- a/src/views/Base/Paginations/Pagnations.js
+++ b/src/views/Base/Paginations/Pagnations.js
@@ -1,177 +1,95 @@
-import React, { Component } from 'react';
-import { Card, CardBody, CardHeader, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+import React, { useState } from 'react'
+import {
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CPagination
+} from '@coreui/react'
-class Paginations extends Component {
+const Paginations = () => {
+ const [currentPage, setCurrentPage] = useState(2)
- render() {
- return (
-
-
-
- Pagination
-
-
-
-
-
-
-
-
-
- 1
-
-
-
-
- 2
-
-
-
-
- 3
-
-
-
-
- 4
-
-
-
-
- 5
-
-
-
-
-
-
-
-
-
-
- Pagination
- disabled and active states
-
-
-
-
-
-
-
-
- 1
-
-
-
-
- 2
-
-
-
-
- 3
-
-
-
-
- 4
-
-
-
-
- 5
-
-
-
-
-
-
-
-
-
-
- Pagination
- sizing
-
-
-
-
-
-
-
-
- 1
-
-
-
-
- 2
-
-
-
-
- 3
-
-
-
-
-
-
-
-
-
-
-
-
- 1
-
-
-
-
- 2
-
-
-
-
- 3
-
-
-
-
-
-
-
-
-
-
-
-
- 1
-
-
-
-
- 2
-
-
-
-
- 3
-
-
-
-
-
-
-
-
-
- );
- }
+ return (
+ <>
+
+
+ Pagination
+
+
+
+ Default
+
+
+
+ Small
+
+
+
+
+
Large
+
+
+
+
+ currentPage: {currentPage}
+
+
+
+
+ Pagination
+ alignment
+
+
+ Left alignment (default)
+
+
+
+ Center alignment
+
+
+
+ Right (end) alignment
+
+
+
+ currentPage: {currentPage}
+
+
+
+ )
}
-export default Paginations;
+export default Paginations
diff --git a/src/views/Base/Paginations/package.json b/src/views/Base/Paginations/package.json
deleted file mode 100644
index a1bce95..0000000
--- a/src/views/Base/Paginations/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Pagnations",
- "version": "0.0.0",
- "private": true,
- "main": "./Pagnations.js"
-}
diff --git a/src/views/Base/Popovers/Popovers.js b/src/views/Base/Popovers/Popovers.js
index f0b4ce6..b2f318c 100644
--- a/src/views/Base/Popovers/Popovers.js
+++ b/src/views/Base/Popovers/Popovers.js
@@ -1,108 +1,107 @@
-import React, { Component } from 'react';
-import { Button, Card, CardBody, CardHeader, Popover, PopoverBody, PopoverHeader } from 'reactstrap';
+import React from 'react'
+import {
+ CButton,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CPopover,
+ CRow,
+ CCol,
+ CLink
+} from '@coreui/react'
-class PopoverItem extends Component {
- constructor(props) {
- super(props);
+const Popovers = () => {
+ const placements = [
+ 'top-start', 'top', 'top-end',
+ 'bottom-start', 'bottom', 'bottom-end',
+ 'right-start', 'right', 'right-end',
+ 'left-start', 'left', 'left-end'
+ ]
- this.toggle = this.toggle.bind(this);
- this.state = {
- popoverOpen: false,
- };
- }
+ return (
+ <>
+
+
+ Popovers
+
+
+
+ {/*eslint-disable-next-line*/}
- toggle() {
- this.setState({
- popoverOpen: !this.state.popoverOpen,
- });
- }
+
+ Hover over the links below to see popover:
+
- render() {
- return (
-
-
-
- Popover Title
- Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
-
-
- );
- }
+
+ 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.
+
+
+
+
+
+
+
+
+ Popovers
+ placement
+
+
+
+
+ {placements.map(placement => {
+ return (
+
+
+ { placement }
+
+
+ )
+ })}
+
+
+
+
+
+ )
}
-class Popovers extends Component {
-
- constructor(props) {
- super(props);
-
- this.toggle = this.toggle.bind(this);
- this.state = {
- popoverOpen: false,
- popovers: [
- {
- placement: 'top',
- text: 'Top',
- },
- {
- placement: 'bottom',
- text: 'Bottom',
- },
- {
- placement: 'left',
- text: 'Left',
- },
- {
- placement: 'right',
- text: 'Right',
- },
- ],
- };
- }
-
- toggle() {
- this.setState({
- popoverOpen: !this.state.popoverOpen,
- });
- }
-
- render() {
- return (
-
-
-
- Popovers
-
-
-
-
-
- Popover Title
- Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
-
-
-
-
-
- Popovers
- list
-
-
- {this.state.popovers.map((popover, i) => {
- return ;
- })}
-
-
-
- );
- }
-}
-
-export default Popovers;
+export default Popovers
diff --git a/src/views/Base/Popovers/Popovers.test.js b/src/views/Base/Popovers/Popovers.test.js
deleted file mode 100644
index 0911fa8..0000000
--- a/src/views/Base/Popovers/Popovers.test.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Popovers from './Popovers';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- document.body.appendChild(div);
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Base/Popovers/package.json b/src/views/Base/Popovers/package.json
deleted file mode 100644
index 51e2c05..0000000
--- a/src/views/Base/Popovers/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Popovers",
- "version": "0.0.0",
- "private": true,
- "main": "./Popovers.js"
-}
diff --git a/src/views/Base/ProgressBar/ProgressBar.js b/src/views/Base/ProgressBar/ProgressBar.js
index bb80e5c..8e082f1 100644
--- a/src/views/Base/ProgressBar/ProgressBar.js
+++ b/src/views/Base/ProgressBar/ProgressBar.js
@@ -1,167 +1,102 @@
-import React, { Component } from 'react';
-import { Card, CardBody, CardHeader, Progress } from 'reactstrap';
+import React from 'react'
+import {
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CProgress,
+ CProgressBar
+} from '@coreui/react'
-class ProgressBar extends Component {
-
- render() {
- return (
-
-
-
- Progress
-
-
-
- 0%
-
- 25%
-
- 50%
-
- 75%
-
- 100%
-
- Multiple bars
-
-
-
-
-
- Progress
- color variants
-
-
-
-
-
-
-
-
-
-
-
- Progress
- labels
-
-
-
-
-
-
-
-
-
-
-
- Progress
- striped
-
-
-
-
-
-
-
-
-
-
-
-
- Progress
- animated
-
-
-
-
-
-
-
-
-
-
-
-
- Progress
- multiple bars / stacked
-
-
- Plain
-
- With Labels
-
- Stripes and Animations
-
-
-
-
-
- Progress
- max value
-
-
- 1 of 5
-
- 50 of 135
-
- 75 of 111
-
- 463 of 500
-
-
- Various (40) of 55
-
-
-
-
- );
- }
+const ProgressBar = () => {
+ return (
+ <>
+
+
+ Progress
+
+
+
+
+
+
+
+
+
+
+
+
+ Progress
+ labels
+
+
+
+
+
+
+
+
+
+ Progress
+ heights
+
+
+
+
+
+
+
+
+ Progress
+ backgrounds
+
+
+
+
+
+
+
+
+
+
+ Progress
+ multiple bar
+
+
+
+
+
+
+
+
+
+
+
+ Progress
+ striped
+
+
+
+
+
+
+
+
+
+
+
+ Progress
+ animated
+
+
+
+
+
+
+ )
}
-export default ProgressBar;
\ No newline at end of file
+export default ProgressBar
diff --git a/src/views/Base/ProgressBar/ProgressBar.test.js b/src/views/Base/ProgressBar/ProgressBar.test.js
deleted file mode 100644
index bbed9cd..0000000
--- a/src/views/Base/ProgressBar/ProgressBar.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ProgressBar from './ProgressBar';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Base/ProgressBar/package.json b/src/views/Base/ProgressBar/package.json
deleted file mode 100644
index e4f62b7..0000000
--- a/src/views/Base/ProgressBar/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Progress Bar",
- "version": "0.0.0",
- "private": true,
- "main": "./ProgressBar.js"
-}
diff --git a/src/views/Base/Switches/Switches.js b/src/views/Base/Switches/Switches.js
index 1973897..551bbb8 100644
--- a/src/views/Base/Switches/Switches.js
+++ b/src/views/Base/Switches/Switches.js
@@ -1,494 +1,483 @@
-import React, { Component } from 'react';
-import { Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap';
-import { AppSwitch } from '@coreui/react'
+import React from 'react'
+import {
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCol,
+ CRow,
+ CSwitch
+} from '@coreui/react'
-class Switches extends Component {
- render() {
- return (
-
+const Switches = () => {
+ return (
+
+
+
+
+ 3d Switch
+
+
+ console.log(e.target.checked)}/>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Switch default
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Switch default - pills
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
- Switch default
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Switch pills
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 3d Switch
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 3d Switch disabled
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ Outline
+
-
-
-
- 3d Switch outline="alt"
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 3d Switch label
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 3d Switch outline="alt" label
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 3d Switch outline="alt" label
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Switch outline
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Switch outline pills
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Switch outline alternative
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ Switch outline
-
-
-
- Switch outline alternative - pills
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Switch outline pills
-
-
-
- Switch with text
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Switch with text pills
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Switch with text outline
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Switch with text outline pills
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Switch with text outline alternative pills
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Switch with text outline alternative pills
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- Switch with text outline alternative
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Switch with text outline alternative pills
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ Opposite
+
-
-
-
- Switch with text outline alternative
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Switch with text outline alternative pills
- {' '}CoreUI Pro
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ Switch outline alternative
-
-
-
- Sizes
-
-
-
-
-
- | Size |
- Example |
- Props |
-
-
-
-
- |
- Large
- |
-
-
- |
-
- Add size={'lg'}
- |
-
-
- |
- Normal
- |
-
-
- |
-
- -
- |
-
-
- |
- Small
- |
-
-
- |
-
- Add size={'sm'}
- |
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Switch outline alternative - pills
-
-
+
+
+
+
+
+
+
+
+
+
+
- );
- }
+
+ With text
+
+
+
+
+
+ Switch with text
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Switch with text pills
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Switch with text outline
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Switch with text outline pills
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Switch with text outline alternative
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Switch with text outline alternative pills
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ With icon
+
+
+
+
+
+ Switch with text
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Switch with text pills
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Switch with text outline
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Switch with text outline pills
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Switch with text outline alternative
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Switch with text outline alternative pills
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Disabled
+
+
+
+
+
+ 3d Switch
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 3d Switch
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 3D
+
+
+
+
+
+ 3d Switch
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 3d Switch
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sizes
+
+
+
+
+
+ Sizes
+
+
+
+
+
+ | Size |
+ Example |
+ Props |
+
+
+
+
+ |
+ Large
+ |
+
+
+ |
+
+ Add size={'lg'}
+ |
+
+
+ |
+ Normal
+ |
+
+
+ |
+
+ -
+ |
+
+
+ |
+ Small
+ |
+
+
+ |
+
+ Add size={'sm'}
+ |
+
+
+
+
+
+
+
+ )
}
-export default Switches;
+export default Switches
diff --git a/src/views/Base/Switches/Switches.test.js b/src/views/Base/Switches/Switches.test.js
deleted file mode 100644
index 2e45ea4..0000000
--- a/src/views/Base/Switches/Switches.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Switches from './Switches';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Base/Switches/package.json b/src/views/Base/Switches/package.json
deleted file mode 100644
index ce01586..0000000
--- a/src/views/Base/Switches/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Switches",
- "version": "0.0.0",
- "private": true,
- "main": "./Switches.js"
-}
diff --git a/src/views/Base/Tables/Tables.js b/src/views/Base/Tables/Tables.js
index 5debc82..0aa2365 100644
--- a/src/views/Base/Tables/Tables.js
+++ b/src/views/Base/Tables/Tables.js
@@ -1,393 +1,212 @@
-import React, { Component } from 'react';
-import { Badge, Card, CardBody, CardHeader, Col, Pagination, PaginationItem, PaginationLink, Row, Table } from 'reactstrap';
+import React from 'react'
+import {
+ CBadge,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCol,
+ CDataTable,
+ CRow
+} from '@coreui/react'
-class Tables extends Component {
- render() {
- 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
- |
-
-
-
-
-
-
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
-
-
-
-
-
-
+import usersData from '../../Users/UsersData'
-
-
-
- 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
- |
-
-
-
-
- Prev
-
- 1
-
- 2
- 3
- 4
- Next
-
-
-
-
-
-
-
-
-
-
-
- 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
- |
-
-
-
-
- Prev
-
- 1
-
- 2
- 3
- 4
- Next
-
-
-
-
-
-
-
-
- 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
- |
-
-
-
-
- Prev
-
- 1
-
- 2
- 3
- 4
- Next
-
-
-
-
-
-
-
-
-
-
-
- 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
- |
-
-
-
-
-
-
-
-
-
-
- );
+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 fields = ['name','registered', 'role', 'status']
-export default Tables;
+const Tables = () => {
+ return (
+ <>
+
+
+
+
+ Simple Table
+
+
+ (
+
+
+ {item.status}
+
+ |
+ )
+
+ }}
+ />
+
+
+
+
+
+
+
+ Striped Table
+
+
+ (
+
+
+ {item.status}
+
+ |
+ )
+
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+ Condensed Table
+
+
+ (
+
+
+ {item.status}
+
+ |
+ )
+
+ }}
+ />
+
+
+
+
+
+
+
+ Bordered Table
+
+
+ (
+
+
+ {item.status}
+
+ |
+ )
+
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+ Combined All Table
+
+
+ (
+
+
+ {item.status}
+
+ |
+ )
+ }}
+ />
+
+
+
+
+
+
+
+
+ Combined All dark Table
+
+
+ (
+
+
+ {item.status}
+
+ |
+ )
+ }}
+ />
+
+
+
+
+
+ )
+}
+
+export default Tables
diff --git a/src/views/Base/Tables/Tables.test.js b/src/views/Base/Tables/Tables.test.js
deleted file mode 100644
index 85ed43a..0000000
--- a/src/views/Base/Tables/Tables.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Tables from './Tables';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Base/Tables/package.json b/src/views/Base/Tables/package.json
deleted file mode 100644
index 548d9a3..0000000
--- a/src/views/Base/Tables/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Tables",
- "version": "0.0.0",
- "private": true,
- "main": "./Tables.js"
-}
diff --git a/src/views/Base/Tabs/Tabs.js b/src/views/Base/Tabs/Tabs.js
index cdec062..8cea443 100644
--- a/src/views/Base/Tabs/Tabs.js
+++ b/src/views/Base/Tabs/Tabs.js
@@ -1,183 +1,190 @@
-import React, {Component} from 'react';
-import {Badge, Col, Nav, NavItem, NavLink, Row, TabContent, TabPane} from 'reactstrap';
-import classnames from 'classnames';
+import React, { useState } from 'react'
+import {
+ CCol,
+ CNav,
+ CNavItem,
+ CNavLink,
+ CRow,
+ CTabContent,
+ CTabPane,
+ CCard,
+ CCardBody,
+ CTabs,
+ CCardHeader
+} from '@coreui/react'
+import {
+ CIcon
+} from '@coreui/icons-react'
-class Tabs extends Component {
+const Tabs = () => {
+ 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.'
- constructor(props) {
- super(props);
+ return (
+
+
+
+
+ Index indentifiers
+
+
+
+
+
+
+ Home
+
+
+
+
+ Profile
+
+
+
+
+ Messages
+
+
+
+
+
+ {`1. ${lorem}`}
+
+
+ {`2. ${lorem}`}
+
+
+ {`3. ${lorem}`}
+
+
+
+
+
+
+
+
+
+ Id indentifiers
+
+
+
+
+
+
+ Home
+
+
+
+
+ Profile
+
+
+
+
+ Messages
+
+
+
+
+
+ {`1. ${lorem}`}
+
+
+ {`2. ${lorem}`}
+
+
+ {`3. ${lorem}`}
+
+
+
+
+
+
- this.toggle = this.toggle.bind(this);
- this.state = {
- activeTab: new Array(4).fill('1'),
- };
- }
+
+
+
+ No fade animation tabs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {`1. ${lorem}`}
+
+
+ {`2. ${lorem}`}
+
+
+ {`3. ${lorem}`}
+
+
+
+
+
+
- lorem() {
- return '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.'
- }
-
- toggle(tabPane, tab) {
- const newArray = this.state.activeTab.slice()
- newArray[tabPane] = tab
- this.setState({
- activeTab: newArray,
- });
- }
-
- tabPane() {
- return (
- <>
-
- {`1. ${this.lorem()}`}
-
-
- {`2. ${this.lorem()}`}
-
-
- {`3. ${this.lorem()}`}
-
-
- );
- }
-
- render() {
- return (
-
-
-
-
-
- {this.tabPane()}
-
-
-
-
-
- {this.tabPane()}
-
-
-
-
-
- {this.tabPane()}
-
-
-
-
-
- {this.tabPane()}
-
-
-
-
- );
- }
+
+
+
+ Controlled tabs
+
+
+ setActive(idx)}>
+
+
+
+
+ { active === 0 && ' Home'}
+
+
+
+
+
+ { active === 1 && ' Profile'}
+
+
+
+
+
+ { active === 2 && ' Messages'}
+
+
+
+
+
+ {`1. ${lorem}`}
+
+
+ {`2. ${lorem}`}
+
+
+ {`3. ${lorem}`}
+
+
+
+
+
+
+
+ )
}
-export default Tabs;
+export default Tabs
diff --git a/src/views/Base/Tabs/Tabs.test.js b/src/views/Base/Tabs/Tabs.test.js
deleted file mode 100644
index 6d3d51a..0000000
--- a/src/views/Base/Tabs/Tabs.test.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Tabs from './Tabs';
-import {mount} from 'enzyme/build';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
-it('toggle click without crashing', () => {
- const wrapper = mount(
);
- for (let pane=0; pane<4; pane++) {
- for( let tabId=1; tabId<4; tabId++) {
- let Tab = wrapper.find('.nav-tabs .nav-item .nav-link').at((3*pane)+tabId-1);
- Tab.simulate('click');
- expect(wrapper.state().activeTab[pane]).toEqual((tabId).toString());
- }
- }
- wrapper.unmount()
-});
diff --git a/src/views/Base/Tabs/package.json b/src/views/Base/Tabs/package.json
deleted file mode 100644
index e362a80..0000000
--- a/src/views/Base/Tabs/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Tabs",
- "version": "0.0.0",
- "private": true,
- "main": "./Tabs.js"
-}
diff --git a/src/views/Base/Tooltips/Tooltips.js b/src/views/Base/Tooltips/Tooltips.js
index c3a7d8c..6b17b3f 100644
--- a/src/views/Base/Tooltips/Tooltips.js
+++ b/src/views/Base/Tooltips/Tooltips.js
@@ -1,134 +1,107 @@
-import React, { Component } from 'react';
-import { Button, Card, CardBody, CardHeader, Tooltip, UncontrolledTooltip } from 'reactstrap';
+import React from 'react'
+import {
+ CButton,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CTooltip,
+ CRow,
+ CCol,
+ CLink
+} from '@coreui/react'
-class TooltipItem extends React.Component {
- constructor(props) {
- super(props);
+const Tooltips = () => {
+ const placements = [
+ 'top-start', 'top', 'top-end',
+ 'bottom-start', 'bottom', 'bottom-end',
+ 'right-start', 'right', 'right-end',
+ 'left-start', 'left', 'left-end'
+ ]
- this.toggle = this.toggle.bind(this);
- this.state = {
- tooltipOpen: false,
- };
- }
+ return (
+ <>
+
+
+ Tooltips
+
+
+
+ {/*eslint-disable-next-line*/}
- toggle() {
- this.setState({
- tooltipOpen: !this.state.tooltipOpen,
- });
- }
+
+ Hover over the links below to see tooltips:
+
- render() {
- return (
-
-
-
- Tooltip Content!
-
-
- );
- }
-}
+
+ 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
+
-class Tooltips extends Component {
+ freegan cred raw denim single-origin coffee viral.
+
+
+
- constructor(props) {
- super(props);
+
- this.toggle = this.toggle.bind(this);
- this.state = {
- tooltipOpen: [false, false],
- tooltips: [
- {
- placement: 'top',
- text: 'Top',
- },
- {
- placement: 'bottom',
- text: 'Bottom',
- },
- {
- placement: 'left',
- text: 'Left',
- },
- {
- placement: 'right',
- text: 'Right',
- },
- ],
- };
- }
-
- toggle(i) {
- const newArray = this.state.tooltipOpen.map((element, index) => {
- return (index === i ? !element : false);
- });
- this.setState({
- tooltipOpen: newArray,
- });
- }
-
- render() {
- return (
-
-
-
- Tooltips
-
-
-
- {/*eslint-disable-next-line*/}
- Somewhere in here is a tooltip.
- {this.toggle(0);}}>
- Hello world!
-
-
-
-
-
- Tooltip
- disable autohide
-
-
- {/*eslint-disable-next-line*/}
- Sometimes you need to allow users to select text within a tooltip.
- {this.toggle(1);}}>
- Try to select this text!
-
-
-
-
-
- Tooltip
- list
-
-
- {this.state.tooltips.map((tooltip, i) => {
- return ;
- })}
-
-
-
-
- Tooltip
- uncontrolled
-
-
- {/*eslint-disable-next-line*/}
- Somewhere in here is a tooltip.
-
- Hello world!
-
-
-
-
- );
- }
+
+
+ Tooltips
+ placement
+
+
+
+
+ {placements.map(placement => {
+ return (
+
+
+ { placement }
+
+
+ )
+ })}
+
+
+
+
+
+ )
}
export default Tooltips;
diff --git a/src/views/Base/Tooltips/Tooltips.test.js b/src/views/Base/Tooltips/Tooltips.test.js
deleted file mode 100644
index 7e2a90c..0000000
--- a/src/views/Base/Tooltips/Tooltips.test.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Tooltips from './Tooltips';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- document.body.appendChild(div);
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Base/Tooltips/package.json b/src/views/Base/Tooltips/package.json
deleted file mode 100644
index 86e0504..0000000
--- a/src/views/Base/Tooltips/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Tooltips",
- "version": "0.0.0",
- "private": true,
- "main": "./Tooltips.js"
-}
diff --git a/src/views/Base/index.js b/src/views/Base/index.js
deleted file mode 100644
index 0daa89b..0000000
--- a/src/views/Base/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Breadcrumbs from './Breadcrumbs';
-import Cards from './Cards';
-import Carousels from './Carousels';
-import Collapses from './Collapses';
-import Dropdowns from './Dropdowns';
-import Forms from './Forms';
-import Jumbotrons from './Jumbotrons';
-import ListGroups from './ListGroups';
-import Navbars from './Navbars';
-import Navs from './Navs';
-import Popovers from './Popovers';
-import Paginations from './Paginations';
-import ProgressBar from './ProgressBar';
-import Switches from './Switches';
-import Tables from './Tables';
-import Tabs from './Tabs';
-import Tooltips from './Tooltips';
-
-export {
- Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Forms, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Switches, Tables, Tabs, Tooltips, Paginations
-};
-
diff --git a/src/views/Buttons/BrandButtons/BrandButtons.js b/src/views/Buttons/BrandButtons/BrandButtons.js
index 5ddfe9b..74f2798 100644
--- a/src/views/Buttons/BrandButtons/BrandButtons.js
+++ b/src/views/Buttons/BrandButtons/BrandButtons.js
@@ -1,324 +1,167 @@
-import React, { Component } from 'react';
-import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
+import React from 'react'
+import {
+ CButton,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCol,
+ CRow
+} from '@coreui/react'
+import { CIcon } from '@coreui/icons-react'
-class BrandButtons extends Component {
- render() {
- return (
-
-
-
-
-
-
- Brand Button
- Usage ex.
-
- <Button className="btn-facebook btn-brand"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
-
-
-
- Size Small
- Add this class .btn-sm
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Size Normal
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Size Large
- Add this class .btn-lg
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+const BrandButtons = () => {
+ return (
+
+
+
+
+ Brand button
+
+
+ Size Small
+ Add this class .btn-sm
+
+
+ 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
+
+ Size Large
+ Add this class .btn-lg
+
+
+ Facebook
+ Twitter
+ LinkedIn
+ Flickr
+ Tumblr
+ Xing
+ Github
+ StackOverflow
+ YouTube
+ Dribbble
+ Instagram
+ Pinterest
+ VK
+ Yahoo
+ Behance
+ Reddit
+ Vimeo
+
+
+
+
-
-
-
-
- Brand Button
- Icons only. Usage ex.
-
- <Button className="btn-facebook btn-brand icon"><i className="fa fa-facebook"></i></Button>
-
-
-
- Size Small
- Add this class .btn-sm
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Size Normal
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Size Large
- Add this class .btn-lg
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Brand Button
- Text only. Usage ex.
-
- <Button className="btn-facebook btn-brand text"><span>Facebook</span></Button>
-
-
-
- Size Small
- Add this class .btn-sm
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Size Normal
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Size Large
- Add this class .btn-lg
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
+
+
+
+ Brand button
+ only icons
+
+
+ Size Small
+ Add this class .btn-sm
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Size Normal
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Size Large
+ Add this class .btn-lg
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
}
-export default BrandButtons;
+export default BrandButtons
diff --git a/src/views/Buttons/BrandButtons/BrandButtons.test.js b/src/views/Buttons/BrandButtons/BrandButtons.test.js
deleted file mode 100644
index 01e6f9a..0000000
--- a/src/views/Buttons/BrandButtons/BrandButtons.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import BrandButtons from './';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Buttons/BrandButtons/package.json b/src/views/Buttons/BrandButtons/package.json
deleted file mode 100644
index 41d8874..0000000
--- a/src/views/Buttons/BrandButtons/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "BrandButtons",
- "version": "0.0.0",
- "private": true,
- "main": "./BrandButtons.js"
-}
diff --git a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js b/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js
index 4bc5243..ee8e8d9 100644
--- a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js
+++ b/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js
@@ -1,290 +1,428 @@
-import React, { Component } from 'react';
-import { Button, ButtonDropdown, Card, CardBody, CardHeader, Col, DropdownItem, DropdownMenu, DropdownToggle, Row } from 'reactstrap';
+import React from 'react'
+import {
+ CButton,
+ CForm,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCol,
+ CDropdown,
+ CDropdownDivider,
+ CDropdownHeader,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+ CRow,
+ CFormGroup,
+ CLabel,
+ CInput,
+ CInputCheckbox
+} from '@coreui/react'
-class ButtonDropdowns extends Component {
+const ButtonDropdowns = () => {
+ return (
+
+
+
+
+ Dropdowns
+
+
+
- constructor(props) {
- super(props);
+
+
+ Dropdown button
+
+
+ Header
+ Action Disabled
+ Action
+
+ Another Action
+
+
- this.toggle = this.toggle.bind(this);
- this.state = {
- dropdownOpen: new Array(19).fill(false),
- };
- }
+
- toggle(i) {
- const newArray = this.state.dropdownOpen.map((element, index) => { return (index === i ? !element : false); });
- this.setState({
- dropdownOpen: newArray,
- });
- }
+
+
+ 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
+
+
- render() {
- return (
-
-
-
-
-
- Button Dropdown
-
-
-
- { this.toggle(0); }}>
-
- Button Dropdown
-
-
- Header
- Action Disabled
- Action
-
- Another Action
-
-
-
-
-
-
- Single button dropdowns
-
-
- { this.toggle(1); }}>
-
- Primary
-
-
- Header
- Action Disabled
- Action
-
- Another Action
-
-
- { this.toggle(2); }}>
-
- Secondary
-
-
- Header
- Action Disabled
- Action
-
- Another Action
-
-
- { this.toggle(3); }}>
-
- Success
-
-
- Header
- Action Disabled
- Action
-
- Another Action
-
-
- { this.toggle(4); }}>
-
- Info
-
-
- Header
- Action Disabled
- Action
-
- Another Action
-
-
- { this.toggle(5); }}>
-
- Warning
-
-
- Header
- Action Disabled
- Action
-
- Another Action
-
-
- { this.toggle(6); }}>
-
- Danger
-
-
- Header
- Action Disabled
- Action
-
- Another Action
-
-
-
-
-
-
- Split button dropdowns
-
-
- { this.toggle(7); }}>
-
-
-
- Header
- Action Disabled
- Action
-
- Another Action
-
-
- { this.toggle(8); }}>
-
-
-
- Header
- Action Disabled
- Action
-
- Another Action
-
-
- { this.toggle(9); }}>
-
-
-
- Header
- Action Disabled
- Action
-
- Another Action
-
-
- { this.toggle(10); }}>
-
-
-
- Header
- Action Disabled
- Action
-
- Another Action
-
-
- { this.toggle(11); }}>
-
-
-
- Header
- Action Disabled
- Action
-
- Another Action
-
-
- { this.toggle(12); }}>
-
-
-
- Header
- Action Disabled
- Action
-
- Another Action
-
-
-
-
-
-
- Dropdown directions
-
-
- { this.toggle(13); }}>
-
- Direction Up
-
-
- Header
- Action Disabled
- Action
- Another Action
-
-
- { this.toggle(14); }}>
-
- Direction Left
-
-
- Header
- Action Disabled
- Action
- Another Action
-
-
- { this.toggle(15); }}>
-
- Direction Right
-
-
- Header
- Action Disabled
- Action
- Another Action
-
-
- { this.toggle(16); }}>
-
- Default Down
-
-
- Header
- Action Disabled
- Action
- Another Action
-
-
-
-
-
-
- Button Dropdown sizing
-
-
- { this.toggle(17); }}>
-
- Large Button
-
-
- Header
- Action Disabled
- Action
- Another Action
-
-
- { this.toggle(18); }}>
-
- Small 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
+
+
+
+
+
+
+
+ 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
+
+
+
+
+ Remember me
+
+
+ Sign in
+
+
+
+ Register
+ Forgot password?
+
+
+
+
+
+
+
+ )
}
-export default ButtonDropdowns;
+export default ButtonDropdowns
diff --git a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.test.js b/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.test.js
deleted file mode 100644
index 26d3c61..0000000
--- a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.test.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { mount } from 'enzyme'
-import ButtonDropdowns from './ButtonDropdowns';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
-it('toggle click without crashing', () => {
- const wrapper = mount(
);
- for (let i=0; i<19; i++) {
- let ButtonDropdown = wrapper.find('button.dropdown-toggle').at(i);
- ButtonDropdown.simulate('click');
- expect(wrapper.state().dropdownOpen[i]).toEqual(true);
- }
- wrapper.unmount()
-});
-
diff --git a/src/views/Buttons/ButtonDropdowns/package.json b/src/views/Buttons/ButtonDropdowns/package.json
deleted file mode 100644
index bfdccf6..0000000
--- a/src/views/Buttons/ButtonDropdowns/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "ButtonDropdowns",
- "version": "0.0.0",
- "private": true,
- "main": "./ButtonDropdowns.js"
-}
diff --git a/src/views/Buttons/ButtonGroups/ButtonGroups.js b/src/views/Buttons/ButtonGroups/ButtonGroups.js
index 2e3a994..be90b56 100644
--- a/src/views/Buttons/ButtonGroups/ButtonGroups.js
+++ b/src/views/Buttons/ButtonGroups/ButtonGroups.js
@@ -1,192 +1,204 @@
-import React, { Component } from 'react';
+import React from 'react'
import {
- Button,
- ButtonDropdown,
- ButtonGroup,
- ButtonToolbar,
- Card,
- CardBody,
- CardHeader,
- Col,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
- Input,
- InputGroup,
- InputGroupAddon,
- InputGroupText,
- Row,
-} from 'reactstrap';
+ CButton,
+ CDropdown,
+ CButtonGroup,
+ CButtonToolbar,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCol,
+ CDropdownItem,
+ CDropdownMenu,
+ CDropdownToggle,
+ CInput,
+ CInputGroup,
+ CInputGroupPrepend,
+ CInputGroupText,
+ CRow,
+ CCallout
+} from '@coreui/react'
-class ButtonGroups extends Component {
+const ButtonGroups = () => {
+ return (
+
+
+
+
+ Callout
+
+
+
+
+ Callout
+
+
+
- constructor(props) {
- super(props);
+
+
+ Button Group
+
+
+
+
+ Left
+ Middle
+ Right
+
+
+
- this.toggle = this.toggle.bind(this);
- this.state = {
- dropdownOpen: new Array(2).fill(false),
- };
- }
+
+
+ Button Group
+ toolbar
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+ 5
+ 6
+ 7
+
+
+ 8
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ @
+
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ @
+
+
+
+
+
+
- toggle(i) {
- const newArray = this.state.dropdownOpen.map((element, index) => { return (index === i ? !element : false); });
- this.setState({
- dropdownOpen: newArray,
- });
- }
+
+
+ Button Group
+ vertical variation
+
+
+
+ 1
+ 2
+ 3
+
+
+
- render() {
- return (
-
- );
- }
+
+
+
+
+
+ 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;
+export default ButtonGroups
diff --git a/src/views/Buttons/ButtonGroups/ButtonGroups.test.js b/src/views/Buttons/ButtonGroups/ButtonGroups.test.js
deleted file mode 100644
index 72186c4..0000000
--- a/src/views/Buttons/ButtonGroups/ButtonGroups.test.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ButtonGroups from './ButtonGroups';
-import {mount} from 'enzyme/build';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
-it('toggle click without crashing', () => {
- const wrapper = mount(
);
- for (let i=0; i<2; i++) {
- let ButtonGroup = wrapper.find('button.dropdown-toggle').at(i);
- ButtonGroup.simulate('click');
- expect(wrapper.state().dropdownOpen[i]).toEqual(true);
- }
- wrapper.unmount()
-});
diff --git a/src/views/Buttons/ButtonGroups/package.json b/src/views/Buttons/ButtonGroups/package.json
deleted file mode 100644
index 6f9bfb1..0000000
--- a/src/views/Buttons/ButtonGroups/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "ButtonGroups",
- "version": "0.0.0",
- "private": true,
- "main": "./ButtonGroups.js"
-}
diff --git a/src/views/Buttons/Buttons/Buttons.js b/src/views/Buttons/Buttons/Buttons.js
index 5b45a81..2c2d483 100644
--- a/src/views/Buttons/Buttons/Buttons.js
+++ b/src/views/Buttons/Buttons/Buttons.js
@@ -1,669 +1,674 @@
-import React, { Component } from 'react';
-import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
+import React from 'react'
+import {
+ CButton,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCol,
+ CRow
+} from '@coreui/react'
+import { CIcon } from '@coreui/icons-react'
-class Buttons extends Component {
- render() {
- return (
-
-
-
- Standard Buttons
-
-
-
-
- Normal
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Active State
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Disabled
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Outline Buttons
-
-
-
- Use outline prop
-
-
-
- Normal
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Active State
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Disabled
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Ghost Buttons
-
-
-
- Use
- .btn-ghost-* class for ghost buttons.
-
-
-
- Normal
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Active State
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Disabled
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Square Buttons
-
-
-
- Use
- .btn-square class for square buttons.
-
-
-
- Normal
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Active State
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Disabled
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Pill Buttons
-
-
-
- Use
- .btn-pill class for pill buttons.
-
-
-
- Normal
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Active State
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Disabled
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Sizes
-
-
- Fancy larger or smaller buttons? Add size="lg" or size="sm" for additional sizes.
-
-
- Small
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Normal
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Large
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- With Icons
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Block Level Buttons
-
-
- Add prop block
-
-
-
-
-
-
-
-
-
-
-
-
-
- Block Level Buttons
-
-
- Add prop block
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
+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
+
+
+
+
+
+
+ variant="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
+
+
+
+
+
+
+
+ variant="ghost" Buttons
+
+
+
+ Use .btn-ghost-* class for variant="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
+
+
+
+
+
+
+
+
+
+ Block 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
+
+
+
+
+
+
+ Block 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;
+export default Buttons
diff --git a/src/views/Buttons/Buttons/Buttons.test.js b/src/views/Buttons/Buttons/Buttons.test.js
deleted file mode 100644
index 55f00c4..0000000
--- a/src/views/Buttons/Buttons/Buttons.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Buttons from './Buttons';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Buttons/Buttons/package.json b/src/views/Buttons/Buttons/package.json
deleted file mode 100644
index 61422c1..0000000
--- a/src/views/Buttons/Buttons/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Buttons",
- "version": "0.0.0",
- "private": true,
- "main": "./Buttons.js"
-}
diff --git a/src/views/Buttons/index.js b/src/views/Buttons/index.js
deleted file mode 100644
index ae97260..0000000
--- a/src/views/Buttons/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import ButtonDropdowns from './ButtonDropdowns';
-import ButtonGroups from './ButtonGroups';
-import Buttons from './Buttons';
-import BrandButtons from './BrandButtons';
-
-export {
- ButtonDropdowns, ButtonGroups, Buttons, BrandButtons
-}
diff --git a/src/views/Charts/ChartBarSimple.js b/src/views/Charts/ChartBarSimple.js
new file mode 100644
index 0000000..1b07eb9
--- /dev/null
+++ b/src/views/Charts/ChartBarSimple.js
@@ -0,0 +1,76 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { getColor } from '@coreui/utils/src'
+import { CCharts } from '@coreui/react-chartjs'
+
+const ChartBarSimple = props => {
+
+ const {
+ backgroundColor,
+ pointHoverBackgroundColor,
+ dataPoints,
+ label,
+ pointed,
+ ...attributes
+ } = props
+
+ const defaultDatasets = (()=>{
+ return [
+ {
+ data: dataPoints,
+ backgroundColor: getColor(backgroundColor),
+ pointHoverBackgroundColor: getColor(pointHoverBackgroundColor),
+ label: label,
+ barPercentage: 0.5,
+ categoryPercentage: 1
+ }
+ ]
+ })()
+
+ const defaultOptions = (()=>{
+ return {
+ maintainAspectRatio: false,
+ legend: {
+ display: false
+ },
+ scales: {
+ xAxes: [{
+ display: false
+ }],
+ yAxes: [{
+ display: false
+ }]
+ }
+ }
+ })()
+
+ // render
+ return (
+
+ )
+}
+
+ChartBarSimple.propTypes = {
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string,
+ //
+ backgroundColor: PropTypes.string,
+ pointHoverBackgroundColor: PropTypes.string,
+ dataPoints: PropTypes.array,
+ label: PropTypes.string,
+ 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'
+};
+
+export default ChartBarSimple
diff --git a/src/views/Charts/ChartLineSimple.js b/src/views/Charts/ChartLineSimple.js
new file mode 100644
index 0000000..3cf8f14
--- /dev/null
+++ b/src/views/Charts/ChartLineSimple.js
@@ -0,0 +1,153 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { getColor, deepObjectsMerge } from '@coreui/utils/src'
+import { CCharts } from '@coreui/react-chartjs'
+
+const ChartLineSimple = props => {
+
+ const {
+ borderColor,
+ backgroundColor,
+ pointHoverBackgroundColor,
+ dataPoints,
+ label,
+ pointed,
+ ...attributes
+ } = props
+
+ const pointHoverColor = (()=>{
+ if (pointHoverBackgroundColor) {
+ return pointHoverBackgroundColor
+ } else if (backgroundColor !== 'transparent') {
+ return backgroundColor
+ }
+ return borderColor
+ })()
+
+ const defaultDatasets = (()=>{
+ return [
+ {
+ data: dataPoints,
+ borderColor: getColor(borderColor),
+ backgroundColor: getColor(backgroundColor),
+ pointBackgroundColor: getColor(pointHoverColor),
+ pointHoverBackgroundColor: getColor(pointHoverColor),
+ label
+ }
+ ]
+ })()
+
+ const pointedOptions = (()=>{
+ return {
+ scales: {
+ xAxes: [
+ {
+ offset: true,
+ gridLines: {
+ color: 'transparent',
+ zeroLineColor: 'transparent'
+ },
+ ticks: {
+ fontSize: 2,
+ fontColor: 'transparent'
+ }
+ }
+ ],
+ yAxes: [
+ {
+ display: false,
+ ticks: {
+ display: false,
+ min: Math.min.apply(Math, dataPoints) - 5,
+ max: Math.max.apply(Math, dataPoints) + 5
+ }
+ }
+ ]
+ },
+ elements: {
+ line: {
+ borderWidth: 1
+ },
+ point: {
+ radius: 4,
+ hitRadius: 10,
+ hoverRadius: 4
+ }
+ }
+ }
+ })()
+
+ const straightOptions = (()=>{
+ return {
+ scales: {
+ xAxes: [{
+ display: false
+ }],
+ yAxes: [{
+ display: false
+ }]
+ },
+ elements: {
+ line: {
+ borderWidth: 2
+ },
+ point: {
+ radius: 0,
+ hitRadius: 10,
+ hoverRadius: 4
+ }
+ }
+ }
+ })()
+
+ const defaultOptions = (()=>{
+ const options = pointed ? pointedOptions : straightOptions
+ return Object.assign({}, options, {
+ maintainAspectRatio: false,
+ legend: {
+ display: false
+ }
+ })
+ })()
+
+ const computedDatasets = (() => {
+ return deepObjectsMerge(defaultDatasets, attributes.datasets || {})
+ })()
+
+ const computedOptions = (() => {
+ return deepObjectsMerge(defaultOptions, attributes.options || {})
+ })()
+
+ // render
+
+ return (
+
+ )
+}
+
+ChartLineSimple.propTypes = {
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string,
+ //
+ borderColor: PropTypes.string,
+ backgroundColor: PropTypes.string,
+ pointHoverBackgroundColor: PropTypes.string,
+ dataPoints: PropTypes.array,
+ label: PropTypes.string,
+ 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'
+};
+
+export default ChartLineSimple
diff --git a/src/views/Charts/Charts.js b/src/views/Charts/Charts.js
index 509a520..2fdf142 100644
--- a/src/views/Charts/Charts.js
+++ b/src/views/Charts/Charts.js
@@ -1,255 +1,217 @@
-import React, { Component } from 'react';
-import { Bar, Doughnut, Line, Pie, Polar, Radar } from 'react-chartjs-2';
-import { Card, CardBody, CardColumns, CardHeader } from 'reactstrap';
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
+import React from 'react'
+import {
+ CCard,
+ CCardBody,
+ CCardGroup,
+ CCardHeader
+} from '@coreui/react'
+import { CCharts } from '@coreui/react-chartjs'
-const line = {
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [
- {
- label: 'My First dataset',
- fill: false,
- lineTension: 0.1,
- backgroundColor: 'rgba(75,192,192,0.4)',
- borderColor: 'rgba(75,192,192,1)',
- borderCapStyle: 'butt',
- borderDash: [],
- borderDashOffset: 0.0,
- borderJoinStyle: 'miter',
- pointBorderColor: 'rgba(75,192,192,1)',
- pointBackgroundColor: '#fff',
- pointBorderWidth: 1,
- pointHoverRadius: 5,
- pointHoverBackgroundColor: 'rgba(75,192,192,1)',
- pointHoverBorderColor: 'rgba(220,220,220,1)',
- pointHoverBorderWidth: 2,
- pointRadius: 1,
- pointHitRadius: 10,
- data: [65, 59, 80, 81, 56, 55, 40],
- },
- ],
-};
+const Charts = () => {
-const bar = {
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [
- {
- label: 'My First dataset',
- backgroundColor: 'rgba(255,99,132,0.2)',
- borderColor: 'rgba(255,99,132,1)',
- borderWidth: 1,
- hoverBackgroundColor: 'rgba(255,99,132,0.4)',
- hoverBorderColor: 'rgba(255,99,132,1)',
- data: [65, 59, 80, 81, 56, 55, 40],
- },
- ],
-};
+ return (
+
+
+
+ Bar Chart
+
+
+
+
+
+
-const doughnut = {
- labels: [
- 'Red',
- 'Green',
- 'Yellow',
- ],
- datasets: [
- {
- data: [300, 50, 100],
- backgroundColor: [
- '#FF6384',
- '#36A2EB',
- '#FFCE56',
- ],
- hoverBackgroundColor: [
- '#FF6384',
- '#36A2EB',
- '#FFCE56',
- ],
- }],
-};
+
+
+ Doughnut Chart
+
+
+
+
+
-const radar = {
- labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
- datasets: [
- {
- label: 'My First dataset',
- backgroundColor: 'rgba(179,181,198,0.2)',
- borderColor: 'rgba(179,181,198,1)',
- pointBackgroundColor: 'rgba(179,181,198,1)',
- pointBorderColor: '#fff',
- pointHoverBackgroundColor: '#fff',
- pointHoverBorderColor: 'rgba(179,181,198,1)',
- data: [65, 59, 90, 81, 56, 55, 40],
- },
- {
- label: 'My Second dataset',
- backgroundColor: 'rgba(255,99,132,0.2)',
- borderColor: 'rgba(255,99,132,1)',
- pointBackgroundColor: 'rgba(255,99,132,1)',
- pointBorderColor: '#fff',
- pointHoverBackgroundColor: '#fff',
- pointHoverBorderColor: 'rgba(255,99,132,1)',
- data: [28, 48, 40, 19, 96, 27, 100],
- },
- ],
-};
+
+
+ Line Chart
+
+
+
+
+
-const pie = {
- labels: [
- 'Red',
- 'Green',
- 'Yellow',
- ],
- datasets: [
- {
- data: [300, 50, 100],
- backgroundColor: [
- '#FF6384',
- '#36A2EB',
- '#FFCE56',
- ],
- hoverBackgroundColor: [
- '#FF6384',
- '#36A2EB',
- '#FFCE56',
- ],
- }],
-};
+
+
+ Pie Chart
+
+
+
+
+
-const polar = {
- datasets: [
- {
- data: [
- 11,
- 16,
- 7,
- 3,
- 14,
- ],
- backgroundColor: [
- '#FF6384',
- '#4BC0C0',
- '#FFCE56',
- '#E7E9ED',
- '#36A2EB',
- ],
- label: 'My dataset' // for legend
- }],
- labels: [
- 'Red',
- 'Green',
- 'Yellow',
- 'Grey',
- 'Blue',
- ],
-};
+
+
+ Polar Area Chart
+
+
+
+
+
-const options = {
- tooltips: {
- enabled: false,
- custom: CustomTooltips
- },
- maintainAspectRatio: false
+
+
+ Radar Chart
+
+
+
+
+
+
+ )
}
-class Charts extends Component {
- render() {
- return (
-
-
-
-
- Line Chart
-
-
-
-
-
-
-
-
-
-
- Bar Chart
-
-
-
-
-
-
-
-
-
-
- Doughnut Chart
-
-
-
-
-
-
-
-
-
-
- Radar Chart
-
-
-
-
-
-
-
-
-
-
- Pie Chart
-
-
-
-
-
-
-
-
- Polar Area Chart
-
-
-
-
-
-
-
-
- );
- }
-}
-
-export default Charts;
+export default Charts
diff --git a/src/views/Charts/Charts.test.js b/src/views/Charts/Charts.test.js
deleted file mode 100644
index b8e9c1a..0000000
--- a/src/views/Charts/Charts.test.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Charts from './Charts';
-
-jest.mock('react-chartjs-2', () => ({
- Line: () => null,
- Polar: () => null,
- Pie: () => null,
- Radar: () => null,
- Bar: () => null,
- Doughnut: () => null,
-}));
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
\ No newline at end of file
diff --git a/src/views/Charts/MainChartExample.js b/src/views/Charts/MainChartExample.js
new file mode 100644
index 0000000..c397c6b
--- /dev/null
+++ b/src/views/Charts/MainChartExample.js
@@ -0,0 +1,132 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { CCharts } from '@coreui/react-chartjs'
+import { getColor, hexToRgba } from '@coreui/utils/src'
+
+const MainChartExample = props => {
+
+ const {
+ borderColor,
+ backgroundColor,
+ pointHoverBackgroundColor,
+ dataPoints,
+ label,
+ pointed,
+ ...attributes
+ } = props
+
+ const random = (min, max)=>{
+ return Math.floor(Math.random() * (max - min + 1) + min)
+ }
+
+ const defaultDatasets = (()=>{
+ const brandSuccess = getColor('success') || '#4dbd74'
+ const brandInfo = getColor('info') || '#20a8d8'
+ const brandDanger = getColor('danger') || '#f86c6b'
+ 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 (
+
+ )
+
+}
+
+MainChartExample.propTypes = {
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string,
+ //
+ borderColor: PropTypes.string,
+ backgroundColor: PropTypes.string,
+ pointHoverBackgroundColor: PropTypes.string,
+ dataPoints: PropTypes.array,
+ label: PropTypes.string,
+ pointed: PropTypes.bool
+};
+
+MainChartExample.defaultProps = {
+ borderColor: 'rgba(255,255,255,.55)',
+ backgroundColor: 'transparent',
+ dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
+ label: 'Sales'
+};
+
+export default MainChartExample
diff --git a/src/views/Charts/package.json b/src/views/Charts/package.json
deleted file mode 100644
index 19793aa..0000000
--- a/src/views/Charts/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Charts",
- "version": "0.0.0",
- "private": true,
- "main": "./Charts.js"
-}
diff --git a/src/views/Dashboard/Dashboard.js b/src/views/Dashboard/Dashboard.js
index 3a7a20e..e36783d 100644
--- a/src/views/Dashboard/Dashboard.js
+++ b/src/views/Dashboard/Dashboard.js
@@ -1,914 +1,342 @@
-import React, { Component, lazy, Suspense } from 'react';
-import { Bar, Line } from 'react-chartjs-2';
+import React, { lazy } from 'react'
import {
- Badge,
- Button,
- ButtonDropdown,
- ButtonGroup,
- ButtonToolbar,
- Card,
- CardBody,
- CardFooter,
- CardHeader,
- CardTitle,
- Col,
- Dropdown,
- DropdownItem,
- DropdownMenu,
- DropdownToggle,
- Progress,
- Row,
- Table,
-} from 'reactstrap';
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
-import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
+ CBadge,
+ CButton,
+ CButtonGroup,
+ CCard,
+ CCardBody,
+ CCardFooter,
+ CCardHeader,
+ CCol,
+ CProgress,
+ CRow,
+ CCallout
+} from '@coreui/react'
+import { CIcon } from '@coreui/icons-react'
-const Widget03 = lazy(() => import('../../views/Widgets/Widget03'));
+import MainChartExample from '../Charts/MainChartExample.js'
-const brandPrimary = getStyle('--primary')
-const brandSuccess = getStyle('--success')
-const brandInfo = getStyle('--info')
-const brandWarning = getStyle('--warning')
-const brandDanger = getStyle('--danger')
+const WidgetsDropdown = lazy(() => import('../Widgets/WidgetsDropdown.js'))
+const WidgetsBrand = lazy(() => import('../Widgets/WidgetsBrand.js'))
-// Card Chart 1
-const cardChartData1 = {
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [
- {
- label: 'My First dataset',
- backgroundColor: brandPrimary,
- borderColor: 'rgba(255,255,255,.55)',
- data: [65, 59, 84, 84, 51, 55, 40],
- },
- ],
-};
+const Dashboard = () => {
+ return (
+ <>
+
+
+
+
+
+ Traffic
+ November 2017
+
+
+
+
+
+
+ {
+ ['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%)
+
+
+
+
+
-const cardChartOpts1 = {
- tooltips: {
- enabled: false,
- custom: CustomTooltips
- },
- maintainAspectRatio: false,
- legend: {
- display: false,
- },
- scales: {
- xAxes: [
- {
- gridLines: {
- color: 'transparent',
- zeroLineColor: 'transparent',
- },
- ticks: {
- fontSize: 2,
- fontColor: 'transparent',
- },
+
- }],
- yAxes: [
- {
- display: false,
- ticks: {
- display: false,
- min: Math.min.apply(Math, cardChartData1.datasets[0].data) - 5,
- max: Math.max.apply(Math, cardChartData1.datasets[0].data) + 5,
- },
- }],
- },
- elements: {
- line: {
- borderWidth: 1,
- },
- point: {
- radius: 4,
- hitRadius: 10,
- hoverRadius: 4,
- },
- }
-}
+
+
+
+
+ Traffic {' & '} Sales
+
+
+
+
+
+
+
+ New Clients
+
+ 9,123
+
+
+
+
+ Recurring Clients
+
+ 22,643
+
+
+
-// Card Chart 2
-const cardChartData2 = {
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [
- {
- label: 'My First dataset',
- backgroundColor: brandInfo,
- borderColor: 'rgba(255,255,255,.55)',
- data: [1, 18, 9, 17, 34, 22, 11],
- },
- ],
-};
+
-const cardChartOpts2 = {
- tooltips: {
- enabled: false,
- custom: CustomTooltips
- },
- maintainAspectRatio: false,
- legend: {
- display: false,
- },
- scales: {
- xAxes: [
- {
- gridLines: {
- color: 'transparent',
- zeroLineColor: 'transparent',
- },
- ticks: {
- fontSize: 2,
- fontColor: 'transparent',
- },
-
- }],
- yAxes: [
- {
- display: false,
- ticks: {
- display: false,
- min: Math.min.apply(Math, cardChartData2.datasets[0].data) - 5,
- max: Math.max.apply(Math, cardChartData2.datasets[0].data) + 5,
- },
- }],
- },
- elements: {
- line: {
- tension: 0.00001,
- borderWidth: 1,
- },
- point: {
- radius: 4,
- hitRadius: 10,
- hoverRadius: 4,
- },
- },
-};
-
-// Card Chart 3
-const cardChartData3 = {
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [
- {
- label: 'My First dataset',
- backgroundColor: 'rgba(255,255,255,.2)',
- borderColor: 'rgba(255,255,255,.55)',
- data: [78, 81, 80, 45, 34, 12, 40],
- },
- ],
-};
-
-const cardChartOpts3 = {
- tooltips: {
- enabled: false,
- custom: CustomTooltips
- },
- maintainAspectRatio: false,
- legend: {
- display: false,
- },
- scales: {
- xAxes: [
- {
- display: false,
- }],
- yAxes: [
- {
- display: false,
- }],
- },
- elements: {
- line: {
- borderWidth: 2,
- },
- point: {
- radius: 0,
- hitRadius: 10,
- hoverRadius: 4,
- },
- },
-};
-
-// Card Chart 4
-const cardChartData4 = {
- labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
- datasets: [
- {
- label: 'My First dataset',
- backgroundColor: 'rgba(255,255,255,.3)',
- borderColor: 'transparent',
- data: [78, 81, 80, 45, 34, 12, 40, 75, 34, 89, 32, 68, 54, 72, 18, 98],
- barPercentage: 0.6,
- },
- ],
-};
-
-const cardChartOpts4 = {
- tooltips: {
- enabled: false,
- custom: CustomTooltips
- },
- maintainAspectRatio: false,
- legend: {
- display: false,
- },
- scales: {
- xAxes: [
- {
- display: false,
- }],
- yAxes: [
- {
- display: false,
- }],
- },
-};
-
-// Social Box Chart
-const socialBoxData = [
- { data: [65, 59, 84, 84, 51, 55, 40], label: 'facebook' },
- { data: [1, 13, 9, 17, 34, 41, 38], label: 'twitter' },
- { data: [78, 81, 80, 45, 34, 12, 40], label: 'linkedin' },
- { data: [35, 23, 56, 22, 97, 23, 64], label: 'google' },
-];
-
-const makeSocialBoxData = (dataSetNo) => {
- const dataset = socialBoxData[dataSetNo];
- const data = {
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [
- {
- backgroundColor: 'rgba(255,255,255,.1)',
- borderColor: 'rgba(255,255,255,.55)',
- pointHoverBackgroundColor: '#fff',
- borderWidth: 2,
- data: dataset.data,
- label: dataset.label,
- },
- ],
- };
- return () => data;
-};
-
-const socialChartOpts = {
- tooltips: {
- enabled: false,
- custom: CustomTooltips
- },
- responsive: true,
- maintainAspectRatio: false,
- legend: {
- display: false,
- },
- scales: {
- xAxes: [
- {
- display: false,
- }],
- yAxes: [
- {
- display: false,
- }],
- },
- elements: {
- point: {
- radius: 0,
- hitRadius: 10,
- hoverRadius: 4,
- hoverBorderWidth: 3,
- },
- },
-};
-
-// sparkline charts
-const sparkLineChartData = [
- {
- data: [35, 23, 56, 22, 97, 23, 64],
- label: 'New Clients',
- },
- {
- data: [65, 59, 84, 84, 51, 55, 40],
- label: 'Recurring Clients',
- },
- {
- data: [35, 23, 56, 22, 97, 23, 64],
- label: 'Pageviews',
- },
- {
- data: [65, 59, 84, 84, 51, 55, 40],
- label: 'Organic',
- },
- {
- data: [78, 81, 80, 45, 34, 12, 40],
- label: 'CTR',
- },
- {
- data: [1, 13, 9, 17, 34, 41, 38],
- label: 'Bounce Rate',
- },
-];
-
-const makeSparkLineData = (dataSetNo, variant) => {
- const dataset = sparkLineChartData[dataSetNo];
- const data = {
- labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
- datasets: [
- {
- backgroundColor: 'transparent',
- borderColor: variant ? variant : '#c2cfd6',
- data: dataset.data,
- label: dataset.label,
- },
- ],
- };
- return () => data;
-};
-
-const sparklineChartOpts = {
- tooltips: {
- enabled: false,
- custom: CustomTooltips
- },
- responsive: true,
- maintainAspectRatio: true,
- scales: {
- xAxes: [
- {
- display: false,
- }],
- yAxes: [
- {
- display: false,
- }],
- },
- elements: {
- line: {
- borderWidth: 2,
- },
- point: {
- radius: 0,
- hitRadius: 10,
- hoverRadius: 4,
- hoverBorderWidth: 3,
- },
- },
- legend: {
- display: false,
- },
-};
-
-// Main Chart
-
-//Random Numbers
-function random(min, max) {
- return Math.floor(Math.random() * (max - min + 1) + min);
-}
-
-var elements = 27;
-var data1 = [];
-var data2 = [];
-var data3 = [];
-
-for (var i = 0; i <= elements; i++) {
- data1.push(random(50, 200));
- data2.push(random(80, 100));
- data3.push(65);
-}
-
-const mainChart = {
- 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'],
- datasets: [
- {
- label: 'My First dataset',
- backgroundColor: hexToRgba(brandInfo, 10),
- borderColor: brandInfo,
- pointHoverBackgroundColor: '#fff',
- borderWidth: 2,
- data: data1,
- },
- {
- label: 'My Second dataset',
- backgroundColor: 'transparent',
- borderColor: brandSuccess,
- pointHoverBackgroundColor: '#fff',
- borderWidth: 2,
- data: data2,
- },
- {
- label: 'My Third dataset',
- backgroundColor: 'transparent',
- borderColor: brandDanger,
- pointHoverBackgroundColor: '#fff',
- borderWidth: 1,
- borderDash: [8, 5],
- data: data3,
- },
- ],
-};
-
-const mainChartOpts = {
- tooltips: {
- enabled: false,
- custom: CustomTooltips,
- intersect: true,
- mode: 'index',
- position: 'nearest',
- callbacks: {
- labelColor: function(tooltipItem, chart) {
- return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
- }
- }
- },
- maintainAspectRatio: false,
- legend: {
- display: false,
- },
- scales: {
- xAxes: [
- {
- gridLines: {
- drawOnChartArea: false,
- },
- }],
- yAxes: [
- {
- ticks: {
- beginAtZero: true,
- maxTicksLimit: 5,
- stepSize: Math.ceil(250 / 5),
- max: 250,
- },
- }],
- },
- elements: {
- point: {
- radius: 0,
- hitRadius: 10,
- hoverRadius: 4,
- hoverBorderWidth: 3,
- },
- },
-};
-
-class Dashboard extends Component {
- constructor(props) {
- super(props);
-
- this.toggle = this.toggle.bind(this);
- this.onRadioBtnClick = this.onRadioBtnClick.bind(this);
-
- this.state = {
- dropdownOpen: false,
- radioSelected: 2,
- };
- }
-
- toggle() {
- this.setState({
- dropdownOpen: !this.state.dropdownOpen,
- });
- }
-
- onRadioBtnClick(radioSelected) {
- this.setState({
- radioSelected: radioSelected,
- });
- }
-
- loading = () => Loading...
-
- render() {
-
- return (
-
-
-
-
-
-
- { this.setState({ card1: !this.state.card1 }); }}>
-
-
-
-
- Action
- Another action
- Disabled action
- Something else here
-
-
-
- 9.823
- Members online
-
-
-
-
-
-
-
-
-
-
-
- { this.setState({ card2: !this.state.card2 }); }}>
-
-
-
-
- Action
- Another action
- Something else here
-
-
-
- 9.823
- Members online
-
-
-
-
-
-
-
-
-
-
-
- { this.setState({ card3: !this.state.card3 }); }}>
-
-
-
-
- Action
- Another action
- Something else here
-
-
-
- 9.823
- Members online
-
-
-
-
-
-
-
-
-
-
-
- { this.setState({ card4: !this.state.card4 }); }}>
-
-
-
-
- Action
- Another action
- Something else here
-
-
-
- 9.823
- Members online
-
-
-
-
-
-
-
-
-
-
-
-
-
- Traffic
- November 2015
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 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%)
-
-
-
-
-
-
-
-
-
-
-
- ({ variant: 'facebook', friends: '89k', feeds: '459' })} >
-
-
-
-
-
-
-
-
-
- ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} >
-
-
-
-
-
-
-
-
-
- ({ variant: 'linkedin', contacts: '500+', feeds: '292' })} >
-
-
-
-
-
-
-
-
-
- ({ variant: 'google-plus', followers: '894', circles: '92' })} >
-
-
-
-
-
-
-
-
-
-
-
-
- Traffic {' & '} Sales
-
-
-
-
-
-
-
-
New Clients
-
-
9,123
-
-
-
-
-
Recurring Clients
-
-
22,643
-
-
-
-
-
-
-
-
- Monday
-
-
-
+
+
+
+ Monday
+
-
-
-
- Tuesday
-
-
-
+
+
+
-
+
+
+
+ Tuesday
+
-
-
-
- Thursday
-
-
-
+
+
+
-
+
+
+
+ Wednesday
+
-
-
-
- Saturday
-
-
-
+
+
+
-
+
+
+
+ Thursday
+
-
-
-
- New clients
-
-
- Recurring clients
-
+
+
+
-
-
-
-
-
-
Pageviews
-
-
78,623
-
-
-
-
-
Organic
-
-
49,123
-
-
-
-
-
-
-
-
-
-
-
- Organic Search
- 191,235 (56%)
-
-
-
-
-
- Facebook
- 51,223 (15%)
-
-
-
-
-
- Twitter
- 37,564 (11%)
-
-
-
-
-
- LinkedIn
- 27,319 (8%)
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ Friday
+
+
+
+
+
+
+
+
+
+ Saturday
+
+
+
+
+
+
+
+
+
+ Sunday
+
+
+
+
+
+
+
+
+
+ New clients
+
+
+ Recurring clients
+
+
+
+
+
+
+
+
+
+ Pageviews
+
+ 78,623
+
+
+
+
+ Organic
+
+ 49,123
+
+
+
+
+
+
+
+
+
+ Male
+ 43%
+
+
+
+
+
+
+
+ Female
+ 37%
+
+
+
+
+
+
+
+ Organic Search
+ 191,235 (56%)
+
+
+
+
+
+
+
+ Facebook
+ 51,223 (15%)
+
+
+
+
+
+
+
+ Twitter
+ 37,564 (11%)
+
+
+
+
+
+
+
+ LinkedIn
+ 27,319 (8%)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- |
+ |
User |
Country |
Usage |
Payment Method |
Activity |
-
-
+
+
-
- 
-
+
+
+
|
@@ -918,7 +346,7 @@ class Dashboard extends Component {
|
-
+
|
@@ -929,10 +357,10 @@ class Dashboard extends Component {
Jun 11, 2015 - Jul 10, 2015
-
+
|
-
+
|
Last login
@@ -941,9 +369,9 @@ class Dashboard extends Component {
|
-
- 
-
+
+
+
|
@@ -954,7 +382,7 @@ class Dashboard extends Component {
|
-
+
|
@@ -965,10 +393,10 @@ class Dashboard extends Component {
Jun 11, 2015 - Jul 10, 2015
-
+
|
-
+
|
Last login
@@ -977,9 +405,9 @@ class Dashboard extends Component {
|
-
- 
-
+
+
+
|
@@ -989,7 +417,7 @@ class Dashboard extends Component {
|
-
+
|
@@ -1000,10 +428,10 @@ class Dashboard extends Component {
Jun 11, 2015 - Jul 10, 2015
-
+
|
-
+
|
Last login
@@ -1012,9 +440,9 @@ class Dashboard extends Component {
|
-
- 
-
+
+
+
|
@@ -1024,7 +452,7 @@ class Dashboard extends Component {
|
-
+
|
@@ -1035,10 +463,10 @@ class Dashboard extends Component {
Jun 11, 2015 - Jul 10, 2015
-
+
|
-
+
|
Last login
@@ -1047,9 +475,9 @@ class Dashboard extends Component {
|
-
- 
-
+
+
+
|
@@ -1059,7 +487,7 @@ class Dashboard extends Component {
|
-
+
|
@@ -1070,10 +498,10 @@ class Dashboard extends Component {
Jun 11, 2015 - Jul 10, 2015
-
+
|
-
+
|
Last login
@@ -1082,9 +510,9 @@ class Dashboard extends Component {
|
-
- 
-
+
+
+
|
@@ -1094,7 +522,7 @@ class Dashboard extends Component {
|
-
+
|
@@ -1105,25 +533,25 @@ class Dashboard extends Component {
Jun 11, 2015 - Jul 10, 2015
-
+
|
-
+
|
Last login
Yesterday
|
-
-
-
-
-
-
-
- );
- }
+
+
+
+
+
+
+
+
+ )
}
-export default Dashboard;
+export default Dashboard
diff --git a/src/views/Dashboard/Dashboard.test.js b/src/views/Dashboard/Dashboard.test.js
deleted file mode 100644
index 01a74c6..0000000
--- a/src/views/Dashboard/Dashboard.test.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// import React from 'react';
-// import ReactDOM from 'react-dom';
-// import Dashboard from './Dashboard';
-// import { shallow } from 'enzyme'
-
-// jest.mock('react-chartjs-2', () => ({
-// Line: () => null,
-// Bar: () => null
-// }));
-
-// it('renders without crashing', () => {
-// const div = document.createElement('div');
-// ReactDOM.render(
, div);
-// ReactDOM.unmountComponentAtNode(div);
-// });
-
-// it('renders without crashing', () => {
-// shallow(
);
-// });
-
-it('', () => {})
diff --git a/src/views/Dashboard/package.json b/src/views/Dashboard/package.json
deleted file mode 100644
index 86ec492..0000000
--- a/src/views/Dashboard/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Dashboard",
- "version": "0.0.0",
- "private": true,
- "main": "./Dashboard.js"
-}
diff --git a/src/views/Icons/Brands/Brands.js b/src/views/Icons/Brands/Brands.js
new file mode 100644
index 0000000..b9b21d6
--- /dev/null
+++ b/src/views/Icons/Brands/Brands.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
+import { CIconRaw } from '@coreui/icons-react'
+import { brandSet } from '@coreui/icons'
+
+const toKebabCase = (str) => {
+ return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+export const getIconsView = iconset => {
+ return Object.keys(iconset).map(name => (
+
+
+ {toKebabCase(name)}
+
+ ))
+}
+
+const CoreUIIcons = () => {
+ return (
+
+
+ Brand Icons / as CIconRaw{' '}
+
+
+
+
+ {getIconsView(brandSet)}
+
+
+
+ )
+}
+
+export default CoreUIIcons
diff --git a/src/views/Icons/CoreUIIcons/CoreUIIcons.js b/src/views/Icons/CoreUIIcons/CoreUIIcons.js
index 0b7bec8..fe6a5ca 100644
--- a/src/views/Icons/CoreUIIcons/CoreUIIcons.js
+++ b/src/views/Icons/CoreUIIcons/CoreUIIcons.js
@@ -1,428 +1,26 @@
-import React, { Component } from 'react';
-import { Badge, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
+import React from 'react'
+import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
+import { freeSet } from '@coreui/icons'
+import { getIconsView } from '../Brands/Brands.js'
-class CoreUIIcons extends Component {
- render() {
- return (
-
-
-
- CoreUI Icons{' '} New
-
-
-
-
-
-
- account-logout
-
-
-
- action-redo
-
-
-
- action-undo
-
-
-
- align-center
-
-
-
- align-left
-
-
-
- align-right
-
-
-
- arrow-bottom
-
-
-
- arrow-left
-
-
-
- arrow-right
-
-
-
- arrow-top
-
-
-
- ban
-
-
-
- basket-loaded
-
-
-
- bell
-
-
-
- bold
-
-
-
- bookmark
-
-
-
- briefcase
-
-
-
- british-pound
-
-
-
- brush
-
-
-
- calculator
-
-
-
- calendar
-
-
-
- cart
-
-
-
- chart
-
-
-
- check
-
-
-
- chevron-bottom
-
-
-
- chevron-left
-
-
-
- chevron-right
-
-
-
- chevron-top
-
-
-
- circle-check
-
-
-
- circle-x
-
-
-
- cloud
-
-
-
- cloud-download
-
-
-
- cloud-upload
-
-
-
- code
-
-
-
- cog
-
-
-
- comment-square
-
-
-
- credit-card
-
-
-
- cursor
-
-
-
- dashboard
-
-
-
- delete
-
-
-
- dollar
-
-
-
- drop
-
-
-
- envelope-closed
-
-
-
- envelope-letter
-
-
-
- envelope-open
-
-
-
- euro
-
-
-
- file
-
-
-
- globe
-
-
-
- graph
-
-
-
- home
-
-
-
- inbox
-
-
-
- info
-
-
-
- italic
-
-
-
- justify-center
-
-
-
- justify-left
-
-
-
- justify-right
-
-
-
- laptop
-
-
-
- layers
-
-
-
- lightbulb
-
-
-
- list
-
-
-
- location-pin
-
-
-
- lock-locked
-
-
-
- lock-unlocked
-
-
-
- magnifying-glass
-
-
-
- map
-
-
-
- monitor
-
-
-
- moon
-
-
-
- note
-
-
-
- options
-
-
-
- paperclip
-
-
-
- pencil
-
-
-
- people
-
-
-
- phone
-
-
-
- pie-chart
-
-
-
- print
-
-
-
- puzzle
-
-
-
- rss
-
-
-
- screen-desktop
-
-
-
- screen-smartphone
-
-
-
- settings
-
-
-
- share
-
-
-
- shield
-
-
-
- sort-ascending
-
-
-
- sort-descending
-
-
-
- speech
-
-
-
- speedometer
-
-
-
- star
-
-
-
- sun
-
-
-
- tablet
-
-
-
- tags
-
-
-
- task
-
-
-
- thumb-down
-
-
-
- thumb-up
-
-
-
- trash
-
-
-
- underline
-
-
-
- user
-
-
-
- user-female
-
-
-
- user-follow
-
-
-
- user-unfollow
-
-
-
- wrench
-
-
-
- yen
-
-
-
-
-
- );
- }
+const CoreUIIcons = () => {
+ return (
+
+
+ Free Icons / as CIcon{' '}
+
+
+
+
+ {getIconsView(freeSet)}
+
+
+
+ )
}
-export default CoreUIIcons;
-
+export default CoreUIIcons
diff --git a/src/views/Icons/CoreUIIcons/CoreUIIcons.test.js b/src/views/Icons/CoreUIIcons/CoreUIIcons.test.js
deleted file mode 100644
index e2ec7f9..0000000
--- a/src/views/Icons/CoreUIIcons/CoreUIIcons.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import CoreUIIcons from './CoreUIIcons';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Icons/CoreUIIcons/package.json b/src/views/Icons/CoreUIIcons/package.json
deleted file mode 100644
index a3813bf..0000000
--- a/src/views/Icons/CoreUIIcons/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "CoreUIIcons",
- "version": "0.0.0",
- "private": true,
- "main": "./CoreUIIcons.js"
-}
diff --git a/src/views/Icons/Flags/Flags.js b/src/views/Icons/Flags/Flags.js
index 05613c2..3406420 100644
--- a/src/views/Icons/Flags/Flags.js
+++ b/src/views/Icons/Flags/Flags.js
@@ -1,1022 +1,26 @@
-import React, { Component } from 'react';
-import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
+import React from 'react'
+import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
+import { getIconsView } from '../Brands/Brands.js'
+import { flagSet } from '@coreui/icons'
-class Flags extends Component {
- render() {
- return (
-
-
-
- Flags
-
-
-
-
- For using the flags inline with text add the classes .flag-icon and .flag-icon-xx (where xx is the ISO 3166-1-alpha-2
- code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well.
-
-
-
- flag-icon-ad
-
-
-
- flag-icon-ae
-
-
-
- flag-icon-af
-
-
-
- flag-icon-ag
-
-
-
- flag-icon-ai
-
-
-
- flag-icon-al
-
-
-
- flag-icon-am
-
-
-
- flag-icon-ao
-
-
-
- flag-icon-aq
-
-
-
- flag-icon-ar
-
-
-
- flag-icon-as
-
-
-
- flag-icon-at
-
-
-
- flag-icon-au
-
-
-
- flag-icon-aw
-
-
-
- flag-icon-ax
-
-
-
- flag-icon-az
-
-
-
- flag-icon-ba
-
-
-
- flag-icon-bb
-
-
-
- flag-icon-bd
-
-
-
- flag-icon-be
-
-
-
- flag-icon-bf
-
-
-
- flag-icon-bg
-
-
-
- flag-icon-bh
-
-
-
- flag-icon-bi
-
-
-
- flag-icon-bj
-
-
-
- flag-icon-bl
-
-
-
- flag-icon-bm
-
-
-
- flag-icon-bn
-
-
-
- flag-icon-bo
-
-
-
- flag-icon-bq
-
-
-
- flag-icon-br
-
-
-
- flag-icon-bs
-
-
-
- flag-icon-bt
-
-
-
- flag-icon-bv
-
-
-
- flag-icon-bw
-
-
-
- flag-icon-by
-
-
-
- flag-icon-bz
-
-
-
- flag-icon-ca
-
-
-
- flag-icon-cc
-
-
-
- flag-icon-cd
-
-
-
- flag-icon-cf
-
-
-
- flag-icon-cg
-
-
-
- flag-icon-ch
-
-
-
- flag-icon-ci
-
-
-
- flag-icon-ck
-
-
-
- flag-icon-cl
-
-
-
- flag-icon-cm
-
-
-
- flag-icon-cn
-
-
-
- flag-icon-co
-
-
-
- flag-icon-cr
-
-
-
- flag-icon-cu
-
-
-
- flag-icon-cv
-
-
-
- flag-icon-cw
-
-
-
- flag-icon-cx
-
-
-
- flag-icon-cy
-
-
-
- flag-icon-cz
-
-
-
- flag-icon-de
-
-
-
- flag-icon-dj
-
-
-
- flag-icon-dk
-
-
-
- flag-icon-dm
-
-
-
- flag-icon-do
-
-
-
- flag-icon-dz
-
-
-
- flag-icon-ec
-
-
-
- flag-icon-ee
-
-
-
- flag-icon-eg
-
-
-
- flag-icon-eh
-
-
-
- flag-icon-er
-
-
-
- flag-icon-es
-
-
-
- flag-icon-et
-
-
-
- flag-icon-fi
-
-
-
- flag-icon-fj
-
-
-
- flag-icon-fk
-
-
-
- flag-icon-fm
-
-
-
- flag-icon-fo
-
-
-
- flag-icon-fr
-
-
-
- flag-icon-ga
-
-
-
- flag-icon-gb
-
-
-
- flag-icon-gd
-
-
-
- flag-icon-ge
-
-
-
- flag-icon-gf
-
-
-
- flag-icon-gg
-
-
-
- flag-icon-gh
-
-
-
- flag-icon-gi
-
-
-
- flag-icon-gl
-
-
-
- flag-icon-gm
-
-
-
- flag-icon-gn
-
-
-
- flag-icon-gp
-
-
-
- flag-icon-gq
-
-
-
- flag-icon-gr
-
-
-
- flag-icon-gs
-
-
-
- flag-icon-gt
-
-
-
- flag-icon-gu
-
-
-
- flag-icon-gw
-
-
-
- flag-icon-gy
-
-
-
- flag-icon-hk
-
-
-
- flag-icon-hm
-
-
-
- flag-icon-hn
-
-
-
- flag-icon-hr
-
-
-
- flag-icon-ht
-
-
-
- flag-icon-hu
-
-
-
- flag-icon-id
-
-
-
- flag-icon-ie
-
-
-
- flag-icon-il
-
-
-
- flag-icon-im
-
-
-
- flag-icon-in
-
-
-
- flag-icon-io
-
-
-
- flag-icon-iq
-
-
-
- flag-icon-ir
-
-
-
- flag-icon-is
-
-
-
- flag-icon-it
-
-
-
- flag-icon-je
-
-
-
- flag-icon-jm
-
-
-
- flag-icon-jo
-
-
-
- flag-icon-jp
-
-
-
- flag-icon-ke
-
-
-
- flag-icon-kg
-
-
-
- flag-icon-kh
-
-
-
- flag-icon-ki
-
-
-
- flag-icon-km
-
-
-
- flag-icon-kn
-
-
-
- flag-icon-kp
-
-
-
- flag-icon-kr
-
-
-
- flag-icon-kw
-
-
-
- flag-icon-ky
-
-
-
- flag-icon-kz
-
-
-
- flag-icon-la
-
-
-
- flag-icon-lb
-
-
-
- flag-icon-lc
-
-
-
- flag-icon-li
-
-
-
- flag-icon-lk
-
-
-
- flag-icon-lr
-
-
-
- flag-icon-ls
-
-
-
- flag-icon-lt
-
-
-
- flag-icon-lu
-
-
-
- flag-icon-lv
-
-
-
- flag-icon-ly
-
-
-
- flag-icon-ma
-
-
-
- flag-icon-mc
-
-
-
- flag-icon-md
-
-
-
- flag-icon-me
-
-
-
- flag-icon-mf
-
-
-
- flag-icon-mg
-
-
-
- flag-icon-mh
-
-
-
- flag-icon-mk
-
-
-
- flag-icon-ml
-
-
-
- flag-icon-mm
-
-
-
- flag-icon-mn
-
-
-
- flag-icon-mo
-
-
-
- flag-icon-mp
-
-
-
- flag-icon-mq
-
-
-
- flag-icon-mr
-
-
-
- flag-icon-ms
-
-
-
- flag-icon-mt
-
-
-
- flag-icon-mu
-
-
-
- flag-icon-mv
-
-
-
- flag-icon-mw
-
-
-
- flag-icon-mx
-
-
-
- flag-icon-my
-
-
-
- flag-icon-mz
-
-
-
- flag-icon-na
-
-
-
- flag-icon-nc
-
-
-
- flag-icon-ne
-
-
-
- flag-icon-nf
-
-
-
- flag-icon-ng
-
-
-
- flag-icon-ni
-
-
-
- flag-icon-nl
-
-
-
- flag-icon-no
-
-
-
- flag-icon-np
-
-
-
- flag-icon-nr
-
-
-
- flag-icon-nu
-
-
-
- flag-icon-nz
-
-
-
- flag-icon-om
-
-
-
- flag-icon-pa
-
-
-
- flag-icon-pe
-
-
-
- flag-icon-pf
-
-
-
- flag-icon-pg
-
-
-
- flag-icon-ph
-
-
-
- flag-icon-pk
-
-
-
- flag-icon-pl
-
-
-
- flag-icon-pm
-
-
-
- flag-icon-pn
-
-
-
- flag-icon-pr
-
-
-
- flag-icon-ps
-
-
-
- flag-icon-pt
-
-
-
- flag-icon-pw
-
-
-
- flag-icon-py
-
-
-
- flag-icon-qa
-
-
-
- flag-icon-re
-
-
-
- flag-icon-ro
-
-
-
- flag-icon-rs
-
-
-
- flag-icon-ru
-
-
-
- flag-icon-rw
-
-
-
- flag-icon-sa
-
-
-
- flag-icon-sb
-
-
-
- flag-icon-sc
-
-
-
- flag-icon-sd
-
-
-
- flag-icon-se
-
-
-
- flag-icon-sg
-
-
-
- flag-icon-sh
-
-
-
- flag-icon-si
-
-
-
- flag-icon-sj
-
-
-
- flag-icon-sk
-
-
-
- flag-icon-sl
-
-
-
- flag-icon-sm
-
-
-
- flag-icon-sn
-
-
-
- flag-icon-so
-
-
-
- flag-icon-sr
-
-
-
- flag-icon-ss
-
-
-
- flag-icon-st
-
-
-
- flag-icon-sv
-
-
-
- flag-icon-sx
-
-
-
- flag-icon-sy
-
-
-
- flag-icon-sz
-
-
-
- flag-icon-tc
-
-
-
- flag-icon-td
-
-
-
- flag-icon-tf
-
-
-
- flag-icon-tg
-
-
-
- flag-icon-th
-
-
-
- flag-icon-tj
-
-
-
- flag-icon-tk
-
-
-
- flag-icon-tl
-
-
-
- flag-icon-tm
-
-
-
- flag-icon-tn
-
-
-
- flag-icon-to
-
-
-
- flag-icon-tr
-
-
-
- flag-icon-tt
-
-
-
- flag-icon-tv
-
-
-
- flag-icon-tw
-
-
-
- flag-icon-tz
-
-
-
- flag-icon-ua
-
-
-
- flag-icon-ug
-
-
-
- flag-icon-um
-
-
-
- flag-icon-us
-
-
-
- flag-icon-uy
-
-
-
- flag-icon-uz
-
-
-
- flag-icon-va
-
-
-
- flag-icon-vc
-
-
-
- flag-icon-ve
-
-
-
- flag-icon-vg
-
-
-
- flag-icon-vi
-
-
-
- flag-icon-vn
-
-
-
- flag-icon-vu
-
-
-
- flag-icon-wf
-
-
-
- flag-icon-ws
-
-
-
- flag-icon-ye
-
-
-
- flag-icon-yt
-
-
-
- flag-icon-za
-
-
-
- flag-icon-zm
-
-
-
- flag-icon-zw
-
-
-
-
-
- );
- }
+const CoreUIIcons = () => {
+ return (
+
+
+ Flag Icons / as CIconRaw{' '}
+
+
+
+
+ {getIconsView(flagSet)}
+
+
+
+ )
}
-export default Flags;
+export default CoreUIIcons
diff --git a/src/views/Icons/Flags/Flags.test.js b/src/views/Icons/Flags/Flags.test.js
deleted file mode 100644
index 0c42748..0000000
--- a/src/views/Icons/Flags/Flags.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Flags from './Flags';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Icons/Flags/package.json b/src/views/Icons/Flags/package.json
deleted file mode 100644
index 5bf64ea..0000000
--- a/src/views/Icons/Flags/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Flags",
- "version": "0.0.0",
- "private": true,
- "main": "./Flags.js"
-}
diff --git a/src/views/Icons/FontAwesome/FontAwesome.js b/src/views/Icons/FontAwesome/FontAwesome.js
deleted file mode 100644
index a53478e..0000000
--- a/src/views/Icons/FontAwesome/FontAwesome.js
+++ /dev/null
@@ -1,3702 +0,0 @@
-import React, { Component } from 'react';
-import { Alert, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
-
-class FontAwesome extends Component {
- render() {
- return (
-
-
-
- 55 New Icons in 4.7
-
-
-
-
-
address-book
-
-
-
address-book-o
-
-
-
address-card
-
-
-
address-card-o
-
-
-
bandcamp
-
-
-
bath
-
-
-
bathtub (alias)
-
-
-
drivers-license (alias)
-
-
-
drivers-license-o (alias)
-
-
-
eercast
-
-
-
envelope-open
-
-
-
envelope-open-o
-
-
-
etsy
-
-
-
free-code-camp
-
-
-
grav
-
-
-
handshake-o
-
-
-
id-badge
-
-
-
id-card
-
-
-
id-card-o
-
-
-
imdb
-
-
-
linode
-
-
-
meetup
-
-
-
microchip
-
-
-
podcast
-
-
-
quora
-
-
-
ravelry
-
-
-
s15 (alias)
-
-
-
shower
-
-
-
snowflake-o
-
-
-
superpowers
-
-
-
telegram
-
-
-
thermometer (alias)
-
-
-
thermometer-0 (alias)
-
-
-
thermometer-1 (alias)
-
-
-
thermometer-2 (alias)
-
-
-
thermometer-3 (alias)
-
-
-
thermometer-4 (alias)
-
-
-
thermometer-empty
-
-
-
thermometer-full
-
-
-
thermometer-half
-
-
-
thermometer-quarter
-
-
-
thermometer-three-quarters
-
-
-
times-rectangle (alias)
-
-
-
times-rectangle-o (alias)
-
-
-
user-circle
-
-
-
user-circle-o
-
-
-
user-o
-
-
-
vcard (alias)
-
-
-
vcard-o (alias)
-
-
-
window-close
-
-
-
window-close-o
-
-
-
window-maximize
-
-
-
window-minimize
-
-
-
window-restore
-
-
-
wpexplorer
-
-
-
-
-
- 20 New Icons in 4.5
-
-
-
-
-
bluetooth
-
-
-
-
bluetooth-b
-
-
-
-
codiepie
-
-
-
-
credit-card-alt
-
-
-
-
edge
-
-
-
-
fort-awesome
-
-
-
-
hashtag
-
-
-
-
mixcloud
-
-
-
-
modx
-
-
-
-
pause-circle
-
-
-
-
pause-circle-o
-
-
-
-
percent
-
-
-
-
product-hunt
-
-
-
-
reddit-alien
-
-
-
-
scribd
-
-
-
-
shopping-bag
-
-
-
-
shopping-basket
-
-
-
-
stop-circle
-
-
-
-
stop-circle-o
-
-
-
-
usb
-
-
-
-
-
-
-
-
- Web Application Icons
-
-
-
-
-
adjust
-
-
-
-
anchor
-
-
-
-
archive
-
-
-
-
area-chart
-
-
-
-
arrows
-
-
-
-
arrows-h
-
-
-
-
arrows-v
-
-
-
-
asterisk
-
-
-
-
at
-
-
-
-
automobile (alias)
-
-
-
-
balance-scale
-
-
-
-
ban
-
-
-
-
bank (alias)
-
-
-
-
bar-chart
-
-
-
-
bar-chart-o (alias)
-
-
-
-
barcode
-
-
-
-
bars
-
-
-
-
battery-0 (alias)
-
-
-
-
battery-1 (alias)
-
-
-
-
battery-2 (alias)
-
-
-
-
battery-3 (alias)
-
-
-
-
battery-4 (alias)
-
-
-
-
battery-empty
-
-
-
-
battery-full
-
-
-
-
battery-half
-
-
-
-
battery-quarter
-
-
-
-
battery-three-quarters
-
-
-
-
bed
-
-
-
-
beer
-
-
-
-
bell
-
-
-
-
bell-o
-
-
-
-
bell-slash
-
-
-
-
bell-slash-o
-
-
-
-
bicycle
-
-
-
-
binoculars
-
-
-
-
birthday-cake
-
-
-
-
bluetooth
-
-
-
-
bluetooth-b
-
-
-
-
bolt
-
-
-
-
bomb
-
-
-
-
book
-
-
-
-
bookmark
-
-
-
-
bookmark-o
-
-
-
-
briefcase
-
-
-
-
bug
-
-
-
-
building
-
-
-
-
building-o
-
-
-
-
bullhorn
-
-
-
-
bullseye
-
-
-
-
bus
-
-
-
-
cab (alias)
-
-
-
-
calculator
-
-
-
-
calendar
-
-
-
-
calendar-check-o
-
-
-
-
calendar-minus-o
-
-
-
-
calendar-o
-
-
-
-
calendar-plus-o
-
-
-
-
calendar-times-o
-
-
-
-
camera
-
-
-
-
camera-retro
-
-
-
-
car
-
-
-
-
caret-square-o-down
-
-
-
-
caret-square-o-left
-
-
-
-
caret-square-o-right
-
-
-
-
caret-square-o-up
-
-
-
-
cart-arrow-down
-
-
-
-
cart-plus
-
-
-
-
cc
-
-
-
-
certificate
-
-
-
-
check
-
-
-
-
check-circle
-
-
-
-
check-circle-o
-
-
-
-
check-square
-
-
-
-
check-square-o
-
-
-
-
child
-
-
-
-
circle
-
-
-
-
circle-o
-
-
-
-
circle-o-notch
-
-
-
-
circle-thin
-
-
-
-
clock-o
-
-
-
-
clone
-
-
-
-
close (alias)
-
-
-
-
cloud
-
-
-
-
cloud-download
-
-
-
-
cloud-upload
-
-
-
-
code
-
-
-
-
code-fork
-
-
-
-
coffee
-
-
-
-
cog
-
-
-
-
cogs
-
-
-
-
comment
-
-
-
-
comment-o
-
-
-
-
commenting
-
-
-
-
commenting-o
-
-
-
-
comments
-
-
-
-
comments-o
-
-
-
-
compass
-
-
-
-
copyright
-
-
-
-
creative-commons
-
-
-
-
credit-card
-
-
-
-
credit-card-alt
-
-
-
-
crop
-
-
-
-
crosshairs
-
-
-
-
cube
-
-
-
-
cubes
-
-
-
-
cutlery
-
-
-
-
dashboard (alias)
-
-
-
-
database
-
-
-
-
desktop
-
-
-
-
diamond
-
-
-
-
dot-circle-o
-
-
-
-
download
-
-
-
-
edit (alias)
-
-
-
-
ellipsis-h
-
-
-
-
ellipsis-v
-
-
-
-
envelope
-
-
-
-
envelope-o
-
-
-
-
envelope-square
-
-
-
-
eraser
-
-
-
-
exchange
-
-
-
-
exclamation
-
-
-
-
exclamation-circle
-
-
-
-
exclamation-triangle
-
-
-
-
external-link
-
-
-
-
external-link-square
-
-
-
-
eye
-
-
-
-
eye-slash
-
-
-
-
eyedropper
-
-
-
-
fax
-
-
-
-
feed (alias)
-
-
-
-
female
-
-
-
-
fighter-jet
-
-
-
-
file-archive-o
-
-
-
-
file-audio-o
-
-
-
-
file-code-o
-
-
-
-
file-excel-o
-
-
-
-
file-image-o
-
-
-
-
file-movie-o (alias)
-
-
-
-
file-pdf-o
-
-
-
-
file-photo-o (alias)
-
-
-
-
file-picture-o (alias)
-
-
-
-
file-powerpoint-o
-
-
-
-
file-sound-o (alias)
-
-
-
-
file-video-o
-
-
-
-
file-word-o
-
-
-
-
file-zip-o (alias)
-
-
-
-
film
-
-
-
-
filter
-
-
-
-
fire
-
-
-
-
fire-extinguisher
-
-
-
-
flag
-
-
-
-
flag-checkered
-
-
-
-
flag-o
-
-
-
-
flash (alias)
-
-
-
-
flask
-
-
-
-
folder
-
-
-
-
folder-o
-
-
-
-
folder-open
-
-
-
-
folder-open-o
-
-
-
-
frown-o
-
-
-
-
futbol-o
-
-
-
-
gamepad
-
-
-
-
gavel
-
-
-
-
gear (alias)
-
-
-
-
gears (alias)
-
-
-
-
gift
-
-
-
-
glass
-
-
-
-
globe
-
-
-
-
graduation-cap
-
-
-
-
group (alias)
-
-
-
-
hand-grab-o (alias)
-
-
-
-
hand-lizard-o
-
-
-
-
hand-paper-o
-
-
-
-
hand-peace-o
-
-
-
-
hand-pointer-o
-
-
-
-
hand-rock-o
-
-
-
-
hand-scissors-o
-
-
-
-
hand-spock-o
-
-
-
-
hand-stop-o (alias)
-
-
-
-
hashtag
-
-
-
-
hdd-o
-
-
-
-
headphones
-
-
-
-
heart
-
-
-
-
heart-o
-
-
-
-
heartbeat
-
-
-
-
history
-
-
-
-
home
-
-
-
-
hotel (alias)
-
-
-
-
hourglass
-
-
-
-
hourglass-1 (alias)
-
-
-
-
hourglass-2 (alias)
-
-
-
-
hourglass-3 (alias)
-
-
-
-
hourglass-end
-
-
-
-
hourglass-half
-
-
-
-
hourglass-o
-
-
-
-
hourglass-start
-
-
-
-
i-cursor
-
-
-
-
image (alias)
-
-
-
-
inbox
-
-
-
-
industry
-
-
-
-
info
-
-
-
-
info-circle
-
-
-
-
institution (alias)
-
-
-
-
key
-
-
-
-
keyboard-o
-
-
-
-
language
-
-
-
-
laptop
-
-
-
-
leaf
-
-
-
-
legal (alias)
-
-
-
-
lemon-o
-
-
-
-
level-down
-
-
-
-
level-up
-
-
-
-
life-bouy (alias)
-
-
-
-
life-buoy (alias)
-
-
-
-
life-ring
-
-
-
-
life-saver (alias)
-
-
-
-
lightbulb-o
-
-
-
-
line-chart
-
-
-
-
location-arrow
-
-
-
-
lock
-
-
-
-
magic
-
-
-
-
magnet
-
-
-
-
mail-forward (alias)
-
-
-
-
mail-reply (alias)
-
-
-
-
mail-reply-all (alias)
-
-
-
-
male
-
-
-
-
map
-
-
-
-
map-marker
-
-
-
-
map-o
-
-
-
-
map-pin
-
-
-
-
map-signs
-
-
-
-
meh-o
-
-
-
-
microphone
-
-
-
-
microphone-slash
-
-
-
-
minus
-
-
-
-
minus-circle
-
-
-
-
minus-square
-
-
-
-
minus-square-o
-
-
-
-
mobile
-
-
-
-
mobile-phone (alias)
-
-
-
-
money
-
-
-
-
moon-o
-
-
-
-
mortar-board (alias)
-
-
-
-
motorcycle
-
-
-
-
mouse-pointer
-
-
-
-
music
-
-
-
-
navicon (alias)
-
-
-
-
newspaper-o
-
-
-
-
object-group
-
-
-
-
object-ungroup
-
-
-
-
paint-brush
-
-
-
-
paper-plane
-
-
-
-
paper-plane-o
-
-
-
-
paw
-
-
-
-
pencil
-
-
-
-
pencil-square
-
-
-
-
pencil-square-o
-
-
-
-
percent
-
-
-
-
phone
-
-
-
-
phone-square
-
-
-
-
photo (alias)
-
-
-
-
picture-o
-
-
-
-
pie-chart
-
-
-
-
plane
-
-
-
-
plug
-
-
-
-
plus
-
-
-
-
plus-circle
-
-
-
-
plus-square
-
-
-
-
plus-square-o
-
-
-
-
power-off
-
-
-
-
print
-
-
-
-
puzzle-piece
-
-
-
-
qrcode
-
-
-
-
question
-
-
-
-
question-circle
-
-
-
-
quote-left
-
-
-
-
quote-right
-
-
-
-
random
-
-
-
-
recycle
-
-
-
-
refresh
-
-
-
-
registered
-
-
-
-
remove (alias)
-
-
-
-
reorder (alias)
-
-
-
-
reply
-
-
-
-
reply-all
-
-
-
-
retweet
-
-
-
-
road
-
-
-
-
rocket
-
-
-
-
rss
-
-
-
-
rss-square
-
-
-
-
search
-
-
-
-
search-minus
-
-
-
-
search-plus
-
-
-
-
send (alias)
-
-
-
-
send-o (alias)
-
-
-
-
server
-
-
-
-
share
-
-
-
-
share-alt
-
-
-
-
share-alt-square
-
-
-
-
share-square
-
-
-
-
share-square-o
-
-
-
-
shield
-
-
-
-
ship
-
-
-
-
shopping-bag
-
-
-
-
shopping-basket
-
-
-
-
shopping-cart
-
-
-
-
sign-in
-
-
-
-
sign-out
-
-
-
-
signal
-
-
-
-
sitemap
-
-
-
-
sliders
-
-
-
-
smile-o
-
-
-
-
soccer-ball-o (alias)
-
-
-
-
sort
-
-
-
-
sort-alpha-asc
-
-
-
-
sort-alpha-desc
-
-
-
-
sort-amount-asc
-
-
-
-
sort-amount-desc
-
-
-
-
sort-asc
-
-
-
-
sort-desc
-
-
-
-
sort-down (alias)
-
-
-
-
sort-numeric-asc
-
-
-
-
sort-numeric-desc
-
-
-
-
sort-up (alias)
-
-
-
-
space-shuttle
-
-
-
-
spinner
-
-
-
-
spoon
-
-
-
-
square
-
-
-
-
square-o
-
-
-
-
star
-
-
-
-
star-half
-
-
-
-
star-half-empty (alias)
-
-
-
-
star-half-full (alias)
-
-
-
-
star-half-o
-
-
-
-
star-o
-
-
-
-
sticky-note
-
-
-
-
sticky-note-o
-
-
-
-
street-view
-
-
-
-
suitcase
-
-
-
-
sun-o
-
-
-
-
support (alias)
-
-
-
-
tablet
-
-
-
-
tachometer
-
-
-
-
tag
-
-
-
-
tags
-
-
-
-
tasks
-
-
-
-
taxi
-
-
-
-
television
-
-
-
-
terminal
-
-
-
-
thumb-tack
-
-
-
-
thumbs-down
-
-
-
-
thumbs-o-down
-
-
-
-
thumbs-o-up
-
-
-
-
thumbs-up
-
-
-
-
ticket
-
-
-
-
times
-
-
-
-
times-circle
-
-
-
-
times-circle-o
-
-
-
-
tint
-
-
-
-
toggle-down (alias)
-
-
-
-
toggle-left (alias)
-
-
-
-
toggle-off
-
-
-
-
toggle-on
-
-
-
-
toggle-right (alias)
-
-
-
-
toggle-up (alias)
-
-
-
-
trademark
-
-
-
-
trash
-
-
-
-
trash-o
-
-
-
-
tree
-
-
-
-
trophy
-
-
-
-
truck
-
-
-
-
tty
-
-
-
-
tv (alias)
-
-
-
-
umbrella
-
-
-
-
university
-
-
-
-
unlock
-
-
-
-
unlock-alt
-
-
-
-
unsorted (alias)
-
-
-
-
upload
-
-
-
-
user
-
-
-
-
user-plus
-
-
-
-
user-secret
-
-
-
-
user-times
-
-
-
-
users
-
-
-
-
video-camera
-
-
-
-
volume-down
-
-
-
-
volume-off
-
-
-
-
volume-up
-
-
-
-
warning (alias)
-
-
-
-
wheelchair
-
-
-
-
wifi
-
-
-
-
wrench
-
-
-
-
-
-
-
-
- Hand Icons
-
-
-
-
-
hand-grab-o (alias)
-
-
-
-
hand-lizard-o
-
-
-
-
hand-o-down
-
-
-
-
hand-o-left
-
-
-
-
hand-o-right
-
-
-
-
hand-o-up
-
-
-
-
hand-paper-o
-
-
-
-
hand-peace-o
-
-
-
-
hand-pointer-o
-
-
-
-
hand-rock-o
-
-
-
-
hand-scissors-o
-
-
-
-
hand-spock-o
-
-
-
-
hand-stop-o (alias)
-
-
-
-
thumbs-down
-
-
-
-
thumbs-o-down
-
-
-
-
thumbs-o-up
-
-
-
-
thumbs-up
-
-
-
-
-
-
-
-
- Transportation Icons
-
-
-
-
-
ambulance
-
-
-
-
automobile (alias)
-
-
-
-
bicycle
-
-
-
-
bus
-
-
-
-
cab (alias)
-
-
-
-
car
-
-
-
-
fighter-jet
-
-
-
-
motorcycle
-
-
-
-
plane
-
-
-
-
rocket
-
-
-
-
ship
-
-
-
-
space-shuttle
-
-
-
-
subway
-
-
-
-
taxi
-
-
-
-
train
-
-
-
-
truck
-
-
-
-
wheelchair
-
-
-
-
-
-
-
- Gender Icons
-
-
-
-
-
genderless
-
-
-
-
intersex (alias)
-
-
-
-
mars
-
-
-
-
mars-double
-
-
-
-
mars-stroke
-
-
-
-
mars-stroke-h
-
-
-
-
mars-stroke-v
-
-
-
-
mercury
-
-
-
-
neuter
-
-
-
-
transgender
-
-
-
-
transgender-alt
-
-
-
-
venus
-
-
-
-
venus-double
-
-
-
-
venus-mars
-
-
-
-
-
-
-
- File Type Icons
-
-
-
-
-
file
-
-
-
-
file-archive-o
-
-
-
-
file-audio-o
-
-
-
-
file-code-o
-
-
-
-
file-excel-o
-
-
-
-
file-image-o
-
-
-
-
file-movie-o (alias)
-
-
-
-
file-o
-
-
-
-
file-pdf-o
-
-
-
-
file-photo-o (alias)
-
-
-
-
file-picture-o (alias)
-
-
-
-
file-powerpoint-o
-
-
-
-
file-sound-o (alias)
-
-
-
-
file-text
-
-
-
-
file-text-o
-
-
-
-
file-video-o
-
-
-
-
file-word-o
-
-
-
-
file-zip-o (alias)
-
-
-
-
-
-
-
- Spinner Icons
-
-
-
- -
-
- These icons work great with the
fa-spin class.
-
-
-
-
-
-
-
circle-o-notch
-
-
-
-
cog
-
-
-
-
gear (alias)
-
-
-
-
refresh
-
-
-
-
spinner
-
-
-
-
-
-
-
- Form Control Icons
-
-
-
-
-
check-square
-
-
-
-
check-square-o
-
-
-
-
circle
-
-
-
-
circle-o
-
-
-
-
dot-circle-o
-
-
-
-
minus-square
-
-
-
-
minus-square-o
-
-
-
-
plus-square
-
-
-
-
plus-square-o
-
-
-
-
square
-
-
-
-
square-o
-
-
-
-
-
-
-
- Payment Icons
-
-
-
-
-
cc-amex
-
-
-
-
cc-diners-club
-
-
-
-
cc-discover
-
-
-
-
cc-jcb
-
-
-
-
cc-mastercard
-
-
-
-
cc-paypal
-
-
-
-
cc-stripe
-
-
-
-
cc-visa
-
-
-
-
credit-card
-
-
-
-
credit-card-alt
-
-
-
-
google-wallet
-
-
-
-
paypal
-
-
-
-
-
-
-
- Chart Icons
-
-
-
-
-
area-chart
-
-
-
-
bar-chart
-
-
-
-
bar-chart-o (alias)
-
-
-
-
line-chart
-
-
-
-
pie-chart
-
-
-
-
-
-
-
- Currency Icons
-
-
-
-
-
bitcoin (alias)
-
-
-
-
btc
-
-
-
-
cny (alias)
-
-
-
-
dollar (alias)
-
-
-
-
eur
-
-
-
-
euro (alias)
-
-
-
-
gbp
-
-
-
-
gg
-
-
-
-
gg-circle
-
-
-
-
ils
-
-
-
-
inr
-
-
-
-
jpy
-
-
-
-
krw
-
-
-
-
money
-
-
-
-
rmb (alias)
-
-
-
-
rouble (alias)
-
-
-
-
rub
-
-
-
-
ruble (alias)
-
-
-
-
rupee (alias)
-
-
-
-
shekel (alias)
-
-
-
-
sheqel (alias)
-
-
-
-
try
-
-
-
-
turkish-lira (alias)
-
-
-
-
usd
-
-
-
-
won (alias)
-
-
-
-
yen (alias)
-
-
-
-
-
-
-
- Text Editor Icons
-
-
-
-
-
align-center
-
-
-
-
align-justify
-
-
-
-
align-left
-
-
-
-
align-right
-
-
-
-
bold
-
-
-
-
chain (alias)
-
-
-
-
chain-broken
-
-
-
-
clipboard
-
-
-
-
columns
-
-
-
-
copy (alias)
-
-
-
-
cut (alias)
-
-
-
-
dedent (alias)
-
-
-
-
eraser
-
-
-
-
file
-
-
-
-
file-o
-
-
-
-
file-text
-
-
-
-
file-text-o
-
-
-
-
files-o
-
-
-
-
floppy-o
-
-
-
-
font
-
-
-
-
header
-
-
-
-
indent
-
-
-
-
italic
-
-
-
-
link
-
-
-
-
list
-
-
-
-
list-alt
-
-
-
-
list-ol
-
-
-
-
list-ul
-
-
-
-
outdent
-
-
-
-
paperclip
-
-
-
-
paragraph
-
-
-
-
paste (alias)
-
-
-
-
repeat
-
-
-
-
rotate-left (alias)
-
-
-
-
rotate-right (alias)
-
-
-
-
save (alias)
-
-
-
-
scissors
-
-
-
-
strikethrough
-
-
-
-
subscript
-
-
-
-
superscript
-
-
-
-
table
-
-
-
-
text-height
-
-
-
-
text-width
-
-
-
-
th
-
-
-
-
th-large
-
-
-
-
th-list
-
-
-
-
underline
-
-
-
-
undo
-
-
-
-
unlink (alias)
-
-
-
-
-
-
-
- Directional Icons
-
-
-
-
-
angle-double-down
-
-
-
-
angle-double-left
-
-
-
-
angle-double-right
-
-
-
-
angle-double-up
-
-
-
-
angle-down
-
-
-
-
angle-left
-
-
-
-
angle-right
-
-
-
-
angle-up
-
-
-
-
arrow-circle-down
-
-
-
-
arrow-circle-left
-
-
-
-
arrow-circle-o-down
-
-
-
-
arrow-circle-o-left
-
-
-
-
arrow-circle-o-right
-
-
-
-
arrow-circle-o-up
-
-
-
-
arrow-circle-right
-
-
-
-
arrow-circle-up
-
-
-
-
arrow-down
-
-
-
-
arrow-left
-
-
-
-
arrow-right
-
-
-
-
arrow-up
-
-
-
-
arrows
-
-
-
-
arrows-alt
-
-
-
-
arrows-h
-
-
-
-
arrows-v
-
-
-
-
caret-down
-
-
-
-
caret-left
-
-
-
-
caret-right
-
-
-
-
caret-square-o-down
-
-
-
-
caret-square-o-left
-
-
-
-
caret-square-o-right
-
-
-
-
caret-square-o-up
-
-
-
-
caret-up
-
-
-
-
chevron-circle-down
-
-
-
-
chevron-circle-left
-
-
-
-
chevron-circle-right
-
-
-
-
chevron-circle-up
-
-
-
-
chevron-down
-
-
-
-
chevron-left
-
-
-
-
chevron-right
-
-
-
-
chevron-up
-
-
-
-
exchange
-
-
-
-
hand-o-down
-
-
-
-
hand-o-left
-
-
-
-
hand-o-right
-
-
-
-
hand-o-up
-
-
-
-
long-arrow-down
-
-
-
-
long-arrow-left
-
-
-
-
long-arrow-right
-
-
-
-
long-arrow-up
-
-
-
-
toggle-down (alias)
-
-
-
-
toggle-left (alias)
-
-
-
-
toggle-right (alias)
-
-
-
-
toggle-up (alias)
-
-
-
-
-
-
-
- Video Player Icons
-
-
-
-
-
arrows-alt
-
-
-
-
backward
-
-
-
-
compress
-
-
-
-
eject
-
-
-
-
expand
-
-
-
-
fast-backward
-
-
-
-
fast-forward
-
-
-
-
forward
-
-
-
-
pause
-
-
-
-
pause-circle
-
-
-
-
pause-circle-o
-
-
-
-
play
-
-
-
-
play-circle
-
-
-
-
play-circle-o
-
-
-
-
random
-
-
-
-
step-backward
-
-
-
-
step-forward
-
-
-
-
stop
-
-
-
-
stop-circle
-
-
-
-
stop-circle-o
-
-
-
-
youtube-play
-
-
-
-
-
-
-
- Brand Icons
-
-
- Warning!
- Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
- Media Buttons" setting. We will not use hacks to force them to display. Please
- report an issue with Adblock Plus if
- you believe this to be
- an error. To work around this, you'll need to modify the social icon class names.
-
-
-
-
-
500px
-
-
-
-
adn
-
-
-
-
amazon
-
-
-
-
android
-
-
-
-
angellist
-
-
-
-
apple
-
-
-
-
behance
-
-
-
-
behance-square
-
-
-
-
bitbucket
-
-
-
-
bitbucket-square
-
-
-
-
bitcoin (alias)
-
-
-
-
black-tie
-
-
-
-
bluetooth
-
-
-
-
bluetooth-b
-
-
-
-
btc
-
-
-
-
buysellads
-
-
-
-
cc-amex
-
-
-
-
cc-diners-club
-
-
-
-
cc-discover
-
-
-
-
cc-jcb
-
-
-
-
cc-mastercard
-
-
-
-
cc-paypal
-
-
-
-
cc-stripe
-
-
-
-
cc-visa
-
-
-
-
chrome
-
-
-
-
codepen
-
-
-
-
codiepie
-
-
-
-
connectdevelop
-
-
-
-
contao
-
-
-
-
css3
-
-
-
-
dashcube
-
-
-
-
delicious
-
-
-
-
deviantart
-
-
-
-
digg
-
-
-
-
dribbble
-
-
-
-
dropbox
-
-
-
-
drupal
-
-
-
-
edge
-
-
-
-
empire
-
-
-
-
expeditedssl
-
-
-
-
facebook
-
-
-
-
facebook-f (alias)
-
-
-
-
facebook-official
-
-
-
-
facebook-square
-
-
-
-
firefox
-
-
-
-
flickr
-
-
-
-
fonticons
-
-
-
-
fort-awesome
-
-
-
-
forumbee
-
-
-
-
foursquare
-
-
-
-
ge (alias)
-
-
-
-
get-pocket
-
-
-
-
gg
-
-
-
-
gg-circle
-
-
-
-
git
-
-
-
-
git-square
-
-
-
-
github
-
-
-
-
github-alt
-
-
-
-
github-square
-
-
-
-
gittip (alias)
-
-
-
-
google
-
-
-
-
google-plus
-
-
-
-
google-plus-square
-
-
-
-
google-wallet
-
-
-
-
gratipay
-
-
-
-
hacker-news
-
-
-
-
houzz
-
-
-
-
html5
-
-
-
-
instagram
-
-
-
-
internet-explorer
-
-
-
-
ioxhost
-
-
-
-
joomla
-
-
-
-
jsfiddle
-
-
-
-
lastfm
-
-
-
-
lastfm-square
-
-
-
-
leanpub
-
-
-
-
linkedin
-
-
-
-
linkedin-square
-
-
-
-
linux
-
-
-
-
maxcdn
-
-
-
-
meanpath
-
-
-
-
medium
-
-
-
-
mixcloud
-
-
-
-
modx
-
-
-
-
odnoklassniki
-
-
-
-
odnoklassniki-square
-
-
-
-
opencart
-
-
-
-
openid
-
-
-
-
opera
-
-
-
-
optin-monster
-
-
-
-
pagelines
-
-
-
-
paypal
-
-
-
-
pied-piper
-
-
-
-
pied-piper-alt
-
-
-
-
pinterest
-
-
-
-
pinterest-p
-
-
-
-
pinterest-square
-
-
-
-
product-hunt
-
-
-
-
qq
-
-
-
-
ra (alias)
-
-
-
-
rebel
-
-
-
-
reddit
-
-
-
-
reddit-alien
-
-
-
-
reddit-square
-
-
-
-
renren
-
-
-
-
safari
-
-
-
-
scribd
-
-
-
-
sellsy
-
-
-
-
share-alt
-
-
-
-
share-alt-square
-
-
-
-
shirtsinbulk
-
-
-
-
simplybuilt
-
-
-
-
skyatlas
-
-
-
-
skype
-
-
-
-
slack
-
-
-
-
slideshare
-
-
-
-
soundcloud
-
-
-
-
spotify
-
-
-
-
stack-exchange
-
-
-
-
stack-overflow
-
-
-
-
steam
-
-
-
-
steam-square
-
-
-
-
stumbleupon
-
-
-
-
stumbleupon-circle
-
-
-
-
tencent-weibo
-
-
-
-
trello
-
-
-
-
tripadvisor
-
-
-
-
tumblr
-
-
-
-
tumblr-square
-
-
-
-
twitch
-
-
-
-
twitter
-
-
-
-
twitter-square
-
-
-
-
usb
-
-
-
-
viacoin
-
-
-
-
vimeo
-
-
-
-
vimeo-square
-
-
-
-
vine
-
-
-
-
vk
-
-
-
-
wechat (alias)
-
-
-
-
weibo
-
-
-
-
weixin
-
-
-
-
whatsapp
-
-
-
-
wikipedia-w
-
-
-
-
windows
-
-
-
-
wordpress
-
-
-
-
xing
-
-
-
-
xing-square
-
-
-
-
y-combinator
-
-
-
-
y-combinator-square (alias)
-
-
-
-
yahoo
-
-
-
-
yc (alias)
-
-
-
-
yc-square (alias)
-
-
-
-
yelp
-
-
-
-
youtube
-
-
-
-
youtube-play
-
-
-
-
youtube-square
-
-
-
-
- - All brand icons are trademarks of their respective owners.
- - The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome,
- nor vice versa.
-
- - Brand icons should only be used to represent the company or product to which they refer.
-
-
-
-
-
-
- Medical Icons
-
-
-
-
-
ambulance
-
-
-
-
h-square
-
-
-
-
heart
-
-
-
-
heart-o
-
-
-
-
heartbeat
-
-
-
-
hospital-o
-
-
-
-
medkit
-
-
-
-
plus-square
-
-
-
-
stethoscope
-
-
-
-
user-md
-
-
-
-
wheelchair
-
-
-
-
-
-
-
- );
- }
-}
-
-export default FontAwesome;
diff --git a/src/views/Icons/FontAwesome/FontAwesome.test.js b/src/views/Icons/FontAwesome/FontAwesome.test.js
deleted file mode 100644
index 7749817..0000000
--- a/src/views/Icons/FontAwesome/FontAwesome.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import FontAwesome from './FontAwesome';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
\ No newline at end of file
diff --git a/src/views/Icons/FontAwesome/package.json b/src/views/Icons/FontAwesome/package.json
deleted file mode 100644
index 91f35f6..0000000
--- a/src/views/Icons/FontAwesome/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "FontAwesome",
- "version": "0.0.0",
- "private": true,
- "main": "./FontAwesome.js"
-}
diff --git a/src/views/Icons/SimpleLineIcons/SimpleLineIcons.js b/src/views/Icons/SimpleLineIcons/SimpleLineIcons.js
deleted file mode 100644
index b8b56ce..0000000
--- a/src/views/Icons/SimpleLineIcons/SimpleLineIcons.js
+++ /dev/null
@@ -1,755 +0,0 @@
-import React, { Component } from 'react';
-import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
-
-class SimpleLineIcons extends Component {
- render() {
- return (
-
-
-
- Simple Line Icons
-
-
-
-
-
- icon-user
-
-
-
- icon-people
-
-
-
- icon-user-female
-
-
-
- icon-user-follow
-
-
-
- icon-user-following
-
-
-
- icon-user-unfollow
-
-
-
- icon-login
-
-
-
- icon-logout
-
-
-
- icon-emotsmile
-
-
-
- icon-phone
-
-
-
- icon-call-end
-
-
-
- icon-call-in
-
-
-
- icon-call-out
-
-
-
- icon-map
-
-
-
- icon-location-pin
-
-
-
- icon-direction
-
-
-
- icon-directions
-
-
-
- icon-compass
-
-
-
- icon-layers
-
-
-
- icon-menu
-
-
-
- icon-list
-
-
-
- icon-options-vertical
-
-
-
- icon-options
-
-
-
- icon-arrow-down
-
-
-
- icon-arrow-left
-
-
-
- icon-arrow-right
-
-
-
- icon-arrow-up
-
-
-
- icon-arrow-up-circle
-
-
-
- icon-arrow-left-circle
-
-
-
- icon-arrow-right-circle
-
-
-
- icon-arrow-down-circle
-
-
-
- icon-check
-
-
-
- icon-clock
-
-
-
- icon-plus
-
-
-
- icon-close
-
-
-
- icon-trophy
-
-
-
- icon-screen-smartphone
-
-
-
- icon-screen-desktop
-
-
-
- icon-plane
-
-
-
- icon-notebook
-
-
-
- icon-mustache
-
-
-
- icon-mouse
-
-
-
- icon-magnet
-
-
-
- icon-energy
-
-
-
- icon-disc
-
-
-
- icon-cursor
-
-
-
- icon-cursor-move
-
-
-
- icon-crop
-
-
-
- icon-chemistry
-
-
-
- icon-speedometer
-
-
-
- icon-shield
-
-
-
- icon-screen-tablet
-
-
-
- icon-magic-wand
-
-
-
- icon-hourglass
-
-
-
- icon-graduation
-
-
-
- icon-ghost
-
-
-
- icon-game-controller
-
-
-
- icon-fire
-
-
-
- icon-eyeglass
-
-
-
- icon-envelope-open
-
-
-
- icon-envelope-letter
-
-
-
- icon-bell
-
-
-
- icon-badge
-
-
-
- icon-anchor
-
-
-
- icon-wallet
-
-
-
- icon-vector
-
-
-
- icon-speech
-
-
-
- icon-puzzle
-
-
-
- icon-printer
-
-
-
- icon-present
-
-
-
- icon-playlist
-
-
-
- icon-pin
-
-
-
- icon-picture
-
-
-
- icon-handbag
-
-
-
- icon-globe-alt
-
-
-
- icon-globe
-
-
-
- icon-folder-alt
-
-
-
- icon-folder
-
-
-
- icon-film
-
-
-
- icon-feed
-
-
-
- icon-drop
-
-
-
- icon-drawer
-
-
-
- icon-docs
-
-
-
- icon-doc
-
-
-
- icon-diamond
-
-
-
- icon-cup
-
-
-
- icon-calculator
-
-
-
- icon-bubbles
-
-
-
- icon-briefcase
-
-
-
- icon-book-open
-
-
-
- icon-basket-loaded
-
-
-
- icon-basket
-
-
-
- icon-bag
-
-
-
- icon-action-undo
-
-
-
- icon-action-redo
-
-
-
- icon-wrench
-
-
-
- icon-umbrella
-
-
-
- icon-trash
-
-
-
- icon-tag
-
-
-
- icon-support
-
-
-
- icon-frame
-
-
-
- icon-size-fullscreen
-
-
-
- icon-size-actual
-
-
-
- icon-shuffle
-
-
-
- icon-share-alt
-
-
-
- icon-share
-
-
-
- icon-rocket
-
-
-
- icon-question
-
-
-
- icon-pie-chart
-
-
-
- icon-pencil
-
-
-
- icon-note
-
-
-
- icon-loop
-
-
-
- icon-home
-
-
-
- icon-grid
-
-
-
- icon-graph
-
-
-
- icon-microphone
-
-
-
- icon-music-tone-alt
-
-
-
- icon-music-tone
-
-
-
- icon-earphones-alt
-
-
-
- icon-earphones
-
-
-
- icon-equalizer
-
-
-
- icon-like
-
-
-
- icon-dislike
-
-
-
- icon-control-start
-
-
-
- icon-control-rewind
-
-
-
- icon-control-play
-
-
-
- icon-control-pause
-
-
-
- icon-control-forward
-
-
-
- icon-control-end
-
-
-
- icon-volume-1
-
-
-
- icon-volume-2
-
-
-
- icon-volume-off
-
-
-
- icon-calendar
-
-
-
- icon-bulb
-
-
-
- icon-chart
-
-
-
- icon-ban
-
-
-
- icon-bubble
-
-
-
- icon-camrecorder
-
-
-
- icon-camera
-
-
-
- icon-cloud-download
-
-
-
- icon-cloud-upload
-
-
-
- icon-envelope
-
-
-
- icon-eye
-
-
-
- icon-flag
-
-
-
- icon-heart
-
-
-
- icon-info
-
-
-
- icon-key
-
-
-
- icon-link
-
-
-
- icon-lock
-
-
-
- icon-lock-open
-
-
-
- icon-magnifier
-
-
-
- icon-magnifier-add
-
-
-
- icon-magnifier-remove
-
-
-
- icon-paper-clip
-
-
-
- icon-paper-plane
-
-
-
- icon-power
-
-
-
- icon-refresh
-
-
-
- icon-reload
-
-
-
- icon-settings
-
-
-
- icon-star
-
-
-
- icon-symbol-female
-
-
-
- icon-symbol-male
-
-
-
- icon-target
-
-
-
- icon-credit-card
-
-
-
- icon-paypal
-
-
-
- icon-social-tumblr
-
-
-
- icon-social-twitter
-
-
-
- icon-social-facebook
-
-
-
- icon-social-instagram
-
-
-
- icon-social-linkedin
-
-
-
- icon-social-pinterest
-
-
-
- icon-social-github
-
-
-
- icon-social-gplus
-
-
-
- icon-social-reddit
-
-
-
- icon-social-skype
-
-
-
- icon-social-dribbble
-
-
-
- icon-social-behance
-
-
-
- icon-social-foursqare
-
-
-
- icon-social-soundcloud
-
-
-
- icon-social-spotify
-
-
-
- icon-social-stumbleupon
-
-
-
- icon-social-youtube
-
-
-
- icon-social-dropbox
-
-
-
-
-
-
- );
- }
-}
-
-export default SimpleLineIcons;
diff --git a/src/views/Icons/SimpleLineIcons/SimpleLineIcons.test.js b/src/views/Icons/SimpleLineIcons/SimpleLineIcons.test.js
deleted file mode 100644
index 84a931e..0000000
--- a/src/views/Icons/SimpleLineIcons/SimpleLineIcons.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import SimpleLineIcons from './SimpleLineIcons';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
\ No newline at end of file
diff --git a/src/views/Icons/SimpleLineIcons/package.json b/src/views/Icons/SimpleLineIcons/package.json
deleted file mode 100644
index f9437fe..0000000
--- a/src/views/Icons/SimpleLineIcons/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "SimpleLineIcons",
- "version": "0.0.0",
- "private": true,
- "main": "./SimpleLineIcons.js"
-}
diff --git a/src/views/Icons/index.js b/src/views/Icons/index.js
deleted file mode 100644
index 5a80a2a..0000000
--- a/src/views/Icons/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import CoreUIIcons from './CoreUIIcons';
-import Flags from './Flags';
-import FontAwesome from './FontAwesome';
-import SimpleLineIcons from './SimpleLineIcons';
-
-export {
- CoreUIIcons, Flags, FontAwesome, SimpleLineIcons
-};
diff --git a/src/views/Notifications/Alerts/Alerts.js b/src/views/Notifications/Alerts/Alerts.js
index db1d63a..0a7c78e 100644
--- a/src/views/Notifications/Alerts/Alerts.js
+++ b/src/views/Notifications/Alerts/Alerts.js
@@ -1,146 +1,180 @@
-import React, { Component } from 'react';
-import { Alert, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
+import React from 'react'
+import {
+ CAlert,
+ CButton,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCol,
+ CLink,
+ CProgress,
+ CRow
+} from '@coreui/react'
-class Alerts extends Component {
- constructor(props) {
- super(props);
+const Alerts = () => {
+ const [visible, setVisible] = React.useState(10)
- this.state = {
- visible: true,
- };
+ return (
+ <>
+
+
+
+
+ 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!
+
+
+
+
+
+
+
+ Alerts
+ 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.
+
+
+ {/*eslint-disable-next-line*/}
+ This is a secondary alert with
+ 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.
+
+
+ {/*eslint-disable-next-line*/}
+ This is a danger alert with
+ 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.
+
+
+ {/*eslint-disable-next-line*/}
+ This is a info alert with
+ 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.
+
+
+ {/*eslint-disable-next-line*/}
+ This is a dark alert with
+ an example link.
+ Give it a click if you like.
+
+
+
+
+
+
+
+
+
+ Alerts
+ additional content
+
+
+
+ Well done!
+
+ Aww yeah, you successfully read this important alert message. This example text is going
+ to run a bit longer so that you can see how spacing within an alert works with this kind
+ of content.
+
+
+
+ Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+
+
+
+
+
+
+
+
+ Alerts
+ dismissing
+
+
+
+ I am an dismissible alert!
+
+
+ I will be closed in {visible} seconds!
+
+
- this.onDismiss = this.onDismiss.bind(this);
- }
-
- onDismiss() {
- this.setState({ visible: false });
- }
-
- render() {
- return (
-
-
-
-
-
- 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!
-
-
-
-
-
-
-
- Alerts
- 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.
-
-
- {/*eslint-disable-next-line*/}
- This is a secondary alert with 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.
-
-
- {/*eslint-disable-next-line*/}
- This is a danger alert with 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.
-
-
- {/*eslint-disable-next-line*/}
- This is a info alert with 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.
-
-
- {/*eslint-disable-next-line*/}
- This is a dark alert with an example link. Give it a click if you like.
-
-
-
-
-
-
-
-
-
- Alerts
- additional content
-
-
-
- Well done!
-
- Aww yeah, you successfully read this important alert message. This example text is going
- to run a bit longer so that you can see how spacing within an alert works with this kind
- of content.
-
-
-
- Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
-
-
-
-
-
-
-
-
- Alerts
- dismissing
-
-
-
- I am an alert and I can be dismissed!
-
-
-
-
-
-
+
+ )
}
-export default Alerts;
+export default Alerts
diff --git a/src/views/Notifications/Alerts/Alerts.test.js b/src/views/Notifications/Alerts/Alerts.test.js
deleted file mode 100644
index 9db72cf..0000000
--- a/src/views/Notifications/Alerts/Alerts.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Alerts from './Alerts';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Notifications/Alerts/package.json b/src/views/Notifications/Alerts/package.json
deleted file mode 100644
index f0234ec..0000000
--- a/src/views/Notifications/Alerts/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Alerts",
- "version": "0.0.0",
- "private": true,
- "main": "./Alerts.js"
-}
diff --git a/src/views/Notifications/Badges/Badges.js b/src/views/Notifications/Badges/Badges.js
index 17e3ec4..45a15f6 100644
--- a/src/views/Notifications/Badges/Badges.js
+++ b/src/views/Notifications/Badges/Badges.js
@@ -1,87 +1,95 @@
-import React, { Component } from 'react';
-import { Badge, Button, Card, CardBody, CardFooter, CardHeader, Col, Row } from 'reactstrap';
+import React from 'react'
+import {
+ CBadge,
+ CButton,
+ CCard,
+ CCardBody,
+ CCardFooter,
+ CCardHeader,
+ CCol,
+ CRow
+} from '@coreui/react'
-class Badges extends Component {
- render() {
- return (
-
-
-
-
-
- Badges
-
-
-
- Heading New
- Heading New
- Heading New
- Heading New
- Heading New
- Heading New
-
-
-
-
-
-
-
-
-
- Badges contextual variations
-
-
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
-
-
-
-
- Badges pill badges
-
-
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
-
-
-
-
- Badges links
-
-
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
-
-
-
-
-
- );
- }
+const Badges = () => {
+ return (
+
+
+
+
+ Badges
+
+
+
+ Example heading New
+ Example heading New
+ Example heading New
+ Example heading New
+ Example heading New
+ Example heading New
+
+
+
+ Notifications 9
+
+
+
+
+
+
+
+ Badges
+ contextual variations
+
+
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+
+
+
+
+ Badges
+ pill badges
+
+
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+
+
+
+
+ Badges
+ links
+
+
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+
+
+
+
+ )
}
-export default Badges;
+export default Badges
diff --git a/src/views/Notifications/Badges/Badges.test.js b/src/views/Notifications/Badges/Badges.test.js
deleted file mode 100644
index 8602dc4..0000000
--- a/src/views/Notifications/Badges/Badges.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Badges from './Badges';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Notifications/Badges/package.json b/src/views/Notifications/Badges/package.json
deleted file mode 100644
index 6ea6e74..0000000
--- a/src/views/Notifications/Badges/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Badges",
- "version": "0.0.0",
- "private": true,
- "main": "./Badges.js"
-}
diff --git a/src/views/Notifications/Modals/Modals.js b/src/views/Notifications/Modals/Modals.js
index 99c1005..66e90df 100644
--- a/src/views/Notifications/Modals/Modals.js
+++ b/src/views/Notifications/Modals/Modals.js
@@ -1,233 +1,235 @@
-import React, { Component } from 'react';
-import { Button, Card, CardBody, CardHeader, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row } from 'reactstrap';
+import React, { useState } from 'react'
+import {
+ CButton,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCol,
+ CModal,
+ CModalBody,
+ CModalFooter,
+ CModalHeader,
+ CModalTitle,
+ CRow
+} from '@coreui/react'
-class Modals extends Component {
+const Modals = () => {
- constructor(props) {
- super(props);
- this.state = {
- modal: false,
- large: false,
- small: false,
- primary: false,
- success: false,
- warning: false,
- danger: false,
- info: false,
- };
+ const [modal, setModal] = useState(true)
+ const [large, setLarge] = useState(false)
+ const [small, setSmall] = useState(false)
+ const [primary, setPrimary] = useState(false)
+ const [success, setSuccess] = useState(false)
+ const [warning, setWarning] = useState(false)
+ const [danger, setDanger] = useState(false)
+ const [info, setInfo] = useState(false)
- this.toggle = this.toggle.bind(this);
- this.toggleLarge = this.toggleLarge.bind(this);
- this.toggleSmall = this.toggleSmall.bind(this);
- this.togglePrimary = this.togglePrimary.bind(this);
- this.toggleSuccess = this.toggleSuccess.bind(this);
- this.toggleWarning = this.toggleWarning.bind(this);
- this.toggleDanger = this.toggleDanger.bind(this);
- this.toggleInfo = this.toggleInfo.bind(this);
- }
+ return (
+
+
+
+
+ Bootstrap Modals
+
+
+ setModal(!modal)}
+ className="mr-1"
+ >Launch demo 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.
+
+
+ Do Something{' '}
+ setModal(false)}
+ >Cancel
+
+
- toggle() {
- this.setState({
- modal: !this.state.modal,
- });
- }
+ setLarge(!large)} className="mr-1">
+ Launch large modal
+
+ 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.
+
+
+ setLarge(!large)}>Do Something{' '}
+ setLarge(!large)}>Cancel
+
+
- toggleLarge() {
- this.setState({
- large: !this.state.large,
- });
- }
+ setLarge(!large)} className="mr-1">
+ Launch small modal
+
+ 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.
+
+
+ setSmall(!small)}>Do Something{' '}
+ setSmall(!small)}>Cancel
+
+
- toggleSmall() {
- this.setState({
- small: !this.state.small,
- });
- }
+
- togglePrimary() {
- this.setState({
- primary: !this.state.primary,
- });
- }
+ setPrimary(!primary)} className="mr-1">
+ Primary modal
+
+ 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.
+
+
+ setPrimary(!primary)}>
+ Do Something
+ {' '}
+ setPrimary(!primary)}>
+ Cancel
+
+
+
- toggleSuccess() {
- this.setState({
- success: !this.state.success,
- });
- }
+ setSuccess(!success)} className="mr-1">Success modal
+ 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.
+
+
+ setSuccess(!success)}>Do Something{' '}
+ setSuccess(!success)}>Cancel
+
+
- toggleWarning() {
- this.setState({
- warning: !this.state.warning,
- });
- }
+ setWarning(!warning)} className="mr-1">Warning modal
+ 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.
+
+
+ setWarning(!warning)}>Do Something{' '}
+ setWarning(!warning)}>Cancel
+
+
- toggleDanger() {
- this.setState({
- danger: !this.state.danger,
- });
- }
+ setDanger(!danger)} className="mr-1">Danger modal
+ 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.
+
+
+ setDanger(!danger)}>Do Something{' '}
+ setDanger(!danger)}>Cancel
+
+
- toggleInfo() {
- this.setState({
- info: !this.state.info,
- });
- }
+ setInfo(!info)} className="mr-1">Info modal
+ 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.
+
+
+ setInfo(!info)}>Cancel
+ setInfo(!info)}>Do Something{' '}
+
+
- render() {
- return (
-
-
-
-
-
- Bootstrap Modals
-
-
-
-
- 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.
-
-
- {' '}
-
-
-
-
-
-
- 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.
-
-
- {' '}
-
-
-
-
-
-
- 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.
-
-
- {' '}
-
-
-
-
-
-
-
-
- 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.
-
-
- {' '}
-
-
-
-
-
-
- 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.
-
-
- {' '}
-
-
-
-
-
-
- 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.
-
-
- {' '}
-
-
-
-
-
-
- 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.
-
-
- {' '}
-
-
-
-
-
-
- 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.
-
-
- {' '}
-
-
-
-
-
-
-
-
-
- );
- }
+
+
+
+
+ )
}
-export default Modals;
+export default Modals
diff --git a/src/views/Notifications/Modals/Modals.test.js b/src/views/Notifications/Modals/Modals.test.js
deleted file mode 100644
index 63d4db7..0000000
--- a/src/views/Notifications/Modals/Modals.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Modals from './Modals';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Notifications/Modals/package.json b/src/views/Notifications/Modals/package.json
deleted file mode 100644
index 04e7ea0..0000000
--- a/src/views/Notifications/Modals/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Modals",
- "version": "0.0.0",
- "private": true,
- "main": "./Modals.js"
-}
diff --git a/src/views/Notifications/Toaster/Toaster.js b/src/views/Notifications/Toaster/Toaster.js
new file mode 100644
index 0000000..04ade5d
--- /dev/null
+++ b/src/views/Notifications/Toaster/Toaster.js
@@ -0,0 +1,183 @@
+import React, { useState } from 'react'
+import {
+ CCard,
+ CCardHeader,
+ CCardBody,
+ CToast,
+ CToastBody,
+ CToastHeader,
+ CToaster,
+ CForm,
+ CInput,
+ CInputCheckbox,
+ CButton,
+ CContainer,
+ CRow,
+ CCol,
+ CFormGroup,
+ CLabel
+} from '@coreui/react'
+
+const Toaster = () => {
+
+ const positions = [
+ 'static',
+ 'top-left',
+ 'top-center',
+ 'top-right',
+ 'top-full',
+ 'bottom-left',
+ 'bottom-center',
+ 'bottom-right',
+ 'bottom-full'
+ ]
+
+ const [toasts, setToasts] = useState([
+ { position: 'static'},
+ { position: 'static'},
+ { position: 'top-right', autohide: 3000 }
+ ])
+
+ const [position, setPosition] = useState('top-right')
+ const [autohide, setAutohide] = useState(true)
+ const [autohideValue, setAutohideValue] = useState(5000)
+ const [closeButton, setCloseButton] = useState(true)
+ const [fade, setFade] = useState(true)
+
+ const addToast = () => {
+ setToasts([
+ ...toasts,
+ { position, autohide: autohide && autohideValue, closeButton, fade }
+ ])
+ }
+
+
+ const toasters = (()=>{
+ return toasts.reduce((toasters, toast) => {
+ toasters[toast.position] = toasters[toast.position] || []
+ toasters[toast.position].push(toast)
+ return toasters
+ }, {})
+ })()
+
+
+ return (
+
+
+ Toasts.
+
+
+
+
+
+
+ Add toast with following props:
+
+
+ { setAutohide(e.target.checked) }}
+ custom
+ />
+
+ Autohide of the toast
+
+
+ {
+ autohide &&
+
+ Time to autohide
+ {
+ setAutohideValue(Number(e.target.value))
+ }}
+ />
+
+ }
+
+
+ Position
+
+
+
+
+ { setFade(e.target.checked) }}
+ custom
+ />
+ fade
+
+
+
+ { setCloseButton(e.target.checked) }}
+ />
+
+ closeButton
+
+
+
+
+ Add toast
+
+
+
+
+
+ {Object.keys(toasters).map((toasterKey) => (
+
+ {
+ toasters[toasterKey].map((toast, key)=>{
+ return(
+
+
+ Toast title
+
+
+ {`This is a toast in ${toasterKey} positioned toaster number ${key + 1}.`}
+
+
+ )
+ })
+ }
+
+ ))}
+
+
+
+
+
+ )
+}
+
+export default Toaster
diff --git a/src/views/Notifications/index.js b/src/views/Notifications/index.js
deleted file mode 100644
index daf9d6e..0000000
--- a/src/views/Notifications/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Alerts from './Alerts';
-import Badges from './Badges';
-import Modals from './Modals';
-
-export {
- Alerts, Badges, Modals
-};
diff --git a/src/views/Pages/Login/Login.js b/src/views/Pages/Login/Login.js
index faf1d9b..43fb8db 100644
--- a/src/views/Pages/Login/Login.js
+++ b/src/views/Pages/Login/Login.js
@@ -1,66 +1,78 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import { Button, Card, CardBody, CardGroup, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
+import React from 'react'
+import { Link } from 'react-router-dom'
+import {
+ CButton,
+ CCard,
+ CCardBody,
+ CCardGroup,
+ CCol,
+ CContainer,
+ CForm,
+ CInput,
+ CInputGroup,
+ CInputGroupPrepend,
+ CInputGroupText,
+ CRow
+} from '@coreui/react'
+import { CIcon } from '@coreui/icons-react'
-class Login extends Component {
- render() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Sign up
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
- labore et dolore magna aliqua.
-
-
-
-
-
-
- );
- }
+const Login = () => {
+ return (
+
+
+
+
+
+
+
+
+ Login
+ Sign In to your account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Login
+
+
+ Forgot password?
+
+
+
+
+
+
+
+
+
Sign up
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+ labore et dolore magna aliqua.
+
+
Register Now!
+
+
+
+ )
}
-export default Login;
+export default Login
diff --git a/src/views/Pages/Login/Login.test.js b/src/views/Pages/Login/Login.test.js
deleted file mode 100644
index b10e7b8..0000000
--- a/src/views/Pages/Login/Login.test.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { MemoryRouter } from 'react-router-dom';
-import Login from './Login';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Pages/Login/package.json b/src/views/Pages/Login/package.json
deleted file mode 100644
index c01f87e..0000000
--- a/src/views/Pages/Login/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Login",
- "version": "0.0.0",
- "private": true,
- "main": "./Login.js"
-}
diff --git a/src/views/Pages/Page404/Page404.js b/src/views/Pages/Page404/Page404.js
index 6df0070..057972e 100644
--- a/src/views/Pages/Page404/Page404.js
+++ b/src/views/Pages/Page404/Page404.js
@@ -1,35 +1,44 @@
-import React, { Component } from 'react';
-import { Button, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
+import React from 'react'
+import {
+ CButton,
+ CCol,
+ CContainer,
+ CInput,
+ CInputGroup,
+ CInputGroupPrepend,
+ CInputGroupAppend,
+ CInputGroupText,
+ CRow
+} from '@coreui/react'
+import { CIcon } from '@coreui/icons-react'
-class Page404 extends Component {
- render() {
- return (
-
-
-
-
-
-
404
-
Oops! You're lost.
-
The page you are looking for was not found.
-
-
-
- );
- }
+const Page404 = () => {
+ return (
+
+
+
+
+
+
404
+
Oops! You{'\''}re lost.
+
The page you are looking for was not found.
+
+
+ )
}
-export default Page404;
+export default Page404
diff --git a/src/views/Pages/Page404/Page404.test.js b/src/views/Pages/Page404/Page404.test.js
deleted file mode 100644
index f7a01a6..0000000
--- a/src/views/Pages/Page404/Page404.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Page404 from './Page404';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Pages/Page404/package.json b/src/views/Pages/Page404/package.json
deleted file mode 100644
index ffbc77c..0000000
--- a/src/views/Pages/Page404/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Page404",
- "version": "0.0.0",
- "private": true,
- "main": "./Page404.js"
-}
diff --git a/src/views/Pages/Page500/Page500.js b/src/views/Pages/Page500/Page500.js
index 24e51d4..2ee200e 100644
--- a/src/views/Pages/Page500/Page500.js
+++ b/src/views/Pages/Page500/Page500.js
@@ -1,35 +1,44 @@
-import React, { Component } from 'react';
-import { Button, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
+import React from 'react'
+import {
+ CButton,
+ CCol,
+ CContainer,
+ CInput,
+ CInputGroup,
+ CInputGroupAppend,
+ CInputGroupPrepend,
+ CInputGroupText,
+ CRow
+} from '@coreui/react'
+import { CIcon } from '@coreui/icons-react'
-class Page500 extends Component {
- render() {
- return (
-
-
-
-
-
- 500
- Houston, we have a problem!
- The page you are looking for is temporarily unavailable.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
+const Page500 = () => {
+ return (
+
+
+
+
+
+ 500
+ Houston, we have a problem!
+ The page you are looking for is temporarily unavailable.
+
+
+
+
+
+
+
+
+
+ Search
+
+
+
+
+
+
+ )
}
-export default Page500;
+export default Page500
diff --git a/src/views/Pages/Page500/Page500.test.js b/src/views/Pages/Page500/Page500.test.js
deleted file mode 100644
index db10df4..0000000
--- a/src/views/Pages/Page500/Page500.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Page500 from './Page500';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Pages/Page500/package.json b/src/views/Pages/Page500/package.json
deleted file mode 100644
index 1c3ef2b..0000000
--- a/src/views/Pages/Page500/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Page500",
- "version": "0.0.0",
- "private": true,
- "main": "./Page500.js"
-}
diff --git a/src/views/Pages/Register/Register.js b/src/views/Pages/Register/Register.js
index c355535..de0d1aa 100644
--- a/src/views/Pages/Register/Register.js
+++ b/src/views/Pages/Register/Register.js
@@ -1,68 +1,80 @@
-import React, { Component } from 'react';
-import { Button, Card, CardBody, CardFooter, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
+import React from 'react'
+import {
+ CButton,
+ CCard,
+ CCardBody,
+ CCardFooter,
+ CCol,
+ CContainer,
+ CForm,
+ CInput,
+ CInputGroup,
+ CInputGroupPrepend,
+ CInputGroupText,
+ CRow
+} from '@coreui/react'
+import { CIcon } from '@coreui/icons-react'
-class Register extends Component {
- render() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
+const Register = () => {
+ return (
+
+
+
+
+
+
+
+ Register
+ Create your account
+
+
+
+
+
+
+
+
+
+
+ @
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Create Account
+
+
+
+
+
+ facebook
+
+
+ twitter
+
+
+
+
+
+
+
+
+ )
}
-export default Register;
+export default Register
diff --git a/src/views/Pages/Register/Register.test.js b/src/views/Pages/Register/Register.test.js
deleted file mode 100644
index ffced4f..0000000
--- a/src/views/Pages/Register/Register.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Register from './Register';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Pages/Register/package.json b/src/views/Pages/Register/package.json
deleted file mode 100644
index b76b5dd..0000000
--- a/src/views/Pages/Register/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Register",
- "version": "0.0.0",
- "private": true,
- "main": "./Register.js"
-}
diff --git a/src/views/Pages/index.js b/src/views/Pages/index.js
deleted file mode 100644
index e90b2c7..0000000
--- a/src/views/Pages/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Login from './Login';
-import Page404 from './Page404';
-import Page500 from './Page500';
-import Register from './Register';
-
-export {
- Login, Page404, Page500, Register
-};
\ No newline at end of file
diff --git a/src/views/Theme/Colors/Colors.js b/src/views/Theme/Colors/Colors.js
index 96959ac..72297a3 100644
--- a/src/views/Theme/Colors/Colors.js
+++ b/src/views/Theme/Colors/Colors.js
@@ -1,184 +1,119 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-import { Row, Col } from 'reactstrap'
-import { rgbToHex } from '@coreui/coreui/dist/js/coreui-utilities'
+import React, { useEffect, useState, createRef } from 'react'
+import classNames from 'classnames'
+import { CRow, CCol } from '@coreui/react'
+import { rgbToHex } from '@coreui/utils/src'
-class ThemeView extends Component {
- constructor(props) {
- super(props);
+const ThemeView = () => {
+ const [color, setColor] = useState('rgb(255, 255, 255)')
+ const ref = createRef()
- this.state = {
- bgColor: 'rgb(255, 255, 255)'
- }
- }
+ useEffect(() => {
+ const el = ref.current.parentNode.firstChild
+ const varColor = window.getComputedStyle(el).getPropertyValue('background-color')
+ setColor(varColor)
+ }, [ref])
- componentDidMount () {
- const elem = ReactDOM.findDOMNode(this).parentNode.firstChild
- const color = window.getComputedStyle(elem).getPropertyValue('background-color')
- this.setState({
- bgColor: color || this.state.bgColor
- })
- }
-
- render() {
-
- return (
-
-
-
- | HEX: |
- { rgbToHex(this.state.bgColor) } |
-
-
- | RGB: |
- { this.state.bgColor } |
-
-
-
- )
- }
+ return (
+
+
+
+ | HEX: |
+ { rgbToHex(color) } |
+
+
+ | RGB: |
+ { color } |
+
+
+
+ )
}
-class ThemeColor extends Component {
- // constructor(props) {
- // super(props);
- // }
- render() {
-
- // const { className, children, ...attributes } = this.props
- const { className, children } = this.props
-
- const classes = classNames(className, 'theme-color w-75 rounded mb-3')
-
- return (
-
-
- {children}
-
-
- )
- }
+const ThemeColor = ({className, children}) => {
+ const classes = classNames(className, 'theme-color w-75 rounded mb-3')
+ return (
+
+
+ {children}
+
+
+ )
}
-class Colors extends Component {
- render() {
- return (
-
-
-
- Theme colors
-
-
-
-
- Brand Primary Color
-
-
- Brand Secondary Color
-
-
- Brand Success Color
-
-
- Brand Danger Color
-
-
- Brand Warning Color
-
-
- Brand Info Color
-
-
- Brand Light Color
-
-
- Brand Dark Color
-
-
-
+const Colors = () => {
+ return (
+ <>
+
+
+ Theme colors
-
-
- Grays
-
-
-
-
- Gray 100 Color
-
-
- Gray 200 Color
-
-
- Gray 300 Color
-
-
- Gray 400 Color
-
-
- Gray 500 Color
-
-
- Gray 600 Color
-
-
- Gray 700 Color
-
-
- Gray 800 Color
-
-
- Gray 900 Color
-
-
-
-
-
-
- Additional colors
-
-
-
-
- Blue Color
-
-
- Light Blue Color
-
-
- Indigo Color
-
-
- Purple Color
-
-
- Pink Color
-
-
- Red Color
-
-
- Orange Color
-
-
- Yellow Color
-
-
- Green Color
-
-
- Teal Color
-
-
- Cyan Color
-
-
-
+
+
+
+ Brand Primary Color
+
+
+ Brand Secondary Color
+
+
+ Brand Success Color
+
+
+ Brand Danger Color
+
+
+ Brand Warning Color
+
+
+ Brand Info Color
+
+
+ Brand Light Color
+
+
+ Brand Dark Color
+
+
- );
- }
+
+
+ Grays
+
+
+
+
+ Gray 100 Color
+
+
+ Gray 200 Color
+
+
+ Gray 300 Color
+
+
+ Gray 400 Color
+
+
+ Gray 500 Color
+
+
+ Gray 600 Color
+
+
+ Gray 700 Color
+
+
+ Gray 800 Color
+
+
+ Gray 900 Color
+
+
+
+
+
+ )
}
-export default Colors;
+export default Colors
diff --git a/src/views/Theme/Colors/Colors.test.js b/src/views/Theme/Colors/Colors.test.js
deleted file mode 100644
index dbed6eb..0000000
--- a/src/views/Theme/Colors/Colors.test.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import Colors from './Colors';
-import { mount } from 'enzyme'
-
-it('renders without crashing', () => {
- mount(
);
-});
diff --git a/src/views/Theme/Colors/package.json b/src/views/Theme/Colors/package.json
deleted file mode 100644
index 6a2c041..0000000
--- a/src/views/Theme/Colors/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Colors",
- "version": "0.0.0",
- "private": true,
- "main": "./Colors.js"
-}
diff --git a/src/views/Theme/Typography/Typography.js b/src/views/Theme/Typography/Typography.js
index 658f70e..5b5645d 100644
--- a/src/views/Theme/Typography/Typography.js
+++ b/src/views/Theme/Typography/Typography.js
@@ -1,170 +1,168 @@
-import React, { Component } from 'react';
+import React from 'react'
-class Typography extends Component {
- render() {
- return (
-
-
-
- Headings
+const Typography = () => {
+ return (
+ <>
+
+
+ Headings
+
+
+
Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
+
+
+
+ | Heading |
+ Example |
+
+
+
+
+ |
+ <h1></h1>
+ |
+ h1. Bootstrap heading |
+
+
+ |
+ <h2></h2>
+ |
+ h2. Bootstrap heading |
+
+
+ |
+ <h3></h3>
+ |
+ h3. Bootstrap heading |
+
+
+ |
+ <h4></h4>
+ |
+ h4. Bootstrap heading |
+
+
+ |
+ <h5></h5>
+ |
+ h5. Bootstrap heading |
+
+
+ |
+ <h6></h6>
+ |
+ h6. Bootstrap heading |
+
+
+
+
+
+
+
+ Headings
+
+
+
.h1 through .h6 classes are also available, for when you
+ want to match the font styling of a heading but cannot use the associated HTML element.
+
+
h1. Bootstrap heading
+
h2. Bootstrap heading
+
h3. Bootstrap heading
+
h4. Bootstrap heading
+
h5. Bootstrap heading
+
h6. Bootstrap heading
-
-
Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
+
+
+
+
+ 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.
+
-
-
- | Heading |
- Example |
-
-
- |
- <h1></h1>
- |
- h1. Bootstrap heading |
+ Display 1 |
- |
- <h2></h2>
- |
- h2. Bootstrap heading |
+ Display 2 |
- |
- <h3></h3>
- |
- h3. Bootstrap heading |
+ Display 3 |
- |
- <h4></h4>
- |
- h4. Bootstrap heading |
-
-
- |
- <h5></h5>
- |
- h5. Bootstrap heading |
-
-
- |
- <h6></h6>
- |
- h6. Bootstrap heading |
+ Display 4 |
-
-
- Headings
-
-
-
.h1 through .h6 classes are also available, for when you
- want to match the font styling of a heading but cannot use the associated HTML element.
-
-
h1. Bootstrap heading
-
h2. Bootstrap heading
-
h3. Bootstrap heading
-
h4. Bootstrap heading
-
h5. Bootstrap heading
-
h6. Bootstrap heading
-
-
+
+
+
+ Inline text elements
-
-
- Display headings
-
-
-
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using
- a display headingâa larger, slightly more opinionated heading style.
-
-
-
-
- | Display 1 |
-
-
- | Display 2 |
-
-
- | Display 3 |
-
-
- | Display 4 |
-
-
-
-
-
-
-
-
- Inline text elements
-
-
-
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using
- a display headingâa larger, slightly more opinionated heading style.
-
-
You can use the mark tag to highlight text.
-
- This line of text is meant to be treated as deleted text.
-
-
This line of text is meant to be treated as no longer accurate.
-
- This line of text is meant to be treated as an addition to the document.
-
-
This line of text will render as underlined
-
- This line of text is meant to be treated as fine print.
-
-
This line rendered as bold text.
-
This line rendered as italicized text.
-
-
-
-
-
- Description list alignment
-
-
-
Align terms and descriptions horizontally by using our grid systemâs predefined classes (or semantic mixins). For longer terms, you can
- optionally add a .text-truncate class to truncate the text with an ellipsis.
-
-
- - Description lists
- - A description list is perfect for defining terms.
-
- - Euismod
- -
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
-
-
- - Malesuada porta
- - Etiam porta sem malesuada magna mollis euismod.
-
- - Truncated term is truncated
- - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
-
- - Nesting
- -
-
- - Nested definition list
- - Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
-
-
-
-
+
+
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using
+ a display headingâa larger, slightly more opinionated heading style.
+
+
You can use the mark tag to highlight text.
+
+ This line of text is meant to be treated as deleted text.
+
+
This line of text is meant to be treated as no longer accurate.
+
+ This line of text is meant to be treated as an addition to the document.
+
+
This line of text will render as underlined
+
+ This line of text is meant to be treated as fine print.
+
+
This line rendered as bold text.
+
This line rendered as italicized text.
- );
- }
+
+
+ Description list alignment
+
+
+
Align terms and descriptions horizontally by using our grid systemâs predefined classes (or semantic mixins). For longer terms, you can
+ optionally add a .text-truncate class to truncate the text with an ellipsis.
+
+
+ - Description lists
+ - A description list is perfect for defining terms.
+
+ - Euismod
+ -
+
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+ Donec id elit non mi porta gravida at eget metus.
+
+
+ - Malesuada porta
+ - Etiam porta sem malesuada magna mollis euismod.
+
+ - Truncated term is truncated
+ - Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+
+ - Nesting
+ -
+
+ - Nested definition list
+ - Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
+
+
+
+
+
+
+
+ )
}
-export default Typography;
+export default Typography
diff --git a/src/views/Theme/Typography/Typography.test.js b/src/views/Theme/Typography/Typography.test.js
deleted file mode 100644
index f80f352..0000000
--- a/src/views/Theme/Typography/Typography.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Typography from './Typography';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
\ No newline at end of file
diff --git a/src/views/Theme/Typography/package.json b/src/views/Theme/Typography/package.json
deleted file mode 100644
index 565eac2..0000000
--- a/src/views/Theme/Typography/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Typography",
- "version": "0.0.0",
- "private": true,
- "main": "./Typography.js"
-}
diff --git a/src/views/Theme/index.js b/src/views/Theme/index.js
deleted file mode 100644
index 0c540f1..0000000
--- a/src/views/Theme/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Colors from './Colors';
-import Typography from './Typography';
-
-export {
- Colors, Typography,
-};
\ No newline at end of file
diff --git a/src/views/Users/User.js b/src/views/Users/User.js
index 1663343..83b640c 100644
--- a/src/views/Users/User.js
+++ b/src/views/Users/User.js
@@ -1,46 +1,41 @@
-import React, { Component } from 'react';
-import { Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap';
+import React from 'react'
+import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
+import { CIcon } from '@coreui/icons-react'
import usersData from './UsersData'
-class User extends Component {
+const User = ({match}) => {
+ const user = usersData.find( user => user.id.toString() === match.params.id)
+ const userDetails = user ? Object.entries(user) :
+ [['id', (
Not found)]]
- render() {
-
- const user = usersData.find( user => user.id.toString() === this.props.match.params.id)
-
- const userDetails = user ? Object.entries(user) : [['id', (
Not found)]]
-
- return (
-
-
-
-
-
- User id: {this.props.match.params.id}
-
-
-
-
- {
- userDetails.map(([key, value]) => {
- return (
-
- | {`${key}:`} |
- {value} |
-
- )
- })
- }
-
-
-
-
-
-
-
- )
- }
+ return (
+
+
+
+
+ User id: {match.params.id}
+
+
+
+
+ {
+ userDetails.map(([key, value], index) => {
+ return (
+
+ | {`${key}:`} |
+ {value} |
+
+ )
+ })
+ }
+
+
+
+
+
+
+ )
}
-export default User;
+export default User
diff --git a/src/views/Users/User.test.js b/src/views/Users/User.test.js
deleted file mode 100644
index df0e3f4..0000000
--- a/src/views/Users/User.test.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import {MemoryRouter} from 'react-router-dom';
-import { mount } from 'enzyme'
-import User from './User';
-
-
-it('renders without crashing', () => {
- const wrapper = mount(
-
-
-
- );
- expect(wrapper.containsMatchingElement(
Samppa Nori)).toEqual(true)
- wrapper.unmount()
-});
diff --git a/src/views/Users/Users.js b/src/views/Users/Users.js
index 6574429..3d65433 100644
--- a/src/views/Users/Users.js
+++ b/src/views/Users/Users.js
@@ -1,70 +1,65 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import { Badge, Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap';
+import React from 'react';
+import { useHistory } from "react-router-dom";
+import {
+ CBadge,
+ CCard,
+ CCardBody,
+ CCardHeader,
+ CCol,
+ CDataTable,
+ CRow
+} from '@coreui/react';
import usersData from './UsersData'
-function UserRow(props) {
- const user = props.user
- const userLink = `/users/${user.id}`
-
- const getBadge = (status) => {
- return status === 'Active' ? 'success' :
- status === 'Inactive' ? 'secondary' :
- status === 'Pending' ? 'warning' :
- status === 'Banned' ? 'danger' :
- 'primary'
+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()
return (
-
- | {user.id} |
- {user.name} |
- {user.registered} |
- {user.role} |
- {user.status} |
-
+
+
+
+
+ Users
+ example
+
+
+ history.push(`/users/${item.id}`)}
+ scopedSlots = {{
+ 'status':
+ (item)=>(
+
+
+ {item.status}
+
+ |
+ )
+ }}
+ />
+
+
+
+
)
}
-class Users extends Component {
-
- render() {
-
- const userList = usersData.filter((user) => user.id < 10)
-
- return (
-
-
-
-
-
- Users example
-
-
-
-
-
- | id |
- name |
- registered |
- role |
- status |
-
-
-
- {userList.map((user, index) =>
-
- )}
-
-
-
-
-
-
-
- )
- }
-}
-
-export default Users;
+export default Users
diff --git a/src/views/Users/Users.test.js b/src/views/Users/Users.test.js
deleted file mode 100644
index 946fec6..0000000
--- a/src/views/Users/Users.test.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { MemoryRouter } from 'react-router-dom';
-import Users from './Users';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/views/Users/UsersData.js b/src/views/Users/UsersData.js
index 977920d..f5f923a 100644
--- a/src/views/Users/UsersData.js
+++ b/src/views/Users/UsersData.js
@@ -22,10 +22,8 @@ const usersData = [
{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: 'Einar Randall', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
- {id: 24, name: 'FĂ©lix Troels', registered: '2018/03/21', role: 'Staff', status: 'Active'},
- {id: 25, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
- {id: 42, name: 'Ford Prefex', registered: '2001/05/21', role: 'Alien', status: 'Don\'t panic!'}
+ {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/Users/package.json b/src/views/Users/package.json
deleted file mode 100644
index 46e3b02..0000000
--- a/src/views/Users/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Users",
- "version": "0.0.0",
- "private": true,
- "main": "./Users.js"
-}
diff --git a/src/views/Widgets/Widget01.js b/src/views/Widgets/Widget01.js
deleted file mode 100644
index bc4b384..0000000
--- a/src/views/Widgets/Widget01.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Card, CardBody, Progress } from 'reactstrap';
-import classNames from 'classnames';
-import { mapToCssModules } from 'reactstrap/lib/utils';
-
-const propTypes = {
- header: PropTypes.string,
- mainText: PropTypes.string,
- smallText: PropTypes.string,
- color: PropTypes.string,
- value: PropTypes.string,
- children: PropTypes.node,
- className: PropTypes.string,
- cssModule: PropTypes.object,
- variant: PropTypes.string,
-};
-
-const defaultProps = {
- header: '89.9%',
- mainText: 'Lorem ipsum...',
- smallText: 'Lorem ipsum dolor sit amet enim.',
- // color: '',
- value: '25',
- variant: '',
-};
-
-class Widget01 extends Component {
- render() {
- const { className, cssModule, header, mainText, smallText, color, value, children, variant, ...attributes } = this.props;
-
- // demo purposes only
- const progress = { style: '', color: color, value: value };
- const card = { style: '', bgColor: '' };
-
- if (variant === 'inverse') {
- progress.style = 'progress-white';
- progress.color = '';
- card.style = 'text-white';
- card.bgColor = 'bg-' + color;
- }
-
- const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule);
- progress.style = classNames('progress-xs my-3', progress.style);
-
- return (
-
-
- {header}
- {mainText}
-
- {smallText}
- {children}
-
-
- );
- }
-}
-
-Widget01.propTypes = propTypes;
-Widget01.defaultProps = defaultProps;
-
-export default Widget01;
diff --git a/src/views/Widgets/Widget02.js b/src/views/Widgets/Widget02.js
deleted file mode 100644
index 7326b34..0000000
--- a/src/views/Widgets/Widget02.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Card, CardBody, CardFooter } from 'reactstrap';
-import classNames from 'classnames';
-import { mapToCssModules } from 'reactstrap/lib/utils';
-
-const propTypes = {
- header: PropTypes.string,
- mainText: PropTypes.string,
- icon: PropTypes.string,
- color: PropTypes.string,
- variant: PropTypes.string,
- footer: PropTypes.bool,
- link: PropTypes.string,
- children: PropTypes.node,
- className: PropTypes.string,
- cssModule: PropTypes.object,
-};
-
-const defaultProps = {
- header: '$1,999.50',
- mainText: 'Income',
- icon: 'fa fa-cogs',
- color: 'primary',
- variant: '0',
- link: '#',
-};
-
-class Widget02 extends Component {
- render() {
- const { className, cssModule, header, mainText, icon, color, footer, link, children, variant, ...attributes } = this.props;
-
- // demo purposes only
- const padding = (variant === '0' ? { card: 'p-3', icon: 'p-3', lead: 'mt-2' } : (variant === '1' ? {
- card: 'p-0', icon: 'p-4', lead: 'pt-3',
- } : { card: 'p-0', icon: 'p-4 px-5', lead: 'pt-3' }));
-
- const card = { style: 'clearfix', color: color, icon: icon, classes: '' };
- card.classes = mapToCssModules(classNames(className, card.style, padding.card), cssModule);
-
- const lead = { style: 'h5 mb-0', color: color, classes: '' };
- lead.classes = classNames(lead.style, 'text-' + card.color, padding.lead);
-
- const blockIcon = function (icon) {
- const classes = classNames(icon, 'bg-' + card.color, padding.icon, 'font-2xl mr-3 float-left');
- return (
);
- };
-
- const cardFooter = function () {
- if (footer) {
- return (
-
- View More
-
-
- );
- }
- };
-
- return (
-
-
- {blockIcon(card.icon)}
- {header}
- {mainText}
-
- {cardFooter()}
-
- );
- }
-}
-
-Widget02.propTypes = propTypes;
-Widget02.defaultProps = defaultProps;
-
-export default Widget02;
\ No newline at end of file
diff --git a/src/views/Widgets/Widget03.js b/src/views/Widgets/Widget03.js
deleted file mode 100644
index 37a82e4..0000000
--- a/src/views/Widgets/Widget03.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { mapToCssModules } from 'reactstrap/lib/utils';
-
-const propTypes = {
- children: PropTypes.node,
- className: PropTypes.string,
- cssModule: PropTypes.object,
- dataBox: PropTypes.func,
-};
-
-const defaultProps = {
- dataBox: () => ({ variant: 'facebook', friends: '-', feeds: '-' }),
-};
-
-class Widget03 extends Component {
- render() {
-
- // eslint-disable-next-line
- const { children, className, cssModule, dataBox, ...attributes } = this.props;
-
- // demo purposes only
- const data = dataBox();
- const variant = data.variant;
-
- if (!variant || ['facebook', 'twitter', 'linkedin', 'google-plus'].indexOf(variant) < 0) {
- return (null);
- }
-
- const back = 'bg-' + variant;
- const icon = 'fa fa-' + variant;
- const keys = Object.keys(data);
- const vals = Object.values(data);
-
- const classCard = 'brand-card';
- const classCardHeader = classNames(`${classCard}-header`, back);
- const classCardBody = classNames(`${classCard}-body`);
- const classes = mapToCssModules(classNames(classCard, className), cssModule);
-
- return (
-
-
-
- {children}
-
-
-
-
{vals[1]}
-
{keys[1]}
-
-
-
{vals[2]}
-
{keys[2]}
-
-
-
- );
- }
-}
-
-Widget03.propTypes = propTypes;
-Widget03.defaultProps = defaultProps;
-
-export default Widget03;
diff --git a/src/views/Widgets/Widget04.js b/src/views/Widgets/Widget04.js
deleted file mode 100644
index 0f76743..0000000
--- a/src/views/Widgets/Widget04.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Card, CardBody, Progress } from 'reactstrap';
-import classNames from 'classnames';
-import { mapToCssModules } from 'reactstrap/lib/utils';
-
-const propTypes = {
- header: PropTypes.string,
- icon: PropTypes.string,
- color: PropTypes.string,
- value: PropTypes.string,
- children: PropTypes.node,
- className: PropTypes.string,
- cssModule: PropTypes.object,
- invert: PropTypes.bool,
-};
-
-const defaultProps = {
- header: '87.500',
- icon: 'icon-people',
- color: 'info',
- value: '25',
- children: 'Visitors',
- invert: false,
-};
-
-class Widget04 extends Component {
- render() {
- const { className, cssModule, header, icon, color, value, children, invert, ...attributes } = this.props;
-
- // demo purposes only
- const progress = { style: '', color: color, value: value };
- const card = { style: '', bgColor: '', icon: icon };
-
- if (invert) {
- progress.style = 'progress-white';
- progress.color = '';
- card.style = 'text-white';
- card.bgColor = 'bg-' + color;
- }
-
- const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule);
- progress.style = classNames('progress-xs mt-3 mb-0', progress.style);
-
- return (
-
-
-
-
-
- {header}
- {children}
-
-
-
- );
- }
-}
-
-Widget04.propTypes = propTypes;
-Widget04.defaultProps = defaultProps;
-
-export default Widget04;
\ No newline at end of file
diff --git a/src/views/Widgets/Widgets.js b/src/views/Widgets/Widgets.js
index e94374c..7ea4390 100644
--- a/src/views/Widgets/Widgets.js
+++ b/src/views/Widgets/Widgets.js
@@ -1,232 +1,370 @@
-import React, { Component } from 'react';
-import { CardGroup, Col, Row } from 'reactstrap';
-import Widget01 from './Widget01';
-import Widget02 from './Widget02';
-import Widget03 from './Widget03';
-import Widget04 from './Widget04';
-import { Line } from 'react-chartjs-2';
+import React from 'react'
+import {
+ CCardGroup,
+ CCardFooter,
+ CCol,
+ CLink,
+ CRow,
+ CWidgetProgress,
+ CWidgetIcon,
+ CWidgetProgressIcon,
+ CWidgetSimple,
+ CProgress,
+} from '@coreui/react'
+import WidgetsBrand from './WidgetsBrand'
+import WidgetsDropdown from './WidgetsDropdown'
+import ChartLineSimple from '../Charts/ChartLineSimple'
+import ChartBarSimple from '../Charts/ChartBarSimple'
-// Brand Card Chart
-const makeSocialBoxData = (dataSetNo) => {
- const socialBoxData = [
- { data: [65, 59, 84, 84, 51, 55, 40], label: 'facebook' },
- { data: [1, 13, 9, 17, 34, 41, 38], label: 'twitter' },
- { data: [78, 81, 80, 45, 34, 12, 40], label: 'linkedin' },
- { data: [35, 23, 56, 22, 97, 23, 64], label: 'google' },
- ];
+import { CIcon } from '@coreui/icons-react'
- const dataset = socialBoxData[dataSetNo];
- const data = {
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- datasets: [
- {
- backgroundColor: 'rgba(255,255,255,.1)',
- borderColor: 'rgba(255,255,255,.55)',
- pointHoverBackgroundColor: '#fff',
- borderWidth: 2,
- data: dataset.data,
- label: dataset.label,
- },
- ],
- };
- return () => data;
-};
+const Widgets = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-const socialChartOpts = {
- responsive: true,
- maintainAspectRatio: false,
- legend: {
- display: false,
- },
- scales: {
- xAxes: [
- {
- display: false,
- }],
- yAxes: [
- {
- display: false,
- }],
- },
- elements: {
- point: {
- radius: 0,
- hitRadius: 10,
- hoverRadius: 4,
- hoverBorderWidth: 3,
- },
- },
-};
+
+
+
+
+
+
+
+
+
+
+
+
-class Widgets extends Component {
- render() {
- return (
-
-
-
-
-
-
-
-
-
-
- Excepteur sint occaecat...
-
-
-
-
-
-
-
-
-
-
-
-
-
- Excepteur sint occaecat...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ({ variant: 'facebook', friends: '89k', feeds: '459' })} >
-
-
-
-
-
-
- ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} >
-
-
-
-
-
-
- ({ variant: 'linkedin', contacts: '500+', feeds: '292' })} >
-
-
-
-
-
-
- ({ variant: 'google-plus', followers: '894', circles: '92' })} >
-
-
-
-
-
-
-
- Visitors
- New Clients
- Products sold
- Returning Visitors
- Avg. Time
-
-
-
- Visitors
-
-
- New Clients
-
-
- Products sold
-
-
- Returning Visitors
-
-
- Avg. Time
-
-
- Comments
-
-
-
-
- Visitors
-
-
- New Clients
-
-
- Products sold
-
-
- Returning Visitors
-
-
- Avg. Time
-
-
- Comments
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ View more
+
+
+
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
}
-export default Widgets;
+export default Widgets
diff --git a/src/views/Widgets/Widgets.test.js b/src/views/Widgets/Widgets.test.js
deleted file mode 100644
index 27fdf3f..0000000
--- a/src/views/Widgets/Widgets.test.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Widgets from './Widgets';
-
-jest.mock('react-chartjs-2', () => ({
- Line: () => null,
-}));
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(
, div);
- ReactDOM.unmountComponentAtNode(div);
-})
\ No newline at end of file
diff --git a/src/views/Widgets/WidgetsBrand.js b/src/views/Widgets/WidgetsBrand.js
new file mode 100644
index 0000000..41c19b8
--- /dev/null
+++ b/src/views/Widgets/WidgetsBrand.js
@@ -0,0 +1,177 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CWidgetBrand, CRow, CCol } from '@coreui/react';
+import { CIcon } from '@coreui/icons-react';
+import ChartLineSimple from '../Charts/ChartLineSimple';
+
+const WidgetsBrand = ({withCharts})=>{
+
+ // render
+
+ return withCharts ?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ :
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+WidgetsBrand.propTypes = {
+ withCharts: PropTypes.bool
+}
+
+export default WidgetsBrand
diff --git a/src/views/Widgets/WidgetsDropdown.js b/src/views/Widgets/WidgetsDropdown.js
new file mode 100644
index 0000000..3ae5f8c
--- /dev/null
+++ b/src/views/Widgets/WidgetsDropdown.js
@@ -0,0 +1,148 @@
+import React from 'react'
+import {
+ CWidgetDropdown,
+ CRow,
+ CCol,
+ CDropdown,
+ CDropdownMenu,
+ CDropdownItem,
+ CDropdownToggle
+} from '@coreui/react'
+import {
+ CIcon
+} from '@coreui/icons-react'
+import ChartLineSimple from '../Charts/ChartLineSimple'
+import ChartBarSimple from '../Charts/ChartBarSimple'
+
+const WidgetsDropdown = () => {
+ // render
+ return (
+
+
+
+ }
+ >
+
+
+
+
+
+ Action
+ Another action
+ Something else here...
+ Disabled action
+
+
+
+
+
+
+
+ }
+ >
+
+
+
+
+
+ Action
+ Another action
+ Something else here...
+ Disabled action
+
+
+
+
+
+
+
+ }
+ >
+
+
+
+
+
+ Action
+ Another action
+ Something else here...
+ Disabled action
+
+
+
+
+
+
+
+ }
+ >
+
+
+
+
+
+ Action
+ Another action
+ Something else here...
+ Disabled action
+
+
+
+
+
+ )
+}
+
+export default WidgetsDropdown
diff --git a/src/views/Widgets/package.json b/src/views/Widgets/package.json
deleted file mode 100644
index 0348138..0000000
--- a/src/views/Widgets/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Widgets",
- "version": "0.0.0",
- "private": true,
- "main": "./Widgets.js"
-}
diff --git a/src/views/index.js b/src/views/index.js
deleted file mode 100644
index 1a87c6f..0000000
--- a/src/views/index.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import {
- Breadcrumbs,
- Cards,
- Carousels,
- Collapses,
- Dropdowns,
- Forms,
- Jumbotrons,
- ListGroups,
- Navbars,
- Navs,
- Paginations,
- Popovers,
- ProgressBar,
- Switches,
- Tables,
- Tabs,
- Tooltips,
-} from './Base';
-
-import { ButtonDropdowns, ButtonGroups, Buttons, BrandButtons } from './Buttons';
-import Charts from './Charts';
-import Dashboard from './Dashboard';
-import { CoreUIIcons, Flags, FontAwesome, SimpleLineIcons } from './Icons';
-import { Alerts, Badges, Modals } from './Notifications';
-import { Login, Page404, Page500, Register } from './Pages';
-import { Colors, Typography } from './Theme';
-import Widgets from './Widgets';
-
-export {
- Badges,
- Typography,
- Colors,
- CoreUIIcons,
- Page404,
- Page500,
- Register,
- Login,
- Modals,
- Alerts,
- Flags,
- SimpleLineIcons,
- FontAwesome,
- ButtonDropdowns,
- ButtonGroups,
- BrandButtons,
- Buttons,
- Tooltips,
- Tabs,
- Tables,
- Charts,
- Dashboard,
- Widgets,
- Jumbotrons,
- Switches,
- ProgressBar,
- Popovers,
- Navs,
- Navbars,
- ListGroups,
- Forms,
- Dropdowns,
- Collapses,
- Carousels,
- Cards,
- Breadcrumbs,
- Paginations,
-};
-
