diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md deleted file mode 100644 index 00045c0de..000000000 --- a/ISSUE_TEMPLATE.md +++ /dev/null @@ -1,20 +0,0 @@ -Before opening an issue: - -- [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-react-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue) -- Prepare a [reduced test case](https://css-tricks.com/reduced-test-cases/) for any bugs - - -When asking general "how to" questions: - -- Please do not open an issue here - -When reporting a bug, include: - -- Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile) -- Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera, Android Browser) -- Reduced test cases and potential fixes using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/) - -When suggesting a feature, include: - -- As much detail as possible for what we should add and why it's important to CoreUI Admin Template -- Relevant links to prior art, screenshots, or live demos whenever possible diff --git a/REACT.md b/REACT.md deleted file mode 100644 index e3e62a422..000000000 --- a/REACT.md +++ /dev/null @@ -1,19 +0,0 @@ -# CoreUI React version - -## Intro -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) - -It uses Sass (with .scss). The styles are loaded at the template level with `node-sass-chokidar` css preprocessor - -Dependencies are handled by **npm**. - -## Usage -`npm i` - to install dependencies - -## Sctipts -`npm start` for developing (it runs webpack-dev-server) -`npm run build` to run a dev build - -## See also -[Create-React-App](CRA.md) -[Readme](./README.md) diff --git a/README.md b/README.md deleted file mode 100644 index d1af00de9..000000000 --- a/README.md +++ /dev/null @@ -1,174 +0,0 @@ -[![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui) -[![npm package][npm-coreui-badge]][npm-coreui] -[![NPM downloads][npm-coreui-download]][npm-coreui] -[![@coreui react](https://img.shields.io/badge/@coreui%20-react-lightgrey.svg?style=flat-square)](https://github.com/coreui/react) -[![npm package][npm-coreui-react-badge]][npm-coreui-react] -[![NPM downloads][npm-coreui-react-download]][npm-coreui-react] -[![npm next][npm-next]][npm] - -[npm-coreui]: https://www.npmjs.com/package/@coreui/coreui -[npm-coreui-badge]: https://img.shields.io/npm/v/@coreui/coreui.png?style=flat-square -[npm-coreui-download]: https://img.shields.io/npm/dm/@coreui/coreui.svg?style=flat-square -[npm-coreui-react]: https://www.npmjs.com/package/@coreui/react -[npm-coreui-react-badge]: https://img.shields.io/npm/v/@coreui/react.png?style=flat-square -[npm-coreui-react-download]: https://img.shields.io/npm/dm/@coreui/react.svg?style=flat-square -[npm-next]: https://img.shields.io/npm/v/@coreui/react/next.png?style=flat-square -[npm]: https://www.npmjs.com/package/@coreui/react - -# CoreUI Free React Admin Template v3 - -CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all! - -## Table of Contents - -* [Versions](#versions) -* [CoreUI Pro](#coreui-pro) -* [Installation](#installation) -* [Basic usage](#create-react-app) -* [What's included](#whats-included) -* [Documentation](#documentation) -* [Versioning](#versioning) -* [Creators](#creators) -* [Community](#community) -* [Copyright and License](#copyright-and-license) - -## Versions - -* [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template) -* [CoreUI Free Angular 9+ Admin Template](https://github.com/coreui/coreui-free-angular-admin-template) -* [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template) -* [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template) -* [CoreUI Free Laravel Admin Template](https://github.com/coreui/coreui-free-laravel-admin-template) -* [CoreUI Free Vue.js + Laravel Admin Template](https://github.com/coreui/coreui-free-vue-laravel-admin-template) - -## CoreUI Pro - -**Only customers with [Enterpise Membership Plan](https://coreui.io/pro/#buy) have access to private github CoreUI Pro repository.** - -* πŸ’ͺ [CoreUI Pro Bootstrap Admin Template](https://coreui.io/pro/) -* πŸ’ͺ [CoreUI Pro Angular 9+ Admin Template](https://coreui.io/pro/angular) -* πŸ’ͺ [CoreUI Pro React Admin Template](https://coreui.io/pro/react) -* πŸ’ͺ [CoreUI Pro Vue Admin Template](https://coreui.io/pro/vue) -* πŸ’ͺ [CoreUI Pro Laravel Admin Template](https://coreui.io/pro/laravel/) -* πŸ’ͺ [CoreUI Pro Vue.js + Laravel Admin Template](https://coreui.io/pro/vue-laravel/) - -## Installation - -### Clone repo - -``` bash -# clone the repo -$ git clone https://github.com/coreui/coreui-free-react-admin-template.git my-project - -# go into app's directory -$ cd my-project - -# install app's dependencies -$ npm install -``` - -### Copy and Paste - -Copy all your files to your project folder and then, - -``` bash -# go into app's directory -$ cd my-project - -# install app's dependencies -$ npm install -``` - -## Create React App -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) - -see also: -[CRA docs](https://create-react-app.dev/docs/getting-started) - -### Basic usage - -``` bash -# dev server with hot reload at http://localhost:3000 -$ npm start -``` - -Navigate to [http://localhost:3000](http://localhost:3000). The app will automatically reload if you change any of the source files. - -### Build - -Run `build` to build the project. The build artifacts will be stored in the `build/` directory. - -```bash -# build for production with minification -$ npm run build -``` - -## What's included - -Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this: - -``` -CoreUI-React#v3.0.0 -β”œβ”€β”€ public/ #static files -β”‚ └── index.html #html template -β”‚ -β”œβ”€β”€ src/ #project root -β”‚ β”œβ”€β”€ assets/ #assets - js icons object -β”‚ β”œβ”€β”€ containers/ #container source - template layout -| β”‚ β”œβ”€β”€ _nav.js #sidebar config -| β”‚ └── ... -β”‚ β”œβ”€β”€ scss/ #user scss/css source -β”‚ β”œβ”€β”€ views/ #views source -β”‚ β”œβ”€β”€ App.js -β”‚ β”œβ”€β”€ App.test.js -β”‚ β”œβ”€β”€ polyfill.js -β”‚ β”œβ”€β”€ index.js -β”‚ β”œβ”€β”€ routes.js #routes config -β”‚ └── store.js #template state example -β”‚ -└── package.json -``` - -## Documentation - -The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for React](https://coreui.io/react/) - -### :film_strip: How to setup coreui react theme in laravel. Video tutorial available [here](https://youtu.be/HVVpbpNUJ8M) - -## Versioning - -For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI Free Admin Template is maintained under [the Semantic Versioning guidelines](http://semver.org/). - -See [the Releases section of our project](https://github.com/coreui/coreui-free-react-admin-template/releases) for changelogs for each release version. - -## Creators - -**Łukasz Holeczek** -* -* -* - -**CoreUI team** -* https://github.com/orgs/coreui/people - -## Community - -Get updates on CoreUI's development and chat with the project maintainers and community members. - -- Follow [@core_ui on Twitter](https://twitter.com/core_ui). -- Read and subscribe to [CoreUI Blog](https://coreui.ui/blog/). - - -## Copyright and License - -copyright 2020 creativeLabs Łukasz Holeczek. - - -Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/master/LICENSE). -There is only one limitation you can't can’t re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI. In past we faced some problems with persons who tried to sell CoreUI based templates. - -## Support CoreUI Development - -CoreUI is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying [CoreUI Pro Version](https://coreui.io/pro/). - -We're also open to conversations regarding custom sponsorship / consulting arrangements. Get in touch on [Twitter](https://twitter.com/lukaszholeczek). diff --git a/package-lock.json b/package-lock.json index c97bdf38f..92ec1aec6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5270,9 +5270,9 @@ "dev": true }, "elliptic": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz", - "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==", + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz", + "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==", "dev": true, "requires": { "bn.js": "^4.4.0", @@ -7895,7 +7895,6 @@ "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dev": true, "requires": { "loose-envify": "^1.0.0" } @@ -9548,6 +9547,11 @@ "object.assign": "^4.1.0" } }, + "just-curry-it": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/just-curry-it/-/just-curry-it-3.1.0.tgz", + "integrity": "sha512-mjzgSOFzlrurlURaHVjnQodyPNvrHrf1TbQP2XU9NSqBtHQPuHZ+Eb6TAJP7ASeJN9h9K0KXoRTs8u6ouHBKvg==" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -9720,9 +9724,9 @@ } }, "lodash": { - "version": "4.17.15", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" + "version": "4.17.19", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", + "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==" }, "lodash._reinterpolate": { "version": "3.0.0", @@ -13297,6 +13301,11 @@ "strip-indent": "^1.0.1" } }, + "reduce-reducers": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/reduce-reducers/-/reduce-reducers-0.4.3.tgz", + "integrity": "sha512-+CNMnI8QhgVMtAt54uQs3kUxC3Sybpa7Y63HR14uGLgI9/QR5ggHvpxwhGGe3wmx5V91YwqQIblN9k5lspAmGw==" + }, "redux": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz", @@ -13306,6 +13315,18 @@ "symbol-observable": "^1.2.0" } }, + "redux-actions": { + "version": "2.6.5", + "resolved": "https://registry.npmjs.org/redux-actions/-/redux-actions-2.6.5.tgz", + "integrity": "sha512-pFhEcWFTYNk7DhQgxMGnbsB1H2glqhQJRQrtPb96kD3hWiZRzXHwwmFPswg6V2MjraXRXWNmuP9P84tvdLAJmw==", + "requires": { + "invariant": "^2.2.4", + "just-curry-it": "^3.1.0", + "loose-envify": "^1.4.0", + "reduce-reducers": "^0.4.3", + "to-camel-case": "^1.0.0" + } + }, "reflect.ownkeys": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz", @@ -15484,12 +15505,25 @@ "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=", "dev": true }, + "to-camel-case": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/to-camel-case/-/to-camel-case-1.0.0.tgz", + "integrity": "sha1-GlYFSy+daWKYzmamCJcyK29CPkY=", + "requires": { + "to-space-case": "^1.0.0" + } + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", "dev": true }, + "to-no-case": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/to-no-case/-/to-no-case-1.0.2.tgz", + "integrity": "sha1-xyKQcWTvaxeBMsjmmTAhLRtKoWo=" + }, "to-object-path": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz", @@ -15521,6 +15555,14 @@ "repeat-string": "^1.6.1" } }, + "to-space-case": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/to-space-case/-/to-space-case-1.0.0.tgz", + "integrity": "sha1-sFLar7Gysp3HcM6gFj5ewOvJ/Bc=", + "requires": { + "to-no-case": "^1.0.0" + } + }, "toidentifier": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", diff --git a/package.json b/package.json index afaf730cc..1a5c4d4c0 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,8 @@ "react-dom": "^16.13.1", "react-redux": "7.2.0", "react-router-dom": "^5.2.0", - "redux": "4.0.5" + "redux": "4.0.5", + "redux-actions": "^2.6.5" }, "devDependencies": { "react-scripts": "^3.4.1" diff --git a/src/App.js b/src/App.js index 4fbee33b3..cdd9aaebe 100644 --- a/src/App.js +++ b/src/App.js @@ -1,36 +1,59 @@ -import React, { Component } from 'react'; -import { HashRouter, Route, Switch } from 'react-router-dom'; -import './scss/style.scss'; +import React, { Component } from "react"; +import { HashRouter, Route, Switch } from "react-router-dom"; +import "./scss/style.scss"; const loading = (
-) +); // Containers -const TheLayout = React.lazy(() => import('./containers/TheLayout')); +const TheLayout = React.lazy(() => import("./containers/TheLayout")); // Pages -const Login = React.lazy(() => import('./views/pages/login/Login')); -const Register = React.lazy(() => import('./views/pages/register/Register')); -const Page404 = React.lazy(() => import('./views/pages/page404/Page404')); -const Page500 = React.lazy(() => import('./views/pages/page500/Page500')); +const Login = React.lazy(() => import("./views/pages/login/Login")); +const Register = React.lazy(() => import("./views/pages/register/Register")); +const Page404 = React.lazy(() => import("./views/pages/page404/Page404")); +const Page500 = React.lazy(() => import("./views/pages/page500/Page500")); class App extends Component { - render() { return ( - - - } /> - } /> - } /> - } /> - } /> - - + + + } + /> + } + /> + } + /> + } + /> + } + /> + + ); } diff --git a/src/App.test.js b/src/App.test.js index 7af377dfc..8b874a3ad 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,9 +1,8 @@ -import React from 'react'; -import {shallow} from 'enzyme/build'; -import App from './App'; +import React from "react"; +import { shallow } from "enzyme/build"; +import App from "./App"; - -it('mounts without crashing', () => { +it("mounts without crashing", () => { const wrapper = shallow(); - wrapper.unmount() + wrapper.unmount(); }); diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js index 8b016f5e6..64e1a00c5 100644 --- a/src/assets/icons/index.js +++ b/src/assets/icons/index.js @@ -1,6 +1,6 @@ -import { sygnet } from './sygnet' -import { logo } from './logo' -import { logoNegative } from './logo-negative' +import { sygnet } from "./sygnet"; +import { logo } from "./logo"; +import { logoNegative } from "./logo-negative"; import { cibSkype, @@ -26,16 +26,9 @@ import { cibStripe, cibPaypal, cibGooglePay, - cibCcAmex -} from '@coreui/icons' -import { - cifUs, - cifBr, - cifIn, - cifFr, - cifEs, - cifPl -} from '@coreui/icons' + cibCcAmex, +} from "@coreui/icons"; +import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from "@coreui/icons"; import { cilAlignCenter, cilAlignLeft, @@ -127,135 +120,141 @@ import { cilUserUnfollow, cilX, cilXCircle, - cilWarning -} from '@coreui/icons' + cilWarning, +} from "@coreui/icons"; -export const icons = Object.assign({}, { - sygnet, - logo, - logoNegative -}, { - cilAlignCenter, - cilAlignLeft, - cilAlignRight, - cilApplicationsSettings, - cilArrowRight, - cilArrowTop, - cilAsterisk, - cilBan, - cilBasket, - cilBell, - cilBold, - cilBookmark, - cilCalculator, - cilCalendar, - cilCloudDownload, - cilChartPie, - cilCheck, - cilChevronBottom, - cilChevronLeft, - cilChevronRight, - cilChevronTop, - cilCircle, - cilCheckCircle, - cilCode, - cilCommentSquare, - cilCreditCard, - cilCursor, - cilCursorMove, - cilDrop, - cilDollar, - cilEnvelopeClosed, - cilEnvelopeLetter, - cilEnvelopeOpen, - cilEuro, - cilGlobeAlt, - cilGrid, - cilFile, - cilFullscreen, - cilFullscreenExit, - cilGraph, - cilHome, - cilInbox, - cilIndentDecrease, - cilIndentIncrease, - cilInputPower, - cilItalic, - cilJustifyCenter, - cilJustifyLeft, - cilLaptop, - cilLayers, - cilLightbulb, - cilList, - cilListNumbered, - cilListRich, - cilLocationPin, - cilLockLocked, - cilMagnifyingGlass, - cilMap, - cilMoon, - cilNotes, - cilOptions, - cilPaperclip, - cilPaperPlane, - cilPencil, - cilPeople, - cilPhone, - cilPrint, - cilPuzzle, - cilSave, - cilScrubber, - cilSettings, - cilShare, - cilShareAll, - cilShareBoxed, - cilShieldAlt, - cilSpeech, - cilSpeedometer, - cilSpreadsheet, - cilStar, - cilSun, - cilTags, - cilTask, - cilTrash, - cilUnderline, - cilUser, - cilUserFemale, - cilUserFollow, - cilUserUnfollow, - cilX, - cilXCircle, - cilWarning -}, { - cifUs, - cifBr, - cifIn, - cifFr, - cifEs, - cifPl -}, { - cibSkype, - cibFacebook, - cibTwitter, - cibLinkedin, - cibFlickr, - cibTumblr, - cibXing, - cibGithub, - cibStackoverflow, - cibYoutube, - cibDribbble, - cibInstagram, - cibPinterest, - cibVk, - cibYahoo, - cibBehance, - cibReddit, - cibVimeo, - cibCcMastercard, - cibCcVisa, - cibStripe, - cibPaypal, - cibGooglePay, - cibCcAmex -}) +export const icons = Object.assign( + {}, + { + sygnet, + logo, + logoNegative, + }, + { + cilAlignCenter, + cilAlignLeft, + cilAlignRight, + cilApplicationsSettings, + cilArrowRight, + cilArrowTop, + cilAsterisk, + cilBan, + cilBasket, + cilBell, + cilBold, + cilBookmark, + cilCalculator, + cilCalendar, + cilCloudDownload, + cilChartPie, + cilCheck, + cilChevronBottom, + cilChevronLeft, + cilChevronRight, + cilChevronTop, + cilCircle, + cilCheckCircle, + cilCode, + cilCommentSquare, + cilCreditCard, + cilCursor, + cilCursorMove, + cilDrop, + cilDollar, + cilEnvelopeClosed, + cilEnvelopeLetter, + cilEnvelopeOpen, + cilEuro, + cilGlobeAlt, + cilGrid, + cilFile, + cilFullscreen, + cilFullscreenExit, + cilGraph, + cilHome, + cilInbox, + cilIndentDecrease, + cilIndentIncrease, + cilInputPower, + cilItalic, + cilJustifyCenter, + cilJustifyLeft, + cilLaptop, + cilLayers, + cilLightbulb, + cilList, + cilListNumbered, + cilListRich, + cilLocationPin, + cilLockLocked, + cilMagnifyingGlass, + cilMap, + cilMoon, + cilNotes, + cilOptions, + cilPaperclip, + cilPaperPlane, + cilPencil, + cilPeople, + cilPhone, + cilPrint, + cilPuzzle, + cilSave, + cilScrubber, + cilSettings, + cilShare, + cilShareAll, + cilShareBoxed, + cilShieldAlt, + cilSpeech, + cilSpeedometer, + cilSpreadsheet, + cilStar, + cilSun, + cilTags, + cilTask, + cilTrash, + cilUnderline, + cilUser, + cilUserFemale, + cilUserFollow, + cilUserUnfollow, + cilX, + cilXCircle, + cilWarning, + }, + { + cifUs, + cifBr, + cifIn, + cifFr, + cifEs, + cifPl, + }, + { + cibSkype, + cibFacebook, + cibTwitter, + cibLinkedin, + cibFlickr, + cibTumblr, + cibXing, + cibGithub, + cibStackoverflow, + cibYoutube, + cibDribbble, + cibInstagram, + cibPinterest, + cibVk, + cibYahoo, + cibBehance, + cibReddit, + cibVimeo, + cibCcMastercard, + cibCcVisa, + cibStripe, + cibPaypal, + cibGooglePay, + cibCcAmex, + } +); diff --git a/src/assets/icons/logo-negative.js b/src/assets/icons/logo-negative.js index 337875ecc..840b14029 100644 --- a/src/assets/icons/logo-negative.js +++ b/src/assets/icons/logo-negative.js @@ -1,4 +1,6 @@ -export const logoNegative = ['608 134', ` +export const logoNegative = [ + "608 134", + ` coreui react pro logo @@ -27,4 +29,5 @@ export const logoNegative = ['608 134', ` -`] +`, +]; diff --git a/src/assets/icons/logo.js b/src/assets/icons/logo.js index 01d6ddd13..8c6c0554c 100644 --- a/src/assets/icons/logo.js +++ b/src/assets/icons/logo.js @@ -1,4 +1,6 @@ -export const logo = ['608 134', ` +export const logo = [ + "608 134", + ` coreui react pro @@ -26,4 +28,5 @@ export const logo = ['608 134', ` -`] +`, +]; diff --git a/src/assets/icons/sygnet.js b/src/assets/icons/sygnet.js index fddab7ed7..3fd3f90a2 100644 --- a/src/assets/icons/sygnet.js +++ b/src/assets/icons/sygnet.js @@ -1,4 +1,6 @@ -export const sygnet = ['160 160', ` +export const sygnet = [ + "160 160", + ` coreui logo @@ -6,4 +8,5 @@ export const sygnet = ['160 160', ` -`] +`, +]; diff --git a/src/containers/TheContent.js b/src/containers/TheContent.js index 20ba9b1e5..4e6d4d5ed 100644 --- a/src/containers/TheContent.js +++ b/src/containers/TheContent.js @@ -1,19 +1,15 @@ -import React, { Suspense } from 'react' -import { - Redirect, - Route, - Switch -} from 'react-router-dom' -import { CContainer, CFade } from '@coreui/react' +import React, { Suspense } from "react"; +import { Redirect, Route, Switch } from "react-router-dom"; +import { CContainer, CFade } from "@coreui/react"; // routes config -import routes from '../routes' - +import routes from "../routes"; + const loading = (
-) +); const TheContent = () => { return ( @@ -22,25 +18,28 @@ const TheContent = () => { {routes.map((route, idx) => { - return route.component && ( - ( - - - - )} /> - ) + return ( + route.component && ( + ( + + + + )} + /> + ) + ); })} - ) -} + ); +}; -export default React.memo(TheContent) +export default React.memo(TheContent); diff --git a/src/containers/TheFooter.js b/src/containers/TheFooter.js index b7fb4efbb..300a4aa5f 100644 --- a/src/containers/TheFooter.js +++ b/src/containers/TheFooter.js @@ -1,19 +1,27 @@ -import React from 'react' -import { CFooter } from '@coreui/react' +import React from "react"; +import { CFooter } from "@coreui/react"; const TheFooter = () => { return (
- CoreUI + + CoreUI + © 2020 creativeLabs.
- ) -} + ); +}; -export default React.memo(TheFooter) +export default React.memo(TheFooter); diff --git a/src/containers/TheHeader.js b/src/containers/TheHeader.js index f4fbf44d0..ecd2df98a 100644 --- a/src/containers/TheHeader.js +++ b/src/containers/TheHeader.js @@ -1,5 +1,5 @@ -import React from 'react' -import { useSelector, useDispatch } from 'react-redux' +import React from "react"; +import { useSelector, useDispatch } from "react-redux"; import { CHeader, CToggler, @@ -9,33 +9,39 @@ import { CHeaderNavLink, CSubheader, CBreadcrumbRouter, - CLink -} from '@coreui/react' -import CIcon from '@coreui/icons-react' + CLink, +} from "@coreui/react"; +import CIcon from "@coreui/icons-react"; // routes config -import routes from '../routes' +import routes from "../routes"; -import { +import { TheHeaderDropdown, TheHeaderDropdownMssg, TheHeaderDropdownNotif, - TheHeaderDropdownTasks -} from './index' + TheHeaderDropdownTasks, +} from "./index"; + +import { setSidebarShow } from "../redux/sidebar/action"; const TheHeader = () => { - const dispatch = useDispatch() - const sidebarShow = useSelector(state => state.sidebarShow) + const dispatch = useDispatch(); + const { sidebarShow } = useSelector((state) => state.sidebar); const toggleSidebar = () => { - const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive' - dispatch({type: 'set', sidebarShow: val}) - } + const val = [true, "responsive"].includes(sidebarShow) + ? false + : "responsive"; + dispatch(setSidebarShow(val)); + }; const toggleSidebarMobile = () => { - const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive' - dispatch({type: 'set', sidebarShow: val}) - } + const val = [false, "responsive"].includes(sidebarShow) + ? true + : "responsive"; + dispatch(setSidebarShow(val)); + }; return ( @@ -50,14 +56,14 @@ const TheHeader = () => { onClick={toggleSidebar} /> - + - + Dashboard - + Users @@ -66,35 +72,37 @@ const TheHeader = () => { - - - - + + + + - -
- - - - -  Dashboard - - -  Settings - -
+
+ + + + + +  Dashboard + + + +  Settings + +
- ) -} + ); +}; -export default TheHeader +export default TheHeader; diff --git a/src/containers/TheHeaderDropdown.js b/src/containers/TheHeaderDropdown.js index 3527f1109..e87821fd8 100644 --- a/src/containers/TheHeaderDropdown.js +++ b/src/containers/TheHeaderDropdown.js @@ -1,92 +1,91 @@ -import React from 'react' +import React from "react"; import { CBadge, CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle, - CImg -} from '@coreui/react' -import CIcon from '@coreui/icons-react' + CImg, +} from "@coreui/react"; +import CIcon from "@coreui/icons-react"; const TheHeaderDropdown = () => { return ( - +
- + Account - + Updates - 42 + + 42 + - + Messages - 42 + + 42 + - + Tasks - 42 + + 42 + - + Comments - 42 + + 42 + - + Settings - Profile + + Profile - + Settings - + Payments - 42 + + 42 + - + Projects - 42 + + 42 + - + Lock Account - ) -} + ); +}; -export default TheHeaderDropdown +export default TheHeaderDropdown; diff --git a/src/containers/TheHeaderDropdownMssg.js b/src/containers/TheHeaderDropdownMssg.js index b7f2af518..11997fd9c 100644 --- a/src/containers/TheHeaderDropdownMssg.js +++ b/src/containers/TheHeaderDropdownMssg.js @@ -1,31 +1,26 @@ -import React from 'react' +import React from "react"; import { CBadge, CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle, - CImg -} from '@coreui/react' -import CIcon from '@coreui/icons-react' + CImg, +} from "@coreui/react"; +import CIcon from "@coreui/icons-react"; const TheHeaderDropdownMssg = () => { - const itemsCount = 4 + const itemsCount = 4; return ( - + - {itemsCount} + + + {itemsCount} + - + You have {itemsCount} messages @@ -33,7 +28,7 @@ const TheHeaderDropdownMssg = () => {
@@ -45,10 +40,12 @@ const TheHeaderDropdownMssg = () => { Just now
- Important message + Important + message
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt...
@@ -58,7 +55,7 @@ const TheHeaderDropdownMssg = () => {
@@ -67,10 +64,16 @@ const TheHeaderDropdownMssg = () => {
Jane Dovve - 5 minutes ago + + 5 minutes ago +
-
Lorem ipsum dolor sit amet
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... +
+ Lorem ipsum dolor sit amet +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt...
@@ -80,7 +83,7 @@ const TheHeaderDropdownMssg = () => {
@@ -91,8 +94,12 @@ const TheHeaderDropdownMssg = () => { Janet Doe 1:52 PM
-
Lorem ipsum dolor sit amet
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... +
+ Lorem ipsum dolor sit amet +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt...
@@ -102,7 +109,7 @@ const TheHeaderDropdownMssg = () => {
@@ -113,15 +120,21 @@ const TheHeaderDropdownMssg = () => { Joe Doe 4:03 AM
-
Lorem ipsum dolor sit amet
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... +
+ Lorem ipsum dolor sit amet +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt...
- View all messages + + View all messages + - ) -} + ); +}; -export default TheHeaderDropdownMssg \ No newline at end of file +export default TheHeaderDropdownMssg; diff --git a/src/containers/TheHeaderDropdownNotif.js b/src/containers/TheHeaderDropdownNotif.js index 261ccff58..27ed4ad34 100644 --- a/src/containers/TheHeaderDropdownNotif.js +++ b/src/containers/TheHeaderDropdownNotif.js @@ -1,70 +1,80 @@ -import React from 'react' +import React from "react"; import { CBadge, CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle, - CProgress -} from '@coreui/react' -import CIcon from '@coreui/icons-react' + CProgress, +} from "@coreui/react"; +import CIcon from "@coreui/icons-react"; const TheHeaderDropdownNotif = () => { - const itemsCount = 5 + const itemsCount = 5; return ( - + - - {itemsCount} + + + {itemsCount} + - - + + You have {itemsCount} notifications - New user registered - User deleted - Sales report is ready - New client - Server overloaded - + + New + user registered + + + User + deleted + + + Sales report + is ready + + + New client + + + Server + overloaded + + Server
- CPU Usage + + CPU Usage +
348 Processes. 1/4 Cores.
- Memory Usage + + Memory Usage +
11444GB/16384MB
- SSD 1 Usage + + SSD 1 Usage +
243GB/256GB - ) -} + ); +}; -export default TheHeaderDropdownNotif \ No newline at end of file +export default TheHeaderDropdownNotif; diff --git a/src/containers/TheHeaderDropdownTasks.js b/src/containers/TheHeaderDropdownTasks.js index ce509b729..26ae08b6c 100644 --- a/src/containers/TheHeaderDropdownTasks.js +++ b/src/containers/TheHeaderDropdownTasks.js @@ -1,59 +1,79 @@ -import React from 'react' +import React from "react"; import { CBadge, CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle, - CProgress -} from '@coreui/react' -import CIcon from '@coreui/icons-react' + CProgress, +} from "@coreui/react"; +import CIcon from "@coreui/icons-react"; const TheHeaderDropdownTasks = () => { - const itemsCount = 5 + const itemsCount = 5; return ( - + - {itemsCount} + + {itemsCount} + - + You have {itemsCount} pending tasks -
Upgrade NPM & Bower 0%
+
+ Upgrade NPM & Bower{" "} + + 0% + +
-
ReactJS Version 25%
+
+ ReactJS Version{" "} + + 25% + +
-
VueJS Version 50%
+
+ VueJS Version{" "} + + 50% + +
-
Add new layouts 75%
+
+ Add new layouts{" "} + + 75% + +
-
Angular 2 Cli Version 100%
+
+ Angular 2 Cli Version{" "} + + 100% + +
- View all tasks + + View all tasks + - ) -} + ); +}; -export default TheHeaderDropdownTasks \ No newline at end of file +export default TheHeaderDropdownTasks; diff --git a/src/containers/TheLayout.js b/src/containers/TheLayout.js index 8fb6f1d72..ea3f67aae 100644 --- a/src/containers/TheLayout.js +++ b/src/containers/TheLayout.js @@ -1,25 +1,19 @@ -import React from 'react' -import { - TheContent, - TheSidebar, - TheFooter, - TheHeader -} from './index' +import React from "react"; +import { TheContent, TheSidebar, TheFooter, TheHeader } from "./index"; const TheLayout = () => { - return (
- +
- +
- +
- +
- ) -} + ); +}; -export default TheLayout +export default TheLayout; diff --git a/src/containers/TheSidebar.js b/src/containers/TheSidebar.js index 3a9403e42..dc1b889a1 100644 --- a/src/containers/TheSidebar.js +++ b/src/containers/TheSidebar.js @@ -1,5 +1,5 @@ -import React from 'react' -import { useSelector, useDispatch } from 'react-redux' +import React from "react"; +import { useSelector, useDispatch } from "react-redux"; import { CCreateElement, CSidebar, @@ -10,22 +10,21 @@ import { CSidebarMinimizer, CSidebarNavDropdown, CSidebarNavItem, -} from '@coreui/react' +} from "@coreui/react"; -import CIcon from '@coreui/icons-react' +import CIcon from "@coreui/icons-react"; // sidebar nav config -import navigation from './_nav' +import navigation from "./_nav"; + +import { setSidebarShow } from "../redux/sidebar/action"; const TheSidebar = () => { - const dispatch = useDispatch() - const show = useSelector(state => state.sidebarShow) + const dispatch = useDispatch(); + const { sidebarShow: show } = useSelector((state) => state.sidebar); return ( - dispatch({type: 'set', sidebarShow: val })} - > + dispatch(setSidebarShow(val))}> { /> - - + - ) -} + ); +}; -export default React.memo(TheSidebar) +export default React.memo(TheSidebar); diff --git a/src/containers/_nav.js b/src/containers/_nav.js index 16eb558b1..57a4546b8 100644 --- a/src/containers/_nav.js +++ b/src/containers/_nav.js @@ -1,308 +1,12 @@ export default [ { - _tag: 'CSidebarNavItem', - name: 'Dashboard', - to: '/dashboard', - icon: 'cil-speedometer', + _tag: "CSidebarNavItem", + name: "Dashboard", + to: "/dashboard", + icon: "cil-speedometer", badge: { - color: 'info', - text: 'NEW', - } - }, - { - _tag: 'CSidebarNavTitle', - _children: ['Theme'] - }, - { - _tag: 'CSidebarNavItem', - name: 'Colors', - to: '/theme/colors', - icon: 'cil-drop', - }, - { - _tag: 'CSidebarNavItem', - name: 'Typography', - to: '/theme/typography', - icon: 'cil-pencil', - }, - { - _tag: 'CSidebarNavTitle', - _children: ['Components'] - }, - { - _tag: 'CSidebarNavDropdown', - name: 'Base', - route: '/base', - icon: 'cil-puzzle', - _children: [ - { - _tag: 'CSidebarNavItem', - name: 'Breadcrumb', - to: '/base/breadcrumbs', - }, - { - _tag: 'CSidebarNavItem', - name: 'Cards', - to: '/base/cards', - }, - { - _tag: 'CSidebarNavItem', - name: 'Carousel', - to: '/base/carousels', - }, - { - _tag: 'CSidebarNavItem', - name: 'Collapse', - to: '/base/collapses', - }, - { - _tag: 'CSidebarNavItem', - name: 'Forms', - to: '/base/forms', - }, - { - _tag: 'CSidebarNavItem', - name: 'Jumbotron', - to: '/base/jumbotrons', - }, - { - _tag: 'CSidebarNavItem', - name: 'List group', - to: '/base/list-groups', - }, - { - _tag: 'CSidebarNavItem', - name: 'Navs', - to: '/base/navs', - }, - { - _tag: 'CSidebarNavItem', - name: 'Navbars', - to: '/base/navbars', - }, - { - _tag: 'CSidebarNavItem', - name: 'Pagination', - to: '/base/paginations', - }, - { - _tag: 'CSidebarNavItem', - name: 'Popovers', - to: '/base/popovers', - }, - { - _tag: 'CSidebarNavItem', - name: 'Progress', - to: '/base/progress-bar', - }, - { - _tag: 'CSidebarNavItem', - name: 'Switches', - to: '/base/switches', - }, - { - _tag: 'CSidebarNavItem', - name: 'Tables', - to: '/base/tables', - }, - { - _tag: 'CSidebarNavItem', - name: 'Tabs', - to: '/base/tabs', - }, - { - _tag: 'CSidebarNavItem', - name: 'Tooltips', - to: '/base/tooltips', - }, - ], - }, - { - _tag: 'CSidebarNavDropdown', - name: 'Buttons', - route: '/buttons', - icon: 'cil-cursor', - _children: [ - { - _tag: 'CSidebarNavItem', - name: 'Buttons', - to: '/buttons/buttons', - }, - { - _tag: 'CSidebarNavItem', - name: 'Brand buttons', - to: '/buttons/brand-buttons', - }, - { - _tag: 'CSidebarNavItem', - name: 'Buttons groups', - to: '/buttons/button-groups', - }, - { - _tag: 'CSidebarNavItem', - name: 'Dropdowns', - to: '/buttons/button-dropdowns', - } - ], - }, - { - _tag: 'CSidebarNavItem', - name: 'Charts', - to: '/charts', - icon: 'cil-chart-pie' - }, - { - _tag: 'CSidebarNavDropdown', - name: 'Icons', - route: '/icons', - icon: 'cil-star', - _children: [ - { - _tag: 'CSidebarNavItem', - name: 'CoreUI Free', - to: '/icons/coreui-icons', - badge: { - color: 'success', - text: 'NEW', - }, - }, - { - _tag: 'CSidebarNavItem', - name: 'CoreUI Flags', - to: '/icons/flags', - }, - { - _tag: 'CSidebarNavItem', - name: 'CoreUI Brands', - to: '/icons/brands', - }, - ], - }, - { - _tag: 'CSidebarNavDropdown', - name: 'Notifications', - route: '/notifications', - icon: 'cil-bell', - _children: [ - { - _tag: 'CSidebarNavItem', - name: 'Alerts', - to: '/notifications/alerts', - }, - { - _tag: 'CSidebarNavItem', - name: 'Badges', - to: '/notifications/badges', - }, - { - _tag: 'CSidebarNavItem', - name: 'Modal', - to: '/notifications/modals', - }, - { - _tag: 'CSidebarNavItem', - name: 'Toaster', - to: '/notifications/toaster' - } - ] - }, - { - _tag: 'CSidebarNavItem', - name: 'Widgets', - to: '/widgets', - icon: 'cil-calculator', - badge: { - color: 'info', - text: 'NEW', + color: "info", + text: "NEW", }, }, - { - _tag: 'CSidebarNavDivider' - }, - { - _tag: 'CSidebarNavTitle', - _children: ['Extras'], - }, - { - _tag: 'CSidebarNavDropdown', - name: 'Pages', - route: '/pages', - icon: 'cil-star', - _children: [ - { - _tag: 'CSidebarNavItem', - name: 'Login', - to: '/login', - }, - { - _tag: 'CSidebarNavItem', - name: 'Register', - to: '/register', - }, - { - _tag: 'CSidebarNavItem', - name: 'Error 404', - to: '/404', - }, - { - _tag: 'CSidebarNavItem', - name: 'Error 500', - to: '/500', - }, - ], - }, - { - _tag: 'CSidebarNavItem', - name: 'Disabled', - icon: 'cil-ban', - badge: { - color: 'secondary', - text: 'NEW', - }, - addLinkClass: 'c-disabled', - 'disabled': true - }, - { - _tag: 'CSidebarNavDivider', - className: 'm-2' - }, - { - _tag: 'CSidebarNavTitle', - _children: ['Labels'] - }, - { - _tag: 'CSidebarNavItem', - name: 'Label danger', - to: '', - icon: { - name: 'cil-star', - className: 'text-danger' - }, - label: true - }, - { - _tag: 'CSidebarNavItem', - name: 'Label info', - to: '', - icon: { - name: 'cil-star', - className: 'text-info' - }, - label: true - }, - { - _tag: 'CSidebarNavItem', - name: 'Label warning', - to: '', - icon: { - name: 'cil-star', - className: 'text-warning' - }, - label: true - }, - { - _tag: 'CSidebarNavDivider', - className: 'm-2' - } -] - +]; diff --git a/src/containers/index.js b/src/containers/index.js index 253866fbf..29b8c3bc8 100644 --- a/src/containers/index.js +++ b/src/containers/index.js @@ -1,12 +1,12 @@ -import TheContent from './TheContent' -import TheFooter from './TheFooter' -import TheHeader from './TheHeader' -import TheHeaderDropdown from './TheHeaderDropdown' -import TheHeaderDropdownMssg from './TheHeaderDropdownMssg' -import TheHeaderDropdownNotif from './TheHeaderDropdownNotif' -import TheHeaderDropdownTasks from './TheHeaderDropdownTasks' -import TheLayout from './TheLayout' -import TheSidebar from './TheSidebar' +import TheContent from "./TheContent"; +import TheFooter from "./TheFooter"; +import TheHeader from "./TheHeader"; +import TheHeaderDropdown from "./TheHeaderDropdown"; +import TheHeaderDropdownMssg from "./TheHeaderDropdownMssg"; +import TheHeaderDropdownNotif from "./TheHeaderDropdownNotif"; +import TheHeaderDropdownTasks from "./TheHeaderDropdownTasks"; +import TheLayout from "./TheLayout"; +import TheSidebar from "./TheSidebar"; export { TheContent, @@ -17,5 +17,5 @@ export { TheHeaderDropdownNotif, TheHeaderDropdownTasks, TheLayout, - TheSidebar -} + TheSidebar, +}; diff --git a/src/index.js b/src/index.js index c5b1229e9..867fc3f92 100644 --- a/src/index.js +++ b/src/index.js @@ -1,23 +1,22 @@ -import 'react-app-polyfill/ie11'; // For IE 11 support -import 'react-app-polyfill/stable'; -import './polyfill' -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; -import * as serviceWorker from './serviceWorker'; +import "react-app-polyfill/ie11"; // For IE 11 support +import "react-app-polyfill/stable"; +import "./polyfill"; +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; +import * as serviceWorker from "./serviceWorker"; -import { icons } from './assets/icons' +import { icons } from "./assets/icons"; +import { Provider } from "react-redux"; +import store from "./redux/store"; -import { Provider } from 'react-redux' -import store from './store' - -React.icons = icons +React.icons = icons; ReactDOM.render( - - , - document.getElementById('root') + + , + document.getElementById("root") ); // If you want your app to work offline and load faster, you can change diff --git a/src/polyfill.js b/src/polyfill.js index d090a30ec..2976099b7 100644 --- a/src/polyfill.js +++ b/src/polyfill.js @@ -1,9 +1,9 @@ /* -* required polyfills -*/ + * required polyfills + */ import "core-js"; -import 'core-js/features/set/map'; -import 'core-js/features/map'; +import "core-js/features/set/map"; +import "core-js/features/map"; /** IE9, IE10 and IE11 requires all of the following polyfills. **/ // import 'core-js/es6/symbol' @@ -31,17 +31,21 @@ import 'core-js/features/map'; // CustomEvent() constructor functionality in IE9, IE10, IE11 (function () { - - if ( typeof window.CustomEvent === "function" ) return false - - function CustomEvent ( event, params ) { - params = params || { bubbles: false, cancelable: false, detail: undefined } - var evt = document.createEvent( 'CustomEvent' ) - evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ) - return evt + if (typeof window.CustomEvent === "function") return false; + + function CustomEvent(event, params) { + params = params || { bubbles: false, cancelable: false, detail: undefined }; + var evt = document.createEvent("CustomEvent"); + evt.initCustomEvent( + event, + params.bubbles, + params.cancelable, + params.detail + ); + return evt; } - CustomEvent.prototype = window.Event.prototype + CustomEvent.prototype = window.Event.prototype; - window.CustomEvent = CustomEvent -})() + window.CustomEvent = CustomEvent; +})(); diff --git a/src/redux/sidebar/action.js b/src/redux/sidebar/action.js new file mode 100644 index 000000000..1d990d768 --- /dev/null +++ b/src/redux/sidebar/action.js @@ -0,0 +1,3 @@ +import { createAction } from "redux-actions"; + +export const setSidebarShow = createAction("SET_SIDEBAR_SHOW"); diff --git a/src/redux/sidebar/reducer.js b/src/redux/sidebar/reducer.js new file mode 100644 index 000000000..c73a99d0e --- /dev/null +++ b/src/redux/sidebar/reducer.js @@ -0,0 +1,16 @@ +import { handleActions } from "redux-actions"; +import { setSidebarShow } from "./action"; + +const initialState = { + sidebarShow: "responsive", +}; + +export default handleActions( + { + [setSidebarShow]: (state, action) => ({ + ...state, + sidebarShow: action.payload, + }), + }, + initialState +); diff --git a/src/redux/store.js b/src/redux/store.js new file mode 100644 index 000000000..cb8c15dcd --- /dev/null +++ b/src/redux/store.js @@ -0,0 +1,11 @@ +import { combineReducers, createStore, applyMiddleware } from "redux"; +import sidebar from "./sidebar/reducer"; + +const reducers = combineReducers({ + sidebar, +}); + +const createStoreWithMiddleware = applyMiddleware()(createStore); +const store = createStoreWithMiddleware(reducers); + +export default store; diff --git a/src/routes.js b/src/routes.js index 9620be99f..c8caf65eb 100644 --- a/src/routes.js +++ b/src/routes.js @@ -1,84 +1,10 @@ -import React from 'react'; +import React from "react"; -const Toaster = React.lazy(() => import('./views/notifications/toaster/Toaster')); -const Tables = React.lazy(() => import('./views/base/tables/Tables')); - -const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs')); -const Cards = React.lazy(() => import('./views/base/cards/Cards')); -const Carousels = React.lazy(() => import('./views/base/carousels/Carousels')); -const Collapses = React.lazy(() => import('./views/base/collapses/Collapses')); -const BasicForms = React.lazy(() => import('./views/base/forms/BasicForms')); - -const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons')); -const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups')); -const Navbars = React.lazy(() => import('./views/base/navbars/Navbars')); -const Navs = React.lazy(() => import('./views/base/navs/Navs')); -const Paginations = React.lazy(() => import('./views/base/paginations/Pagnations')); -const Popovers = React.lazy(() => import('./views/base/popovers/Popovers')); -const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressBar')); -const 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/brand-buttons/BrandButtons')); -const ButtonDropdowns = React.lazy(() => import('./views/buttons/button-dropdowns/ButtonDropdowns')); -const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups')); -const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons')); -const Charts = React.lazy(() => import('./views/charts/Charts')); -const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard')); -const CoreUIIcons = React.lazy(() => import('./views/icons/coreui-icons/CoreUIIcons')); -const Flags = React.lazy(() => import('./views/icons/flags/Flags')); -const Brands = React.lazy(() => import('./views/icons/brands/Brands')); -const Alerts = React.lazy(() => import('./views/notifications/alerts/Alerts')); -const Badges = React.lazy(() => import('./views/notifications/badges/Badges')); -const Modals = React.lazy(() => import('./views/notifications/modals/Modals')); -const Colors = React.lazy(() => import('./views/theme/colors/Colors')); -const Typography = React.lazy(() => import('./views/theme/typography/Typography')); -const Widgets = React.lazy(() => import('./views/widgets/Widgets')); -const Users = React.lazy(() => import('./views/users/Users')); -const User = React.lazy(() => import('./views/users/User')); +const Dashboard = React.lazy(() => import("./views/dashboard/Dashboard")); const routes = [ - { path: '/', exact: true, name: 'Home' }, - { path: '/dashboard', name: 'Dashboard', component: Dashboard }, - { path: '/theme', name: 'Theme', component: Colors, exact: true }, - { path: '/theme/colors', name: 'Colors', component: Colors }, - { path: '/theme/typography', name: 'Typography', component: Typography }, - { 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/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 }, - { path: '/base/navs', name: 'Navs', component: Navs }, - { 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', name: 'Buttons', component: Buttons, exact: true }, - { path: '/buttons/buttons', name: 'Buttons', component: Buttons }, - { 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/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: '/users', exact: true, name: 'Users', component: Users }, - { path: '/users/:id', exact: true, name: 'User Details', component: User } + { path: "/", exact: true, name: "Home" }, + { path: "/dashboard", name: "Dashboard", component: Dashboard }, ]; export default routes; diff --git a/src/setupTests.js b/src/setupTests.js index 833205466..a2fac0e0b 100644 --- a/src/setupTests.js +++ b/src/setupTests.js @@ -1,14 +1,14 @@ -import { configure } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; +import { configure } from "enzyme"; +import Adapter from "enzyme-adapter-react-16"; configure({ adapter: new Adapter() }); if (global.document) { - document.createRange = () => ( { + document.createRange = () => ({ setStart: () => {}, setEnd: () => {}, commonAncestorContainer: { - nodeName: 'BODY', + nodeName: "BODY", ownerDocument: document, }, }); diff --git a/src/store.js b/src/store.js deleted file mode 100644 index 0267b34b7..000000000 --- a/src/store.js +++ /dev/null @@ -1,17 +0,0 @@ -import { createStore } from 'redux' - -const initialState = { - sidebarShow: 'responsive' -} - -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/breadcrumbs/Breadcrumbs.js b/src/views/base/breadcrumbs/Breadcrumbs.js deleted file mode 100644 index c1bc3ec2a..000000000 --- a/src/views/base/breadcrumbs/Breadcrumbs.js +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react' -import { - CBreadcrumb, - CBreadcrumbItem, - CBreadcrumbRouter, - CCard, - CCardBody, - CCardHeader, - CLink, - CCol, - CRow -} from '@coreui/react' -import routes from '../../../routes' - -const Breadcrumbs = () => { - return ( - - - - - Bootstrap Breadcrumb - - - -
CBreadcrumbRouter wrapper component
- -
Manual
- - - Home - - Library - - - - Home - - - Library - - Data - - - - Home - - - Library - - - Data - - - Bootstrap - - - - - - - ) -} - -export default Breadcrumbs diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js deleted file mode 100644 index 6404457ab..000000000 --- a/src/views/base/cards/Cards.js +++ /dev/null @@ -1,411 +0,0 @@ -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' - -const Cards = () => { - const [collapsed, setCollapsed] = React.useState(true) - const [showCard, setShowCard] = React.useState(true) - - 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. - - - - - - - - - - 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.

