├── .editorconfig ├── .env ├── .gitignore ├── CHANGELOG.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── REACT.md ├── README.md ├── jsconfig.json ├── migration.md ├── package-lock.json ├── package.json ├── public ├── avatars │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ └── 8.jpg ├── favicon.ico ├── index.html └── manifest.json └── src ├── App.js ├── App.test.js ├── assets └── icons │ ├── index.js │ ├── logo-negative.js │ ├── logo.js │ └── sygnet.js ├── containers ├── TheContent.js ├── TheFooter.js ├── TheHeader.js ├── TheHeaderDropdown.js ├── TheHeaderDropdownMssg.js ├── TheHeaderDropdownNotif.js ├── TheHeaderDropdownTasks.js ├── TheLayout.js ├── TheSidebar.js ├── _nav.js └── index.js ├── index.js ├── polyfill.js ├── reusable ├── DocsLink.js └── index.js ├── routes.js ├── scss ├── _custom.scss ├── _variables.scss └── style.scss ├── serviceWorker.js ├── setupTests.js ├── store.js └── views ├── base ├── breadcrumbs │ └── Breadcrumbs.js ├── cards │ └── Cards.js ├── carousels │ └── Carousels.js ├── collapses │ └── Collapses.js ├── forms │ └── BasicForms.js ├── index.js ├── jumbotrons │ └── Jumbotrons.js ├── list-groups │ └── ListGroups.js ├── navbars │ └── Navbars.js ├── navs │ └── Navs.js ├── paginations │ └── Pagnations.js ├── popovers │ └── Popovers.js ├── progress-bar │ └── ProgressBar.js ├── switches │ └── Switches.js ├── tables │ └── Tables.js ├── tabs │ └── Tabs.js └── tooltips │ └── Tooltips.js ├── buttons ├── brand-buttons │ └── BrandButtons.js ├── button-dropdowns │ └── ButtonDropdowns.js ├── button-groups │ └── ButtonGroups.js ├── buttons │ └── Buttons.js └── index.js ├── charts ├── ChartBarSimple.js ├── ChartLineSimple.js ├── Charts.js └── MainChartExample.js ├── dashboard └── Dashboard.js ├── icons ├── brands │ └── Brands.js ├── coreui-icons │ └── CoreUIIcons.js ├── flags │ └── Flags.js └── index.js ├── notifications ├── alerts │ └── Alerts.js ├── badges │ └── Badges.js ├── index.js ├── modals │ └── Modals.js └── toaster │ └── Toaster.js ├── pages ├── login │ └── Login.js ├── page404 │ └── Page404.js ├── page500 │ └── Page500.js └── register │ └── Register.js ├── theme ├── colors │ └── Colors.js └── typography │ └── Typography.js ├── users ├── User.js ├── Users.js └── UsersData.js └── widgets ├── Widgets.js ├── WidgetsBrand.js └── WidgetsDropdown.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_size = 2 8 | indent_style = space 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | max_line_length = off 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | PORT=3000 2 | CHOKIDAR_USEPOLLING=true 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /src/coreui-new 6 | /src/coreui-icons 7 | /src/coreui-charts 8 | 9 | # testing 10 | /coverage 11 | /src/coreui-new 12 | /src/coreui-icons 13 | /src/coreui-charts 14 | 15 | # production 16 | /build 17 | /src/coreui-new 18 | /src/coreui-icons 19 | /src/coreui-charts 20 | 21 | # misc 22 | .DS_Store 23 | .idea 24 | .env.local 25 | .env.development.local 26 | .env.test.local 27 | .env.production.local 28 | 29 | npm-debug.log* 30 | yarn-debug.log* 31 | yarn-error.log* 32 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### Changelog 2 | 3 | All notable changes to this project will be documented in this file. Dates are displayed in UTC. 4 | 5 | #### [3.1.0](https://github.com/coreui/coreui-free-react-admin-template/compare/3.0.0...3.1.0) 6 | 7 | > 12 August 2020 8 | 9 | - docs(readme): CoreUI react theme setup with laravel tutorial link add into readme [`#226`](https://github.com/coreui/coreui-free-react-admin-template/pull/226) 10 | - fix: fix template testing [`68ce41d`](https://github.com/coreui/coreui-free-react-admin-template/commit/68ce41db6831d6995121766a5771dc9d667cc61a) 11 | - chore: 3.1.0 release - update dependencies [`92f55b8`](https://github.com/coreui/coreui-free-react-admin-template/commit/92f55b8cdfd748a9e72649d5da62b93015a1c8e6) 12 | - refactor: add reusable folder with DocsLink component [`eef84db`](https://github.com/coreui/coreui-free-react-admin-template/commit/eef84dbbd770c7253080a6f69443c40e4fecefd2) 13 | - feat: add CSwitch examples to forms [`b31e452`](https://github.com/coreui/coreui-free-react-admin-template/commit/b31e452fd0ea736763d3032d7204cd478863b505) 14 | - refactor: add CIcon example in _nav.js [`be5d1f0`](https://github.com/coreui/coreui-free-react-admin-template/commit/be5d1f0618f981f18c45be87afb56c4409bd3389) 15 | 16 | ### [3.0.0](https://github.com/coreui/coreui-free-react-admin-template/compare/v2.6.1...3.0.0) 17 | 18 | > 17 June 2020 19 | 20 | - feat: update template to version 3 [`cc79542`](https://github.com/coreui/coreui-free-react-admin-template/commit/cc795425bbf610873fcdf6938b5fb0aba49a4d97) 21 | - refactor: update folder casing to kebab-case [`75138b0`](https://github.com/coreui/coreui-free-react-admin-template/commit/75138b0d0340cc21d58bcc2f800f042f86e54346) 22 | - refactor: temporarily delete views folder [`cb4433a`](https://github.com/coreui/coreui-free-react-admin-template/commit/cb4433a3e33cb943bc1f47199110ead28fab517b) 23 | - docs: README update [`188e0b1`](https://github.com/coreui/coreui-free-react-admin-template/commit/188e0b1c09fd7d47dc87d0410303ae43e8ee79de) 24 | - chore: clear packages [`e236aad`](https://github.com/coreui/coreui-free-react-admin-template/commit/e236aad4ab0129e3611adfc2127670da64696e54) 25 | - fix: delete obsolete files, fix logos [`f479a5d`](https://github.com/coreui/coreui-free-react-admin-template/commit/f479a5dc72bb5bb75b95a4b904d1c350be8fe7bc) 26 | - chore: 3.0.0-beta.1 release [`d940f92`](https://github.com/coreui/coreui-free-react-admin-template/commit/d940f92ef741d7eab021af4fbcf385823c80421a) 27 | - fix: fix accordion, delete aside [`0e6506e`](https://github.com/coreui/coreui-free-react-admin-template/commit/0e6506ea3303ca30bc21ba2bcf3717a3f009dc8c) 28 | - refactor: optimize icon bundle size, update icons [`9fed168`](https://github.com/coreui/coreui-free-react-admin-template/commit/9fed168a534b88cb27371d6364b922418a5a13b4) 29 | - refacotor: template updates [`1df8c15`](https://github.com/coreui/coreui-free-react-admin-template/commit/1df8c15030d45779f6adc5031153eaff09701d97) 30 | - refactor: turn logos extensions from svg to js [`8c0deee`](https://github.com/coreui/coreui-free-react-admin-template/commit/8c0deeed169267155323a5b6bdbbdfaf8a856a41) 31 | - refactor: rename containers from 'Default' to 'The', small fixes [`bfc79da`](https://github.com/coreui/coreui-free-react-admin-template/commit/bfc79da4039dd534ee49b4526978f7b949cea90b) 32 | - refactor: update icons to version 2, rtl fixes [`8e4fbc2`](https://github.com/coreui/coreui-free-react-admin-template/commit/8e4fbc2aa8786b00a004282260c52986e1cd2430) 33 | - fix: delete unneded icons, aside, fix readme.md [`1ee0561`](https://github.com/coreui/coreui-free-react-admin-template/commit/1ee05619ba15d050b73df21c8d1347e8329942d5) 34 | - chore: 3.0.0 version release - update dependencies [`fd5236d`](https://github.com/coreui/coreui-free-react-admin-template/commit/fd5236d47340b336bf641041cbf6d48ec8b1081a) 35 | - feat: add query parameters to Users view [`98f8b67`](https://github.com/coreui/coreui-free-react-admin-template/commit/98f8b677edb96f9175b7d4c20370c3d6744543bd) 36 | - docs: add license [`db85786`](https://github.com/coreui/coreui-free-react-admin-template/commit/db85786be465fdb7a84b7337dbe876afc5e957bc) 37 | - chore: update react.md [`5aa0cc3`](https://github.com/coreui/coreui-free-react-admin-template/commit/5aa0cc3ce15c841032cd75392418cfeb2e4d094f) 38 | - docs: README cleanup [`82a4351`](https://github.com/coreui/coreui-free-react-admin-template/commit/82a4351daa6c8d452e19c7141dbadecc3f721c1b) 39 | - fix: fix Icons views [`1777a09`](https://github.com/coreui/coreui-free-react-admin-template/commit/1777a092f6444497120e85c8852a1e4779640e71) 40 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Before opening an issue: 2 | 3 | - [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-react-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue) 4 | - Prepare a [reduced test case](https://css-tricks.com/reduced-test-cases/) for any bugs 5 | 6 | 7 | When asking general "how to" questions: 8 | 9 | - Please do not open an issue here 10 | 11 | When reporting a bug, include: 12 | 13 | - Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile) 14 | - Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera, Android Browser) 15 | - Reduced test cases and potential fixes using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/) 16 | 17 | When suggesting a feature, include: 18 | 19 | - As much detail as possible for what we should add and why it's important to CoreUI Admin Template 20 | - Relevant links to prior art, screenshots, or live demos whenever possible 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 creativeLabs Łukasz Holeczek. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /REACT.md: -------------------------------------------------------------------------------- 1 | # CoreUI React version 2 | 3 | ## Intro 4 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) 5 | 6 | It uses Sass (with .scss). The styles are loaded at the template level with `node-sass-chokidar` css preprocessor 7 | 8 | Dependencies are handled by **npm**. 9 | 10 | ## Usage 11 | `npm i` - to install dependencies 12 | 13 | ## Sctipts 14 | `npm start` for developing (it runs webpack-dev-server) 15 | `npm run build` to run a dev build 16 | 17 | ## See also 18 | [Create-React-App](CRA.md) 19 | [Readme](./README.md) 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui) 2 | [![npm package][npm-coreui-badge]][npm-coreui] 3 | [![NPM downloads][npm-coreui-download]][npm-coreui] 4 | [![@coreui react](https://img.shields.io/badge/@coreui%20-react-lightgrey.svg?style=flat-square)](https://github.com/coreui/react) 5 | [![npm package][npm-coreui-react-badge]][npm-coreui-react] 6 | [![NPM downloads][npm-coreui-react-download]][npm-coreui-react] 7 | [![npm next][npm-next]][npm] 8 | 9 | [npm-coreui]: https://www.npmjs.com/package/@coreui/coreui 10 | [npm-coreui-badge]: https://img.shields.io/npm/v/@coreui/coreui.png?style=flat-square 11 | [npm-coreui-download]: https://img.shields.io/npm/dm/@coreui/coreui.svg?style=flat-square 12 | [npm-coreui-react]: https://www.npmjs.com/package/@coreui/react 13 | [npm-coreui-react-badge]: https://img.shields.io/npm/v/@coreui/react.png?style=flat-square 14 | [npm-coreui-react-download]: https://img.shields.io/npm/dm/@coreui/react.svg?style=flat-square 15 | [npm-next]: https://img.shields.io/npm/v/@coreui/react/next.png?style=flat-square 16 | [npm]: https://www.npmjs.com/package/@coreui/react 17 | 18 | # CoreUI Free React Admin Template v3 19 | 20 | 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! 21 | 22 | ## Table of Contents 23 | 24 | * [Versions](#versions) 25 | * [CoreUI Pro](#coreui-pro) 26 | * [Installation](#installation) 27 | * [Basic usage](#create-react-app) 28 | * [What's included](#whats-included) 29 | * [Documentation](#documentation) 30 | * [Versioning](#versioning) 31 | * [Creators](#creators) 32 | * [Community](#community) 33 | * [Copyright and License](#copyright-and-license) 34 | 35 | ## Versions 36 | 37 | * [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template) 38 | * [CoreUI Free Angular 9+ Admin Template](https://github.com/coreui/coreui-free-angular-admin-template) 39 | * [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template) 40 | * [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template) 41 | * [CoreUI Free Laravel Admin Template](https://github.com/coreui/coreui-free-laravel-admin-template) 42 | * [CoreUI Free Vue.js + Laravel Admin Template](https://github.com/coreui/coreui-free-vue-laravel-admin-template) 43 | 44 | ## CoreUI Pro 45 | 46 | **Only customers with [Enterpise Membership Plan](https://coreui.io/pro/#buy) have access to private github CoreUI Pro repository.** 47 | 48 | * 💪 [CoreUI Pro Bootstrap Admin Template](https://coreui.io/pro/) 49 | * 💪 [CoreUI Pro Angular 9+ Admin Template](https://coreui.io/pro/angular) 50 | * 💪 [CoreUI Pro React Admin Template](https://coreui.io/pro/react) 51 | * 💪 [CoreUI Pro Vue Admin Template](https://coreui.io/pro/vue) 52 | * 💪 [CoreUI Pro Laravel Admin Template](https://coreui.io/pro/laravel/) 53 | * 💪 [CoreUI Pro Vue.js + Laravel Admin Template](https://coreui.io/pro/vue-laravel/) 54 | 55 | ## Installation 56 | 57 | ### Clone repo 58 | 59 | ``` bash 60 | # clone the repo 61 | $ git clone https://github.com/coreui/coreui-free-react-admin-template.git my-project 62 | 63 | # go into app's directory 64 | $ cd my-project 65 | 66 | # install app's dependencies 67 | $ npm install 68 | ``` 69 | 70 | ### Copy and Paste 71 | 72 | Copy all your files to your project folder and then, 73 | 74 | ``` bash 75 | # go into app's directory 76 | $ cd my-project 77 | 78 | # install app's dependencies 79 | $ npm install 80 | ``` 81 | 82 | ## Create React App 83 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) 84 | 85 | see also: 86 | [CRA docs](https://create-react-app.dev/docs/getting-started) 87 | 88 | ### Basic usage 89 | 90 | ``` bash 91 | # dev server with hot reload at http://localhost:3000 92 | $ npm start 93 | ``` 94 | 95 | Navigate to [http://localhost:3000](http://localhost:3000). The app will automatically reload if you change any of the source files. 96 | 97 | ### Build 98 | 99 | Run `build` to build the project. The build artifacts will be stored in the `build/` directory. 100 | 101 | ```bash 102 | # build for production with minification 103 | $ npm run build 104 | ``` 105 | 106 | ## What's included 107 | 108 | 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: 109 | 110 | ``` 111 | CoreUI-React#v3.0.0 112 | ├── public/ #static files 113 | │ └── index.html #html template 114 | │ 115 | ├── src/ #project root 116 | │ ├── assets/ #assets - js icons object 117 | │ ├── containers/ #container source - template layout 118 | | │ ├── _nav.js #sidebar config 119 | | │ └── ... 120 | │ ├── scss/ #user scss/css source 121 | │ ├── views/ #views source 122 | │ ├── App.js 123 | │ ├── App.test.js 124 | │ ├── polyfill.js 125 | │ ├── index.js 126 | │ ├── routes.js #routes config 127 | │ └── store.js #template state example 128 | │ 129 | └── package.json 130 | ``` 131 | 132 | ## Documentation 133 | 134 | The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for React](https://coreui.io/react/) 135 | 136 | ### :film_strip: How to setup coreui react theme in laravel. Video tutorial available [here](https://youtu.be/HVVpbpNUJ8M) 137 | 138 | ## Versioning 139 | 140 | 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/). 141 | 142 | See [the Releases section of our project](https://github.com/coreui/coreui-free-react-admin-template/releases) for changelogs for each release version. 143 | 144 | ## Creators 145 | 146 | **Łukasz Holeczek** 147 | * 148 | * 149 | * 150 | 151 | **CoreUI team** 152 | * https://github.com/orgs/coreui/people 153 | 154 | ## Community 155 | 156 | Get updates on CoreUI's development and chat with the project maintainers and community members. 157 | 158 | - Follow [@core_ui on Twitter](https://twitter.com/core_ui). 159 | - Read and subscribe to [CoreUI Blog](https://coreui.ui/blog/). 160 | 161 | 162 | ## Copyright and License 163 | 164 | copyright 2020 creativeLabs Łukasz Holeczek. 165 | 166 | 167 | Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/master/LICENSE). 168 | 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. 169 | 170 | ## Support CoreUI Development 171 | 172 | 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/). 173 | 174 | We're also open to conversations regarding custom sponsorship / consulting arrangements. Get in touch on [Twitter](https://twitter.com/lukaszholeczek). 175 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "." 4 | }, 5 | "include": ["src"] 6 | } -------------------------------------------------------------------------------- /migration.md: -------------------------------------------------------------------------------- 1 | # Migration from version 2 2 | 3 | Migration from version 2 must be performed manually because the components library `@coreui/coreui-react` has been completely rewritten. 4 | 5 | The docs of the new components are available [here](https://coreui.io/react/docs/) 6 | 7 | The good news is that most probably it will be sufficient to migrate layout components (Sidebar, Header, Footer, Aside) and `Switch` component 8 | 9 | The best way to do a migration is: 10 | 1. Install `@coreui/coreui-react` v3 11 | 2. Make a copy of the current `containers` folder 12 | 2. Paste [containers](https://github.com/coreui/coreui-free-react-admin-template/tree/master/src/containers) folder from v3 template to project 13 | 3. Correct routing paths 14 | 4. Add previous content to new template layout components 15 | 5. Replace `Switch` components with `CSwitch` 16 | 17 | Layout components/ corresponding components in version 3 18 | - Aside -> CSidebar (with prop aside={true}) 19 | - AsideToggler -> CToggler 20 | - Breadcrumb -> CBreadcrumbRouter 21 | - Footer -> CFooter 22 | - Header -> CHeader 23 | - HeaderDropdown -> CDropdown 24 | - NavbarBrand -> CSidebarBrand 25 | - Sidebar -> CSidebar 26 | - SidebarFooter -> CSidebarFooter 27 | - SidebarForm -> CSidebarForm 28 | - SidebarHeader -> CSidebarHeader 29 | - SidebarMinimizer -> CSidebarMinimizer 30 | - SidebarNav -> CSidebarNav + CSidebarNavDropdown + CSidebarNavItem 31 | - SidebarToggler -> CSidebarToggler 32 | - Switch -> CSwitch 33 | 34 | After the migration is done, you can start using new components of `@coreui/coreui-react` v3 library. 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@coreui/coreui-free-react-admin-template", 3 | "version": "3.1.0", 4 | "description": "CoreUI React Open Source Bootstrap 4 Admin Template", 5 | "author": { 6 | "name": "CoreUI", 7 | "url": "https://coreui.io", 8 | "github": "https://github.com/coreui", 9 | "twitter": "https://twitter.com/core_ui" 10 | }, 11 | "contributors": [ 12 | { 13 | "name": "CoreUI Team", 14 | "url": "https://github.com/orgs/coreui/people" 15 | } 16 | ], 17 | "homepage": ".", 18 | "copyright": "Copyright 2017-2020 creativeLabs Łukasz Holeczek", 19 | "license": "MIT", 20 | "private": true, 21 | "repository": { 22 | "type": "git", 23 | "url": "git@github.com:coreui/coreui-free-react-admin-template.git" 24 | }, 25 | "dependencies": { 26 | "@coreui/chartjs": "^2.0.0", 27 | "@coreui/coreui": "^3.2.2", 28 | "@coreui/icons": "2.0.0-beta.4", 29 | "@coreui/icons-react": "^1.0.2", 30 | "@coreui/react": "^3.2.3", 31 | "@coreui/react-chartjs": "^1.0.1", 32 | "@coreui/utils": "^1.3.1", 33 | "classnames": "^2.2.6", 34 | "core-js": "^3.6.5", 35 | "enzyme": "^3.11.0", 36 | "enzyme-adapter-react-16": "^1.15.3", 37 | "node-sass": "^4.14.1", 38 | "prop-types": "^15.7.2", 39 | "react": "^16.13.1", 40 | "react-app-polyfill": "^1.0.6", 41 | "react-dom": "^16.13.1", 42 | "react-redux": "7.2.1", 43 | "react-router-dom": "^5.2.0", 44 | "redux": "4.0.5" 45 | }, 46 | "devDependencies": { 47 | "react-scripts": "^3.4.2", 48 | "auto-changelog": "2.2.0" 49 | }, 50 | "scripts": { 51 | "start": "react-scripts start", 52 | "build": "react-scripts build", 53 | "test": "react-scripts test", 54 | "test:cov": "npm test -- --coverage --watchAll=false", 55 | "test:debug": "react-scripts --inspect-brk test --runInBand", 56 | "eject": "react-scripts eject", 57 | "changelog": "auto-changelog --starting-version 3.0.0 --commit-limit false --hide-credit" 58 | }, 59 | "bugs": { 60 | "url": "https://github.com/coreui/coreui-free-react-admin-template/issues" 61 | }, 62 | "eslintConfig": { 63 | "extends": "react-app" 64 | }, 65 | "browserslist": [ 66 | ">0.2%", 67 | "not dead", 68 | "not ie <= 10", 69 | "not op_mini all" 70 | ], 71 | "jest": { 72 | "collectCoverageFrom": [ 73 | "src/**/*.{js,jsx}", 74 | "!**/*index.js", 75 | "!src/serviceWorker.js", 76 | "!src/polyfill.js" 77 | ] 78 | }, 79 | "engines": { 80 | "node": ">=10", 81 | "npm": ">=6" 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /public/avatars/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/coreui-free-react-admin-template/b661344485a38404b8c2b1326e3a4258009b071c/public/avatars/1.jpg -------------------------------------------------------------------------------- /public/avatars/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/coreui-free-react-admin-template/b661344485a38404b8c2b1326e3a4258009b071c/public/avatars/2.jpg -------------------------------------------------------------------------------- /public/avatars/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/coreui-free-react-admin-template/b661344485a38404b8c2b1326e3a4258009b071c/public/avatars/3.jpg -------------------------------------------------------------------------------- /public/avatars/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/coreui-free-react-admin-template/b661344485a38404b8c2b1326e3a4258009b071c/public/avatars/4.jpg -------------------------------------------------------------------------------- /public/avatars/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/coreui-free-react-admin-template/b661344485a38404b8c2b1326e3a4258009b071c/public/avatars/5.jpg -------------------------------------------------------------------------------- /public/avatars/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/coreui-free-react-admin-template/b661344485a38404b8c2b1326e3a4258009b071c/public/avatars/6.jpg -------------------------------------------------------------------------------- /public/avatars/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/coreui-free-react-admin-template/b661344485a38404b8c2b1326e3a4258009b071c/public/avatars/7.jpg -------------------------------------------------------------------------------- /public/avatars/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/coreui-free-react-admin-template/b661344485a38404b8c2b1326e3a4258009b071c/public/avatars/8.jpg -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/coreui-free-react-admin-template/b661344485a38404b8c2b1326e3a4258009b071c/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | CoreUI Free React.js Admin Template 18 | 22 | 23 | 24 | 33 | 34 | 35 | 38 |
39 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "CoreUI-React", 3 | "name": "CoreUI-React sample", 4 | "icons": [ 5 | { 6 | "src": "./assets/img/favicon.png", 7 | "sizes": "100x100", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { HashRouter, Route, Switch } from 'react-router-dom'; 3 | import './scss/style.scss'; 4 | 5 | const loading = ( 6 |
7 |
8 |
9 | ) 10 | 11 | // Containers 12 | const TheLayout = React.lazy(() => import('./containers/TheLayout')); 13 | 14 | // Pages 15 | const Login = React.lazy(() => import('./views/pages/login/Login')); 16 | const Register = React.lazy(() => import('./views/pages/register/Register')); 17 | const Page404 = React.lazy(() => import('./views/pages/page404/Page404')); 18 | const Page500 = React.lazy(() => import('./views/pages/page500/Page500')); 19 | 20 | class App extends Component { 21 | 22 | render() { 23 | return ( 24 | 25 | 26 | 27 | } /> 28 | } /> 29 | } /> 30 | } /> 31 | } /> 32 | 33 | 34 | 35 | ); 36 | } 37 | } 38 | 39 | export default App; 40 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { shallow } from 'enzyme/build' 3 | import App from './App' 4 | import ChartLineSimple from './views/charts/ChartLineSimple' 5 | import Dashboard from './views/dashboard/Dashboard.js' 6 | 7 | 8 | it('mounts without crashing', () => { 9 | const wrapper = shallow() 10 | wrapper.unmount() 11 | }) 12 | 13 | it('mounts dashboard without crashing', () => { 14 | const wrapper = shallow() 15 | wrapper.unmount() 16 | }) 17 | 18 | it('mounts charts without crashing', () => { 19 | const wrapper = shallow( ) 20 | wrapper.unmount() 21 | }) 22 | -------------------------------------------------------------------------------- /src/assets/icons/index.js: -------------------------------------------------------------------------------- 1 | import { sygnet } from './sygnet' 2 | import { logo } from './logo' 3 | import { logoNegative } from './logo-negative' 4 | 5 | import { 6 | cibSkype, 7 | cibFacebook, 8 | cibTwitter, 9 | cibLinkedin, 10 | cibFlickr, 11 | cibTumblr, 12 | cibXing, 13 | cibGithub, 14 | cibStackoverflow, 15 | cibYoutube, 16 | cibDribbble, 17 | cibInstagram, 18 | cibPinterest, 19 | cibVk, 20 | cibYahoo, 21 | cibBehance, 22 | cibReddit, 23 | cibVimeo, 24 | cibCcMastercard, 25 | cibCcVisa, 26 | cibStripe, 27 | cibPaypal, 28 | cibGooglePay, 29 | cibCcAmex 30 | } from '@coreui/icons' 31 | import { 32 | cifUs, 33 | cifBr, 34 | cifIn, 35 | cifFr, 36 | cifEs, 37 | cifPl 38 | } from '@coreui/icons' 39 | import { 40 | cilAlignCenter, 41 | cilAlignLeft, 42 | cilAlignRight, 43 | cilApplicationsSettings, 44 | cilArrowRight, 45 | cilArrowTop, 46 | cilAsterisk, 47 | cilBan, 48 | cilBasket, 49 | cilBell, 50 | cilBold, 51 | cilBookmark, 52 | cilCalculator, 53 | cilCalendar, 54 | cilCloudDownload, 55 | cilChartPie, 56 | cilCheck, 57 | cilChevronBottom, 58 | cilChevronLeft, 59 | cilChevronRight, 60 | cilChevronTop, 61 | cilCircle, 62 | cilCheckCircle, 63 | cilCode, 64 | cilCommentSquare, 65 | cilCreditCard, 66 | cilCursor, 67 | cilCursorMove, 68 | cilDrop, 69 | cilDollar, 70 | cilEnvelopeClosed, 71 | cilEnvelopeLetter, 72 | cilEnvelopeOpen, 73 | cilEuro, 74 | cilGlobeAlt, 75 | cilGrid, 76 | cilFile, 77 | cilFullscreen, 78 | cilFullscreenExit, 79 | cilGraph, 80 | cilHome, 81 | cilInbox, 82 | cilIndentDecrease, 83 | cilIndentIncrease, 84 | cilInputPower, 85 | cilItalic, 86 | cilJustifyCenter, 87 | cilJustifyLeft, 88 | cilLaptop, 89 | cilLayers, 90 | cilLightbulb, 91 | cilList, 92 | cilListNumbered, 93 | cilListRich, 94 | cilLocationPin, 95 | cilLockLocked, 96 | cilMagnifyingGlass, 97 | cilMap, 98 | cilMoon, 99 | cilNotes, 100 | cilOptions, 101 | cilPaperclip, 102 | cilPaperPlane, 103 | cilPencil, 104 | cilPeople, 105 | cilPhone, 106 | cilPrint, 107 | cilPuzzle, 108 | cilSave, 109 | cilScrubber, 110 | cilSettings, 111 | cilShare, 112 | cilShareAll, 113 | cilShareBoxed, 114 | cilShieldAlt, 115 | cilSpeech, 116 | cilSpeedometer, 117 | cilSpreadsheet, 118 | cilStar, 119 | cilSun, 120 | cilTags, 121 | cilTask, 122 | cilTrash, 123 | cilUnderline, 124 | cilUser, 125 | cilUserFemale, 126 | cilUserFollow, 127 | cilUserUnfollow, 128 | cilX, 129 | cilXCircle, 130 | cilWarning 131 | } from '@coreui/icons' 132 | 133 | export const icons = Object.assign({}, { 134 | sygnet, 135 | logo, 136 | logoNegative 137 | }, { 138 | cilAlignCenter, 139 | cilAlignLeft, 140 | cilAlignRight, 141 | cilApplicationsSettings, 142 | cilArrowRight, 143 | cilArrowTop, 144 | cilAsterisk, 145 | cilBan, 146 | cilBasket, 147 | cilBell, 148 | cilBold, 149 | cilBookmark, 150 | cilCalculator, 151 | cilCalendar, 152 | cilCloudDownload, 153 | cilChartPie, 154 | cilCheck, 155 | cilChevronBottom, 156 | cilChevronLeft, 157 | cilChevronRight, 158 | cilChevronTop, 159 | cilCircle, 160 | cilCheckCircle, 161 | cilCode, 162 | cilCommentSquare, 163 | cilCreditCard, 164 | cilCursor, 165 | cilCursorMove, 166 | cilDrop, 167 | cilDollar, 168 | cilEnvelopeClosed, 169 | cilEnvelopeLetter, 170 | cilEnvelopeOpen, 171 | cilEuro, 172 | cilGlobeAlt, 173 | cilGrid, 174 | cilFile, 175 | cilFullscreen, 176 | cilFullscreenExit, 177 | cilGraph, 178 | cilHome, 179 | cilInbox, 180 | cilIndentDecrease, 181 | cilIndentIncrease, 182 | cilInputPower, 183 | cilItalic, 184 | cilJustifyCenter, 185 | cilJustifyLeft, 186 | cilLaptop, 187 | cilLayers, 188 | cilLightbulb, 189 | cilList, 190 | cilListNumbered, 191 | cilListRich, 192 | cilLocationPin, 193 | cilLockLocked, 194 | cilMagnifyingGlass, 195 | cilMap, 196 | cilMoon, 197 | cilNotes, 198 | cilOptions, 199 | cilPaperclip, 200 | cilPaperPlane, 201 | cilPencil, 202 | cilPeople, 203 | cilPhone, 204 | cilPrint, 205 | cilPuzzle, 206 | cilSave, 207 | cilScrubber, 208 | cilSettings, 209 | cilShare, 210 | cilShareAll, 211 | cilShareBoxed, 212 | cilShieldAlt, 213 | cilSpeech, 214 | cilSpeedometer, 215 | cilSpreadsheet, 216 | cilStar, 217 | cilSun, 218 | cilTags, 219 | cilTask, 220 | cilTrash, 221 | cilUnderline, 222 | cilUser, 223 | cilUserFemale, 224 | cilUserFollow, 225 | cilUserUnfollow, 226 | cilX, 227 | cilXCircle, 228 | cilWarning 229 | }, { 230 | cifUs, 231 | cifBr, 232 | cifIn, 233 | cifFr, 234 | cifEs, 235 | cifPl 236 | }, { 237 | cibSkype, 238 | cibFacebook, 239 | cibTwitter, 240 | cibLinkedin, 241 | cibFlickr, 242 | cibTumblr, 243 | cibXing, 244 | cibGithub, 245 | cibStackoverflow, 246 | cibYoutube, 247 | cibDribbble, 248 | cibInstagram, 249 | cibPinterest, 250 | cibVk, 251 | cibYahoo, 252 | cibBehance, 253 | cibReddit, 254 | cibVimeo, 255 | cibCcMastercard, 256 | cibCcVisa, 257 | cibStripe, 258 | cibPaypal, 259 | cibGooglePay, 260 | cibCcAmex 261 | }) 262 | -------------------------------------------------------------------------------- /src/assets/icons/logo-negative.js: -------------------------------------------------------------------------------- 1 | export const logoNegative = ['608 134', ` 2 | coreui react pro logo 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | `] 31 | -------------------------------------------------------------------------------- /src/assets/icons/logo.js: -------------------------------------------------------------------------------- 1 | export const logo = ['608 134', ` 2 | coreui react pro 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | `] 30 | -------------------------------------------------------------------------------- /src/assets/icons/sygnet.js: -------------------------------------------------------------------------------- 1 | export const sygnet = ['160 160', ` 2 | coreui logo 3 | 4 | 5 | 6 | 7 | 8 | 9 | `] 10 | -------------------------------------------------------------------------------- /src/containers/TheContent.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense } from 'react' 2 | import { 3 | Redirect, 4 | Route, 5 | Switch 6 | } from 'react-router-dom' 7 | import { CContainer, CFade } from '@coreui/react' 8 | 9 | // routes config 10 | import routes from '../routes' 11 | 12 | const loading = ( 13 |
14 |
15 |
16 | ) 17 | 18 | const TheContent = () => { 19 | return ( 20 |
21 | 22 | 23 | 24 | {routes.map((route, idx) => { 25 | return route.component && ( 26 | ( 32 | 33 | 34 | 35 | )} /> 36 | ) 37 | })} 38 | 39 | 40 | 41 | 42 |
43 | ) 44 | } 45 | 46 | export default React.memo(TheContent) 47 | -------------------------------------------------------------------------------- /src/containers/TheFooter.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CFooter } from '@coreui/react' 3 | 4 | const TheFooter = () => { 5 | return ( 6 | 7 |
8 | CoreUI 9 | © 2020 creativeLabs. 10 |
11 |
12 | Powered by 13 | CoreUI for React 14 |
15 | 16 | ) 17 | } 18 | 19 | export default React.memo(TheFooter) 20 | -------------------------------------------------------------------------------- /src/containers/TheHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useSelector, useDispatch } from 'react-redux' 3 | import { 4 | CHeader, 5 | CToggler, 6 | CHeaderBrand, 7 | CHeaderNav, 8 | CHeaderNavItem, 9 | CHeaderNavLink, 10 | CSubheader, 11 | CBreadcrumbRouter, 12 | CLink 13 | } from '@coreui/react' 14 | import CIcon from '@coreui/icons-react' 15 | 16 | // routes config 17 | import routes from '../routes' 18 | 19 | import { 20 | TheHeaderDropdown, 21 | TheHeaderDropdownMssg, 22 | TheHeaderDropdownNotif, 23 | TheHeaderDropdownTasks 24 | } from './index' 25 | 26 | const TheHeader = () => { 27 | const dispatch = useDispatch() 28 | const sidebarShow = useSelector(state => state.sidebarShow) 29 | 30 | const toggleSidebar = () => { 31 | const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive' 32 | dispatch({type: 'set', sidebarShow: val}) 33 | } 34 | 35 | const toggleSidebarMobile = () => { 36 | const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive' 37 | dispatch({type: 'set', sidebarShow: val}) 38 | } 39 | 40 | return ( 41 | 42 | 47 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | Dashboard 59 | 60 | 61 | Users 62 | 63 | 64 | Settings 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 80 |
81 | 82 | 83 | 84 | 89 |  Dashboard 90 | 91 | 92 |  Settings 93 | 94 |
95 | 96 | 97 | ) 98 | } 99 | 100 | export default TheHeader 101 | -------------------------------------------------------------------------------- /src/containers/TheHeaderDropdown.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CBadge, 4 | CDropdown, 5 | CDropdownItem, 6 | CDropdownMenu, 7 | CDropdownToggle, 8 | CImg 9 | } from '@coreui/react' 10 | import CIcon from '@coreui/icons-react' 11 | 12 | const TheHeaderDropdown = () => { 13 | return ( 14 | 19 | 20 |
21 | 26 |
27 | 28 | 29 | 35 | Account 36 | 37 | 38 | 39 | Updates 40 | 42 41 | 42 | 43 | 44 | Messages 45 | 42 46 | 47 | 48 | 49 | Tasks 50 | 42 51 | 52 | 53 | 54 | Comments 55 | 42 56 | 57 | 63 | Settings 64 | 65 | 66 | Profile 67 | 68 | 69 | 70 | Settings 71 | 72 | 73 | 74 | Payments 75 | 42 76 | 77 | 78 | 79 | Projects 80 | 42 81 | 82 | 83 | 84 | 85 | Lock Account 86 | 87 | 88 | 89 | ) 90 | } 91 | 92 | export default TheHeaderDropdown 93 | -------------------------------------------------------------------------------- /src/containers/TheHeaderDropdownMssg.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CBadge, 4 | CDropdown, 5 | CDropdownItem, 6 | CDropdownMenu, 7 | CDropdownToggle, 8 | CImg 9 | } from '@coreui/react' 10 | import CIcon from '@coreui/icons-react' 11 | 12 | const TheHeaderDropdownMssg = () => { 13 | const itemsCount = 4 14 | return ( 15 | 20 | 21 | {itemsCount} 22 | 23 | 24 | 29 | You have {itemsCount} messages 30 | 31 | 32 |
33 |
34 |
35 | 40 | 41 |
42 |
43 |
44 | John Doe 45 | Just now 46 |
47 |
48 | Important message 49 |
50 |
51 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... 52 |
53 |
54 | 55 | 56 | 57 |
58 |
59 |
60 | 65 | 66 |
67 |
68 |
69 | Jane Dovve 70 | 5 minutes ago 71 |
72 |
Lorem ipsum dolor sit amet
73 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... 74 |
75 |
76 | 77 | 78 | 79 |
80 |
81 |
82 | 87 | 88 |
89 |
90 |
91 | Janet Doe 92 | 1:52 PM 93 |
94 |
Lorem ipsum dolor sit amet
95 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... 96 |
97 |
98 | 99 | 100 | 101 |
102 |
103 |
104 | 109 | 110 |
111 |
112 |
113 | Joe Doe 114 | 4:03 AM 115 |
116 |
Lorem ipsum dolor sit amet
117 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt... 118 |
119 |
120 | 121 | View all messages 122 | 123 | 124 | ) 125 | } 126 | 127 | export default TheHeaderDropdownMssg -------------------------------------------------------------------------------- /src/containers/TheHeaderDropdownNotif.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CBadge, 4 | CDropdown, 5 | CDropdownItem, 6 | CDropdownMenu, 7 | CDropdownToggle, 8 | CProgress 9 | } from '@coreui/react' 10 | import CIcon from '@coreui/icons-react' 11 | 12 | const TheHeaderDropdownNotif = () => { 13 | const itemsCount = 5 14 | return ( 15 | 19 | 20 | 21 | {itemsCount} 22 | 23 | 24 | 30 | You have {itemsCount} notifications 31 | 32 | New user registered 33 | User deleted 34 | Sales report is ready 35 | New client 36 | Server overloaded 37 | 42 | Server 43 | 44 | 45 |
46 | CPU Usage 47 |
48 | 49 | 348 Processes. 1/4 Cores. 50 | 51 | 52 |
53 | Memory Usage 54 |
55 | 56 | 11444GB/16384MB 57 | 58 | 59 |
60 | SSD 1 Usage 61 |
62 | 63 | 243GB/256GB 64 | 65 | 66 | 67 | ) 68 | } 69 | 70 | export default TheHeaderDropdownNotif -------------------------------------------------------------------------------- /src/containers/TheHeaderDropdownTasks.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CBadge, 4 | CDropdown, 5 | CDropdownItem, 6 | CDropdownMenu, 7 | CDropdownToggle, 8 | CProgress 9 | } from '@coreui/react' 10 | import CIcon from '@coreui/icons-react' 11 | 12 | const TheHeaderDropdownTasks = () => { 13 | const itemsCount = 5 14 | return ( 15 | 19 | 20 | 21 | {itemsCount} 22 | 23 | 24 | 30 | You have {itemsCount} pending tasks 31 | 32 | 33 |
Upgrade NPM & Bower 0%
35 | 36 | 37 | 38 |
ReactJS Version 25%
39 | 40 | 41 | 42 |
VueJS Version 50%
43 | 44 | 45 | 46 |
Add new layouts 75%
47 | 48 | 49 | 50 |
Angular 2 Cli Version 100%
51 | 52 | 53 | View all tasks 54 | 55 | 56 | ) 57 | } 58 | 59 | export default TheHeaderDropdownTasks -------------------------------------------------------------------------------- /src/containers/TheLayout.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | TheContent, 4 | TheSidebar, 5 | TheFooter, 6 | TheHeader 7 | } from './index' 8 | 9 | const TheLayout = () => { 10 | 11 | return ( 12 |
13 | 14 |
15 | 16 |
17 | 18 |
19 | 20 |
21 |
22 | ) 23 | } 24 | 25 | export default TheLayout 26 | -------------------------------------------------------------------------------- /src/containers/TheSidebar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useSelector, useDispatch } from 'react-redux' 3 | import { 4 | CCreateElement, 5 | CSidebar, 6 | CSidebarBrand, 7 | CSidebarNav, 8 | CSidebarNavDivider, 9 | CSidebarNavTitle, 10 | CSidebarMinimizer, 11 | CSidebarNavDropdown, 12 | CSidebarNavItem, 13 | } from '@coreui/react' 14 | 15 | import CIcon from '@coreui/icons-react' 16 | 17 | // sidebar nav config 18 | import navigation from './_nav' 19 | 20 | const TheSidebar = () => { 21 | const dispatch = useDispatch() 22 | const show = useSelector(state => state.sidebarShow) 23 | 24 | return ( 25 | dispatch({type: 'set', sidebarShow: val })} 28 | > 29 | 30 | 35 | 40 | 41 | 42 | 43 | 52 | 53 | 54 | 55 | ) 56 | } 57 | 58 | export default React.memo(TheSidebar) 59 | -------------------------------------------------------------------------------- /src/containers/_nav.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CIcon from '@coreui/icons-react' 3 | 4 | export default [ 5 | { 6 | _tag: 'CSidebarNavItem', 7 | name: 'Dashboard', 8 | to: '/dashboard', 9 | icon: , 10 | badge: { 11 | color: 'info', 12 | text: 'NEW', 13 | } 14 | }, 15 | { 16 | _tag: 'CSidebarNavTitle', 17 | _children: ['Theme'] 18 | }, 19 | { 20 | _tag: 'CSidebarNavItem', 21 | name: 'Colors', 22 | to: '/theme/colors', 23 | icon: 'cil-drop', 24 | }, 25 | { 26 | _tag: 'CSidebarNavItem', 27 | name: 'Typography', 28 | to: '/theme/typography', 29 | icon: 'cil-pencil', 30 | }, 31 | { 32 | _tag: 'CSidebarNavTitle', 33 | _children: ['Components'] 34 | }, 35 | { 36 | _tag: 'CSidebarNavDropdown', 37 | name: 'Base', 38 | route: '/base', 39 | icon: 'cil-puzzle', 40 | _children: [ 41 | { 42 | _tag: 'CSidebarNavItem', 43 | name: 'Breadcrumb', 44 | to: '/base/breadcrumbs', 45 | }, 46 | { 47 | _tag: 'CSidebarNavItem', 48 | name: 'Cards', 49 | to: '/base/cards', 50 | }, 51 | { 52 | _tag: 'CSidebarNavItem', 53 | name: 'Carousel', 54 | to: '/base/carousels', 55 | }, 56 | { 57 | _tag: 'CSidebarNavItem', 58 | name: 'Collapse', 59 | to: '/base/collapses', 60 | }, 61 | { 62 | _tag: 'CSidebarNavItem', 63 | name: 'Forms', 64 | to: '/base/forms', 65 | }, 66 | { 67 | _tag: 'CSidebarNavItem', 68 | name: 'Jumbotron', 69 | to: '/base/jumbotrons', 70 | }, 71 | { 72 | _tag: 'CSidebarNavItem', 73 | name: 'List group', 74 | to: '/base/list-groups', 75 | }, 76 | { 77 | _tag: 'CSidebarNavItem', 78 | name: 'Navs', 79 | to: '/base/navs', 80 | }, 81 | { 82 | _tag: 'CSidebarNavItem', 83 | name: 'Navbars', 84 | to: '/base/navbars', 85 | }, 86 | { 87 | _tag: 'CSidebarNavItem', 88 | name: 'Pagination', 89 | to: '/base/paginations', 90 | }, 91 | { 92 | _tag: 'CSidebarNavItem', 93 | name: 'Popovers', 94 | to: '/base/popovers', 95 | }, 96 | { 97 | _tag: 'CSidebarNavItem', 98 | name: 'Progress', 99 | to: '/base/progress-bar', 100 | }, 101 | { 102 | _tag: 'CSidebarNavItem', 103 | name: 'Switches', 104 | to: '/base/switches', 105 | }, 106 | { 107 | _tag: 'CSidebarNavItem', 108 | name: 'Tables', 109 | to: '/base/tables', 110 | }, 111 | { 112 | _tag: 'CSidebarNavItem', 113 | name: 'Tabs', 114 | to: '/base/tabs', 115 | }, 116 | { 117 | _tag: 'CSidebarNavItem', 118 | name: 'Tooltips', 119 | to: '/base/tooltips', 120 | }, 121 | ], 122 | }, 123 | { 124 | _tag: 'CSidebarNavDropdown', 125 | name: 'Buttons', 126 | route: '/buttons', 127 | icon: 'cil-cursor', 128 | _children: [ 129 | { 130 | _tag: 'CSidebarNavItem', 131 | name: 'Buttons', 132 | to: '/buttons/buttons', 133 | }, 134 | { 135 | _tag: 'CSidebarNavItem', 136 | name: 'Brand buttons', 137 | to: '/buttons/brand-buttons', 138 | }, 139 | { 140 | _tag: 'CSidebarNavItem', 141 | name: 'Buttons groups', 142 | to: '/buttons/button-groups', 143 | }, 144 | { 145 | _tag: 'CSidebarNavItem', 146 | name: 'Dropdowns', 147 | to: '/buttons/button-dropdowns', 148 | } 149 | ], 150 | }, 151 | { 152 | _tag: 'CSidebarNavItem', 153 | name: 'Charts', 154 | to: '/charts', 155 | icon: 'cil-chart-pie' 156 | }, 157 | { 158 | _tag: 'CSidebarNavDropdown', 159 | name: 'Icons', 160 | route: '/icons', 161 | icon: 'cil-star', 162 | _children: [ 163 | { 164 | _tag: 'CSidebarNavItem', 165 | name: 'CoreUI Free', 166 | to: '/icons/coreui-icons', 167 | badge: { 168 | color: 'success', 169 | text: 'NEW', 170 | }, 171 | }, 172 | { 173 | _tag: 'CSidebarNavItem', 174 | name: 'CoreUI Flags', 175 | to: '/icons/flags', 176 | }, 177 | { 178 | _tag: 'CSidebarNavItem', 179 | name: 'CoreUI Brands', 180 | to: '/icons/brands', 181 | }, 182 | ], 183 | }, 184 | { 185 | _tag: 'CSidebarNavDropdown', 186 | name: 'Notifications', 187 | route: '/notifications', 188 | icon: 'cil-bell', 189 | _children: [ 190 | { 191 | _tag: 'CSidebarNavItem', 192 | name: 'Alerts', 193 | to: '/notifications/alerts', 194 | }, 195 | { 196 | _tag: 'CSidebarNavItem', 197 | name: 'Badges', 198 | to: '/notifications/badges', 199 | }, 200 | { 201 | _tag: 'CSidebarNavItem', 202 | name: 'Modal', 203 | to: '/notifications/modals', 204 | }, 205 | { 206 | _tag: 'CSidebarNavItem', 207 | name: 'Toaster', 208 | to: '/notifications/toaster' 209 | } 210 | ] 211 | }, 212 | { 213 | _tag: 'CSidebarNavItem', 214 | name: 'Widgets', 215 | to: '/widgets', 216 | icon: 'cil-calculator', 217 | badge: { 218 | color: 'info', 219 | text: 'NEW', 220 | }, 221 | }, 222 | { 223 | _tag: 'CSidebarNavDivider' 224 | }, 225 | { 226 | _tag: 'CSidebarNavTitle', 227 | _children: ['Extras'], 228 | }, 229 | { 230 | _tag: 'CSidebarNavDropdown', 231 | name: 'Pages', 232 | route: '/pages', 233 | icon: 'cil-star', 234 | _children: [ 235 | { 236 | _tag: 'CSidebarNavItem', 237 | name: 'Login', 238 | to: '/login', 239 | }, 240 | { 241 | _tag: 'CSidebarNavItem', 242 | name: 'Register', 243 | to: '/register', 244 | }, 245 | { 246 | _tag: 'CSidebarNavItem', 247 | name: 'Error 404', 248 | to: '/404', 249 | }, 250 | { 251 | _tag: 'CSidebarNavItem', 252 | name: 'Error 500', 253 | to: '/500', 254 | }, 255 | ], 256 | }, 257 | { 258 | _tag: 'CSidebarNavItem', 259 | name: 'Disabled', 260 | icon: 'cil-ban', 261 | badge: { 262 | color: 'secondary', 263 | text: 'NEW', 264 | }, 265 | addLinkClass: 'c-disabled', 266 | 'disabled': true 267 | }, 268 | { 269 | _tag: 'CSidebarNavDivider', 270 | className: 'm-2' 271 | }, 272 | { 273 | _tag: 'CSidebarNavTitle', 274 | _children: ['Labels'] 275 | }, 276 | { 277 | _tag: 'CSidebarNavItem', 278 | name: 'Label danger', 279 | to: '', 280 | icon: { 281 | name: 'cil-star', 282 | className: 'text-danger' 283 | }, 284 | label: true 285 | }, 286 | { 287 | _tag: 'CSidebarNavItem', 288 | name: 'Label info', 289 | to: '', 290 | icon: { 291 | name: 'cil-star', 292 | className: 'text-info' 293 | }, 294 | label: true 295 | }, 296 | { 297 | _tag: 'CSidebarNavItem', 298 | name: 'Label warning', 299 | to: '', 300 | icon: { 301 | name: 'cil-star', 302 | className: 'text-warning' 303 | }, 304 | label: true 305 | }, 306 | { 307 | _tag: 'CSidebarNavDivider', 308 | className: 'm-2' 309 | } 310 | ] 311 | 312 | -------------------------------------------------------------------------------- /src/containers/index.js: -------------------------------------------------------------------------------- 1 | import TheContent from './TheContent' 2 | import TheFooter from './TheFooter' 3 | import TheHeader from './TheHeader' 4 | import TheHeaderDropdown from './TheHeaderDropdown' 5 | import TheHeaderDropdownMssg from './TheHeaderDropdownMssg' 6 | import TheHeaderDropdownNotif from './TheHeaderDropdownNotif' 7 | import TheHeaderDropdownTasks from './TheHeaderDropdownTasks' 8 | import TheLayout from './TheLayout' 9 | import TheSidebar from './TheSidebar' 10 | 11 | export { 12 | TheContent, 13 | TheFooter, 14 | TheHeader, 15 | TheHeaderDropdown, 16 | TheHeaderDropdownMssg, 17 | TheHeaderDropdownNotif, 18 | TheHeaderDropdownTasks, 19 | TheLayout, 20 | TheSidebar 21 | } 22 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import 'react-app-polyfill/ie11'; // For IE 11 support 2 | import 'react-app-polyfill/stable'; 3 | import './polyfill' 4 | import React from 'react'; 5 | import ReactDOM from 'react-dom'; 6 | import App from './App'; 7 | import * as serviceWorker from './serviceWorker'; 8 | 9 | import { icons } from './assets/icons' 10 | 11 | import { Provider } from 'react-redux' 12 | import store from './store' 13 | 14 | React.icons = icons 15 | 16 | ReactDOM.render( 17 | 18 | 19 | , 20 | document.getElementById('root') 21 | ); 22 | 23 | // If you want your app to work offline and load faster, you can change 24 | // unregister() to register() below. Note this comes with some pitfalls. 25 | // Learn more about service workers: http://bit.ly/CRA-PWA 26 | serviceWorker.unregister(); 27 | -------------------------------------------------------------------------------- /src/polyfill.js: -------------------------------------------------------------------------------- 1 | /* 2 | * required polyfills 3 | */ 4 | import "core-js"; 5 | import 'core-js/features/set/map'; 6 | import 'core-js/features/map'; 7 | 8 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 9 | // import 'core-js/es6/symbol' 10 | // import 'core-js/es6/object' 11 | // import 'core-js/es6/function' 12 | // import 'core-js/es6/parse-int' 13 | // import 'core-js/es6/parse-float' 14 | // import 'core-js/es6/number' 15 | // import 'core-js/es6/math' 16 | // import 'core-js/es6/string' 17 | // import 'core-js/es6/date' 18 | // import 'core-js/es6/array' 19 | // import 'core-js/es6/regexp' 20 | // import 'core-js/es6/map' 21 | // import 'core-js/es6/weak-map' 22 | // import 'core-js/es6/set' 23 | // import 'core-js/es7/object' 24 | 25 | /** IE10 and IE11 requires the following for the Reflect API. */ 26 | // import 'core-js/es6/reflect' 27 | 28 | /** Evergreen browsers require these. **/ 29 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 30 | // import 'core-js/es7/reflect' 31 | 32 | // CustomEvent() constructor functionality in IE9, IE10, IE11 33 | (function () { 34 | 35 | if ( typeof window.CustomEvent === "function" ) return false 36 | 37 | function CustomEvent ( event, params ) { 38 | params = params || { bubbles: false, cancelable: false, detail: undefined } 39 | var evt = document.createEvent( 'CustomEvent' ) 40 | evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ) 41 | return evt 42 | } 43 | 44 | CustomEvent.prototype = window.Event.prototype 45 | 46 | window.CustomEvent = CustomEvent 47 | })() 48 | -------------------------------------------------------------------------------- /src/reusable/DocsLink.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CLink } from '@coreui/react' 3 | 4 | const DocsLink = props => { 5 | const { 6 | name, 7 | text, 8 | ...rest 9 | } = props 10 | 11 | const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href 12 | 13 | return ( 14 |
15 | 22 | { text || 'docs' } 23 | 24 |
25 | ) 26 | } 27 | 28 | export default React.memo(DocsLink) -------------------------------------------------------------------------------- /src/reusable/index.js: -------------------------------------------------------------------------------- 1 | import DocsLink from './DocsLink' 2 | 3 | export { 4 | DocsLink 5 | } -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Toaster = React.lazy(() => import('./views/notifications/toaster/Toaster')); 4 | const Tables = React.lazy(() => import('./views/base/tables/Tables')); 5 | 6 | const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs')); 7 | const Cards = React.lazy(() => import('./views/base/cards/Cards')); 8 | const Carousels = React.lazy(() => import('./views/base/carousels/Carousels')); 9 | const Collapses = React.lazy(() => import('./views/base/collapses/Collapses')); 10 | const BasicForms = React.lazy(() => import('./views/base/forms/BasicForms')); 11 | 12 | const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons')); 13 | const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups')); 14 | const Navbars = React.lazy(() => import('./views/base/navbars/Navbars')); 15 | const Navs = React.lazy(() => import('./views/base/navs/Navs')); 16 | const Paginations = React.lazy(() => import('./views/base/paginations/Pagnations')); 17 | const Popovers = React.lazy(() => import('./views/base/popovers/Popovers')); 18 | const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressBar')); 19 | const Switches = React.lazy(() => import('./views/base/switches/Switches')); 20 | 21 | const Tabs = React.lazy(() => import('./views/base/tabs/Tabs')); 22 | const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips')); 23 | const BrandButtons = React.lazy(() => import('./views/buttons/brand-buttons/BrandButtons')); 24 | const ButtonDropdowns = React.lazy(() => import('./views/buttons/button-dropdowns/ButtonDropdowns')); 25 | const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups')); 26 | const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons')); 27 | const Charts = React.lazy(() => import('./views/charts/Charts')); 28 | const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard')); 29 | const CoreUIIcons = React.lazy(() => import('./views/icons/coreui-icons/CoreUIIcons')); 30 | const Flags = React.lazy(() => import('./views/icons/flags/Flags')); 31 | const Brands = React.lazy(() => import('./views/icons/brands/Brands')); 32 | const Alerts = React.lazy(() => import('./views/notifications/alerts/Alerts')); 33 | const Badges = React.lazy(() => import('./views/notifications/badges/Badges')); 34 | const Modals = React.lazy(() => import('./views/notifications/modals/Modals')); 35 | const Colors = React.lazy(() => import('./views/theme/colors/Colors')); 36 | const Typography = React.lazy(() => import('./views/theme/typography/Typography')); 37 | const Widgets = React.lazy(() => import('./views/widgets/Widgets')); 38 | const Users = React.lazy(() => import('./views/users/Users')); 39 | const User = React.lazy(() => import('./views/users/User')); 40 | 41 | const routes = [ 42 | { path: '/', exact: true, name: 'Home' }, 43 | { path: '/dashboard', name: 'Dashboard', component: Dashboard }, 44 | { path: '/theme', name: 'Theme', component: Colors, exact: true }, 45 | { path: '/theme/colors', name: 'Colors', component: Colors }, 46 | { path: '/theme/typography', name: 'Typography', component: Typography }, 47 | { path: '/base', name: 'Base', component: Cards, exact: true }, 48 | { path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs }, 49 | { path: '/base/cards', name: 'Cards', component: Cards }, 50 | { path: '/base/carousels', name: 'Carousel', component: Carousels }, 51 | { path: '/base/collapses', name: 'Collapse', component: Collapses }, 52 | { path: '/base/forms', name: 'Forms', component: BasicForms }, 53 | { path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons }, 54 | { path: '/base/list-groups', name: 'List Groups', component: ListGroups }, 55 | { path: '/base/navbars', name: 'Navbars', component: Navbars }, 56 | { path: '/base/navs', name: 'Navs', component: Navs }, 57 | { path: '/base/paginations', name: 'Paginations', component: Paginations }, 58 | { path: '/base/popovers', name: 'Popovers', component: Popovers }, 59 | { path: '/base/progress-bar', name: 'Progress Bar', component: ProgressBar }, 60 | { path: '/base/switches', name: 'Switches', component: Switches }, 61 | { path: '/base/tables', name: 'Tables', component: Tables }, 62 | { path: '/base/tabs', name: 'Tabs', component: Tabs }, 63 | { path: '/base/tooltips', name: 'Tooltips', component: Tooltips }, 64 | { path: '/buttons', name: 'Buttons', component: Buttons, exact: true }, 65 | { path: '/buttons/buttons', name: 'Buttons', component: Buttons }, 66 | { path: '/buttons/button-dropdowns', name: 'Dropdowns', component: ButtonDropdowns }, 67 | { path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups }, 68 | { path: '/buttons/brand-buttons', name: 'Brand Buttons', component: BrandButtons }, 69 | { path: '/charts', name: 'Charts', component: Charts }, 70 | { path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons }, 71 | { path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons }, 72 | { path: '/icons/flags', name: 'Flags', component: Flags }, 73 | { path: '/icons/brands', name: 'Brands', component: Brands }, 74 | { path: '/notifications', name: 'Notifications', component: Alerts, exact: true }, 75 | { path: '/notifications/alerts', name: 'Alerts', component: Alerts }, 76 | { path: '/notifications/badges', name: 'Badges', component: Badges }, 77 | { path: '/notifications/modals', name: 'Modals', component: Modals }, 78 | { path: '/notifications/toaster', name: 'Toaster', component: Toaster }, 79 | { path: '/widgets', name: 'Widgets', component: Widgets }, 80 | { path: '/users', exact: true, name: 'Users', component: Users }, 81 | { path: '/users/:id', exact: true, name: 'User Details', component: User } 82 | ]; 83 | 84 | export default routes; 85 | -------------------------------------------------------------------------------- /src/scss/_custom.scss: -------------------------------------------------------------------------------- 1 | // Here you can add other styles 2 | -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // Variable overrides 2 | -------------------------------------------------------------------------------- /src/scss/style.scss: -------------------------------------------------------------------------------- 1 | // If you want to override variables do it here 2 | @import "variables"; 3 | 4 | // Import CoreUI styles 5 | @import "~@coreui/coreui/scss/coreui.scss"; 6 | 7 | // If you want to add something do it here 8 | @import "custom"; 9 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export function register(config) { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Let's check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl, config); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl, config); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl, config) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | 70 | // Execute callback 71 | if (config.onUpdate) { 72 | config.onUpdate(registration); 73 | } 74 | } else { 75 | // At this point, everything has been precached. 76 | // It's the perfect time to display a 77 | // "Content is cached for offline use." message. 78 | console.log('Content is cached for offline use.'); 79 | 80 | // Execute callback 81 | if (config.onSuccess) { 82 | config.onSuccess(registration); 83 | } 84 | } 85 | } 86 | }; 87 | }; 88 | }) 89 | .catch(error => { 90 | console.error('Error during service worker registration:', error); 91 | }); 92 | } 93 | 94 | function checkValidServiceWorker(swUrl, config) { 95 | // Check if the service worker can be found. If it can't reload the page. 96 | fetch(swUrl) 97 | .then(response => { 98 | // Ensure service worker exists, and that we really are getting a JS file. 99 | if ( 100 | response.status === 404 || 101 | response.headers.get('content-type').indexOf('javascript') === -1 102 | ) { 103 | // No service worker found. Probably a different app. Reload the page. 104 | navigator.serviceWorker.ready.then(registration => { 105 | registration.unregister().then(() => { 106 | window.location.reload(); 107 | }); 108 | }); 109 | } else { 110 | // Service worker found. Proceed as normal. 111 | registerValidSW(swUrl, config); 112 | } 113 | }) 114 | .catch(() => { 115 | console.log( 116 | 'No internet connection found. App is running in offline mode.' 117 | ); 118 | }); 119 | } 120 | 121 | export function unregister() { 122 | if ('serviceWorker' in navigator) { 123 | navigator.serviceWorker.ready.then(registration => { 124 | registration.unregister(); 125 | }); 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | import { configure } from 'enzyme'; 2 | import Adapter from 'enzyme-adapter-react-16'; 3 | 4 | configure({ adapter: new Adapter() }); 5 | 6 | if (global.document) { 7 | document.createRange = () => ( { 8 | setStart: () => {}, 9 | setEnd: () => {}, 10 | commonAncestorContainer: { 11 | nodeName: 'BODY', 12 | ownerDocument: document, 13 | }, 14 | }); 15 | } 16 | -------------------------------------------------------------------------------- /src/store.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux' 2 | 3 | const initialState = { 4 | sidebarShow: 'responsive' 5 | } 6 | 7 | const changeState = (state = initialState, { type, ...rest }) => { 8 | switch (type) { 9 | case 'set': 10 | return {...state, ...rest } 11 | default: 12 | return state 13 | } 14 | } 15 | 16 | const store = createStore(changeState) 17 | export default store -------------------------------------------------------------------------------- /src/views/base/breadcrumbs/Breadcrumbs.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CBreadcrumb, 4 | CBreadcrumbItem, 5 | CBreadcrumbRouter, 6 | CCard, 7 | CCardBody, 8 | CCardHeader, 9 | CLink, 10 | CCol, 11 | CRow 12 | } from '@coreui/react' 13 | import { DocsLink } from 'src/reusable' 14 | import routes from '../../../routes' 15 | 16 | const Breadcrumbs = () => { 17 | return ( 18 | 19 | 20 | 21 | 22 | Bootstrap Breadcrumb 23 | 24 | 25 | 26 |
CBreadcrumbRouter wrapper component
27 | 28 |
Manual
29 | 30 | 31 | Home 32 | 33 | Library 34 | 35 | 36 | 37 | Home 38 | 39 | 40 | Library 41 | 42 | Data 43 | 44 | 45 | 46 | Home 47 | 48 | 49 | Library 50 | 51 | 52 | Data 53 | 54 | 55 | Bootstrap 56 | 57 | 58 | 59 | 60 | 61 | 62 | ) 63 | } 64 | 65 | export default Breadcrumbs 66 | -------------------------------------------------------------------------------- /src/views/base/carousels/Carousels.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { 3 | CCard, 4 | CCardBody, 5 | CCardHeader, 6 | CCarousel, 7 | CCarouselCaption, 8 | CCarouselControl, 9 | CCarouselIndicators, 10 | CCarouselInner, 11 | CCarouselItem, 12 | CCol, 13 | CRow 14 | } from '@coreui/react' 15 | import { DocsLink } from 'src/reusable' 16 | 17 | const slides = [ 18 | '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', 19 | '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', 20 | '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', 21 | ] 22 | 23 | const Carousels = () => { 24 | const [activeIndex] = useState(1) 25 | 26 | return ( 27 | 28 | 29 | 30 | 31 | Carousel with controls 32 | 33 | 34 | 35 | 36 | 37 | 38 | slide 1 39 | 40 | 41 | slide 2 42 | 43 | 44 | slide 3 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | Carousel with controls, indicators and caption 57 | 58 | 59 | 60 | 61 | 62 | 63 | slide 1 64 |

Slide 1

Slide 1

 65 | 66 | 67 | slide 2 68 |

Slide 2

Slide 2

 69 | 70 | 71 | slide 3 72 |

Slide 3

Slide 3

 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | Carousel animation 85 | 86 | 87 | 88 | 89 | 90 | 91 | slide 1 92 |

Slide 1

Slide 1

 93 | 94 | 95 | slide 2 96 |

Slide 2

Slide 2

 97 | 98 | 99 | slide 3 100 |

Slide 3

Slide 3

 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | Carousel animation with autoSlide 113 | 114 | 115 | 116 | 117 | 118 | 119 | slide 1 120 |

Slide 1

Slide 1

 121 | 122 | 123 | slide 2 124 |

Slide 2

Slide 2

 125 | 126 | 127 | slide 3 128 |

Slide 3

Slide 3

 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | ) 139 | } 140 | 141 | export default Carousels 142 | -------------------------------------------------------------------------------- /src/views/base/index.js: -------------------------------------------------------------------------------- 1 | import Breadcrumbs from './Breadcrumbs'; 2 | import Cards from './Cards'; 3 | import Carousels from './Carousels'; 4 | import Collapses from './Collapses'; 5 | import Dropdowns from './Dropdowns'; 6 | import Jumbotrons from './Jumbotrons'; 7 | import ListGroups from './ListGroups'; 8 | import Navbars from './Navbars'; 9 | import Navs from './Navs'; 10 | import Paginations from './Paginations'; 11 | import Popovers from './Popovers'; 12 | import ProgressBar from './ProgressBar'; 13 | import Switches from './Switches'; 14 | import Tabs from './Tabs'; 15 | import Tooltips from './Tooltips'; 16 | 17 | export { 18 | Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Switches, Tabs, Tooltips, Paginations, 19 | }; 20 | 21 | -------------------------------------------------------------------------------- /src/views/base/jumbotrons/Jumbotrons.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CButton, 4 | CCard, 5 | CCardBody, 6 | CCardHeader, 7 | CCol, 8 | CContainer, 9 | CJumbotron, 10 | CRow, 11 | CEmbed, 12 | CEmbedItem 13 | } from '@coreui/react' 14 | import { DocsLink } from 'src/reusable' 15 | 16 | const Jumbotrons = () => { 17 | 18 | return ( 19 | <> 20 | 21 | 22 | 23 | 24 | Jumbotron 25 | 26 | 27 | 28 | 29 |

Hello, world!

30 |

This is a simple hero unit, a simple Jumbotron - style component for calling extra 31 | attention to featured content or information.

32 |
33 |

It uses utility classes for typgraphy and spacing to space content out within the larger container.

34 |

35 | Learn More 36 |

37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | Jumbotron 45 | fluid 46 | 47 | 48 | 49 | 50 |

Fluid jumbotron

51 |

This is a modified jumbotron that occupies the entire horizontal space of its parent.

52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | Embed 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | ) 74 | } 75 | 76 | export default Jumbotrons 77 | -------------------------------------------------------------------------------- /src/views/base/navbars/Navbars.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { 3 | CCard, 4 | CCardBody, 5 | CCardHeader, 6 | CCollapse, 7 | CDropdownItem, 8 | CDropdownMenu, 9 | CDropdownToggle, 10 | CNavbar, 11 | CNavbarNav, 12 | CNavbarBrand, 13 | CNavbarText, 14 | CToggler, 15 | CNavLink, 16 | CDropdown, 17 | CForm, 18 | CInput, 19 | CButton, 20 | CImg 21 | } from '@coreui/react' 22 | import { DocsLink } from 'src/reusable' 23 | 24 | const CNavbars = () => { 25 | const [isOpen, setIsOpen] = useState(false) 26 | const [isOpenDropdown, setIsOpenDropdown] = useState(false) 27 | const [navbarText, setNavbarText] = useState(false) 28 | 29 | return ( 30 | <> 31 | 32 | 33 | 34 | CNavbar 35 | 36 | 37 | 38 | 39 | setIsOpen(!isOpen)}/> 40 | 41 | NavbarBrand 42 | 43 | 44 | 45 | Home 46 | Link 47 | 48 | 49 | 50 | 55 | Search 56 | 57 | 60 | 61 | Lang 62 | 63 | 64 | EN 65 | ES 66 | RU 67 | FA 68 | 69 | 70 | 73 | 74 | User 75 | 76 | 77 | Account 78 | Settings 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | CNavbar brand 90 | 91 | 92 | 93 | 94 | 99 | CoreUI React 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | CNavbar text 108 | 109 | 110 | 111 | { setNavbarText(!navbarText)}} 114 | /> 115 | NavbarBrand 116 | 117 | 118 | Navbar text 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | CNavbar dropdown 128 | 129 | 130 | 131 | {setIsOpenDropdown(!isOpenDropdown)}} /> 132 | 133 | 134 | Home 135 | Link 136 | 139 | 140 | Lang 141 | 142 | 143 | EN 144 | ES 145 | RU 146 | FA 147 | 148 | 149 | 152 | 153 | User 154 | 155 | 156 | Account 157 | Settings 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | CNavbar form 169 | 170 | 171 | 172 | 173 | 178 | Search 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | CNavbar input group 187 | 188 | 189 | 190 | 191 | 195 | 196 | 197 | 198 | 199 | 200 | ) 201 | } 202 | 203 | export default CNavbars 204 | -------------------------------------------------------------------------------- /src/views/base/paginations/Pagnations.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { 3 | CCard, 4 | CCardBody, 5 | CCardHeader, 6 | CPagination 7 | } from '@coreui/react' 8 | import { DocsLink } from 'src/reusable' 9 | 10 | 11 | const Paginations = () => { 12 | const [currentPage, setCurrentPage] = useState(2) 13 | 14 | return ( 15 | <> 16 | 17 | 18 | Pagination 19 | 20 | 21 | 22 |
Default
23 | 28 |

29 | 30 |
Small
31 | 37 |

38 | 39 |
40 |
Large
41 | 47 |

48 |
49 | 50 |
currentPage: {currentPage}
51 | 52 | 53 | 54 | 55 | Pagination 56 | alignment 57 | 58 | 59 |
Left alignment (default)
60 | 65 |

66 | 67 |
Center alignment
68 | 75 |

76 | 77 |
Right (end) alignment
78 | 84 |

85 | 86 |
currentPage: {currentPage}
87 | 88 | 89 | 90 | ) 91 | } 92 | 93 | export default Paginations 94 | -------------------------------------------------------------------------------- /src/views/base/popovers/Popovers.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CButton, 4 | CCard, 5 | CCardBody, 6 | CCardHeader, 7 | CPopover, 8 | CRow, 9 | CCol, 10 | CLink 11 | } from '@coreui/react' 12 | import { DocsLink } from 'src/reusable' 13 | 14 | const Popovers = () => { 15 | const placements = [ 16 | 'top-start', 'top', 'top-end', 17 | 'bottom-start', 'bottom', 'bottom-end', 18 | 'right-start', 'right', 'right-end', 19 | 'left-start', 'left', 'left-end' 20 | ] 21 | 22 | return ( 23 | <> 24 | 25 | 26 | Popovers 27 | 28 | 29 | 30 | {/*eslint-disable-next-line*/} 31 | 32 |

33 | Hover over the links below to see popover: 34 |

35 | 36 |

37 | Tight pants next level keffiyeh 38 | 39 | you probably 40 | 41 | haven't heard of them. 42 | Photo booth beard raw denim letterpress vegan messenger 43 | bag stumptown. Farm-to-table seitan, mcsweeney's fixie 44 | sustainable quinoa 8-bit american apparel 45 | 46 | have a 47 | 48 | terry richardson vinyl chambray. Beard stumptown, 49 | cardigans banh mi lomo thundercats. Tofu biodiesel 50 | williamsburg marfa, four loko mcsweeney''s cleanse 51 | vegan chambray. A really ironic artisan 52 | 53 | whatever keytar 54 | 55 | scenester farm-to-table banksy Austin 56 | 57 | twitter handle 58 | 59 | 60 | freegan cred raw denim single-origin coffee viral. 61 |

62 | 63 | 64 | 65 |
66 | 67 | 68 | 69 | Popovers 70 | placement 71 | 72 | 73 |
74 | 75 | {placements.map(placement => { 76 | return ( 81 | 87 | 88 | { placement } 89 | 90 | 91 | ) 92 | })} 93 | 94 |
95 | 96 | 97 | 98 | ) 99 | } 100 | 101 | export default Popovers 102 | -------------------------------------------------------------------------------- /src/views/base/progress-bar/ProgressBar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CCard, 4 | CCardBody, 5 | CCardHeader, 6 | CProgress, 7 | CProgressBar 8 | } from '@coreui/react' 9 | import { DocsLink } from 'src/reusable' 10 | 11 | const ProgressBar = () => { 12 | return ( 13 | <> 14 | 15 | 16 | Progress 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | Progress 30 | labels 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | Progress 41 | heights 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | Progress 51 | backgrounds 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | Progress 63 | multiple bar 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | Progress 76 | striped 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | Progress 89 | animated 90 | 91 | 92 | 93 | 94 | 95 | 96 | ) 97 | } 98 | 99 | export default ProgressBar 100 | -------------------------------------------------------------------------------- /src/views/base/tables/Tables.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CBadge, 4 | CCard, 5 | CCardBody, 6 | CCardHeader, 7 | CCol, 8 | CDataTable, 9 | CRow 10 | } from '@coreui/react' 11 | import { DocsLink } from 'src/reusable' 12 | 13 | import usersData from '../../users/UsersData' 14 | 15 | const getBadge = status => { 16 | switch (status) { 17 | case 'Active': return 'success' 18 | case 'Inactive': return 'secondary' 19 | case 'Pending': return 'warning' 20 | case 'Banned': return 'danger' 21 | default: return 'primary' 22 | } 23 | } 24 | const fields = ['name','registered', 'role', 'status'] 25 | 26 | const Tables = () => { 27 | return ( 28 | <> 29 | 30 | 31 | 32 | 33 | Simple Table 34 | 35 | 36 | 37 | ( 45 | 46 | 47 | {item.status} 48 | 49 | 50 | ) 51 | 52 | }} 53 | /> 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | Striped Table 62 | 63 | 64 | ( 73 | 74 | 75 | {item.status} 76 | 77 | 78 | ) 79 | 80 | }} 81 | /> 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | Condensed Table 93 | 94 | 95 | ( 104 | 105 | 106 | {item.status} 107 | 108 | 109 | ) 110 | 111 | }} 112 | /> 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | Bordered Table 121 | 122 | 123 | ( 132 | 133 | 134 | {item.status} 135 | 136 | 137 | ) 138 | 139 | }} 140 | /> 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | Combined All Table 152 | 153 | 154 | ( 166 | 167 | 168 | {item.status} 169 | 170 | 171 | ) 172 | }} 173 | /> 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | Combined All dark Table 183 | 184 | 185 | ( 198 | 199 | 200 | {item.status} 201 | 202 | 203 | ) 204 | }} 205 | /> 206 | 207 | 208 | 209 | 210 | 211 | ) 212 | } 213 | 214 | export default Tables 215 | -------------------------------------------------------------------------------- /src/views/base/tabs/Tabs.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { 3 | CCol, 4 | CNav, 5 | CNavItem, 6 | CNavLink, 7 | CRow, 8 | CTabContent, 9 | CTabPane, 10 | CCard, 11 | CCardBody, 12 | CTabs, 13 | CCardHeader 14 | } from '@coreui/react' 15 | import CIcon from '@coreui/icons-react' 16 | import { DocsLink } from 'src/reusable' 17 | 18 | const Tabs = () => { 19 | const [active, setActive] = useState(1) 20 | 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.' 21 | 22 | return ( 23 | 24 | 25 | 26 | 27 | Index indentifiers 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | Home 36 | 37 | 38 | 39 | 40 | Profile 41 | 42 | 43 | 44 | 45 | Messages 46 | 47 | 48 | 49 | 50 | 51 | {`1. ${lorem}`} 52 | 53 | 54 | {`2. ${lorem}`} 55 | 56 | 57 | {`3. ${lorem}`} 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | Id indentifiers 68 | 69 | 70 | 71 | 72 | 73 | 74 | Home 75 | 76 | 77 | 78 | 79 | Profile 80 | 81 | 82 | 83 | 84 | Messages 85 | 86 | 87 | 88 | 89 | 90 | {`1. ${lorem}`} 91 | 92 | 93 | {`2. ${lorem}`} 94 | 95 | 96 | {`3. ${lorem}`} 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | No fade animation tabs 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | {`1. ${lorem}`} 131 | 132 | 133 | {`2. ${lorem}`} 134 | 135 | 136 | {`3. ${lorem}`} 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | Controlled tabs 148 | 149 | 150 | setActive(idx)}> 151 | 152 | 153 | 154 | 155 | { active === 0 && ' Home'} 156 | 157 | 158 | 159 | 160 | 161 | { active === 1 && ' Profile'} 162 | 163 | 164 | 165 | 166 | 167 | { active === 2 && ' Messages'} 168 | 169 | 170 | 171 | 172 | 173 | {`1. ${lorem}`} 174 | 175 | 176 | {`2. ${lorem}`} 177 | 178 | 179 | {`3. ${lorem}`} 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | ) 188 | } 189 | 190 | export default Tabs 191 | -------------------------------------------------------------------------------- /src/views/base/tooltips/Tooltips.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CButton, 4 | CCard, 5 | CCardBody, 6 | CCardHeader, 7 | CTooltip, 8 | CRow, 9 | CCol, 10 | CLink 11 | } from '@coreui/react' 12 | import { DocsLink } from 'src/reusable' 13 | 14 | const Tooltips = () => { 15 | const placements = [ 16 | 'top-start', 'top', 'top-end', 17 | 'bottom-start', 'bottom', 'bottom-end', 18 | 'right-start', 'right', 'right-end', 19 | 'left-start', 'left', 'left-end' 20 | ] 21 | 22 | return ( 23 | <> 24 | 25 | 26 | Tooltips 27 | 28 | 29 | 30 | {/*eslint-disable-next-line*/} 31 | 32 |

33 | Hover over the links below to see tooltips: 34 |

35 | 36 |

37 | Tight pants next level keffiyeh 38 | 39 | you probably 40 | 41 | haven't heard of them. 42 | Photo booth beard raw denim letterpress vegan messenger 43 | bag stumptown. Farm-to-table seitan, mcsweeney's fixie 44 | sustainable quinoa 8-bit american apparel 45 | 46 | have a 47 | 48 | terry richardson vinyl chambray. Beard stumptown, 49 | cardigans banh mi lomo thundercats. Tofu biodiesel 50 | williamsburg marfa, four loko mcsweeney''s cleanse 51 | vegan chambray. A really ironic artisan 52 | 53 | whatever keytar 54 | 55 | scenester farm-to-table banksy Austin 56 | 57 | twitter handle 58 | 59 | 60 | freegan cred raw denim single-origin coffee viral. 61 |

62 | 63 | 64 | 65 |
66 | 67 | 68 | 69 | Tooltips 70 | placement 71 | 72 | 73 |
74 | 75 | {placements.map(placement => { 76 | return ( 81 | 85 | 86 | { placement } 87 | 88 | 89 | ) 90 | })} 91 | 92 |
93 | 94 | 95 | 96 | ) 97 | } 98 | 99 | export default Tooltips; 100 | -------------------------------------------------------------------------------- /src/views/buttons/button-groups/ButtonGroups.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CButton, 4 | CDropdown, 5 | CButtonGroup, 6 | CButtonToolbar, 7 | CCard, 8 | CCardBody, 9 | CCardHeader, 10 | CCol, 11 | CDropdownItem, 12 | CDropdownMenu, 13 | CDropdownToggle, 14 | CInput, 15 | CInputGroup, 16 | CInputGroupPrepend, 17 | CInputGroupText, 18 | CRow, 19 | CCallout 20 | } from '@coreui/react' 21 | import { DocsLink } from 'src/reusable' 22 | 23 | const ButtonGroups = () => { 24 | return ( 25 | 26 | 27 | 28 | 29 | Callout 30 | 31 | 32 | 33 | 34 | Callout 35 | 36 | 37 | 38 | 39 | 40 | 41 | Button Group 42 | 43 | 44 | 45 | 46 | Left 47 | Middle 48 | Right 49 | 50 | 51 | 52 | 53 | 54 | 55 | Button Group 56 | toolbar 57 | 58 | 59 | 60 | 61 | 1 62 | 2 63 | 3 64 | 4 65 | 66 | 67 | 5 68 | 6 69 | 7 70 | 71 | 72 | 8 73 | 74 | 75 | 76 | 77 | 1 78 | 2 79 | 3 80 | 4 81 | 82 | 83 | 84 | @ 85 | 86 | 87 | 88 | 89 | 90 | 91 | 1 92 | 2 93 | 3 94 | 4 95 | 96 | 97 | 98 | @ 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | Button Group 109 | vertical variation 110 | 111 | 112 | 113 | 1 114 | 2 115 | 3 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | Button Group 126 | sizing 127 | 128 | 129 | 130 | Left 131 | Middle 132 | Right 133 | 134 |

135 | 136 | Left 137 | Middle 138 | Right 139 | 140 |

141 | 142 | Left 143 | Middle 144 | Right 145 | 146 | 147 | 148 | 149 | 150 | 151 | Button Group 152 | nestingccc 153 | 154 | 155 | 156 | 1 157 | 2 158 | 159 | 160 | Dropdown 161 | 162 | 163 | Dropdown Link 164 | Dropdown Link 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | Button Group 174 | vertical 175 | 176 | 177 | 178 | 1 179 | 2 180 | 181 | 182 | Dropdown 183 | 184 | 185 | Dropdown Link 186 | Dropdown Link 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | ) 195 | } 196 | 197 | export default ButtonGroups 198 | -------------------------------------------------------------------------------- /src/views/buttons/index.js: -------------------------------------------------------------------------------- 1 | import ButtonDropdowns from './ButtonDropdowns' 2 | import ButtonGroups from './ButtonGroups' 3 | import Buttons from './Buttons' 4 | import BrandButtons from './BrandButtons' 5 | 6 | export { 7 | ButtonDropdowns, ButtonGroups, Buttons, BrandButtons 8 | } 9 | -------------------------------------------------------------------------------- /src/views/charts/ChartBarSimple.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import { getColor } from '@coreui/utils' 4 | import { CChartBar } from '@coreui/react-chartjs' 5 | 6 | const ChartBarSimple = props => { 7 | 8 | const { 9 | backgroundColor, 10 | pointHoverBackgroundColor, 11 | dataPoints, 12 | label, 13 | pointed, 14 | ...attributes 15 | } = props 16 | 17 | const defaultDatasets = (()=>{ 18 | return [ 19 | { 20 | data: dataPoints, 21 | backgroundColor: getColor(backgroundColor), 22 | pointHoverBackgroundColor: getColor(pointHoverBackgroundColor), 23 | label: label, 24 | barPercentage: 0.5, 25 | categoryPercentage: 1 26 | } 27 | ] 28 | })() 29 | 30 | const defaultOptions = (()=>{ 31 | return { 32 | maintainAspectRatio: false, 33 | legend: { 34 | display: false 35 | }, 36 | scales: { 37 | xAxes: [{ 38 | display: false 39 | }], 40 | yAxes: [{ 41 | display: false 42 | }] 43 | } 44 | } 45 | })() 46 | 47 | // render 48 | return ( 49 | 55 | ) 56 | } 57 | 58 | ChartBarSimple.propTypes = { 59 | tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), 60 | className: PropTypes.string, 61 | // 62 | backgroundColor: PropTypes.string, 63 | pointHoverBackgroundColor: PropTypes.string, 64 | dataPoints: PropTypes.array, 65 | label: PropTypes.string, 66 | pointed: PropTypes.bool 67 | }; 68 | 69 | ChartBarSimple.defaultProps = { 70 | backgroundColor: 'rgba(0,0,0,.2)', 71 | dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12], 72 | label: 'Sales' 73 | }; 74 | 75 | export default ChartBarSimple 76 | -------------------------------------------------------------------------------- /src/views/charts/ChartLineSimple.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import { getColor, deepObjectsMerge } from '@coreui/utils' 4 | import { CChartLine } from '@coreui/react-chartjs' 5 | 6 | const ChartLineSimple = props => { 7 | 8 | const { 9 | borderColor, 10 | backgroundColor, 11 | pointHoverBackgroundColor, 12 | dataPoints, 13 | label, 14 | pointed, 15 | ...attributes 16 | } = props 17 | 18 | const pointHoverColor = (()=>{ 19 | if (pointHoverBackgroundColor) { 20 | return pointHoverBackgroundColor 21 | } else if (backgroundColor !== 'transparent') { 22 | return backgroundColor 23 | } 24 | return borderColor 25 | })() 26 | 27 | const defaultDatasets = (()=>{ 28 | return [ 29 | { 30 | data: dataPoints, 31 | borderColor: getColor(borderColor), 32 | backgroundColor: getColor(backgroundColor), 33 | pointBackgroundColor: getColor(pointHoverColor), 34 | pointHoverBackgroundColor: getColor(pointHoverColor), 35 | label 36 | } 37 | ] 38 | })() 39 | 40 | const pointedOptions = (()=>{ 41 | return { 42 | scales: { 43 | xAxes: [ 44 | { 45 | offset: true, 46 | gridLines: { 47 | color: 'transparent', 48 | zeroLineColor: 'transparent' 49 | }, 50 | ticks: { 51 | fontSize: 2, 52 | fontColor: 'transparent' 53 | } 54 | } 55 | ], 56 | yAxes: [ 57 | { 58 | display: false, 59 | ticks: { 60 | display: false, 61 | min: Math.min.apply(Math, dataPoints) - 5, 62 | max: Math.max.apply(Math, dataPoints) + 5 63 | } 64 | } 65 | ] 66 | }, 67 | elements: { 68 | line: { 69 | borderWidth: 1 70 | }, 71 | point: { 72 | radius: 4, 73 | hitRadius: 10, 74 | hoverRadius: 4 75 | } 76 | } 77 | } 78 | })() 79 | 80 | const straightOptions = (()=>{ 81 | return { 82 | scales: { 83 | xAxes: [{ 84 | display: false 85 | }], 86 | yAxes: [{ 87 | display: false 88 | }] 89 | }, 90 | elements: { 91 | line: { 92 | borderWidth: 2 93 | }, 94 | point: { 95 | radius: 0, 96 | hitRadius: 10, 97 | hoverRadius: 4 98 | } 99 | } 100 | } 101 | })() 102 | 103 | const defaultOptions = (()=>{ 104 | const options = pointed ? pointedOptions : straightOptions 105 | return Object.assign({}, options, { 106 | maintainAspectRatio: false, 107 | legend: { 108 | display: false 109 | } 110 | }) 111 | })() 112 | 113 | const computedDatasets = (() => { 114 | return deepObjectsMerge(defaultDatasets, attributes.datasets || {}) 115 | })() 116 | 117 | const computedOptions = (() => { 118 | return deepObjectsMerge(defaultOptions, attributes.options || {}) 119 | })() 120 | 121 | // render 122 | 123 | return ( 124 | 130 | ) 131 | } 132 | 133 | ChartLineSimple.propTypes = { 134 | tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), 135 | className: PropTypes.string, 136 | // 137 | borderColor: PropTypes.string, 138 | backgroundColor: PropTypes.string, 139 | pointHoverBackgroundColor: PropTypes.string, 140 | dataPoints: PropTypes.array, 141 | label: PropTypes.string, 142 | pointed: PropTypes.bool 143 | }; 144 | 145 | ChartLineSimple.defaultProps = { 146 | borderColor: 'rgba(255,255,255,.55)', 147 | backgroundColor: 'transparent', 148 | dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12], 149 | label: 'Sales' 150 | }; 151 | 152 | export default ChartLineSimple 153 | -------------------------------------------------------------------------------- /src/views/charts/Charts.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CCard, 4 | CCardBody, 5 | CCardGroup, 6 | CCardHeader 7 | } from '@coreui/react' 8 | import { 9 | CChartBar, 10 | CChartLine, 11 | CChartDoughnut, 12 | CChartRadar, 13 | CChartPie, 14 | CChartPolarArea 15 | } from '@coreui/react-chartjs' 16 | import { DocsLink } from 'src/reusable' 17 | 18 | const Charts = () => { 19 | 20 | return ( 21 | 22 | 23 | 24 | Bar Chart 25 | 26 | 27 | 28 | 43 | 44 | 45 | 46 | 47 | 48 | Doughnut Chart 49 | 50 | 51 | 70 | 71 | 72 | 73 | 74 | 75 | Line Chart 76 | 77 | 78 | 98 | 99 | 100 | 101 | 102 | 103 | Pie Chart 104 | 105 | 106 | 125 | 126 | 127 | 128 | 129 | 130 | Polar Area Chart 131 | 132 | 133 | 165 | 166 | 167 | 168 | 169 | 170 | Radar Chart 171 | 172 | 173 | 209 | 210 | 211 | 212 | ) 213 | } 214 | 215 | export default Charts 216 | -------------------------------------------------------------------------------- /src/views/charts/MainChartExample.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CChartLine } from '@coreui/react-chartjs' 3 | import { getStyle, hexToRgba } from '@coreui/utils' 4 | 5 | const brandSuccess = getStyle('success') || '#4dbd74' 6 | const brandInfo = getStyle('info') || '#20a8d8' 7 | const brandDanger = getStyle('danger') || '#f86c6b' 8 | 9 | const MainChartExample = attributes => { 10 | const random = (min, max)=>{ 11 | return Math.floor(Math.random() * (max - min + 1) + min) 12 | } 13 | 14 | const defaultDatasets = (()=>{ 15 | let elements = 27 16 | const data1 = [] 17 | const data2 = [] 18 | const data3 = [] 19 | for (let i = 0; i <= elements; i++) { 20 | data1.push(random(50, 200)) 21 | data2.push(random(80, 100)) 22 | data3.push(65) 23 | } 24 | return [ 25 | { 26 | label: 'My First dataset', 27 | backgroundColor: hexToRgba(brandInfo, 10), 28 | borderColor: brandInfo, 29 | pointHoverBackgroundColor: brandInfo, 30 | borderWidth: 2, 31 | data: data1 32 | }, 33 | { 34 | label: 'My Second dataset', 35 | backgroundColor: 'transparent', 36 | borderColor: brandSuccess, 37 | pointHoverBackgroundColor: brandSuccess, 38 | borderWidth: 2, 39 | data: data2 40 | }, 41 | { 42 | label: 'My Third dataset', 43 | backgroundColor: 'transparent', 44 | borderColor: brandDanger, 45 | pointHoverBackgroundColor: brandDanger, 46 | borderWidth: 1, 47 | borderDash: [8, 5], 48 | data: data3 49 | } 50 | ] 51 | })() 52 | 53 | const defaultOptions = (()=>{ 54 | return { 55 | maintainAspectRatio: false, 56 | legend: { 57 | display: false 58 | }, 59 | scales: { 60 | xAxes: [{ 61 | gridLines: { 62 | drawOnChartArea: false 63 | } 64 | }], 65 | yAxes: [{ 66 | ticks: { 67 | beginAtZero: true, 68 | maxTicksLimit: 5, 69 | stepSize: Math.ceil(250 / 5), 70 | max: 250 71 | }, 72 | gridLines: { 73 | display: true 74 | } 75 | }] 76 | }, 77 | elements: { 78 | point: { 79 | radius: 0, 80 | hitRadius: 10, 81 | hoverRadius: 4, 82 | hoverBorderWidth: 3 83 | } 84 | } 85 | } 86 | } 87 | )() 88 | 89 | // render 90 | return ( 91 | 97 | ) 98 | } 99 | 100 | 101 | export default MainChartExample 102 | -------------------------------------------------------------------------------- /src/views/icons/brands/Brands.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' 3 | import CIcon from '@coreui/icons-react' 4 | import { brandSet } from '@coreui/icons' 5 | import { DocsLink } from 'src/reusable' 6 | 7 | const toKebabCase = (str) => { 8 | return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase() 9 | } 10 | 11 | export const getIconsView = iconset => { 12 | return Object.entries(iconset).map(([name, value]) => ( 13 | 14 | 15 |
{toKebabCase(name)}
16 | 17 | )) 18 | } 19 | 20 | const CoreUIIcons = () => { 21 | return ( 22 | 23 | 24 | Brand Icons 25 | 26 | 27 | 28 | 29 | {getIconsView(brandSet)} 30 | 31 | 32 | 33 | ) 34 | } 35 | 36 | export default CoreUIIcons 37 | -------------------------------------------------------------------------------- /src/views/icons/coreui-icons/CoreUIIcons.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react' 3 | import { freeSet } from '@coreui/icons' 4 | import { getIconsView } from '../brands/Brands.js' 5 | import { DocsLink } from 'src/reusable' 6 | 7 | const CoreUIIcons = () => { 8 | return ( 9 | 10 | 11 | Free Icons / as CIcon{' '} 12 | 13 | 14 | 15 | 16 | {getIconsView(freeSet)} 17 | 18 | 19 | 20 | ) 21 | } 22 | 23 | export default CoreUIIcons 24 | -------------------------------------------------------------------------------- /src/views/icons/flags/Flags.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react' 3 | import { getIconsView } from '../brands/Brands.js' 4 | import { flagSet } from '@coreui/icons' 5 | import { DocsLink } from 'src/reusable' 6 | 7 | const CoreUIIcons = () => { 8 | return ( 9 | 10 | 11 | Flag Icons 12 | 13 | 14 | 15 | 16 | {getIconsView(flagSet)} 17 | 18 | 19 | 20 | ) 21 | } 22 | 23 | export default CoreUIIcons 24 | -------------------------------------------------------------------------------- /src/views/icons/index.js: -------------------------------------------------------------------------------- 1 | import CoreUIIcons from './coreui-icons'; 2 | import Flags from './flags'; 3 | import Brands from './brands'; 4 | 5 | export { 6 | CoreUIIcons, Flags, Brands 7 | }; 8 | -------------------------------------------------------------------------------- /src/views/notifications/alerts/Alerts.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CAlert, 4 | CButton, 5 | CCard, 6 | CCardBody, 7 | CCardHeader, 8 | CCol, 9 | CLink, 10 | CProgress, 11 | CRow 12 | } from '@coreui/react' 13 | import { DocsLink } from 'src/reusable' 14 | 15 | const Alerts = () => { 16 | const [visible, setVisible] = React.useState(10) 17 | 18 | return ( 19 | <> 20 | 21 | 22 | 23 | 24 | Alerts 25 | 26 | 27 | 28 | 29 | This is a primary alert — check it out! 30 | 31 | 32 | This is a secondary alert — check it out! 33 | 34 | 35 | This is a success alert — check it out! 36 | 37 | 38 | This is a danger alert — check it out! 39 | 40 | 41 | This is a warning alert — check it out! 42 | 43 | 44 | This is a info alert — check it out! 45 | 46 | 47 | This is a light alert — check it out! 48 | 49 | 50 | This is a dark alert — check it out! 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | Alerts 59 | use .alert-link to provide links 60 | 61 | 62 | 63 | {/*eslint-disable-next-line*/} 64 | This is a primary alert with  65 | an example link. 66 | Give it a click if you like. 67 | 68 | 69 | {/*eslint-disable-next-line*/} 70 | This is a secondary alert with  71 | an example link. 72 | Give it a click if you like. 73 | 74 | 75 | {/*eslint-disable-next-line*/} 76 | This is a success alert with  77 | an example link. 78 | Give it a click if you like. 79 | 80 | 81 | {/*eslint-disable-next-line*/} 82 | This is a danger alert with  83 | an example link. 84 | Give it a click if you like. 85 | 86 | 87 | {/*eslint-disable-next-line*/} 88 | This is a warning alert with  89 | an example link. 90 | Give it a click if you like. 91 | 92 | 93 | {/*eslint-disable-next-line*/} 94 | This is a info alert with  95 | an example link. 96 | Give it a click if you like. 97 | 98 | 99 | {/*eslint-disable-next-line*/} 100 | This is a light alert with  101 | an example link. 102 | Give it a click if you like. 103 | 104 | 105 | {/*eslint-disable-next-line*/} 106 | This is a dark alert with  107 | an example link. 108 | Give it a click if you like. 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | Alerts 119 | additional content 120 | 121 | 122 | 123 |

Well done!

124 |

125 | Aww yeah, you successfully read this important alert message. This example text is going 126 | to run a bit longer so that you can see how spacing within an alert works with this kind 127 | of content. 128 |

129 |
130 |

131 | Whenever you need to, be sure to use margin utilities to keep things nice and tidy. 132 |

133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | Alerts 141 | dismissing 142 | 143 | 144 | 148 | I am an dismissible alert! 149 | 150 | 156 | I will be closed in {visible} seconds! 157 | 164 | 165 | 166 | setVisible(10)}> 167 | Reset timer 168 | 169 | 170 | 171 | 172 | 173 | 174 | ) 175 | } 176 | 177 | export default Alerts 178 | -------------------------------------------------------------------------------- /src/views/notifications/badges/Badges.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CBadge, 4 | CButton, 5 | CCard, 6 | CCardBody, 7 | CCardFooter, 8 | CCardHeader, 9 | CCol, 10 | CRow 11 | } from '@coreui/react' 12 | import { DocsLink } from 'src/reusable' 13 | 14 | const Badges = () => { 15 | return ( 16 | 17 | 18 | 19 | 20 | Badges 21 | 22 | 23 | 24 |

Example heading New

25 |

Example heading New

26 |

Example heading New

27 |

Example heading New

28 |
Example heading New
29 |
Example heading New
30 | 31 | 32 | 33 | Notifications 9 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | Badges 42 | contextual variations 43 | 44 | 45 | Primary 46 | Secondary 47 | Success 48 | Danger 49 | Warning 50 | Info 51 | Light 52 | Dark 53 | 54 | 55 | 56 | 57 | Badges 58 | pill badges 59 | 60 | 61 | Primary 62 | Secondary 63 | Success 64 | Danger 65 | Warning 66 | Info 67 | Light 68 | Dark 69 | 70 | 71 | 72 | 73 | Badges 74 | links 75 | 76 | 77 | Primary 78 | Secondary 79 | Success 80 | Danger 81 | Warning 82 | Info 83 | Light 84 | Dark 85 | 86 | 87 | 88 | 89 | ) 90 | } 91 | 92 | export default Badges 93 | -------------------------------------------------------------------------------- /src/views/notifications/index.js: -------------------------------------------------------------------------------- 1 | import Alerts from './Alerts'; 2 | import Badges from './Badges'; 3 | import Modals from './Modals'; 4 | import Toaster from './Toaster'; 5 | 6 | export { 7 | Alerts, Badges, Modals, Toaster 8 | }; 9 | -------------------------------------------------------------------------------- /src/views/notifications/toaster/Toaster.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { 3 | CCard, 4 | CCardHeader, 5 | CCardBody, 6 | CToast, 7 | CToastBody, 8 | CToastHeader, 9 | CToaster, 10 | CForm, 11 | CInput, 12 | CInputCheckbox, 13 | CButton, 14 | CContainer, 15 | CRow, 16 | CCol, 17 | CFormGroup, 18 | CLabel 19 | } from '@coreui/react' 20 | import { DocsLink } from 'src/reusable' 21 | 22 | const Toaster = () => { 23 | 24 | const positions = [ 25 | 'static', 26 | 'top-left', 27 | 'top-center', 28 | 'top-right', 29 | 'top-full', 30 | 'bottom-left', 31 | 'bottom-center', 32 | 'bottom-right', 33 | 'bottom-full' 34 | ] 35 | 36 | const [toasts, setToasts] = useState([ 37 | { position: 'static'}, 38 | { position: 'static'}, 39 | { position: 'top-right', autohide: 3000 } 40 | ]) 41 | 42 | const [position, setPosition] = useState('top-right') 43 | const [autohide, setAutohide] = useState(true) 44 | const [autohideValue, setAutohideValue] = useState(5000) 45 | const [closeButton, setCloseButton] = useState(true) 46 | const [fade, setFade] = useState(true) 47 | 48 | const addToast = () => { 49 | setToasts([ 50 | ...toasts, 51 | { position, autohide: autohide && autohideValue, closeButton, fade } 52 | ]) 53 | } 54 | 55 | 56 | const toasters = (()=>{ 57 | return toasts.reduce((toasters, toast) => { 58 | toasters[toast.position] = toasters[toast.position] || [] 59 | toasters[toast.position].push(toast) 60 | return toasters 61 | }, {}) 62 | })() 63 | 64 | 65 | return ( 66 | 67 | 68 | Toasts. 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |
Add toast with following props:
77 | 78 | 79 | { setAutohide(e.target.checked) }} 83 | custom 84 | /> 85 | 86 | Autohide of the toast 87 | 88 | 89 | { 90 | autohide && 91 | 92 | Time to autohide 93 | { 97 | setAutohideValue(Number(e.target.value)) 98 | }} 99 | /> 100 | 101 | } 102 | 103 | 104 | Position 105 | 116 | 117 | 118 | 119 | { setFade(e.target.checked) }} 123 | custom 124 | /> 125 | fade 126 | 127 | 128 | 129 | { setCloseButton(e.target.checked) }} 134 | /> 135 | 136 | closeButton 137 | 138 | 139 | 140 | 145 | Add toast 146 | 147 | 148 | 149 | 150 | 151 | {Object.keys(toasters).map((toasterKey) => ( 152 | 156 | { 157 | toasters[toasterKey].map((toast, key)=>{ 158 | return( 159 | 165 | 166 | Toast title 167 | 168 | 169 | {`This is a toast in ${toasterKey} positioned toaster number ${key + 1}.`} 170 | 171 | 172 | ) 173 | }) 174 | } 175 | 176 | ))} 177 | 178 | 179 | 180 | 181 | 182 | ) 183 | } 184 | 185 | export default Toaster 186 | -------------------------------------------------------------------------------- /src/views/pages/login/Login.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | import { 4 | CButton, 5 | CCard, 6 | CCardBody, 7 | CCardGroup, 8 | CCol, 9 | CContainer, 10 | CForm, 11 | CInput, 12 | CInputGroup, 13 | CInputGroupPrepend, 14 | CInputGroupText, 15 | CRow 16 | } from '@coreui/react' 17 | import CIcon from '@coreui/icons-react' 18 | 19 | const Login = () => { 20 | return ( 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |

Login

30 |

Sign In to your account

31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | Login 50 | 51 | 52 | Forgot password? 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 |
61 |

Sign up

62 |

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

64 | 65 | Register Now! 66 | 67 |
68 | 69 | 70 | 71 | 72 | 73 | 74 |
75 | ) 76 | } 77 | 78 | export default Login 79 | -------------------------------------------------------------------------------- /src/views/pages/page404/Page404.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CButton, 4 | CCol, 5 | CContainer, 6 | CInput, 7 | CInputGroup, 8 | CInputGroupPrepend, 9 | CInputGroupAppend, 10 | CInputGroupText, 11 | CRow 12 | } from '@coreui/react' 13 | import CIcon from '@coreui/icons-react' 14 | 15 | const Page404 = () => { 16 | return ( 17 |
18 | 19 | 20 | 21 |
22 |

404

23 |

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

24 |

The page you are looking for was not found.

25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | Search 35 | 36 | 37 | 38 | 39 | 40 |
41 | ) 42 | } 43 | 44 | export default Page404 45 | -------------------------------------------------------------------------------- /src/views/pages/page500/Page500.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CButton, 4 | CCol, 5 | CContainer, 6 | CInput, 7 | CInputGroup, 8 | CInputGroupAppend, 9 | CInputGroupPrepend, 10 | CInputGroupText, 11 | CRow 12 | } from '@coreui/react' 13 | import CIcon from '@coreui/icons-react' 14 | 15 | const Page500 = () => { 16 | return ( 17 |
18 | 19 | 20 | 21 | 22 |

500

23 |

Houston, we have a problem!

24 |

The page you are looking for is temporarily unavailable.

25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | Search 35 | 36 | 37 | 38 | 39 | 40 |
41 | ) 42 | } 43 | 44 | export default Page500 45 | -------------------------------------------------------------------------------- /src/views/pages/register/Register.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CButton, 4 | CCard, 5 | CCardBody, 6 | CCardFooter, 7 | CCol, 8 | CContainer, 9 | CForm, 10 | CInput, 11 | CInputGroup, 12 | CInputGroupPrepend, 13 | CInputGroupText, 14 | CRow 15 | } from '@coreui/react' 16 | import CIcon from '@coreui/icons-react' 17 | 18 | const Register = () => { 19 | return ( 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |

Register

28 |

Create your account

29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | @ 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | Create Account 60 | 61 | 62 | 63 | 64 | 65 | facebook 66 | 67 | 68 | twitter 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |
77 | ) 78 | } 79 | 80 | export default Register 81 | -------------------------------------------------------------------------------- /src/views/theme/colors/Colors.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState, createRef } from 'react' 2 | import classNames from 'classnames' 3 | import { 4 | CRow, 5 | CCol, 6 | CCard, 7 | CCardHeader, 8 | CCardBody 9 | } from '@coreui/react' 10 | import { rgbToHex } from '@coreui/utils' 11 | import { DocsLink } from 'src/reusable' 12 | 13 | 14 | const ThemeView = () => { 15 | const [color, setColor] = useState('rgb(255, 255, 255)') 16 | const ref = createRef() 17 | 18 | useEffect(() => { 19 | const el = ref.current.parentNode.firstChild 20 | const varColor = window.getComputedStyle(el).getPropertyValue('background-color') 21 | setColor(varColor) 22 | }, [ref]) 23 | 24 | return ( 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
HEX:{ rgbToHex(color) }
RGB:{ color }
37 | ) 38 | } 39 | 40 | const ThemeColor = ({className, children}) => { 41 | const classes = classNames(className, 'theme-color w-75 rounded mb-3') 42 | return ( 43 | 44 |
45 | {children} 46 | 47 | 48 | ) 49 | } 50 | 51 | const Colors = () => { 52 | return ( 53 | <> 54 | 55 | 56 | Theme colors 57 | 58 | 59 | 60 | 61 | 62 |
Brand Primary Color
63 | 64 | 65 |
Brand Secondary Color
66 | 67 | 68 |
Brand Success Color
69 | 70 | 71 |
Brand Danger Color
72 | 73 | 74 |
Brand Warning Color
75 | 76 | 77 |
Brand Info Color
78 | 79 | 80 |
Brand Light Color
81 | 82 | 83 |
Brand Dark Color
84 | 85 | 86 | 87 | 88 | 89 | 90 | Grays 91 | 92 | 93 | 94 | 95 |
Gray 100 Color
96 | 97 | 98 |
Gray 200 Color
99 | 100 | 101 |
Gray 300 Color
102 | 103 | 104 |
Gray 400 Color
105 | 106 | 107 |
Gray 500 Color
108 | 109 | 110 |
Gray 600 Color
111 | 112 | 113 |
Gray 700 Color
114 | 115 | 116 |
Gray 800 Color
117 | 118 | 119 |
Gray 900 Color
120 | 121 | 122 | 123 | 124 | 125 | ) 126 | } 127 | 128 | export default Colors 129 | -------------------------------------------------------------------------------- /src/views/theme/typography/Typography.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CCard, 4 | CCardHeader, 5 | CCardBody 6 | } from '@coreui/react' 7 | import { DocsLink } from 'src/reusable' 8 | 9 | const Typography = () => { 10 | return ( 11 | <> 12 | 13 | 14 | Headings 15 | 16 | 17 | 18 |

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

19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 31 | 32 | 33 | 34 | 37 | 38 | 39 | 40 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | 52 | 55 | 56 | 57 | 58 | 61 | 62 | 63 | 64 |
HeadingExample
29 |

<h1></h1>

30 | 		h1. Bootstrap heading
35 |

<h2></h2>

36 | 		h2. Bootstrap heading
41 |

<h3></h3>

42 | 		h3. Bootstrap heading
47 |

<h4></h4>

48 | 		h4. Bootstrap heading
53 |

<h5></h5>

54 | 		h5. Bootstrap heading
59 |

<h6></h6>

60 | 		h6. Bootstrap heading
65 | 66 | 67 | 68 | 69 | Headings 70 | 71 | 72 |

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

77 |
78 |

h1. Bootstrap heading

79 |

h2. Bootstrap heading

80 |

h3. Bootstrap heading

81 |

h4. Bootstrap heading

82 |

h5. Bootstrap heading

83 |

h6. Bootstrap heading

84 |
85 | 86 | 87 | 88 |
89 | Display headings 90 |
91 |
92 |

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 93 | a display heading—a larger, slightly more opinionated heading style.

94 |
95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 |
Display 1
Display 2
Display 3
Display 4
111 |
112 |
113 | 114 | 115 | 116 | Inline text elements 117 | 118 | 119 |

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 120 | a display heading—a larger, slightly more opinionated heading style.

121 |
122 |

You can use the mark tag to highlight text.

123 |

124 | This line of text is meant to be treated as deleted text. 125 |

126 |

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

127 |

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

130 |

This line of text will render as underlined

131 |

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

134 |

This line rendered as bold text.

135 |

This line rendered as italicized text.

136 |
137 | 138 | 139 | 140 | 141 | Description list alignment 142 | 143 | 144 |

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

146 |
147 |
148 |
Description lists
149 |
A description list is perfect for defining terms.
150 | 151 |
Euismod
152 |
153 |

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

154 |

Donec id elit non mi porta gravida at eget metus.

155 |
156 | 157 |
Malesuada porta
158 |
Etiam porta sem malesuada magna mollis euismod.
159 | 160 |
Truncated term is truncated
161 |
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
162 | 163 |
Nesting
164 |
165 |
166 |
Nested definition list
167 |
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
168 |
169 |
170 |
171 |
172 | 173 | 174 | 175 | ) 176 | } 177 | 178 | export default Typography 179 | -------------------------------------------------------------------------------- /src/views/users/User.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' 3 | import CIcon from '@coreui/icons-react' 4 | 5 | import usersData from './UsersData' 6 | 7 | const User = ({match}) => { 8 | const user = usersData.find( user => user.id.toString() === match.params.id) 9 | const userDetails = user ? Object.entries(user) : 10 | [['id', ( Not found)]] 11 | 12 | return ( 13 | 14 | 15 | 16 | 17 | User id: {match.params.id} 18 | 19 | 20 | 21 | 22 | { 23 | userDetails.map(([key, value], index) => { 24 | return ( 25 | 26 | 27 | 28 | 29 | ) 30 | }) 31 | } 32 | 33 |
{`${key}:`}{value}
34 | 35 | 36 | 37 | 38 | ) 39 | } 40 | 41 | export default User 42 | -------------------------------------------------------------------------------- /src/views/users/Users.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import { useHistory, useLocation } from 'react-router-dom' 3 | import { 4 | CBadge, 5 | CCard, 6 | CCardBody, 7 | CCardHeader, 8 | CCol, 9 | CDataTable, 10 | CRow, 11 | CPagination 12 | } from '@coreui/react' 13 | 14 | import usersData from './UsersData' 15 | 16 | const getBadge = status => { 17 | switch (status) { 18 | case 'Active': return 'success' 19 | case 'Inactive': return 'secondary' 20 | case 'Pending': return 'warning' 21 | case 'Banned': return 'danger' 22 | default: return 'primary' 23 | } 24 | } 25 | 26 | const Users = () => { 27 | const history = useHistory() 28 | const queryPage = useLocation().search.match(/page=([0-9]+)/, '') 29 | const currentPage = Number(queryPage && queryPage[1] ? queryPage[1] : 1) 30 | const [page, setPage] = useState(currentPage) 31 | 32 | const pageChange = newPage => { 33 | currentPage !== newPage && history.push(`/users?page=${newPage}`) 34 | } 35 | 36 | useEffect(() => { 37 | currentPage !== page && setPage(currentPage) 38 | }, [currentPage, page]) 39 | 40 | return ( 41 | 42 | 43 | 44 | 45 | Users 46 | example 47 | 48 | 49 | history.push(`/users/${item.id}`)} 61 | scopedSlots = {{ 62 | 'status': 63 | (item)=>( 64 | 65 | 66 | {item.status} 67 | 68 | 69 | ) 70 | }} 71 | /> 72 | 79 | 80 | 81 | 82 | 83 | ) 84 | } 85 | 86 | export default Users 87 | -------------------------------------------------------------------------------- /src/views/users/UsersData.js: -------------------------------------------------------------------------------- 1 | const usersData = [ 2 | {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'}, 3 | {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'}, 4 | {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, 5 | {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'}, 6 | {id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'}, 7 | {id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'}, 8 | {id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'}, 9 | {id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, 10 | {id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'}, 11 | {id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'}, 12 | {id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'}, 13 | {id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'}, 14 | {id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, 15 | {id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'}, 16 | {id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'}, 17 | {id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'}, 18 | {id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'}, 19 | {id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, 20 | {id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'}, 21 | {id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'}, 22 | {id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'}, 23 | {id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'}, 24 | {id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, 25 | {id: 23, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'}, 26 | {id: 42, name: 'Ford Prefect', registered: '2001/05/25', role: 'Alien', status: 'Don\'t panic!'} 27 | ] 28 | 29 | export default usersData 30 | -------------------------------------------------------------------------------- /src/views/widgets/WidgetsBrand.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { CWidgetBrand, CRow, CCol } from '@coreui/react'; 4 | import CIcon from '@coreui/icons-react'; 5 | import ChartLineSimple from '../charts/ChartLineSimple'; 6 | 7 | const WidgetsBrand = ({withCharts})=>{ 8 | 9 | // render 10 | 11 | return withCharts ? 12 | 13 | 14 | 21 | 26 | 33 | 34 | 35 | 36 | 37 | 44 | 49 | 56 | 57 | 58 | 59 | 60 | 67 | 72 | 79 | 80 | 81 | 82 | 83 | 90 | 95 | 102 | 103 | 104 | : 105 | 106 | 107 | 108 | 115 | 120 | 121 | 122 | 123 | 124 | 131 | 136 | 137 | 138 | 139 | 140 | 147 | 152 | 153 | 154 | 155 | 156 | 163 | 168 | 169 | 170 | 171 | } 172 | 173 | WidgetsBrand.propTypes = { 174 | withCharts: PropTypes.bool 175 | } 176 | 177 | export default WidgetsBrand 178 | -------------------------------------------------------------------------------- /src/views/widgets/WidgetsDropdown.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | CWidgetDropdown, 4 | CRow, 5 | CCol, 6 | CDropdown, 7 | CDropdownMenu, 8 | CDropdownItem, 9 | CDropdownToggle 10 | } from '@coreui/react' 11 | import CIcon from '@coreui/icons-react' 12 | import ChartLineSimple from '../charts/ChartLineSimple' 13 | import ChartBarSimple from '../charts/ChartBarSimple' 14 | 15 | const WidgetsDropdown = () => { 16 | // render 17 | return ( 18 | 19 | 20 | 34 | } 35 | > 36 | 37 | 38 | 39 | 40 | 41 | Action 42 | Another action 43 | Something else here... 44 | Disabled action 45 | 46 | 47 | 48 | 49 | 50 | 51 | 66 | } 67 | > 68 | 69 | 70 | 71 | 72 | 73 | Action 74 | Another action 75 | Something else here... 76 | Disabled action 77 | 78 | 79 | 80 | 81 | 82 | 83 | 98 | } 99 | > 100 | 101 | 102 | 103 | 104 | 105 | Action 106 | Another action 107 | Something else here... 108 | Disabled action 109 | 110 | 111 | 112 | 113 | 114 | 115 | 127 | } 128 | > 129 | 130 | 131 | 132 | 133 | 134 | Action 135 | Another action 136 | Something else here... 137 | Disabled action 138 | 139 | 140 | 141 | 142 | 143 | ) 144 | } 145 | 146 | export default WidgetsDropdown 147 | --------------------------------------------------------------------------------