-
Someone famous in Source Title
-
- - - - - - -
-

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

-
Someone famous in Source Title
-
- - - - - - -
-

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

-
Someone famous in Source Title
-
- - - - - - -
-

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

-
Someone famous in Source Title
-
- - - - - - -
-

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

-
Someone famous in Source Title
-
- - - - - - -
-

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

-
Someone famous in Source Title
-
- - - - - - - - - Card title - - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. - - - - - - - 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. - - - - - - - - ) -} - -export default Cards diff --git a/src/views/base/carousels/Carousels.js b/src/views/base/carousels/Carousels.js deleted file mode 100644 index 82a5e3c55..000000000 --- a/src/views/base/carousels/Carousels.js +++ /dev/null @@ -1,139 +0,0 @@ -import React, { useState } from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCarousel, - CCarouselCaption, - CCarouselControl, - CCarouselIndicators, - CCarouselInner, - CCarouselItem, - CCol, - CRow -} from '@coreui/react' - -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', -] - -const Carousels = () => { - const [activeIndex] = useState(1) - - return ( - - - - - Carousel with controls - - - - - - slide 1 - - - slide 2 - - - slide 3 - - - - - - - - - - - - Carousel with controls, indicators and caption - - - - - - - slide 1 -

Slide 1

Slide 1

 - - - slide 2 -

Slide 2

Slide 2

 - - - slide 3 -

Slide 3

Slide 3

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

Slide 1

Slide 1

 - - - slide 2 -

Slide 2

Slide 2

 - - - slide 3 -

Slide 3

Slide 3

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

Slide 1

Slide 1

 - - - slide 2 -

Slide 2

Slide 2

 - - - slide 3 -

Slide 3

Slide 3

 - - - - - - - - - - ) -} - -export default Carousels diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js deleted file mode 100644 index 18597eec9..000000000 --- a/src/views/base/collapses/Collapses.js +++ /dev/null @@ -1,227 +0,0 @@ -import React, { useState } from 'react' -import { - CButton, - CCard, - CCardBody, - CCardFooter, - CCardHeader, - CCol, - CCollapse, - CFade, - CRow -} from '@coreui/react'; - -const Collapses = () => { - - const [collapse, setCollapse] = useState(false) - const [collapseMulti, setCollapseMulti] = useState([false, false]) - const [accordion, setAccordion] = useState(1) - const [fade, setFade] = useState(true) - - const toggle = (e) => { - setCollapse(!collapse) - e.preventDefault() - } - - 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) - } - - const toggleFade = () => { - setFade(!fade) - } - - 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 - - - - - - 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. - - - - - - - - -
- - - - Fade - - - - - This content will fade in and out as the button is pressed... - - - - Toggle Fade - - - - - - - Collapse - accordion - - -
- - - setAccordion(accordion === 0 ? null : 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(accordion === 1 ? null : 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(accordion === 2 ? null : 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 diff --git a/src/views/base/forms/BasicForms.js b/src/views/base/forms/BasicForms.js deleted file mode 100644 index 7f0489393..000000000 --- a/src/views/base/forms/BasicForms.js +++ /dev/null @@ -1,1164 +0,0 @@ -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

-
- - - Appended 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/jumbotrons/Jumbotrons.js b/src/views/base/jumbotrons/Jumbotrons.js deleted file mode 100644 index ccaeacf3a..000000000 --- a/src/views/base/jumbotrons/Jumbotrons.js +++ /dev/null @@ -1,79 +0,0 @@ -import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CContainer, - CJumbotron, - CRow, - CEmbed, - CEmbedItem -} from '@coreui/react' - -const Jumbotrons = () => { - - 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 diff --git a/src/views/base/list-groups/ListGroups.js b/src/views/base/list-groups/ListGroups.js deleted file mode 100644 index 2653b582a..000000000 --- a/src/views/base/list-groups/ListGroups.js +++ /dev/null @@ -1,275 +0,0 @@ -import React, { useState } from 'react'; -import { - CBadge, - CCard, - CCardBody, - CCardHeader, - CCol, - CListGroup, - CListGroupItem, - CRow, - CTabContent, - CTabPane -} from '@coreui/react'; - -const ListGroups = () => { - const [activeTab, setActiveTab] = useState(1) - - return ( - <> - - - - - - List group - - - - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - - - - - - - - - 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 - - - - - - - - - - - - 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 diff --git a/src/views/base/navbars/Navbars.js b/src/views/base/navbars/Navbars.js deleted file mode 100644 index 9575dd3a7..000000000 --- a/src/views/base/navbars/Navbars.js +++ /dev/null @@ -1,202 +0,0 @@ -import React, { useState } from 'react' -import { - 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' - -const CNavbars = () => { - const [isOpen, setIsOpen] = useState(false) - const [isOpenDropdown, setIsOpenDropdown] = useState(false) - const [navbarText, setNavbarText] = useState(false) - - return ( - <> - - - - CNavbar - - - - setIsOpen(!isOpen)}/> - - NavbarBrand - - - - Home - Link - - - - - Search - - - - Lang - - - EN - ES - RU - FA - - - - - User - - - Account - Settings - - - - - - - - - - - CNavbar brand - - - - - - CoreUI React - - - - - - - - CNavbar text - - - - { setNavbarText(!navbarText)}} - /> - NavbarBrand - - - Navbar text - - - - - - - - - CNavbar dropdown - - - - {setIsOpenDropdown(!isOpenDropdown)}} /> - - - Home - Link - - - Lang - - - EN - ES - RU - FA - - - - - User - - - Account - Settings - - - - - - - - - - - CNavbar form - - - - - - Search - - - - - - - - CNavbar input group - - - - - - - - - - - ) -} - -export default CNavbars diff --git a/src/views/base/navs/Navs.js b/src/views/base/navs/Navs.js deleted file mode 100644 index bac7f817f..000000000 --- a/src/views/base/navs/Navs.js +++ /dev/null @@ -1,311 +0,0 @@ -import React from 'react' -import { - CRow, - CCol, - CCard, - CCardBody, - CCardHeader, - CDropdown, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CNav, - CNavItem, - CNavLink -} from '@coreui/react' - -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 - - - - - - - - - - - - Navs - tabs - - - - Active - Link - Link - Disabled - - - - - - - - Navs - pills - - - - - Link - - - Link - - - Link - - - Disabled - - - - - - - - - - - Navs - fill and justify - - - - - Active - - - Longer nav link - - - Link - - - Disabled - - - -
- - - Active - Link - Link - Disabled - - -
- - - - 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 diff --git a/src/views/base/paginations/Pagnations.js b/src/views/base/paginations/Pagnations.js deleted file mode 100644 index c3d65246a..000000000 --- a/src/views/base/paginations/Pagnations.js +++ /dev/null @@ -1,95 +0,0 @@ -import React, { useState } from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CPagination -} from '@coreui/react' - -const Paginations = () => { - const [currentPage, setCurrentPage] = useState(2) - - return ( - <> - - - Pagination - - - -
Default
- -

- -
Small
- -

- -
-
Large
- -

-
- -
currentPage: {currentPage}
- - - - - Pagination - alignment - - -
Left alignment (default)
- -

- -
Center alignment
- -

- -
Right (end) alignment
- -

- -
currentPage: {currentPage}
- - - - ) -} - -export default Paginations diff --git a/src/views/base/popovers/Popovers.js b/src/views/base/popovers/Popovers.js deleted file mode 100644 index 1d193da5b..000000000 --- a/src/views/base/popovers/Popovers.js +++ /dev/null @@ -1,109 +0,0 @@ -import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CPopover, - CRow, - CCol, - CLink -} from '@coreui/react' - -const Popovers = () => { - const placements = [ - 'top-start', 'top', 'top-end', - 'bottom-start', 'bottom', 'bottom-end', - 'right-start', 'right', 'right-end', - 'left-start', 'left', 'left-end' - ] - - return ( - <> - - - Popovers - - - - {/*eslint-disable-next-line*/} - -

- Hover over the links below to see popover: -

- -

- Tight pants next level keffiyeh - - you probably - - haven't heard of them. - Photo booth beard raw denim letterpress vegan messenger - bag stumptown. Farm-to-table seitan, mcsweeney's fixie - sustainable quinoa 8-bit american apparel - - 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 } - - - ) - })} - -
- - - - ) -} - -export default Popovers diff --git a/src/views/base/progress-bar/ProgressBar.js b/src/views/base/progress-bar/ProgressBar.js deleted file mode 100644 index 8e082f172..000000000 --- a/src/views/base/progress-bar/ProgressBar.js +++ /dev/null @@ -1,102 +0,0 @@ -import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CProgress, - CProgressBar -} from '@coreui/react' - -const ProgressBar = () => { - return ( - <> - - - Progress - - - - - - - - - - - - - Progress - labels - - - - - - - - - - Progress - heights - - - - - - - - - Progress - backgrounds - - - - - - - - - - - Progress - multiple bar - - - - - - - - - - - - Progress - striped - - - - - - - - - - - - Progress - animated - - - - - - - ) -} - -export default ProgressBar diff --git a/src/views/base/switches/Switches.js b/src/views/base/switches/Switches.js deleted file mode 100644 index 551bbb870..000000000 --- a/src/views/base/switches/Switches.js +++ /dev/null @@ -1,483 +0,0 @@ -import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CSwitch -} from '@coreui/react' - -const Switches = () => { - return ( - - - - - 3d Switch - - - console.log(e.target.checked)}/> - - - - - - - - - - - - - - - Switch default - - - - - - - - - - - - - - - Switch default - pills - - - - - - - - - - - - - -

Outline

- - - - - - Switch outline - - - - - - - - - - - - - - - - Switch outline pills - - - - - - - - - - - - - - -

Opposite

- - - - - - Switch outline alternative - - - - - - - - - - - - - - - - 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 - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SizeExampleProps
- Large - - - - Add size={'lg'} -
- Normal - - - - - -
- Small - - - - Add size={'sm'} -
- - - - - ) -} - -export default Switches diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js deleted file mode 100644 index 963853292..000000000 --- a/src/views/base/tables/Tables.js +++ /dev/null @@ -1,212 +0,0 @@ -import React from 'react' -import { - CBadge, - CCard, - CCardBody, - CCardHeader, - CCol, - CDataTable, - CRow -} from '@coreui/react' - -import usersData from '../../users/UsersData' - -const getBadge = status => { - switch (status) { - case 'Active': return 'success' - case 'Inactive': return 'secondary' - case 'Pending': return 'warning' - case 'Banned': return 'danger' - default: return 'primary' - } -} -const fields = ['name','registered', 'role', 'status'] - -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/tabs/Tabs.js b/src/views/base/tabs/Tabs.js deleted file mode 100644 index 9347e91bb..000000000 --- a/src/views/base/tabs/Tabs.js +++ /dev/null @@ -1,188 +0,0 @@ -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' - -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.' - - return ( - - - - - Index indentifiers - - - - - - - Home - - - - - Profile - - - - - Messages - - - - - - {`1. ${lorem}`} - - - {`2. ${lorem}`} - - - {`3. ${lorem}`} - - - - - - - - - - Id indentifiers - - - - - - - Home - - - - - Profile - - - - - Messages - - - - - - {`1. ${lorem}`} - - - {`2. ${lorem}`} - - - {`3. ${lorem}`} - - - - - - - - - - - No fade animation tabs - - - - - - - - - - - - - - - - - - - - - - - {`1. ${lorem}`} - - - {`2. ${lorem}`} - - - {`3. ${lorem}`} - - - - - - - - - - - Controlled tabs - - - setActive(idx)}> - - - - - { active === 0 && ' Home'} - - - - - - { active === 1 && ' Profile'} - - - - - - { active === 2 && ' Messages'} - - - - - - {`1. ${lorem}`} - - - {`2. ${lorem}`} - - - {`3. ${lorem}`} - - - - - - - - ) -} - -export default Tabs diff --git a/src/views/base/tooltips/Tooltips.js b/src/views/base/tooltips/Tooltips.js deleted file mode 100644 index 6b17b3fc8..000000000 --- a/src/views/base/tooltips/Tooltips.js +++ /dev/null @@ -1,107 +0,0 @@ -import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CTooltip, - CRow, - CCol, - CLink -} from '@coreui/react' - -const Tooltips = () => { - const placements = [ - 'top-start', 'top', 'top-end', - 'bottom-start', 'bottom', 'bottom-end', - 'right-start', 'right', 'right-end', - 'left-start', 'left', 'left-end' - ] - - return ( - <> - - - Tooltips - - - - {/*eslint-disable-next-line*/} - -

- Hover over the links below to see tooltips: -

- -

- Tight pants next level keffiyeh - - you probably - - haven't heard of them. - Photo booth beard raw denim letterpress vegan messenger - bag stumptown. Farm-to-table seitan, mcsweeney's fixie - sustainable quinoa 8-bit american apparel - - have a - - terry richardson vinyl chambray. Beard stumptown, - cardigans banh mi lomo thundercats. Tofu biodiesel - williamsburg marfa, four loko mcsweeney''s cleanse - vegan chambray. A really ironic artisan - - whatever keytar - - scenester farm-to-table banksy Austin - - twitter handle - - - freegan cred raw denim single-origin coffee viral. -

- - - -
- - - - Tooltips - placement - - -
- - {placements.map(placement => { - return ( - - - { placement } - - - ) - })} - -
- - - - ) -} - -export default Tooltips; diff --git a/src/views/buttons/brand-buttons/BrandButtons.js b/src/views/buttons/brand-buttons/BrandButtons.js deleted file mode 100644 index 0805822cf..000000000 --- a/src/views/buttons/brand-buttons/BrandButtons.js +++ /dev/null @@ -1,167 +0,0 @@ -import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CRow -} from '@coreui/react' -import CIcon from '@coreui/icons-react' - -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 - only icons - - -
Size Small - Add this class .btn-sm -
-

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

-
Size Normal
-

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

-
Size Large - Add this class .btn-lg -
-

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

- - - - - ) -} - -export default BrandButtons diff --git a/src/views/buttons/button-dropdowns/ButtonDropdowns.js b/src/views/buttons/button-dropdowns/ButtonDropdowns.js deleted file mode 100644 index ee8e8d99b..000000000 --- a/src/views/buttons/button-dropdowns/ButtonDropdowns.js +++ /dev/null @@ -1,428 +0,0 @@ -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' - -const ButtonDropdowns = () => { - return ( - - - - - Dropdowns - - - - - - - Dropdown button - - - Header - Action Disabled - Action - - Another Action - - - -
- - - - Primary - - - Header - Action Disabled - Action - - Another Action - - - - - Secondary - - - Header - Action Disabled - Action - - Another Action - - - - - Success - - - Header - Action Disabled - Action - - Another Action - - - - - Info - - - Header - Action Disabled - Action - - Another Action - - - - - Warning - - - Header - Action Disabled - Action - - Another Action - - - - - Danger - - - Header - Action Disabled - Action - - Another Action - - - -
- - - Primary - - - Header - Action Disabled - Action - - Another Action - - - - - Secondary - - - Header - Action Disabled - Action - - Another Action - - - - - Success - - - Header - Action Disabled - Action - - Another Action - - - - - Info - - - Header - Action Disabled - Action - - Another Action - - - - - Warning - - - Header - Action Disabled - Action - - Another Action - - - - - Danger - - - Header - Action Disabled - Action - - Another Action - - - -
- - - - Large button - - - Header - Action Disabled - Action - - Another Action - - - {' '} - - - Large split button - - - Header - Action Disabled - Action - - Another Action - - - -
- - - - Small button - - - Header - Action Disabled - Action - - Another Action - - - {' '} - - - Small split button - - - Header - Action Disabled - Action - - Another Action - - - -
- - - - Dropup button - - - Header - Action Disabled - Action - Another Action - - - - - Split dropup - - - Header - Action Disabled - Action - Another Action - - - - - - - - Menus - - - - - - Direction Up - - - Header - Action Disabled - Action - Another Action - - - - - - Direction Left - - - Header - Action Disabled - Action - Another Action - - - - - - Direction Right - - - Header - Action Disabled - Action - Another Action - - - - - - Default Down - - - Header - Action Disabled - Action - Another Action - - - -
- - - - This dropdown{'\''}s menu is right-aligned - - - Header - Action Disabled - Action - Another Action - - - -
- - - - Dropdown with header - - - Header - Action - Another Action - - - -
- - - - Dropdown with divider - - - Action - - Another Action - - - -
- - - - Dropdown with disabled item - - - Action - Disabled Action - - - -
- - - - Dropdown with form - - - - - Email address - - - - Password - - - - - Remember me - - - Sign in - - - - Register - Forgot password? - - - - - - - - ) -} - -export default ButtonDropdowns diff --git a/src/views/buttons/button-groups/ButtonGroups.js b/src/views/buttons/button-groups/ButtonGroups.js deleted file mode 100644 index be90b5689..000000000 --- a/src/views/buttons/button-groups/ButtonGroups.js +++ /dev/null @@ -1,204 +0,0 @@ -import React from 'react' -import { - CButton, - CDropdown, - CButtonGroup, - CButtonToolbar, - CCard, - CCardBody, - CCardHeader, - CCol, - CDropdownItem, - CDropdownMenu, - CDropdownToggle, - CInput, - CInputGroup, - CInputGroupPrepend, - CInputGroupText, - CRow, - CCallout -} from '@coreui/react' - -const ButtonGroups = () => { - return ( - - - - - Callout - - - - - Callout - - - - - - - Button Group - - - - - Left - Middle - Right - - - - - - - Button Group - toolbar - - - - - 1 - 2 - 3 - 4 - - - 5 - 6 - 7 - - - 8 - - - - - 1 - 2 - 3 - 4 - - - - @ - - - - - - - 1 - 2 - 3 - 4 - - - - @ - - - - - - - - - - Button Group - vertical variation - - - - 1 - 2 - 3 - - - - - - - - - - Button Group - sizing - - - - Left - Middle - Right - -

- - Left - Middle - Right - -

- - Left - Middle - Right - - - - - - - Button Group - nestingccc - - - - 1 - 2 - - - Dropdown - - - Dropdown Link - Dropdown Link - - - - - - - - - Button Group - vertical - - - - 1 - 2 - - - Dropdown - - - Dropdown Link - Dropdown Link - - - - - - - - ) -} - -export default ButtonGroups diff --git a/src/views/buttons/buttons/Buttons.js b/src/views/buttons/buttons/Buttons.js deleted file mode 100644 index 7a8137595..000000000 --- a/src/views/buttons/buttons/Buttons.js +++ /dev/null @@ -1,674 +0,0 @@ -import React from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CRow -} from '@coreui/react' -import CIcon from '@coreui/icons-react' - -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 diff --git a/src/views/charts/ChartBarSimple.js b/src/views/charts/ChartBarSimple.js index 485ff955b..3912e55f8 100644 --- a/src/views/charts/ChartBarSimple.js +++ b/src/views/charts/ChartBarSimple.js @@ -1,10 +1,9 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { getColor } from '@coreui/utils/src' -import { CChartBar } from '@coreui/react-chartjs' - -const ChartBarSimple = props => { +import React from "react"; +import PropTypes from "prop-types"; +import { getColor } from "@coreui/utils/src"; +import { CChartBar } from "@coreui/react-chartjs"; +const ChartBarSimple = (props) => { const { backgroundColor, pointHoverBackgroundColor, @@ -12,9 +11,9 @@ const ChartBarSimple = props => { label, pointed, ...attributes - } = props + } = props; - const defaultDatasets = (()=>{ + const defaultDatasets = (() => { return [ { data: dataPoints, @@ -22,27 +21,31 @@ const ChartBarSimple = props => { pointHoverBackgroundColor: getColor(pointHoverBackgroundColor), label: label, barPercentage: 0.5, - categoryPercentage: 1 - } - ] - })() + categoryPercentage: 1, + }, + ]; + })(); - const defaultOptions = (()=>{ + const defaultOptions = (() => { return { maintainAspectRatio: false, legend: { - display: false + display: false, }, scales: { - xAxes: [{ - display: false - }], - yAxes: [{ - display: false - }] - } - } - })() + xAxes: [ + { + display: false, + }, + ], + yAxes: [ + { + display: false, + }, + ], + }, + }; + })(); // render return ( @@ -53,8 +56,8 @@ const ChartBarSimple = props => { options={defaultOptions} labels={label} /> - ) -} + ); +}; ChartBarSimple.propTypes = { tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), @@ -64,13 +67,13 @@ ChartBarSimple.propTypes = { pointHoverBackgroundColor: PropTypes.string, dataPoints: PropTypes.array, label: PropTypes.string, - pointed: PropTypes.bool + pointed: PropTypes.bool, }; ChartBarSimple.defaultProps = { - backgroundColor: 'rgba(0,0,0,.2)', + backgroundColor: "rgba(0,0,0,.2)", dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12], - label: 'Sales' + label: "Sales", }; -export default ChartBarSimple +export default ChartBarSimple; diff --git a/src/views/charts/ChartLineSimple.js b/src/views/charts/ChartLineSimple.js index 2aa7c11cf..d26756cda 100644 --- a/src/views/charts/ChartLineSimple.js +++ b/src/views/charts/ChartLineSimple.js @@ -1,10 +1,9 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { getColor, deepObjectsMerge } from '@coreui/utils/src' -import { CChartLine } from '@coreui/react-chartjs' - -const ChartLineSimple = props => { +import React from "react"; +import PropTypes from "prop-types"; +import { getColor, deepObjectsMerge } from "@coreui/utils/src"; +import { CChartLine } from "@coreui/react-chartjs"; +const ChartLineSimple = (props) => { const { borderColor, backgroundColor, @@ -13,18 +12,18 @@ const ChartLineSimple = props => { label, pointed, ...attributes - } = props + } = props; - const pointHoverColor = (()=>{ + const pointHoverColor = (() => { if (pointHoverBackgroundColor) { - return pointHoverBackgroundColor - } else if (backgroundColor !== 'transparent') { - return backgroundColor + return pointHoverBackgroundColor; + } else if (backgroundColor !== "transparent") { + return backgroundColor; } - return borderColor - })() + return borderColor; + })(); - const defaultDatasets = (()=>{ + const defaultDatasets = (() => { return [ { data: dataPoints, @@ -32,26 +31,26 @@ const ChartLineSimple = props => { backgroundColor: getColor(backgroundColor), pointBackgroundColor: getColor(pointHoverColor), pointHoverBackgroundColor: getColor(pointHoverColor), - label - } - ] - })() + label, + }, + ]; + })(); - const pointedOptions = (()=>{ + const pointedOptions = (() => { return { scales: { xAxes: [ { offset: true, gridLines: { - color: 'transparent', - zeroLineColor: 'transparent' + color: "transparent", + zeroLineColor: "transparent", }, ticks: { fontSize: 2, - fontColor: 'transparent' - } - } + fontColor: "transparent", + }, + }, ], yAxes: [ { @@ -59,64 +58,68 @@ const ChartLineSimple = props => { ticks: { display: false, min: Math.min.apply(Math, dataPoints) - 5, - max: Math.max.apply(Math, dataPoints) + 5 - } - } - ] + max: Math.max.apply(Math, dataPoints) + 5, + }, + }, + ], }, elements: { line: { - borderWidth: 1 + borderWidth: 1, }, point: { radius: 4, hitRadius: 10, - hoverRadius: 4 - } - } - } - })() + hoverRadius: 4, + }, + }, + }; + })(); - const straightOptions = (()=>{ + const straightOptions = (() => { return { scales: { - xAxes: [{ - display: false - }], - yAxes: [{ - display: false - }] + xAxes: [ + { + display: false, + }, + ], + yAxes: [ + { + display: false, + }, + ], }, elements: { line: { - borderWidth: 2 + borderWidth: 2, }, point: { radius: 0, hitRadius: 10, - hoverRadius: 4 - } - } - } - })() + hoverRadius: 4, + }, + }, + }; + })(); - const defaultOptions = (()=>{ - const options = pointed ? pointedOptions : straightOptions - return Object.assign({}, options, { - maintainAspectRatio: false, - legend: { - display: false - } - }) - })() + const defaultOptions = (() => { + const options = pointed ? pointedOptions : straightOptions; + return Object.assign({}, options, { + maintainAspectRatio: false, + legend: { + display: false, + }, + }); + })(); const computedDatasets = (() => { - return deepObjectsMerge(defaultDatasets, attributes.datasets || {}) - })() + return deepObjectsMerge(defaultDatasets, attributes.datasets || {}); + })(); const computedOptions = (() => { - return deepObjectsMerge(defaultOptions, attributes.options || {}) - })() + return deepObjectsMerge(defaultOptions, attributes.options || {}); + })(); // render @@ -128,8 +131,8 @@ const ChartLineSimple = props => { options={computedOptions} labels={label} /> - ) -} + ); +}; ChartLineSimple.propTypes = { tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), @@ -140,14 +143,14 @@ ChartLineSimple.propTypes = { pointHoverBackgroundColor: PropTypes.string, dataPoints: PropTypes.array, label: PropTypes.string, - pointed: PropTypes.bool + pointed: PropTypes.bool, }; ChartLineSimple.defaultProps = { - borderColor: 'rgba(255,255,255,.55)', - backgroundColor: 'transparent', + borderColor: "rgba(255,255,255,.55)", + backgroundColor: "transparent", dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12], - label: 'Sales' + label: "Sales", }; -export default ChartLineSimple +export default ChartLineSimple; diff --git a/src/views/charts/Charts.js b/src/views/charts/Charts.js index 4761cc0e9..7e8982656 100644 --- a/src/views/charts/Charts.js +++ b/src/views/charts/Charts.js @@ -1,23 +1,17 @@ -import React from 'react' -import { - CCard, - CCardBody, - CCardGroup, - CCardHeader -} from '@coreui/react' +import React from "react"; +import { CCard, CCardBody, CCardGroup, CCardHeader } from "@coreui/react"; import { CChartBar, CChartLine, CChartDoughnut, CChartRadar, CChartPie, - CChartPolarArea -} from '@coreui/react-chartjs' + CChartPolarArea, +} from "@coreui/react-chartjs"; const Charts = () => { - return ( - + Bar Chart @@ -32,72 +26,63 @@ const Charts = () => { type="bar" datasets={[ { - label: 'GitHub Commits', - backgroundColor: '#f87979', - data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11] - } + label: "GitHub Commits", + backgroundColor: "#f87979", + data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11], + }, ]} labels="months" options={{ tooltips: { - enabled: true - } + enabled: true, + }, }} /> - - Doughnut Chart - + Doughnut Chart - - Line Chart - + Line Chart @@ -105,120 +90,119 @@ const Charts = () => { - - Pie Chart - + Pie Chart - - Polar Area Chart - + Polar Area Chart - - Radar Chart - + Radar Chart - ) -} + ); +}; -export default Charts +export default Charts; diff --git a/src/views/charts/MainChartExample.js b/src/views/charts/MainChartExample.js index 1fecbd6f1..3a1343467 100644 --- a/src/views/charts/MainChartExample.js +++ b/src/views/charts/MainChartExample.js @@ -1,90 +1,93 @@ -import React from 'react' -import { CChartLine } from '@coreui/react-chartjs' -import { getStyle, hexToRgba } from '@coreui/utils/src' +import React from "react"; +import { CChartLine } from "@coreui/react-chartjs"; +import { getStyle, hexToRgba } from "@coreui/utils/src"; -const brandSuccess = getStyle('success') || '#4dbd74' -const brandInfo = getStyle('info') || '#20a8d8' -const brandDanger = getStyle('danger') || '#f86c6b' +const brandSuccess = getStyle("success") || "#4dbd74"; +const brandInfo = getStyle("info") || "#20a8d8"; +const brandDanger = getStyle("danger") || "#f86c6b"; -const MainChartExample = attributes => { - const random = (min, max)=>{ - return Math.floor(Math.random() * (max - min + 1) + min) - } +const MainChartExample = (attributes) => { + const random = (min, max) => { + return Math.floor(Math.random() * (max - min + 1) + min); + }; - const defaultDatasets = (()=>{ - let elements = 27 - const data1 = [] - const data2 = [] - const data3 = [] + const defaultDatasets = (() => { + let elements = 27; + const data1 = []; + const data2 = []; + const data3 = []; for (let i = 0; i <= elements; i++) { - data1.push(random(50, 200)) - data2.push(random(80, 100)) - data3.push(65) + data1.push(random(50, 200)); + data2.push(random(80, 100)); + data3.push(65); } return [ { - label: 'My First dataset', + label: "My First dataset", backgroundColor: hexToRgba(brandInfo, 10), borderColor: brandInfo, pointHoverBackgroundColor: brandInfo, borderWidth: 2, - data: data1 + data: data1, }, { - label: 'My Second dataset', - backgroundColor: 'transparent', + label: "My Second dataset", + backgroundColor: "transparent", borderColor: brandSuccess, pointHoverBackgroundColor: brandSuccess, borderWidth: 2, - data: data2 + data: data2, }, { - label: 'My Third dataset', - backgroundColor: 'transparent', + label: "My Third dataset", + backgroundColor: "transparent", borderColor: brandDanger, pointHoverBackgroundColor: brandDanger, borderWidth: 1, borderDash: [8, 5], - data: data3 - } - ] - })() + data: data3, + }, + ]; + })(); - const defaultOptions = (()=>{ + const defaultOptions = (() => { return { - maintainAspectRatio: false, - legend: { - display: false - }, - scales: { - xAxes: [{ + maintainAspectRatio: false, + legend: { + display: false, + }, + scales: { + xAxes: [ + { gridLines: { - drawOnChartArea: false - } - }], - yAxes: [{ + drawOnChartArea: false, + }, + }, + ], + yAxes: [ + { ticks: { beginAtZero: true, maxTicksLimit: 5, stepSize: Math.ceil(250 / 5), - max: 250 + max: 250, }, gridLines: { - display: true - } - }] + display: true, + }, + }, + ], + }, + elements: { + point: { + radius: 0, + hitRadius: 10, + hoverRadius: 4, + hoverBorderWidth: 3, }, - elements: { - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - hoverBorderWidth: 3 - } - } - } - } - )() + }, + }; + })(); // render return ( @@ -92,10 +95,38 @@ const MainChartExample = attributes => { {...attributes} datasets={defaultDatasets} options={defaultOptions} - labels={['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']} + labels={[ + "Mo", + "Tu", + "We", + "Th", + "Fr", + "Sa", + "Su", + "Mo", + "Tu", + "We", + "Th", + "Fr", + "Sa", + "Su", + "Mo", + "Tu", + "We", + "Th", + "Fr", + "Sa", + "Su", + "Mo", + "Tu", + "We", + "Th", + "Fr", + "Sa", + "Su", + ]} /> - ) -} - + ); +}; -export default MainChartExample +export default MainChartExample; diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js index 38cad0229..be5a10487 100644 --- a/src/views/dashboard/Dashboard.js +++ b/src/views/dashboard/Dashboard.js @@ -1,4 +1,4 @@ -import React, { lazy } from 'react' +import React, { lazy } from "react"; import { CBadge, CButton, @@ -10,14 +10,14 @@ import { CCol, CProgress, CRow, - CCallout -} from '@coreui/react' -import CIcon from '@coreui/icons-react' + CCallout, +} from "@coreui/react"; +import CIcon from "@coreui/icons-react"; -import MainChartExample from '../charts/MainChartExample.js' +import MainChartExample from "../charts/MainChartExample.js"; -const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js')) -const WidgetsBrand = lazy(() => import('../widgets/WidgetsBrand.js')) +const WidgetsDropdown = lazy(() => import("../widgets/WidgetsDropdown.js")); +const WidgetsBrand = lazy(() => import("../widgets/WidgetsBrand.js")); const Dashboard = () => { return ( @@ -27,30 +27,30 @@ const Dashboard = () => { -

Traffic

+

+ Traffic +

November 2017
 - + - { - ['Day', 'Month', 'Year'].map(value => ( - - {value} - - )) - } + {["Day", "Month", "Year"].map((value) => ( + + {value} + + ))} - + @@ -107,18 +107,15 @@ const Dashboard = () => { - + - - Traffic {' & '} Sales - + Traffic {" & "} Sales - @@ -140,94 +137,142 @@ const Dashboard = () => {
- - Monday - + Monday
- - + +
- - Tuesday - + Tuesday
- - + +
- - Wednesday - + Wednesday
- - + +
- - Thursday - + Thursday
- - + +
- - Friday - + Friday
- - + +
- - Saturday - + Saturday
- - + +
- - Sunday - + Sunday
- - + +
-   - New clients -   -   + + +   + + + New clients   + + +   + + Recurring clients
- @@ -254,59 +299,105 @@ const Dashboard = () => { 43%
- +
- + Female 37%
- +
- + Organic Search - 191,235 (56%) + + 191,235 (56%) +
- +
-
- + Facebook - 51,223 (15%) + + 51,223 (15%) +
- +
- + Twitter - 37,564 (11%) + + 37,564 (11%) +
- +
- + LinkedIn - 27,319 (8%) + + 27,319 (8%) +
- +
@@ -314,7 +405,6 @@ const Dashboard = () => {
- @@ -323,7 +413,9 @@ const Dashboard = () => { - + @@ -335,7 +427,11 @@ const Dashboard = () => { @@ -354,10 +450,16 @@ const Dashboard = () => { 50%
- Jun 11, 2015 - Jul 10, 2015 + + Jun 11, 2015 - Jul 10, 2015 +
- + @@ -390,10 +495,16 @@ const Dashboard = () => { 10%
- Jun 11, 2015 - Jul 10, 2015 + + Jun 11, 2015 - Jul 10, 2015 +
- + @@ -425,10 +540,16 @@ const Dashboard = () => { 74%
- Jun 11, 2015 - Jul 10, 2015 + + Jun 11, 2015 - Jul 10, 2015 +
- + @@ -460,10 +585,16 @@ const Dashboard = () => { 98%
- Jun 11, 2015 - Jul 10, 2015 + + Jun 11, 2015 - Jul 10, 2015 +
- + @@ -495,13 +630,19 @@ const Dashboard = () => { 22%
- Jun 11, 2015 - Jul 10, 2015 + + Jun 11, 2015 - Jul 10, 2015 +
- + @@ -530,10 +675,16 @@ const Dashboard = () => { 43%
- Jun 11, 2015 - Jul 10, 2015 + + Jun 11, 2015 - Jul 10, 2015 +
- +
+ + User Country Usage
- admin@bootstrapmaster.com + admin@bootstrapmaster.com
@@ -370,14 +472,17 @@ const Dashboard = () => {
- admin@bootstrapmaster.com + admin@bootstrapmaster.com
Avram Tarasios
- Recurring | Registered: Jan 1, 2015
@@ -406,7 +517,11 @@ const Dashboard = () => {
- admin@bootstrapmaster.com + admin@bootstrapmaster.com
@@ -441,7 +562,11 @@ const Dashboard = () => {
- admin@bootstrapmaster.com + admin@bootstrapmaster.com
@@ -476,7 +607,11 @@ const Dashboard = () => {
- admin@bootstrapmaster.com + admin@bootstrapmaster.com
- +
Last login
@@ -511,7 +652,11 @@ const Dashboard = () => {
- admin@bootstrapmaster.com + admin@bootstrapmaster.com
@@ -545,13 +696,12 @@ const Dashboard = () => {
- - ) -} + ); +}; -export default Dashboard +export default Dashboard; diff --git a/src/views/icons/brands/Brands.js b/src/views/icons/brands/Brands.js deleted file mode 100644 index 3168e8b4e..000000000 --- a/src/views/icons/brands/Brands.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' -import CIcon 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.entries(iconset).map(([name, value]) => ( - - -
{toKebabCase(name)}
- - )) -} - -const CoreUIIcons = () => { - return ( - - - Brand Icons / as CIcon{' '} - - - - - {getIconsView(brandSet)} - - - - ) -} - -export default CoreUIIcons diff --git a/src/views/icons/coreui-icons/CoreUIIcons.js b/src/views/icons/coreui-icons/CoreUIIcons.js deleted file mode 100644 index 91fcd27a2..000000000 --- a/src/views/icons/coreui-icons/CoreUIIcons.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react' -import { freeSet } from '@coreui/icons' -import { getIconsView } from '../brands/Brands.js' - -const CoreUIIcons = () => { - return ( - - - Free Icons / as CIcon{' '} - - - - - {getIconsView(freeSet)} - - - - ) -} - -export default CoreUIIcons diff --git a/src/views/icons/flags/Flags.js b/src/views/icons/flags/Flags.js deleted file mode 100644 index 192760059..000000000 --- a/src/views/icons/flags/Flags.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react' -import { getIconsView } from '../brands/Brands.js' -import { flagSet } from '@coreui/icons' - -const CoreUIIcons = () => { - return ( - - - Flag Icons / as CIcon{' '} - - - - - {getIconsView(flagSet)} - - - - ) -} - -export default CoreUIIcons diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js deleted file mode 100644 index 0a7c78ebe..000000000 --- a/src/views/notifications/alerts/Alerts.js +++ /dev/null @@ -1,180 +0,0 @@ -import React from 'react' -import { - CAlert, - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CLink, - CProgress, - CRow -} from '@coreui/react' - -const Alerts = () => { - const [visible, setVisible] = React.useState(10) - - 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! - - - - setVisible(10)}> - Reset timer - - - - - - - ) -} - -export default Alerts diff --git a/src/views/notifications/badges/Badges.js b/src/views/notifications/badges/Badges.js deleted file mode 100644 index 45a15f6f9..000000000 --- a/src/views/notifications/badges/Badges.js +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react' -import { - CBadge, - CButton, - CCard, - CCardBody, - CCardFooter, - CCardHeader, - CCol, - CRow -} from '@coreui/react' - -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 diff --git a/src/views/notifications/modals/Modals.js b/src/views/notifications/modals/Modals.js deleted file mode 100644 index dcd9803b7..000000000 --- a/src/views/notifications/modals/Modals.js +++ /dev/null @@ -1,246 +0,0 @@ -import React, { useState } from 'react' -import { - CButton, - CCard, - CCardBody, - CCardHeader, - CCol, - CModal, - CModalBody, - CModalFooter, - CModalHeader, - CModalTitle, - CRow -} from '@coreui/react' - -const Modals = () => { - - 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) - - return ( - - - - - Bootstrap Modals - - - setModal(!modal)} - className="mr-1" - color="secondary" - >Launch demo modal - setLarge(!large)} - className="mr-1" - color="secondary" - > - Launch large modal - - setSmall(!large)} - className="mr-1" - color="secondary" - > - Launch small modal - - - - Modal title - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. - - - Do Something{' '} - setModal(false)} - >Cancel - - - - - 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 - - - - 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 - - - -
- - setPrimary(!primary)} className="mr-1"> - Primary modal - - setSuccess(!success)} className="mr-1">Success modal - setWarning(!warning)} className="mr-1">Warning modal - setDanger(!danger)} className="mr-1">Danger modal - setInfo(!info)} className="mr-1">Info 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 - - - - - 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 - - - - 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 - - - - 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 - - - - 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{' '} - - - - - - - - ) -} - -export default Modals diff --git a/src/views/notifications/toaster/Toaster.js b/src/views/notifications/toaster/Toaster.js deleted file mode 100644 index 04ade5d29..000000000 --- a/src/views/notifications/toaster/Toaster.js +++ /dev/null @@ -1,183 +0,0 @@ -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/pages/login/Login.js b/src/views/pages/login/Login.js index 7f90972cb..daf852b18 100644 --- a/src/views/pages/login/Login.js +++ b/src/views/pages/login/Login.js @@ -1,5 +1,5 @@ -import React from 'react' -import { Link } from 'react-router-dom' +import React from "react"; +import { Link } from "react-router-dom"; import { CButton, CCard, @@ -12,9 +12,9 @@ import { CInputGroup, CInputGroupPrepend, CInputGroupText, - CRow -} from '@coreui/react' -import CIcon from '@coreui/icons-react' + CRow, +} from "@coreui/react"; +import CIcon from "@coreui/icons-react"; const Login = () => { return ( @@ -34,7 +34,11 @@ const Login = () => { - + @@ -42,27 +46,48 @@ const Login = () => { - + - Login + + Login + - Forgot password? + + Forgot password? + - +

Sign up

-

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

+

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

- Register Now! + + Register Now! +
@@ -72,7 +97,7 @@ const Login = () => {
- ) -} + ); +}; -export default Login +export default Login; diff --git a/src/views/pages/page404/Page404.js b/src/views/pages/page404/Page404.js index 4461e640f..2cfb6e934 100644 --- a/src/views/pages/page404/Page404.js +++ b/src/views/pages/page404/Page404.js @@ -1,4 +1,4 @@ -import React from 'react' +import React from "react"; import { CButton, CCol, @@ -8,9 +8,9 @@ import { CInputGroupPrepend, CInputGroupAppend, CInputGroupText, - CRow -} from '@coreui/react' -import CIcon from '@coreui/icons-react' + CRow, +} from "@coreui/react"; +import CIcon from "@coreui/icons-react"; const Page404 = () => { return ( @@ -20,8 +20,10 @@ const Page404 = () => {

404

-

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

-

The page you are looking for was not found.

+

Oops! You{"'"}re lost.

+

+ The page you are looking for was not found. +

@@ -29,7 +31,11 @@ const Page404 = () => { - + Search @@ -38,7 +44,7 @@ const Page404 = () => { - ) -} + ); +}; -export default Page404 +export default Page404; diff --git a/src/views/pages/page500/Page500.js b/src/views/pages/page500/Page500.js index 1ea399854..4477c4270 100644 --- a/src/views/pages/page500/Page500.js +++ b/src/views/pages/page500/Page500.js @@ -1,4 +1,4 @@ -import React from 'react' +import React from "react"; import { CButton, CCol, @@ -8,9 +8,9 @@ import { CInputGroupAppend, CInputGroupPrepend, CInputGroupText, - CRow -} from '@coreui/react' -import CIcon from '@coreui/icons-react' + CRow, +} from "@coreui/react"; +import CIcon from "@coreui/icons-react"; const Page500 = () => { return ( @@ -21,7 +21,9 @@ const Page500 = () => {

500

Houston, we have a problem!

-

The page you are looking for is temporarily unavailable.

+

+ The page you are looking for is temporarily unavailable. +

@@ -29,7 +31,11 @@ const Page500 = () => { - + Search @@ -38,7 +44,7 @@ const Page500 = () => { - ) -} + ); +}; -export default Page500 +export default Page500; diff --git a/src/views/pages/register/Register.js b/src/views/pages/register/Register.js index 6837ae62b..31c6e7aae 100644 --- a/src/views/pages/register/Register.js +++ b/src/views/pages/register/Register.js @@ -1,4 +1,4 @@ -import React from 'react' +import React from "react"; import { CButton, CCard, @@ -11,9 +11,9 @@ import { CInputGroup, CInputGroupPrepend, CInputGroupText, - CRow -} from '@coreui/react' -import CIcon from '@coreui/icons-react' + CRow, +} from "@coreui/react"; +import CIcon from "@coreui/icons-react"; const Register = () => { return ( @@ -32,13 +32,21 @@ const Register = () => { - + @ - + @@ -46,7 +54,11 @@ const Register = () => { - + @@ -54,18 +66,28 @@ const Register = () => { - + - Create Account + + Create Account + - facebook + + facebook + - twitter + + twitter + @@ -74,7 +96,7 @@ const Register = () => { - ) -} + ); +}; -export default Register +export default Register; diff --git a/src/views/theme/colors/Colors.js b/src/views/theme/colors/Colors.js deleted file mode 100644 index 72297a3e6..000000000 --- a/src/views/theme/colors/Colors.js +++ /dev/null @@ -1,119 +0,0 @@ -import React, { useEffect, useState, createRef } from 'react' -import classNames from 'classnames' -import { CRow, CCol } from '@coreui/react' -import { rgbToHex } from '@coreui/utils/src' - -const ThemeView = () => { - const [color, setColor] = useState('rgb(255, 255, 255)') - const ref = createRef() - - useEffect(() => { - const el = ref.current.parentNode.firstChild - const varColor = window.getComputedStyle(el).getPropertyValue('background-color') - setColor(varColor) - }, [ref]) - - return ( - - - - - - - - - - - -
HEX:{ rgbToHex(color) }
RGB:{ color }
- ) -} - -const ThemeColor = ({className, children}) => { - const classes = classNames(className, 'theme-color w-75 rounded mb-3') - return ( - -
- {children} - - - ) -} - -const Colors = () => { - 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
- - -
-
-
-
- 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 diff --git a/src/views/theme/typography/Typography.js b/src/views/theme/typography/Typography.js deleted file mode 100644 index 5b5645d76..000000000 --- a/src/views/theme/typography/Typography.js +++ /dev/null @@ -1,168 +0,0 @@ -import React from 'react' - -const Typography = () => { - return ( - <> -
-
- Headings -
-
-

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
HeadingExample
-

<h1></h1>

- 		h1. Bootstrap heading
-

<h2></h2>

- 		h2. Bootstrap heading
-

<h3></h3>

- 		h3. Bootstrap heading
-

<h4></h4>

- 		h4. Bootstrap heading
-

<h5></h5>

- 		h5. Bootstrap heading
-

<h6></h6>

- 		h6. Bootstrap heading
-
-
-
-
- Headings -
-
-

.h1 through .h6 classes are also available, for when you - want to match the font styling of a heading but cannot use the associated HTML element.

-
-

h1. Bootstrap heading

-

h2. Bootstrap heading

-

h3. Bootstrap heading

-

h4. Bootstrap heading

-

h5. Bootstrap heading

-

h6. Bootstrap heading

-
-
-
-
-
- Display headings -
-
-

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using - a display headingβ€”a larger, slightly more opinionated heading style.

-
- - - - - - - - - - - - - - - -
Display 1
Display 2
Display 3
Display 4
-
-
-
-
-
- Inline text elements -
-
-

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using - a display headingβ€”a larger, slightly more opinionated heading style.

-
-

You can use the mark tag to highlight text.

-

- This line of text is meant to be treated as deleted text. -

-

This line of text is meant to be treated as no longer accurate.

-

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

-

This line of text will render as underlined

-

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

-

This line rendered as bold text.

-

This line rendered as italicized text.

-
-
-
-
-
- Description list alignment -
-
-

Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can - optionally add a .text-truncate class to truncate the text with an ellipsis.

-
-
-
Description lists
-
A description list is perfect for defining terms.
- -
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 diff --git a/src/views/users/User.js b/src/views/users/User.js deleted file mode 100644 index 330d15445..000000000 --- a/src/views/users/User.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react' -import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' -import CIcon from '@coreui/icons-react' - -import usersData from './UsersData' - -const User = ({match}) => { - const user = usersData.find( user => user.id.toString() === match.params.id) - const userDetails = user ? Object.entries(user) : - [['id', ( Not found)]] - - return ( - - - - - User id: {match.params.id} - - - - - { - userDetails.map(([key, value], index) => { - return ( - - - - - ) - }) - } - -
{`${key}:`}{value}
- - - - - ) -} - -export default User diff --git a/src/views/users/Users.js b/src/views/users/Users.js deleted file mode 100644 index 05d525b9a..000000000 --- a/src/views/users/Users.js +++ /dev/null @@ -1,86 +0,0 @@ -import React, { useState, useEffect } from 'react' -import { useHistory, useLocation } from 'react-router-dom' -import { - CBadge, - CCard, - CCardBody, - CCardHeader, - CCol, - CDataTable, - CRow, - CPagination -} from '@coreui/react' - -import usersData from './UsersData' - -const getBadge = status => { - switch (status) { - case 'Active': return 'success' - case 'Inactive': return 'secondary' - case 'Pending': return 'warning' - case 'Banned': return 'danger' - default: return 'primary' - } -} - -const Users = () => { - const history = useHistory() - const queryPage = useLocation().search.match(/page=([0-9]+)/, '') - const currentPage = Number(queryPage && queryPage[1] ? queryPage[1] : 1) - const [page, setPage] = useState(currentPage) - - const pageChange = newPage => { - currentPage !== newPage && history.push(`/users?page=${newPage}`) - } - - useEffect(() => { - currentPage !== page && setPage(currentPage) - }, [currentPage, page]) - - return ( - - - - - Users - example - - - history.push(`/users/${item.id}`)} - scopedSlots = {{ - 'status': - (item)=>( - - - {item.status} - - - ) - }} - /> - - - - - - ) -} - -export default Users diff --git a/src/views/users/UsersData.js b/src/views/users/UsersData.js deleted file mode 100644 index f5f923a3f..000000000 --- a/src/views/users/UsersData.js +++ /dev/null @@ -1,29 +0,0 @@ -const usersData = [ - {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'}, - {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'}, - {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, - {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'}, - {id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'}, - {id: 5, name: 'Friderik DÑvid', registered: '2018/01/21', role: 'Staff', status: 'Active'}, - {id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'}, - {id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, - {id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'}, - {id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'}, - {id: 10, name: 'Agapetus TadeÑő', registered: '2018/01/21', role: 'Staff', status: 'Active'}, - {id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'}, - {id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, - {id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'}, - {id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'}, - {id: 15, name: 'Leopold GÑspÑr', registered: '2018/01/21', role: 'Staff', status: 'Active'}, - {id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'}, - {id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, - {id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'}, - {id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'}, - {id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'}, - {id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'}, - {id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, - {id: 23, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'}, - {id: 42, name: 'Ford Prefect', registered: '2001/05/25', role: 'Alien', status: 'Don\'t panic!'} -] - -export default usersData diff --git a/src/views/widgets/Widgets.js b/src/views/widgets/Widgets.js index f072de76b..68f4296ab 100644 --- a/src/views/widgets/Widgets.js +++ b/src/views/widgets/Widgets.js @@ -1,4 +1,4 @@ -import React from 'react' +import React from "react"; import { CCardGroup, CCardFooter, @@ -10,14 +10,14 @@ import { CWidgetProgressIcon, CWidgetSimple, CProgress, -} from '@coreui/react' -import WidgetsBrand from './WidgetsBrand' -import WidgetsDropdown from './WidgetsDropdown' +} from "@coreui/react"; +import WidgetsBrand from "./WidgetsBrand"; +import WidgetsDropdown from "./WidgetsDropdown"; -import ChartLineSimple from '../charts/ChartLineSimple' -import ChartBarSimple from '../charts/ChartBarSimple' +import ChartLineSimple from "../charts/ChartLineSimple"; +import ChartBarSimple from "../charts/ChartBarSimple"; -import CIcon from '@coreui/icons-react' +import CIcon from "@coreui/icons-react"; const Widgets = () => { return ( @@ -25,150 +25,239 @@ const Widgets = () => { - + - + - + - - + + - + - + - + - + - - + - + - + - + - - + + - - + + - - + + - - + + - - - + + - - + + - View more - + } > - + - - + + - + - + - + - - + + } + + } > - + @@ -178,7 +267,7 @@ const Widgets = () => { color="gradient-info" inverse > - + { color="gradient-success" inverse > - + { color="gradient-warning" inverse > - + { color="gradient-primary" inverse > - + { color="gradient-danger" inverse > - + @@ -220,7 +309,7 @@ const Widgets = () => { text="Visitors" color="gradient-info" > - + @@ -229,7 +318,7 @@ const Widgets = () => { text="New Clients" color="gradient-success" > - + @@ -238,7 +327,7 @@ const Widgets = () => { text="Products sold" color="gradient-warning" > - + @@ -247,7 +336,7 @@ const Widgets = () => { text="Returning Visitors" color="gradient-primary" > - + @@ -256,7 +345,7 @@ const Widgets = () => { text="Avg. Time" color="gradient-danger" > - + @@ -265,7 +354,7 @@ const Widgets = () => { text="comments" color="gradient-info" > - + @@ -277,7 +366,7 @@ const Widgets = () => { color="gradient-info" inverse > - + @@ -287,7 +376,7 @@ const Widgets = () => { color="gradient-success" inverse > - + @@ -297,7 +386,7 @@ const Widgets = () => { color="gradient-warning" inverse > - + @@ -307,7 +396,7 @@ const Widgets = () => { color="gradient-primary" inverse > - + @@ -317,7 +406,7 @@ const Widgets = () => { color="gradient-danger" inverse > - + @@ -327,44 +416,53 @@ const Widgets = () => { color="gradient-info" inverse > - + - + - + - + - + - + - + - ) -} + ); +}; -export default Widgets +export default Widgets; diff --git a/src/views/widgets/WidgetsBrand.js b/src/views/widgets/WidgetsBrand.js index 4cf071943..e562dfa0c 100644 --- a/src/views/widgets/WidgetsBrand.js +++ b/src/views/widgets/WidgetsBrand.js @@ -1,177 +1,145 @@ -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})=>{ +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 ? - - - - - - - + return withCharts ? ( + + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - - : - - - - - - - + + + + + + + + ) : ( + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - - -} + + + + + + + ); +}; WidgetsBrand.propTypes = { - withCharts: PropTypes.bool -} + withCharts: PropTypes.bool, +}; -export default WidgetsBrand +export default WidgetsBrand; diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js index 3d0d86fbd..b50e4ce96 100644 --- a/src/views/widgets/WidgetsDropdown.js +++ b/src/views/widgets/WidgetsDropdown.js @@ -1,4 +1,4 @@ -import React from 'react' +import React from "react"; import { CWidgetDropdown, CRow, @@ -6,11 +6,11 @@ import { CDropdown, CDropdownMenu, CDropdownItem, - CDropdownToggle -} from '@coreui/react' -import CIcon from '@coreui/icons-react' -import ChartLineSimple from '../charts/ChartLineSimple' -import ChartBarSimple from '../charts/ChartBarSimple' + CDropdownToggle, +} from "@coreui/react"; +import CIcon from "@coreui/icons-react"; +import ChartLineSimple from "../charts/ChartLineSimple"; +import ChartBarSimple from "../charts/ChartBarSimple"; const WidgetsDropdown = () => { // render @@ -25,7 +25,7 @@ const WidgetsDropdown = () => { { > - + Action @@ -56,10 +56,10 @@ const WidgetsDropdown = () => { @@ -67,7 +67,7 @@ const WidgetsDropdown = () => { > - + Action @@ -87,10 +87,10 @@ const WidgetsDropdown = () => { footerSlot={ { > - + Action @@ -119,7 +119,7 @@ const WidgetsDropdown = () => { footerSlot={ { > - + Action @@ -140,7 +140,7 @@ const WidgetsDropdown = () => { - ) -} + ); +}; -export default WidgetsDropdown +export default WidgetsDropdown;