diff --git a/.gitignore b/.gitignore index bbe223952..0181e1009 100644 --- a/.gitignore +++ b/.gitignore @@ -2,12 +2,21 @@ # dependencies /node_modules +/src/coreui-new +/src/coreui-icons +/src/coreui-charts # testing /coverage +/src/coreui-new +/src/coreui-icons +/src/coreui-charts # production /build +/src/coreui-new +/src/coreui-icons +/src/coreui-charts # misc .DS_Store diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 87ed987a8..000000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,501 +0,0 @@ -## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog - -##### `v2.6.1` -- fix(Dashboard): `scales.[x/y]Axes.barPercentage` is deprecated, use `dataset.barPercentage` instead -- fix(Dropdowns): DropdownMenu right -- refactor(polyfill): cleanup - -###### dependencies update -- update: `@coreui/coreui` to `^2.1.16` -- update: `@coreui/react` to `^2.5.7` -- update: `bootstrap` to `^4.5.0` -- update: `chart.js` to `^2.9.3` -- update: `core-js` to `^3.6.5` -- update: `enzyme` to `^3.11.0` -- update: `enzyme-adapter-react-16` to `^1.15.2` -- update: `flag-icon-css` to `^3.4.6` -- update: `node-sass` to `^4.14.1` -- update: `react` to `^16.13.1` -- update: `react-app-polyfill` to `^1.0.6` -- update: `react-chartjs-2` to `^2.9.0` -- update: `react-dom` to `^16.13.1` -- update: `react-router-config` to `^5.1.1` -- update: `react-router-dom` to `^5.2.0` -- update: `react-test-renderer` to `^16.13.1` -- update: `reactstrap` to `^8.4.1` -- update: `react-scripts` to `^3.4.1` - -##### `v2.6.0` -- move to `reactstrap v8`. Breaking changes and deprecations, see: https://github.com/reactstrap/reactstrap/blob/master/CHANGELOG.md#800-2019-04-03 -- fix(DefaultHeader): replace `AppHeaderDropdown` with `UncontrolledDropdown` -- refactor: add ie polyfills - -###### dependencies update -- update: `@coreui/coreui` to `^2.1.12` -- update: `@coreui/coreui-plugin-chartjs-custom-tooltips` to `^1.3.1` -- update: `@coreui/react` to `^2.5.1` -- update: `core-js` to `^3.1.4` -- update: `enzyme` to `^3.10.0` -- update: `enzyme-adapter-react-16` to `^1.14.0` -- update: `react-router-config` to `^5.0.1` -- update: `react-router-dom` to `^5.0.1` -- update: `reactstrap` to `^8.0.0` - -##### `v2.5.0` -- release for use with: - - react-router-dom `~5.0.0` - - @coreui/react `~2.5.0` - -###### dependencies update -- update: `@coreui/react` to `~2.5.0` -- update: `react-router-config` to `^5.0.0` -- update: `react-router-dom` to `^5.0.0` - -It turns out this is not such a breaking change, as it seemed at a glance. -Just update dependencies and you're good. - -#### _migration guide v2.1 -> v2.5_ :boom: -- update `dependencies` in `package.json` - - [ ] `@coreui/react` to `~2.5.0` - - [ ] `react-router-dom` to `^5.0.0` - - [ ] `react-router-config` to `^5.0.0` - - -__BREAKING CHANGES__ :boom: -- use React Router `v5` -- drop 'Breadcrumb' in favour of `Breadcrumb2` -- drop 'SidebarNav' in favour of `SidebarNav2` -- __Breadcrumb2__: **mandatory** prop `router` 💥 see > [Breadcrumb](./src/Breadcrumb.md) -- __SidebarNav2__: **mandatory** prop `router` 💥 see > [SidebarNav](./src/SidebarNav.md) - -React Router v5 uses the new React Context API, which is incompatible with version used in 4.3. -That's a breaking change. With a raw upgrade to v5, you can encounter an error message: `You should not render a outside a ` or `You should not use outside a ` etc... It means that Route, Link etc, can't find the correct context object because `Breadcrumb` and `SidebarNav` components have their own context object. - -It's important to use the same instance of the `react-router-dom v5` library with template and coreui components. `@coreui/react` version `2.5.0` moves react-router-dom form dependencies to peerDependecies and takes the same library/module from the template/app instead. We have to pass `router` module object as a prop to `` and `` - -#### _migration guide v2.1 -> v2.5_ :boom: -1. update `dependencies` in `package.json` - - [ ] `@coreui/react` to `~2.5.0` - - [ ] `react-router-dom` to `^5.0.0` - - [ ] `react-router-config` to `^5.0.0` - -2. modify `DefaultLayout.js` - - [ ] import react-router-dom module as an object - ``` - import * as router from 'react-router-dom'; - ``` - - [ ] import new versions of components `AppBreadcrumb2` and `AppSidebarNav2` (alias is optional, just keep consistency with markup) - ```jsx - import { - ... - AppBreadcrumb2 as AppBreadcrumb, - AppSidebarNav2 as AppSidebarNav - ... - } from '@coreui/react'; - ``` - - [ ] inject `router` object as a prop to `` and `` - ```html - - ``` - - ```html - - ``` - ---- - -##### `v2.1.7` -- maintenance release for use with: - - react-router `v4.3.x` - - reactstrap `v7.x` - - @coreui/react `~2.1.7` -- chore: add `package-lock.json` with updated `tar` dependency -- chore: fix `test:cov` script -- fix(Popovers): add `trigger="legacy" delay={0}` (breaking change in reactstrap) -###### dependencies update -- update: `@coreui/react` to `~2.1.7` -- update: `@coreui/coreui-plugin-chartjs-custom-tooltips` to `^1.3.0` -- update: `enzyme-adapter-react-16` to `^1.13.0` -- update: `node-sass` to `^4.12.0` -- update: `react` to `^16.8.6` -- update: `react-app-polyfill` to `^1.0.1` -- update: `react-chartjs-2` to `^2.7.6` -- update: `react-dom` to `^16.8.6` -- update: `react-test-renderer` to `^16.8.6` -- update: `react-scripts` to `^3.0.1` - -##### `v2.1.6` -- fix(App): remove redundant react-loadable - thanks @sergeyt -- fix(routes) remove circular dependency - thanks @sergeyt -- refactor(App): change to render in Route -- fix(routes): add Home to routes - breadcrumb issue -- refactor(DefaultHeader): move to ReactRouter `NavLink` -- refactor(Forms): move to `InputGroupButtonDropdown` where applicable - -###### dependencies update -- update: `@coreui/coreui` to `^2.1.9` -- update: `@coreui/react` to `~2.1.5` -- update: `chart.js` to `^2.8.0` -- update: `enzyme-adapter-react-16` to `^1.11.2` -- update: `react` to `^16.8.5` -- update: `react-app-polyfill` to `^0.2.2` -- update: `react-dom` to `^16.8.5` -- update: `react-router-config` to `^4.4.0-beta.8` -- update: `react-router-dom` to `~4.3.1` -- update: `react-test-renderer` to `^16.8.5` -- update: `react-scripts` to `^2.1.8` - -##### `v2.1.5` -- fix: iOS 9 Safari sidebar toggle force issue `@coreui/react@2.1.5` - -###### dependencies update -- update: `@coreui/react` to `^2.1.5` -- update: `enzyme-adapter-react-16` to `^1.10.0` -- update: `flag-icon-css` to `^3.3.0` -- update: `react` to `^16.8.4` -- update: `react-dom` to `^16.8.4` -- update: `react-test-renderer` to `^16.8.4` - -##### `v2.1.4` -- maintenance release: fixes #151 #145 -###### dependencies update -- update: `@coreui/coreui` to `^2.1.7` -- update: `@coreui/react` to `^2.1.4` -- update: `bootstrap` to `^4.3.1` -- update: `core-js` to `^2.6.5` -- update: `enzyme` to `^3.9.0` -- update: `enzyme-adapter-react-16` to `^1.9.1` -- update: `prop-types` to `^15.7.2` -- update: `react` to `^16.8.2` -- update: `react-app-polyfill` to `^0.2.1` -- update: `react-dom` to `^16.8.2` -- update: `react-test-renderer` to `^16.8.2` -- update: `reactstrap` to `^7.1.0` -- update: `react-scripts` to `2.1.5` - -##### `v2.1.3` -- fix(Collapse): add `mb-0` to accordion cards -- fix(ButtonGroups): misplaced dropdownOpen -- chore: update `@coreui/coreui` to `^2.1.5` -- chore: update `@coreui/react` to `^2.1.3` -- chore: update `bootstrap` to `^4.2.1` -- chore: update `core-js` to `^2.6.1` -- chore: update `enzyme` to `^3.8.0` -- chore: update `enzyme-adapter-react-16` to `^1.7.1` -- chore: update `node-sass` to `^4.11.0` -- chore: update `react` to `^16.7.0` -- chore: update `react-app-polyfill` to `^0.2.0` -- chore: update `react-chartjs-2` to `^2.7.4` -- chore: update `react-dom` to `^16.7.0` -- chore: update `react-test-renderer` to `^16.7.0` -- chore: update `reactstrap` to `^7.0.2` -- chore: update `react-scripts` to `2.1.3` - -##### `v2.1.2` -- fix(scss): floating footer ie11 issue -- chore: update `@coreui/react` to `^2.1.1` - -##### `v2.1.1` -- refactor(App.js): code splitting with `react-loadable` (waiting for release of `react-router-dom`) -- refactor(routes.js): code splitting with `React.lazy`, remove `react-loadable` -- refactor(DefaultLayout): code splitting with `React.lazy` Aside, Footer, Header, routes -- refactor(Dashboard): tweak lazy and Suspense for Widget03 -- refactor(Login): add router link to `Register` button -- refactor(Register): add margins to social-media buttons -- chore: disable eslint warning for href="#" attribute -- chore: update `@coreui/coreui` to `^2.1.1` -- chore: update `enzyme-adapter-react-16` to `1.7.0` -- chore: update `react` to `16.6.3` -- chore: update `react-dom` to `16.6.3` -- chore: update `react-test-renderer` to `16.6.3` - -##### `v2.1.0` -- feat(SidebarNav): navLink `attributes` - optional JS object with valid JS API naming: - - valid attributes: `rel`, `target`, `hidden`, `disabled`, etc... - - starting with `@coreui/coreui`, `@coreui/react` version `2.1.0` and up - - closes #106 - - item example(`./src/_nav.js`): - ```js - [ - { - name: 'Disabled', - url: '/disabled', - icon: 'icon-ban', - attributes: { disabled: true }, - }, - { - name: 'Try CoreUI PRO', - url: 'https://coreui.io/pro/react/', - icon: 'cui-layers icons', - variant: 'danger', - attributes: { target: '_blank', rel: "noopener" }, - } - ] - ``` -- fix(Cards): `card-header-actions` added to `CardHeader` for `rtl` support -- feat(Dashboard): new `Suspense` example with Widget03 -- chore: update `@coreui/coreui` to `2.1.0` -- chore: update `@coreui/react` to `2.1.0` -- chore: update `node-sass` to `4.10.0` -- chore: update `react` to `16.6.1` -- chore: update `react-dom` to `16.6.1` -- chore: update `react-test-renderer` to `16.6.1` - -##### `v2.0.14` -- chore: update `@coreui/coreui` to `2.0.25` -- chore: update `chart.js` to `2.7.3` -- chore: update `flag-icon-css` to `3.2.1` -- chore: update `node-sass` to `4.9.4` -- chore: update `react` to `16.6.0` -- chore: update `react-dom` to `16.6.0` -- chore: update `react-router-config` to `4.4.0-beta.6` -- chore: update `react-test-renderer` to `16.6.0` -- chore: update `react-scripts` to `2.1.1` - -##### `v2.0.13` -- refactor: migration to [Create React App 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) cleanup - - cleanup `package.json` scripts - - remove `babel-jest` dependency - - remove `node-sass-chokidar` dependency - - remove `npm-run-all` dependency - - move `App.js` import styles to `App.scss` - - replace imports from `node_modules/` with `~` prefix -- chore: remove unused `src/scss/vendors/charts.js/` directory -- chore: update `@coreui/coreui` to `^2.0.15` -- chore: update `@coreui/react` to `^2.0.9` - -##### `v2.0.12` -fixes some issues with `rtl`, `ie11`, `sidebar-minimized` behaviour and `aside` responsiveness -- fix(DefaultAside): `ListGroup` with `tag="div"` works better with `rtl` -- fix(DefaultLayout): `AppAside` remove deprecated `hidden` prop -- chore: update `@coreui/react` to `^2.0.8` -- chore: update `reactsrtrap` to `^6.5.0` -- chore: update `react-scripts` to `^2.0.4` -- chore: `enzyme` to `3.7.0` -- chore: `enzyme-adapter-react-16` to `1.6.0` - -##### `v2.0.11` -- chore: update `@coreui/react` to `^2.0.7` -- chore: migration to [Create React App 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) - - chore: update `react-scripts` to `^2.0.3` - - chore: update `node-sass-chokidar` to `^1.3.3` - - chore: add `node-sass v4.9.3` - - chore: add `react-app-polyfill v0.1.3` - - chore: add `eslintConfig` in `package.json` - - chore: add `browserslist` in `package.json` - - chore: update `manifest.json` - - refactor(index.js): add `react-app-polyfill` for `ie9-11` support - - refactor(index.js): migration to `serviceWorker.js` - -###### Migrating from CRA 1.x to 2.x: -affected files: -- `package.json` -> dependencies update -- `src/index.js` -> move to `serviceWorker`, add `react-app-polyfill` for `ie9-11` support when needed - -In most cases bumping the `react-scripts` version in `package.json` and running `npm install` in this folder should be enough, but it’s good to consult the [changelog](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md#migrating-from-1x-to-203) for potential breaking changes. - ---- - -##### `v2.0.10` -- chore: update `@coreui/coreui` to `^2.0.14` -- chore: update `@coreui/react` to `^2.0.6` -- chore: update `enzyme` to `^3.6.0` -- chore: update `enzyme-adapter-react-16` to `^1.5.0` -- chore: update `flag-icon-css` to `^3.2.0` -- chore: update `react` to `^16.5.2` -- chore: update `react-dom` to `^16.5.2` -- chore: update `react-router-config` to `^4.4.0-beta.1` -- chore: update `react-test-renderer` to `^16.5.2` -- chore: update `babel-jest` to `^23.6.0` - -##### `v2.0.9` -- chore: update `@coreui/icons` to `0.3.0` -- refactor(CoreUIIcons): move to `@coreui/icons v0.3.0` -- chore: update `enzyme` to `3.5.0` -- chore: update `enzyme-adapter-react-16` to `1.3.1` -- chore: update `react-loadable` to `5.5.0` -- chore: update `reactstrap` to `6.4.0` -- chore: update `react-scripts` to `1.1.5` - -##### `v2.0.8` -- fix(User): add missing unique key prop -- fix(Login): add missing form and autoComplete -- fix(Register): add missing form and autoComplete -- chore: update `@coreui/react` to `2.0.5` -- chore: update `bootstrap` to `4.1.3` -- chore: update `reactstrap` to `6.3.1` -- chore: update `babel-jest` to `23.4.2` - -##### `v2.0.5` -- feat(router): Users/User Breadcrumb example with `/users/:id` -- chore: update `@coreui/react` to `2.0.4`, -- chore: update `prop-types` to `15.6.2` -- chore: update `react` to `16.4.1` -- chore: update `react-dom` to `16.4.1` -- chore: update `react-test-renderer` to `16.4.1` -- chore: update `npm-run-all` to `4.1.3` -- chore: add `.env` file - -##### `v2.0.4` -- feat(Forms): FormFeedback valid, toggleFade -- refactor(Cards): toggleFade -- chore: update `@coreui/coreui` to `2.0.2`, -- chore: update `@coreui/react` to `2.0.1`, -- chore: update `classnames` to `2.2.6`, -- chore: update `core-js` to `2.5.7`, -- chore: update `react` to `16.4.0`, -- chore: update `react-dom` to `16.4.0`, -- chore: update `react-router-dom` to `4.3.1`, -- chore: update `react-test-renderer` to `16.4.0`, -- chore: update `reactstrap` to `6.1.0`, -- chore: update `babel-jest` to `23.0.1`, - -##### `v2.0.3` -- refactor: disable `ServiceWorker` by default -- fix(routes): mismatched `SimpleLineIcons` dynamic import -- refactor: CoreUI Icons `v0.2.0` -- chore: update`babel-jest` to `v22.4.4` - -##### `v2.0.2` -- chore: update `@coreui/react` to `v2.0.0`, - -##### `v2.0.1` -- refactor: code splitting via dynamic import -- refactor: switches view rearrange -- fix: update component names in package.json -- chore: update `node-sass-chokidar` to `v1.3.0` -- chore(release): dependencies update - -##### `v2.0.0-rc.1` -- feat: new CoreUI Icons set - -##### `v2.0.0-beta.2` -- feat: CoreUI custom tooltips plugin for chart.js - -##### `v2.0.0-beta.1` -- refactor(Switches): move to AppSwitch component -- fix: typo - -##### `v2.0.0-beta` -- update to `@coreui/react: ^2.0.0-beta` - -##### `v2.0.0-alpha.3` -- refactor(Colors): view layout, minor temp tweaks -- refactor(FullAside): - ListGroup (deprecate callout) -- refactor(Full*): containers minor fixes -- refactor(Dropdowns): minor fixes -- refactor(Forms): `card-header-actions` -- feat(Forms): `` -- feat(Forms): `FormFeedback` -- feat(Collapses): Accordion, Custom Accordion -- feat(ListGroup): with TabPanes -- refactor(PaginationItem): `tag="button"` -- refactor(BrandButtons): spacing -- refactor:(Buttons): view layout - -##### `v2.0.0-alpha.2` -- refactor: FullHeader `` (required prop `direction`) -- refactor: ButtonDropdowns `` (deprecate 'dropup') -- refactor: Dashboard legend badge pill -- refactor: SocialButtons to BrandButtons `btn-brand` -- refactor: Buttons spacing `mr-1` -- update: reactstrap to `5.0.0` -- update: react, react-dom to `16.3.1` -- update: node-sass-chokidar to `1.1.0` -- update: prop-types to `15.5.8` -- update: react-scripts to `1.1.4` - -##### `v2.0.0-alpha.1` -- refactor: separation of concerns - (CoreUI template vs CoreUI components) prepare to use CoreUI as dependency -- refactor: project structure change -- refactor: moved to [Create-React-App](CRA.md) -- chore: moved to [Semantic Versioning](https://semver.org/) - -##### `v1.0.10` -- refactor: `` -- refactor: `` -- refactor: `` -- refactor: remove `` -- update: reactstrap to `5.0.0-beta` -- update: dependencies - -###### `v1.0.9` -- refactor: Sidebar structure change - -###### `v1.0.8` -- refactor: Dashboard radio buttons, new `onRadioBtnClick()` method -- update: react to `16.2.0` -- update: Bootstrap `4.0.0-beta.3` -- update: dependencies -- feature: some Bootstrap4 components added -- fix: rollback to webpack-dev-server `2.9.7` -- temp tweaks(b4 beta3): `InputGroupAddon` and `InputGroupButton` -- refactor(checkboxes, radios): temp tweaks -- feat: mobile sidebar link click closes the sidebar -- fix: .nav-tabs .nav-link `cursor: pointer` - -###### `v1.0.6` - -- update: react to `^16.1.1` -- update: reactstrap to `^5.0.0-alpha.4` -- refactor: deprecated reactstrap `NavDropdown` change to `Dropdown` with `nav` prop -- refactor: use prop `bsSize` instead of the `size` to bootstrap's input sizing -- update: dependencies - -###### `v1.0.5` -- feature: Sidebar add divider.class -- refactor: Sidebar -- moved to react: `^16.1.0` -- chore: dependencies update - -###### `v1.0.4` -- refactor: scss - -###### `v1.0.3` -- update: bootstrap to `4.0.0-beta.2` - -###### `v1.0.2` -- `HeaderDropdown` component example extracted out of `Header` - -###### `v1.0.1` -- moved to react: `^16.0.0` -- moved to reactstrap: `^5.0.0-alpha.3` -- moved to react-text-mask-hoc: `^0.10.4` -- moved from deprecated CardBlock to `CardBody` reactstrap component -- moved to `NavDropdown` in `Header` component -- fix for app-header navbar-nav dropdown-menu-right -- fix typo in Tables component PaginationItem - -###### `v1.0.0` -- Sidebar component: - - item with optional class (_nav.js) - - nav link with optional variant (_nav.js) - - external urls allowed (_nav.js) - - optional SidebarFooter, SidebarHeader, SidebarForm components -- SidebarMinimizer component -- .brand-minimized -- .sidebar-minimized, -- Header component - sidebarMinimize -- react-transition-group downgrade to v1 : (modals and alerts reactstrap:v4.8 issue) - -###### `2017.08.24` -- webpack.config env.prod -- Dashboard .dropdown-menu-right temp.scss hotfix (full) -- callout.scss .chart-wrapper hotfix (full) - -###### `2017.08.11` -- Bootstrap 4 beta -- Dashboard component (full): - - line chart for social box - - sparkline chart for callout - -###### `2017.08.01` -- Sidebar component: - - title item with optional wrapper and class (_nav.js) - - nav link item with optional badge - - code refactoring - -###### `2017.07.31` -- moved to [reactstrap](https://reactstrap.github.io/) -- moved to [webpack](https://webpack.js.org/) (dropping gulp) -- data driven Sidebar component (_nav.js) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index fd1faf199..000000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,172 +0,0 @@ -# Contributing to CoreUI Free React Admin Template - -Looking to contribute something to CoreUI Free React Admin Template? **Here's how you can help.** - -Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved. - -Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue or assessing patches and features. - -## Using the issue tracker - -The [issue tracker](https://github.com/coreui/coreui-free-react-admin-template/issues) is the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) and [submitting pull requests](#pull-requests), but please respect the following restrictions: - -* Please **do not** use the issue tracker for personal support requests. - -* Please **do not** post comments consisting solely of "+1" or ":thumbsup:". - Use [GitHub's "reactions" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments) - instead. - -* Please **do not** open issues or pull requests regarding the code in [`@coreui/coreui`](https://github.com/coreui/coreui-react) (open them in their respective repositories). - -## Bug reports - -A bug is a _demonstrable problem_ that is caused by the code in the repository. -Good bug reports are extremely helpful, so thanks! - -Guidelines for bug reports: - -0. **Validate and lint your code** — to ensure your problem isn't caused by a simple error in your own code. - -1. **Use the GitHub issue search** — check if the issue has already been reported. - -2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` or development branch in the repository. - -3. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example. [This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template. - - -A good bug report shouldn't leave others needing to chase you up for more -information. Please try to be as detailed as possible in your report. What is -your environment? What steps will reproduce the issue? What browser(s) and OS -experience the problem? Do other browsers show the bug differently? What -would you expect to be the outcome? All these details will help people to fix -any potential bugs. - -Example: - -> Short and descriptive example bug report title -> -> A summary of the issue and the browser/OS environment in which it occurs. If -> suitable, include the steps required to reproduce the bug. -> -> 1. This is the first step -> 2. This is the second step -> 3. Further steps, etc. -> -> `` - a link to the reduced test case -> -> Any other information you want to share that is relevant to the issue being -> reported. This might include the lines of code that you have identified as -> causing the bug, and potential solutions (and your opinions on their -> merits). - -## Feature requests - -Feature requests are welcome. Before opening a feature request, please take a moment to find out whether your idea -fits with the scope and aims of the project. It's up to *you* to make a strong -case to convince the project's developers of the merits of this feature. Please -provide as much detail and context as possible. - - -## Pull requests - -Good pull requests—patches, improvements, new features—are a fantastic -help. They should remain focused in scope and avoid containing unrelated -commits. - -**Please ask first** before embarking on any significant pull request (e.g. -implementing features, refactoring code, porting to a different language), -otherwise you risk spending a lot of time working on something that the -project's developers might not want to merge into the project. - -Adhering to the following process is the best way to get your work -included in the project: - -1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork, - and configure the remotes: - - ```bash - # Clone your fork of the repo into the current directory - git clone https://github.com//free-react-admin-template.git - # Navigate to the newly cloned directory - cd free-react-admin-template - # Assign the original repo to a remote called "upstream" - git remote add upstream https://github.com/coreui/coreui-free-react-admin-template.git - ``` - -2. If you cloned a while ago, get the latest changes from upstream: - - ```bash - git checkout master - git pull upstream master - ``` - -3. Create a new topic branch (off the main project development branch) to - contain your feature, change, or fix: - - ```bash - git checkout -b - ``` - -4. Commit your changes in logical chunks. Please adhere to these [git commit - message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) - or your code is unlikely to be merged into the main project. Use Git's - [interactive rebase](https://help.github.com/articles/interactive-rebase) - feature to tidy up your commits before making them public. - -5. Locally merge (or rebase) the upstream development branch into your topic branch: - - ```bash - git pull [--rebase] upstream master - ``` - -6. Push your topic branch up to your fork: - - ```bash - git push origin - ``` - -7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) with a clear title and description against the `master` branch. - -**IMPORTANT**: By submitting a patch, you agree to allow the project owners to license your work under the terms of the [MIT License](LICENSE). - -### Semantic Git commit messages - -Inspired by Sparkbox's awesome article on [semantic commit messages](http://seesparkbox.com/foundry/semantic_commit_messages). Please use following commit message format. - -* chore (updating npm tasks etc; no production code change) -> ```git test -m 'chore: commit-message-here'``` -* docs (changes to documentation) -> ```git commit -m 'docs: commit-message-here'``` -* feat (new feature) -> ```git commit -m 'feat: commit-message-here'``` -* fix (bug fix) -> ```git commit -m 'fix: commit-message-here'``` -* refactor (refactoring production code) -> ```git commit -m 'refactor: commit-message-here'``` -* style (formatting, missing semi colons, etc; no code change) -> ```git commit -m 'style: commit-message-here'``` -* test (adding missing tests, refactoring tests; no production code change) -> ```git test -m 'refactor: commit-message-here'``` - - -## Code guidelines - -### HTML - -[Adhere to the Code Guide.](http://codeguide.co/#html) - -- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags). -- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`. -- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility. - -### CSS - -[Adhere to the Code Guide.](http://codeguide.co/#css) - -- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast). -- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines) for more details. - -### JS - -- No semicolons (in client-side JS) -- 2 spaces (no tabs) -- strict mode -- "Attractive" -- Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](http://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](http://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded. - -## License - -By contributing your code, you agree to license your contribution under the [MIT License](LICENSE). diff --git a/CRA.md b/CRA.md deleted file mode 100644 index 13dabe01b..000000000 --- a/CRA.md +++ /dev/null @@ -1,2473 +0,0 @@ -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). - -Below you will find some information on how to perform common tasks.
-You can find the most recent version of this guide [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md). - -## Table of Contents - -- [Updating to New Releases](#updating-to-new-releases) -- [Sending Feedback](#sending-feedback) -- [Folder Structure](#folder-structure) -- [Available Scripts](#available-scripts) - - [npm start](#npm-start) - - [npm test](#npm-test) - - [npm run build](#npm-run-build) - - [npm run eject](#npm-run-eject) -- [Supported Browsers](#supported-browsers) -- [Supported Language Features](#supported-language-features) -- [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor) -- [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor) -- [Debugging in the Editor](#debugging-in-the-editor) -- [Formatting Code Automatically](#formatting-code-automatically) -- [Changing the Page ``](#changing-the-page-title) -- [Installing a Dependency](#installing-a-dependency) -- [Importing a Component](#importing-a-component) -- [Code Splitting](#code-splitting) -- [Adding a Stylesheet](#adding-a-stylesheet) -- [Adding a CSS Modules Stylesheet](#adding-a-css-modules-stylesheet) -- [Adding a Sass Stylesheet](#adding-a-sass-stylesheet) -- [Post-Processing CSS](#post-processing-css) -- [Adding Images, Fonts, and Files](#adding-images-fonts-and-files) -- [Adding SVGs](#adding-svgs) -- [Using the `public` Folder](#using-the-public-folder) - - [Changing the HTML](#changing-the-html) - - [Adding Assets Outside of the Module System](#adding-assets-outside-of-the-module-system) - - [When to Use the `public` Folder](#when-to-use-the-public-folder) -- [Using Global Variables](#using-global-variables) -- [Adding Bootstrap](#adding-bootstrap) - - [Using a Custom Theme](#using-a-custom-theme) -- [Adding Flow](#adding-flow) -- [Adding a Router](#adding-a-router) -- [Adding Custom Environment Variables](#adding-custom-environment-variables) - - [Referencing Environment Variables in the HTML](#referencing-environment-variables-in-the-html) - - [Adding Temporary Environment Variables In Your Shell](#adding-temporary-environment-variables-in-your-shell) - - [Adding Development Environment Variables In `.env`](#adding-development-environment-variables-in-env) -- [Can I Use Decorators?](#can-i-use-decorators) -- [Fetching Data with AJAX Requests](#fetching-data-with-ajax-requests) -- [Integrating with an API Backend](#integrating-with-an-api-backend) - - [Node](#node) - - [Ruby on Rails](#ruby-on-rails) -- [Proxying API Requests in Development](#proxying-api-requests-in-development) - - ["Invalid Host Header" Errors After Configuring Proxy](#invalid-host-header-errors-after-configuring-proxy) - - [Configuring the Proxy Manually](#configuring-the-proxy-manually) -- [Using HTTPS in Development](#using-https-in-development) -- [Generating Dynamic `<meta>` Tags on the Server](#generating-dynamic-meta-tags-on-the-server) -- [Pre-Rendering into Static HTML Files](#pre-rendering-into-static-html-files) -- [Injecting Data from the Server into the Page](#injecting-data-from-the-server-into-the-page) -- [Running Tests](#running-tests) - - [Filename Conventions](#filename-conventions) - - [Command Line Interface](#command-line-interface) - - [Version Control Integration](#version-control-integration) - - [Writing Tests](#writing-tests) - - [Testing Components](#testing-components) - - [Using Third Party Assertion Libraries](#using-third-party-assertion-libraries) - - [Initializing Test Environment](#initializing-test-environment) - - [Focusing and Excluding Tests](#focusing-and-excluding-tests) - - [Coverage Reporting](#coverage-reporting) - - [Continuous Integration](#continuous-integration) - - [Disabling jsdom](#disabling-jsdom) - - [Snapshot Testing](#snapshot-testing) - - [Editor Integration](#editor-integration) -- [Debugging Tests](#debugging-tests) - - [Debugging Tests in Chrome](#debugging-tests-in-chrome) - - [Debugging Tests in Visual Studio Code](#debugging-tests-in-visual-studio-code) -- [Developing Components in Isolation](#developing-components-in-isolation) - - [Getting Started with Storybook](#getting-started-with-storybook) - - [Getting Started with Styleguidist](#getting-started-with-styleguidist) -- [Publishing Components to npm](#publishing-components-to-npm) -- [Making a Progressive Web App](#making-a-progressive-web-app) - - [Why Opt-in?](#why-opt-in) - - [Offline-First Considerations](#offline-first-considerations) - - [Progressive Web App Metadata](#progressive-web-app-metadata) -- [Analyzing the Bundle Size](#analyzing-the-bundle-size) -- [Deployment](#deployment) - - [Static Server](#static-server) - - [Other Solutions](#other-solutions) - - [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing) - - [Building for Relative Paths](#building-for-relative-paths) - - [Customizing Environment Variables for Arbitrary Build Environments](#customizing-environment-variables-for-arbitrary-build-environments) - - [Azure](#azure) - - [Firebase](#firebase) - - [GitHub Pages](#github-pages) - - [Heroku](#heroku) - - [Netlify](#netlify) - - [Now](#now) - - [S3 and CloudFront](#s3-and-cloudfront) - - [Surge](#surge) -- [Advanced Configuration](#advanced-configuration) -- [Troubleshooting](#troubleshooting) - - [`npm start` doesn’t detect changes](#npm-start-doesnt-detect-changes) - - [`npm test` hangs or crashes on macOS Sierra](#npm-test-hangs-or-crashes-on-macos-sierra) - - [`npm run build` exits too early](#npm-run-build-exits-too-early) - - [`npm run build` fails on Heroku](#npm-run-build-fails-on-heroku) - - [`npm run build` fails to minify](#npm-run-build-fails-to-minify) - - [Moment.js locales are missing](#momentjs-locales-are-missing) -- [Alternatives to Ejecting](#alternatives-to-ejecting) -- [Something Missing?](#something-missing) - -## Updating to New Releases - -Create React App is divided into two packages: - -- `create-react-app` is a global command-line utility that you use to create new projects. -- `react-scripts` is a development dependency in the generated projects (including this one). - -You almost never need to update `create-react-app` itself: it delegates all the setup to `react-scripts`. - -When you run `create-react-app`, it always creates the project with the latest version of `react-scripts` so you’ll get all the new features and improvements in newly created apps automatically. - -To update an existing project to a new version of `react-scripts`, [open the changelog](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md), find the version you’re currently on (check `package.json` in this folder if you’re not sure), and apply the migration instructions for the newer versions. - -In most cases bumping the `react-scripts` version in `package.json` and running `npm install` (or `yarn install`) in this folder should be enough, but it’s good to consult the [changelog](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md) for potential breaking changes. - -We commit to keeping the breaking changes minimal so you can upgrade `react-scripts` painlessly. - -## Sending Feedback - -We are always open to [your feedback](https://github.com/facebook/create-react-app/issues). - -## Folder Structure - -After creation, your project should look like this: - -``` -my-app/ - README.md - node_modules/ - package.json - public/ - index.html - favicon.ico - src/ - App.css - App.js - App.test.js - index.css - index.js - logo.svg -``` - -For the project to build, **these files must exist with exact filenames**: - -- `public/index.html` is the page template; -- `src/index.js` is the JavaScript entry point. - -You can delete or rename the other files. - -You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack.<br> -You need to **put any JS and CSS files inside `src`**, otherwise Webpack won’t see them. - -Only files inside `public` can be used from `public/index.html`.<br> -Read instructions below for using assets from JavaScript and HTML. - -You can, however, create more top-level directories.<br> -They will not be included in the production build so you can use them for things like documentation. - -## Available Scripts - -In the project directory, you can run: - -### `npm start` - -Runs the app in the development mode.<br> -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.<br> -You will also see any lint errors in the console. - -### `npm test` - -Launches the test runner in the interactive watch mode.<br> -See the section about [running tests](#running-tests) for more information. - -### `npm run build` - -Builds the app for production to the `build` folder.<br> -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.<br> -Your app is ready to be deployed! - -See the section about [deployment](#deployment) for more information. - -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** - -If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. - -You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. - -## Supported Browsers - -By default, the generated project supports all modern browsers.<br> -Support for Internet Explorer 9, 10, and 11 requires [polyfills](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md). - -### Supported Language Features - -This project supports a superset of the latest JavaScript standard.<br> -In addition to [ES6](https://github.com/lukehoban/es6features) syntax features, it also supports: - -- [Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator) (ES2016). -- [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017). -- [Object Rest/Spread Properties](https://github.com/tc39/proposal-object-rest-spread) (ES2018). -- [Dynamic import()](https://github.com/tc39/proposal-dynamic-import) (stage 3 proposal) -- [Class Fields and Static Properties](https://github.com/tc39/proposal-class-public-fields) (part of stage 3 proposal). -- [JSX](https://facebook.github.io/react/docs/introducing-jsx.html) and [Flow](https://flow.org/) syntax. - -Learn more about [different proposal stages](https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-). - -While we recommend using experimental proposals with some caution, Facebook heavily uses these features in the product code, so we intend to provide [codemods](https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb) if any of these proposals change in the future. - -Note that **this project includes no [polyfills](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md)** by default. - -If you use any other ES6+ features that need **runtime support** (such as `Array.from()` or `Symbol`), make sure you are [including the appropriate polyfills manually](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md), or that the browsers you are targeting already support them. - -## Syntax Highlighting in the Editor - -To configure the syntax highlighting in your favorite text editor, head to the [relevant Babel documentation page](https://babeljs.io/docs/editors) and follow the instructions. Some of the most popular editors are covered. - -## Displaying Lint Output in the Editor - -> Note: this feature is available with `react-scripts@0.2.0` and higher.<br> -> It also only works with npm 3 or higher. - -Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. - -They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do. - -You would need to install an ESLint plugin for your editor first. Then, add a file called `.eslintrc` to the project root: - -```js -{ - "extends": "react-app" -} -``` - -Now your editor should report the linting warnings. - -Note that even if you edit your `.eslintrc` file further, these changes will **only affect the editor integration**. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes. - -If you want to enforce a coding style for your project, consider using [Prettier](https://github.com/jlongster/prettier) instead of ESLint style rules. - -## Debugging in the Editor - -**This feature is currently only supported by [Visual Studio Code](https://code.visualstudio.com) and [WebStorm](https://www.jetbrains.com/webstorm/).** - -Visual Studio Code and WebStorm support debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools. - -### Visual Studio Code - -You would need to have the latest version of [VS Code](https://code.visualstudio.com) and VS Code [Chrome Debugger Extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) installed. - -Then add the block below to your `launch.json` file and put it inside the `.vscode` folder in your app’s root directory. - -```json -{ - "version": "0.2.0", - "configurations": [ - { - "name": "Chrome", - "type": "chrome", - "request": "launch", - "url": "http://localhost:3000", - "webRoot": "${workspaceRoot}/src", - "sourceMapPathOverrides": { - "webpack:///src/*": "${webRoot}/*" - } - } - ] -} -``` - -> Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration). - -Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor. - -Having problems with VS Code Debugging? Please see their [troubleshooting guide](https://github.com/Microsoft/vscode-chrome-debug/blob/master/README.md#troubleshooting). - -### WebStorm - -You would need to have [WebStorm](https://www.jetbrains.com/webstorm/) and [JetBrains IDE Support](https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji) Chrome extension installed. - -In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and select `JavaScript Debug`. Paste `http://localhost:3000` into the URL field and save the configuration. - -> Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration). - -Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm. - -The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine. - -## Formatting Code Automatically - -Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's GitHub page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.github.io/prettier/). - -To format our code whenever we make a commit in git, we need to install the following dependencies: - -```sh -npm install --save husky lint-staged prettier -``` - -Alternatively you may use `yarn`: - -```sh -yarn add husky lint-staged prettier -``` - -- `husky` makes it easy to use githooks as if they are npm scripts. -- `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8). -- `prettier` is the JavaScript formatter we will run before commits. - -Now we can make sure every file is formatted correctly by adding a few lines to the `package.json` in the project root. - -Add the following field to the `package.json` section: - -```diff -+ "husky": { -+ "hooks": { -+ "pre-commit": "lint-staged" -+ } -+ } -``` - -Next we add a 'lint-staged' field to the `package.json`, for example: - -```diff - "dependencies": { - // ... - }, -+ "lint-staged": { -+ "src/**/*.{js,jsx,json,css}": [ -+ "prettier --single-quote --write", -+ "git add" -+ ] -+ }, - "scripts": { -``` - -Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run `./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}"` to format your entire project for the first time. - -Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://prettier.io/docs/en/editors.html) on the Prettier GitHub page. - -## Changing the Page `<title>` - -You can find the source HTML file in the `public` folder of the generated project. You may edit the `<title>` tag in it to change the title from “React App” to anything else. - -Note that normally you wouldn’t edit files in the `public` folder very often. For example, [adding a stylesheet](#adding-a-stylesheet) is done without touching the HTML. - -If you need to dynamically update the page title based on the content, you can use the browser [`document.title`](https://developer.mozilla.org/en-US/docs/Web/API/Document/title) API. For more complex scenarios when you want to change the title from React components, you can use [React Helmet](https://github.com/nfl/react-helmet), a third party library. - -If you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in [this section](#generating-dynamic-meta-tags-on-the-server). Alternatively, you can pre-build each page as a static HTML file which then loads the JavaScript bundle, which is covered [here](#pre-rendering-into-static-html-files). - -## Installing a Dependency - -The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) with `npm`: - -```sh -npm install --save react-router-dom -``` - -Alternatively you may use `yarn`: - -```sh -yarn add react-router-dom -``` - -This works for any library, not just `react-router-dom`. - -## Importing a Component - -This project setup supports ES6 modules thanks to Webpack.<br> -While you can still use `require()` and `module.exports`, we encourage you to use [`import` and `export`](http://exploringjs.com/es6/ch_modules.html) instead. - -For example: - -### `Button.js` - -```js -import React, { Component } from 'react'; - -class Button extends Component { - render() { - // ... - } -} - -export default Button; // Don’t forget to use export default! -``` - -### `DangerButton.js` - -```js -import React, { Component } from 'react'; -import Button from './Button'; // Import a component from another file - -class DangerButton extends Component { - render() { - return <Button color="red" />; - } -} - -export default DangerButton; -``` - -Be aware of the [difference between default and named exports](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281). It is a common source of mistakes. - -We suggest that you stick to using default imports and exports when a module only exports a single thing (for example, a component). That’s what you get when you use `export default Button` and `import Button from './Button'`. - -Named exports are useful for utility modules that export several functions. A module may have at most one default export and as many named exports as you like. - -Learn more about ES6 modules: - -- [When to use the curly braces?](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281) -- [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html) -- [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules) - -## Code Splitting - -Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand. - -This project setup supports code splitting via [dynamic `import()`](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand). Its [proposal](https://github.com/tc39/proposal-dynamic-import) is in stage 3. The `import()` function-like form takes the module name as an argument and returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which always resolves to the namespace object of the module. - -Here is an example: - -### `moduleA.js` - -```js -const moduleA = 'Hello'; - -export { moduleA }; -``` - -### `App.js` - -```js -import React, { Component } from 'react'; - -class App extends Component { - handleClick = () => { - import('./moduleA') - .then(({ moduleA }) => { - // Use moduleA - }) - .catch(err => { - // Handle failure - }); - }; - - render() { - return ( - <div> - <button onClick={this.handleClick}>Load</button> - </div> - ); - } -} - -export default App; -``` - -This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button. - -You can also use it with `async` / `await` syntax if you prefer it. - -### With React Router - -If you are using React Router check out [this tutorial](http://serverless-stack.com/chapters/code-splitting-in-create-react-app.html) on how to use code splitting with it. You can find the companion GitHub repository [here](https://github.com/AnomalyInnovations/serverless-stack-demo-client/tree/code-splitting-in-create-react-app). - -Also check out the [Code Splitting](https://reactjs.org/docs/code-splitting.html) section in React documentation. - -## Adding a Stylesheet - -This project setup uses [Webpack](https://webpack.js.org/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**: - -### `Button.css` - -```css -.Button { - padding: 20px; -} -``` - -### `Button.js` - -```js -import React, { Component } from 'react'; -import './Button.css'; // Tell Webpack that Button.js uses these styles - -class Button extends Component { - render() { - // You can use them as regular CSS styles - return <div className="Button" />; - } -} -``` - -**This is not required for React** but many people find this feature convenient. You can read about the benefits of this approach [here](https://medium.com/seek-blog/block-element-modifying-your-javascript-components-d7f99fcab52b). However you should be aware that this makes your code less portable to other build tools and environments than Webpack. - -In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified `.css` file in the build output. - -If you are concerned about using Webpack-specific semantics, you can put all your CSS right into `src/index.css`. It would still be imported from `src/index.js`, but you could always remove that import if you later migrate to a different build tool. - -## Adding a CSS Modules Stylesheet - -> Note: this feature is available with `react-scripts@2.0.0` and higher. - -This project supports [CSS Modules](https://github.com/css-modules/css-modules) alongside regular stylesheets using the `[name].module.css` file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format `[filename]\_[classname]\_\_[hash]`. - -> **Tip:** Should you want to preprocess a stylesheet with Sass then make sure to [follow the installation instructions](#adding-a-sass-stylesheet) and then change the stylesheet file extension as follows: `[name].module.scss` or `[name].module.sass`. - -CSS Modules let you use the same CSS class name in different files without worrying about naming clashes. Learn more about CSS Modules [here](https://css-tricks.com/css-modules-part-1-need/). - -### `Button.module.css` - -```css -.error { - background-color: red; -} -``` - -### `another-stylesheet.css` - -```css -.error { - color: red; -} -``` - -### `Button.js` - -```js -import React, { Component } from 'react'; -import styles from './Button.module.css'; // Import css modules stylesheet as styles -import './another-stylesheet.css'; // Import regular stylesheet - -class Button extends Component { - render() { - // reference as a js object - return <button className={styles.error}>Error Button</button>; - } -} -``` - -### Result - -No clashes from other `.error` class names - -```html -<!-- This button has red background but not red text --> -<button class="Button_error_ax7yz"></div> -``` - -**This is an optional feature.** Regular `<link>` stylesheets and CSS files are fully supported. CSS Modules are turned on for files ending with the `.module.css` extension. - -## Adding a Sass Stylesheet - -> Note: this feature is available with `react-scripts@2.0.0` and higher. - -Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a `.Button` CSS class in `<AcceptButton>` and `<RejectButton>` components, we recommend creating a `<Button>` component with its own `.Button` styles, that both `<AcceptButton>` and `<RejectButton>` can render (but [not inherit](https://facebook.github.io/react/docs/composition-vs-inheritance.html)). - -Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition. You can, however, integrate a CSS preprocessor if you find it valuable. - -To use Sass, first install `node-sass`: - -```bash -$ npm install node-sass --save -$ # or -$ yarn add node-sass -``` - -Now you can rename `src/App.css` to `src/App.scss` and update `src/App.js` to import `src/App.scss`. -This file and any other file will be automatically compiled if imported with the extension `.scss` or `.sass`. - -To share variables between Sass files, you can use Sass imports. For example, `src/App.scss` and other component style files could include `@import "./shared.scss";` with variable definitions. - -This will allow you to do imports like - -```scss -@import 'styles/_colors.scss'; // assuming a styles directory under src/ -@import '~nprogress/nprogress'; // importing a css file from the nprogress node module -``` - -> **Tip:** You can opt into using this feature with [CSS modules](#adding-a-css-modules-stylesheet) too! - -> **Note:** You must prefix imports from `node_modules` with `~` as displayed above. - -## Post-Processing CSS - -This project setup minifies your CSS and adds vendor prefixes to it automatically through [Autoprefixer](https://github.com/postcss/autoprefixer) so you don’t need to worry about it. - -Support for new CSS features like the [`all` property](https://developer.mozilla.org/en-US/docs/Web/CSS/all), [`break` properties](https://www.w3.org/TR/css-break-3/#breaking-controls), [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), and [media query ranges](https://www.w3.org/TR/mediaqueries-4/#range-context) are automatically polyfilled to add support for older browsers. - -You can customize your target support browsers by adjusting the `browserslist` key in `package.json` accoring to the [Browserslist specification](https://github.com/browserslist/browserslist#readme). - -For example, this: - -```css -.App { - display: flex; - flex-direction: row; - align-items: center; -} -``` - -becomes this: - -```css -.App { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} -``` - -If you need to disable autoprefixing for some reason, [follow this section](https://github.com/postcss/autoprefixer#disabling). - -[CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) prefixing is disabled by default, but it will **not** strip manual prefixing. -If you'd like to opt-in to CSS Grid prefixing, [first familiarize yourself about its limitations](https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie).<br> -To enable CSS Grid prefixing, add `/* autoprefixer grid: on */` to the top of your CSS file. - -## Adding Images, Fonts, and Files - -With Webpack, using static assets like images and fonts works similarly to CSS. - -You can **`import` a file right in a JavaScript module**. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the `src` attribute of an image or the `href` of a link to a PDF. - -To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to [#1153](https://github.com/facebook/create-react-app/issues/1153). - -Here is an example: - -```js -import React from 'react'; -import logo from './logo.png'; // Tell Webpack this JS file uses this image - -console.log(logo); // /logo.84287d09.png - -function Header() { - // Import result is the URL of your image - return <img src={logo} alt="Logo" />; -} - -export default Header; -``` - -This ensures that when the project is built, Webpack will correctly move the images into the build folder, and provide us with correct paths. - -This works in CSS too: - -```css -.Logo { - background-image: url(./logo.png); -} -``` - -Webpack finds all relative module references in CSS (they start with `./`) and replaces them with the final paths from the compiled bundle. If you make a typo or accidentally delete an important file, you will see a compilation error, just like when you import a non-existent JavaScript module. The final filenames in the compiled bundle are generated by Webpack from content hashes. If the file content changes in the future, Webpack will give it a different name in production so you don’t need to worry about long-term caching of assets. - -Please be advised that this is also a custom feature of Webpack. - -**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).<br> -An alternative way of handling static assets is described in the next section. - -### Adding SVGs - -> Note: this feature is available with `react-scripts@2.0.0` and higher. - -One way to add SVG files was described in the section above. You can also import SVGs directly as React components. You can use either of the two approaches. In your code it would look like this: - -```js -import { ReactComponent as Logo } from './logo.svg'; -const App = () => ( - <div> - {/* Logo is an actual React component */} - <Logo /> - </div> -); -``` - -This is handy if you don't want to load SVG as a separate file. Don't forget the curly braces in the import! The `ReactComponent` import name is special and tells Create React App that you want a React component that renders an SVG, rather than its filename. - -## Using the `public` Folder - -> Note: this feature is available with `react-scripts@0.5.0` and higher. - -### Changing the HTML - -The `public` folder contains the HTML file so you can tweak it, for example, to [set the page title](#changing-the-page-title). -The `<script>` tag with the compiled code will be added to it automatically during the build process. - -### Adding Assets Outside of the Module System - -You can also add other assets to the `public` folder. - -Note that we normally encourage you to `import` assets in JavaScript files instead. -For example, see the sections on [adding a stylesheet](#adding-a-stylesheet) and [adding images and fonts](#adding-images-fonts-and-files). -This mechanism provides a number of benefits: - -- Scripts and stylesheets get minified and bundled together to avoid extra network requests. -- Missing files cause compilation errors instead of 404 errors for your users. -- Result filenames include content hashes so you don’t need to worry about browsers caching their old versions. - -However there is an **escape hatch** that you can use to add an asset outside of the module system. - -If you put a file into the `public` folder, it will **not** be processed by Webpack. Instead it will be copied into the build folder untouched. To reference assets in the `public` folder, you need to use a special variable called `PUBLIC_URL`. - -Inside `index.html`, you can use it like this: - -```html -<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> -``` - -Only files inside the `public` folder will be accessible by `%PUBLIC_URL%` prefix. If you need to use a file from `src` or `node_modules`, you’ll have to copy it there to explicitly specify your intention to make this file a part of the build. - -When you run `npm run build`, Create React App will substitute `%PUBLIC_URL%` with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL. - -In JavaScript code, you can use `process.env.PUBLIC_URL` for similar purposes: - -```js -render() { - // Note: this is an escape hatch and should be used sparingly! - // Normally we recommend using `import` for getting asset URLs - // as described in “Adding Images and Fonts” above this section. - return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; -} -``` - -Keep in mind the downsides of this approach: - -- None of the files in `public` folder get post-processed or minified. -- Missing files will not be called at compilation time, and will cause 404 errors for your users. -- Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change. - -### When to Use the `public` Folder - -Normally we recommend importing [stylesheets](#adding-a-stylesheet), [images, and fonts](#adding-images-fonts-and-files) from JavaScript. -The `public` folder is useful as a workaround for a number of less common cases: - -- You need a file with a specific name in the build output, such as [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest). -- You have thousands of images and need to dynamically reference their paths. -- You want to include a small script like [`pace.js`](http://github.hubspot.com/pace/docs/welcome/) outside of the bundled code. -- Some library may be incompatible with Webpack and you have no other option but to include it as a `<script>` tag. - -Note that if you add a `<script>` that declares global variables, you also need to read the next section on using them. - -## Using Global Variables - -When you include a script in the HTML file that defines global variables and try to use one of these variables in the code, the linter will complain because it cannot see the definition of the variable. - -You can avoid this by reading the global variable explicitly from the `window` object, for example: - -```js -const $ = window.$; -``` - -This makes it obvious you are using a global variable intentionally rather than because of a typo. - -Alternatively, you can force the linter to ignore any line by adding `// eslint-disable-line` after it. - -## Adding Bootstrap - -You don’t have to use [reactstrap](https://reactstrap.github.io/) together with React but it is a popular library for integrating Bootstrap with React apps. If you need it, you can integrate it with Create React App by following these steps: - -Install reactstrap and Bootstrap from npm. reactstrap does not include Bootstrap CSS so this needs to be installed as well: - -```sh -npm install --save reactstrap bootstrap@4 -``` - -Alternatively you may use `yarn`: - -```sh -yarn add bootstrap@4 reactstrap -``` - -Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your `src/index.js` file: - -```js -import 'bootstrap/dist/css/bootstrap.css'; -// Put any other imports below so that CSS from your -// components takes precedence over default styles. -``` - -Import required reactstrap components within `src/App.js` file or your custom component files: - -```js -import { Button } from 'reactstrap'; -``` - -Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render method. Here is an example [`App.js`](https://gist.githubusercontent.com/zx6658/d9f128cd57ca69e583ea2b5fea074238/raw/a56701c142d0c622eb6c20a457fbc01d708cb485/App.js) redone using reactstrap. - -### Using a Custom Theme - -> Note: this feature is available with `react-scripts@2.0.0` and higher. - -Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package).<br> -As of `react-scripts@2.0.0` you can import `.scss` files. This makes it possible to use a package's built-in Sass variables for global style preferences. - -To customize Bootstrap, create a file called `src/custom.scss` (or similar) and import the Bootstrap source stylesheet. Add any overrides _before_ the imported file(s). You can reference [Bootstrap's documentation](http://getbootstrap.com/docs/4.1/getting-started/theming/#css-variables) for the names of the available variables. - -```scss -// Override default variables before the import -$body-bg: #000; - -// Import Bootstrap and its default variables -@import '~bootstrap/scss/bootstrap.scss'; -``` - -> **Note:** You must prefix imports from `node_modules` with `~` as displayed above. - -Finally, import the newly created `.scss` file instead of the default Bootstrap `.css` in the beginning of your `src/index.js` file, for example: - -```javascript -import './custom.scss'; -``` - -## Adding Flow - -Flow is a static type checker that helps you write code with fewer bugs. Check out this [introduction to using static types in JavaScript](https://medium.com/@preethikasireddy/why-use-static-types-in-javascript-part-1-8382da1e0adb) if you are new to this concept. - -Recent versions of [Flow](https://flow.org/) work with Create React App projects out of the box. - -To add Flow to a Create React App project, follow these steps: - -1. Run `npm install --save flow-bin` (or `yarn add flow-bin`). -2. Add `"flow": "flow"` to the `scripts` section of your `package.json`. -3. Run `npm run flow init` (or `yarn flow init`) to create a [`.flowconfig` file](https://flow.org/en/docs/config/) in the root directory. -4. Add `// @flow` to any files you want to type check (for example, to `src/App.js`). - -Now you can run `npm run flow` (or `yarn flow`) to check the files for type errors. -You can optionally use an IDE like [Nuclide](https://nuclide.io/docs/languages/flow/) for a better integrated experience. -In the future we plan to integrate it into Create React App even more closely. - -To learn more about Flow, check out [its documentation](https://flow.org/). - -## Adding a Router - -Create React App doesn't prescribe a specific routing solution, but [React Router](https://reacttraining.com/react-router/web/) is the most popular one. - -To add it, run: - -```sh -npm install --save react-router-dom -``` - -Alternatively you may use `yarn`: - -```sh -yarn add react-router-dom -``` - -To try it, delete all the code in `src/App.js` and replace it with any of the examples on its website. The [Basic Example](https://reacttraining.com/react-router/web/example/basic) is a good place to get started. - -Note that [you may need to configure your production server to support client-side routing](#serving-apps-with-client-side-routing) before deploying your app. - -## Adding Custom Environment Variables - -> Note: this feature is available with `react-scripts@0.2.3` and higher. - -Your project can consume variables declared in your environment as if they were declared locally in your JS files. By -default you will have `NODE_ENV` defined for you, and any other environment variables starting with -`REACT_APP_`. - -**The environment variables are embedded during the build time**. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, just like [described here](#injecting-data-from-the-server-into-the-page). Alternatively you can rebuild the app on the server anytime you change them. - -> Note: You must create custom environment variables beginning with `REACT_APP_`. Any other variables except `NODE_ENV` will be ignored to avoid accidentally [exposing a private key on the machine that could have the same name](https://github.com/facebook/create-react-app/issues/865#issuecomment-252199527). Changing any environment variables will require you to restart the development server if it is running. - -These environment variables will be defined for you on `process.env`. For example, having an environment -variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`. - -There is also a special built-in environment variable called `NODE_ENV`. You can read it from `process.env.NODE_ENV`. When you run `npm start`, it is always equal to `'development'`, when you run `npm test` it is always equal to `'test'`, and when you run `npm run build` to make a production bundle, it is always equal to `'production'`. **You cannot override `NODE_ENV` manually.** This prevents developers from accidentally deploying a slow development build to production. - -These environment variables can be useful for displaying information conditionally based on where the project is -deployed or consuming sensitive data that lives outside of version control. - -First, you need to have environment variables defined. For example, let’s say you wanted to consume a secret defined -in the environment inside a `<form>`: - -```jsx -render() { - return ( - <div> - <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small> - <form> - <input type="hidden" defaultValue={process.env.REACT_APP_SECRET_CODE} /> - </form> - </div> - ); -} -``` - -During the build, `process.env.REACT_APP_SECRET_CODE` will be replaced with the current value of the `REACT_APP_SECRET_CODE` environment variable. Remember that the `NODE_ENV` variable will be set for you automatically. - -When you load the app in the browser and inspect the `<input>`, you will see its value set to `abcdef`, and the bold text will show the environment provided when using `npm start`: - -```html -<div> - <small>You are running this application in <b>development</b> mode.</small> - <form> - <input type="hidden" value="abcdef" /> - </form> -</div> -``` - -The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the environment. In order to consume this -value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in -a `.env` file. Both of these ways are described in the next few sections. - -Having access to the `NODE_ENV` is also useful for performing actions conditionally: - -```js -if (process.env.NODE_ENV !== 'production') { - analytics.disable(); -} -``` - -When you compile the app with `npm run build`, the minification step will strip out this condition, and the resulting bundle will be smaller. - -### Referencing Environment Variables in the HTML - -> Note: this feature is available with `react-scripts@0.9.0` and higher. - -You can also access the environment variables starting with `REACT_APP_` in the `public/index.html`. For example: - -```html -<title>%REACT_APP_WEBSITE_NAME% -``` - -Note that the caveats from the above section apply: - -- Apart from a few built-in variables (`NODE_ENV` and `PUBLIC_URL`), variable names must start with `REACT_APP_` to work. -- The environment variables are injected at build time. If you need to inject them at runtime, [follow this approach instead](#generating-dynamic-meta-tags-on-the-server). - -### Adding Temporary Environment Variables In Your Shell - -Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the -life of the shell session. - -#### Windows (cmd.exe) - -```cmd -set "REACT_APP_SECRET_CODE=abcdef" && npm start -``` - -(Note: Quotes around the variable assignment are required to avoid a trailing whitespace.) - -#### Windows (Powershell) - -```Powershell -($env:REACT_APP_SECRET_CODE = "abcdef") -and (npm start) -``` - -#### Linux, macOS (Bash) - -```bash -REACT_APP_SECRET_CODE=abcdef npm start -``` - -### Adding Development Environment Variables In `.env` - -> Note: this feature is available with `react-scripts@0.5.0` and higher. - -To define permanent environment variables, create a file called `.env` in the root of your project: - -``` -REACT_APP_SECRET_CODE=abcdef -``` - -> Note: You must create custom environment variables beginning with `REACT_APP_`. Any other variables except `NODE_ENV` will be ignored to avoid [accidentally exposing a private key on the machine that could have the same name](https://github.com/facebook/create-react-app/issues/865#issuecomment-252199527). Changing any environment variables will require you to restart the development server if it is running. - -`.env` files **should be** checked into source control (with the exclusion of `.env*.local`). - -#### What other `.env` files can be used? - -> Note: this feature is **available with `react-scripts@1.0.0` and higher**. - -- `.env`: Default. -- `.env.local`: Local overrides. **This file is loaded for all environments except test.** -- `.env.development`, `.env.test`, `.env.production`: Environment-specific settings. -- `.env.development.local`, `.env.test.local`, `.env.production.local`: Local overrides of environment-specific settings. - -Files on the left have more priority than files on the right: - -- `npm start`: `.env.development.local`, `.env.development`, `.env.local`, `.env` -- `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env` -- `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing) - -These variables will act as the defaults if the machine does not explicitly set them.
-Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details. - -> Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need -> these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars). - -#### Expanding Environment Variables In `.env` - -> Note: this feature is available with `react-scripts@1.1.0` and higher. - -Expand variables already on your machine for use in your `.env` file (using [dotenv-expand](https://github.com/motdotla/dotenv-expand)). - -For example, to get the environment variable `npm_package_version`: - -``` -REACT_APP_VERSION=$npm_package_version -# also works: -# REACT_APP_VERSION=${npm_package_version} -``` - -Or expand variables local to the current `.env` file: - -``` -DOMAIN=www.example.com -REACT_APP_FOO=$DOMAIN/foo -REACT_APP_BAR=$DOMAIN/bar -``` - -## Can I Use Decorators? - -Some popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.
-Create React App intentionally doesn’t support decorator syntax at the moment because: - -- It is an experimental proposal and is subject to change (in fact, it has already changed once, and will change again). -- Most libraries currently support only the old version of the proposal — which will never be a standard. - -However in many cases you can rewrite decorator-based code without decorators just as fine.
-Please refer to these two threads for reference: - -- [#214](https://github.com/facebook/create-react-app/issues/214) -- [#411](https://github.com/facebook/create-react-app/issues/411) - -Create React App will add decorator support when the specification advances to a stable stage. - -## Fetching Data with AJAX Requests - -React doesn't prescribe a specific approach to data fetching, but people commonly use either a library like [axios](https://github.com/axios/axios) or the [`fetch()` API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) provided by the browser. - -The global `fetch` function allows you to easily make AJAX requests. It takes in a URL as an input and returns a `Promise` that resolves to a `Response` object. You can find more information about `fetch` [here](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch). - -A Promise represents the eventual result of an asynchronous operation, you can find more information about Promises [here](https://www.promisejs.org/) and [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). Both axios and `fetch()` use Promises under the hood. You can also use the [`async / await`](https://davidwalsh.name/async-await) syntax to reduce the callback nesting. - -Make sure the [`fetch()` API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) are available in your target audience's browsers. -For example, support in Internet Explorer requires a [polyfill](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md). - -You can learn more about making AJAX requests from React components in [the FAQ entry on the React website](https://reactjs.org/docs/faq-ajax.html). - -## Integrating with an API Backend - -These tutorials will help you to integrate your app with an API backend running on another port, -using `fetch()` to access it. - -### Node - -Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/). -You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo). - -### Ruby on Rails - -Check out [this tutorial](https://www.fullstackreact.com/articles/how-to-get-create-react-app-to-work-with-your-rails-api/). -You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo-rails). - -### API Platform (PHP and Symfony) - -[API Platform](https://api-platform.com) is a framework designed to build API-driven projects. -It allows to create hypermedia and GraphQL APIs in minutes. -It is shipped with an official Progressive Web App generator as well as a dynamic administration interface, both built for Create React App. -Check out [this tutorial](https://api-platform.com/docs/distribution). - -## Proxying API Requests in Development - -> Note: this feature is available with `react-scripts@0.2.3` and higher. - -People often serve the front-end React app from the same host and port as their backend implementation.
-For example, a production setup might look like this after the app is deployed: - -``` -/ - static server returns index.html with React app -/todos - static server returns index.html with React app -/api/todos - server handles any /api/* requests using the backend implementation -``` - -Such setup is **not** required. However, if you **do** have a setup like this, it is convenient to write requests like `fetch('/api/todos')` without worrying about redirecting them to another host or port during development. - -To tell the development server to proxy any unknown requests to your API server in development, add a `proxy` field to your `package.json`, for example: - -```js - "proxy": "http://localhost:4000", -``` - -This way, when you `fetch('/api/todos')` in development, the development server will recognize that it’s not a static asset, and will proxy your request to `http://localhost:4000/api/todos` as a fallback. The development server will **only** attempt to send requests without `text/html` in its `Accept` header to the proxy. - -Conveniently, this avoids [CORS issues](http://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations) and error messages like this in development: - -``` -Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. -``` - -Keep in mind that `proxy` only has effect in development (with `npm start`), and it is up to you to ensure that URLs like `/api/todos` point to the right thing in production. You don’t have to use the `/api` prefix. Any unrecognized request without a `text/html` accept header will be redirected to the specified `proxy`. - -The `proxy` option supports HTTP, HTTPS and WebSocket connections.
-If the `proxy` option is **not** flexible enough for you, alternatively you can: - -- [Configure the proxy yourself](#configuring-the-proxy-manually) -- Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)). -- Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app. - -### "Invalid Host Header" Errors After Configuring Proxy - -When you enable the `proxy` option, you opt into a more strict set of host checks. This is necessary because leaving the backend open to remote hosts makes your computer vulnerable to DNS rebinding attacks. The issue is explained in [this article](https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a) and [this issue](https://github.com/webpack/webpack-dev-server/issues/887). - -This shouldn’t affect you when developing on `localhost`, but if you develop remotely like [described here](https://github.com/facebook/create-react-app/issues/2271), you will see this error in the browser after enabling the `proxy` option: - -> Invalid Host header - -To work around it, you can specify your public development host in a file called `.env.development` in the root of your project: - -``` -HOST=mypublicdevhost.com -``` - -If you restart the development server now and load the app from the specified host, it should work. - -If you are still having issues or if you’re using a more exotic environment like a cloud editor, you can bypass the host check completely by adding a line to `.env.development.local`. **Note that this is dangerous and exposes your machine to remote code execution from malicious websites:** - -``` -# NOTE: THIS IS DANGEROUS! -# It exposes your machine to attacks from the websites you visit. -DANGEROUSLY_DISABLE_HOST_CHECK=true -``` - -We don’t recommend this approach. - -### Configuring the Proxy Manually - -> Note: this feature is available with `react-scripts@2.0.0` and higher. - -If the `proxy` option is **not** flexible enough for you, you can get direct access to the Express app instance and hook up your own proxy middleware. - -You can use this feature in conjunction with the `proxy` property in `package.json`, but it is recommended you consolidate all of your logic into `src/setupProxy.js`. - -First, install `http-proxy-middleware` using npm or Yarn: - -```bash -$ npm install http-proxy-middleware --save -$ # or -$ yarn add http-proxy-middleware -``` - -Next, create `src/setupProxy.js` and place the following contents in it: - -```js -const proxy = require('http-proxy-middleware'); - -module.exports = function(app) { - // ... -}; -``` - -You can now register proxies as you wish! Here's an example using the above `http-proxy-middleware`: - -```js -const proxy = require('http-proxy-middleware'); - -module.exports = function(app) { - app.use(proxy('/api', { target: 'http://localhost:5000/' })); -}; -``` - -> **Note:** You do not need to import this file anywhere. It is automatically registered when you start the development server. - -> **Note:** This file only supports Node's JavaScript syntax. Be sure to only use supported language features (i.e. no support for Flow, ES Modules, etc). - -## Using HTTPS in Development - -> Note: this feature is available with `react-scripts@0.4.0` and higher. - -You may require the dev server to serve pages over HTTPS. One particular case where this could be useful is when using [the "proxy" feature](#proxying-api-requests-in-development) to proxy requests to an API server when that API server is itself serving HTTPS. - -To do this, set the `HTTPS` environment variable to `true`, then start the dev server as usual with `npm start`: - -#### Windows (cmd.exe) - -```cmd -set HTTPS=true&&npm start -``` - -(Note: the lack of whitespace is intentional.) - -#### Windows (Powershell) - -```Powershell -($env:HTTPS = $true) -and (npm start) -``` - -#### Linux, macOS (Bash) - -```bash -HTTPS=true npm start -``` - -Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page. - -## Generating Dynamic `` Tags on the Server - -Since Create React App doesn’t support server rendering, you might be wondering how to make `` tags dynamic and reflect the current URL. To solve this, we recommend to add placeholders into the HTML, like this: - -```html - - - - - -``` - -Then, on the server, regardless of the backend you use, you can read `index.html` into memory and replace `__OG_TITLE__`, `__OG_DESCRIPTION__`, and any other placeholders with values depending on the current URL. Just make sure to sanitize and escape the interpolated values so that they are safe to embed into HTML! - -If you use a Node server, you can even share the route matching logic between the client and the server. However duplicating it also works fine in simple cases. - -## Pre-Rendering into Static HTML Files - -If you’re hosting your `build` with a static hosting provider you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot) or [react-snap](https://github.com/stereobooster/react-snap) to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or “hydrated”, when the JavaScript bundle has loaded. - -There are also opportunities to use this outside of static hosting, to take the pressure off the server when generating and caching routes. - -The primary benefit of pre-rendering is that you get the core content of each page _with_ the HTML payload—regardless of whether or not your JavaScript bundle successfully downloads. It also increases the likelihood that each route of your application will be picked up by search engines. - -You can read more about [zero-configuration pre-rendering (also called snapshotting) here](https://medium.com/superhighfives/an-almost-static-stack-6df0a2791319). - -## Injecting Data from the Server into the Page - -Similarly to the previous section, you can leave some placeholders in the HTML that inject global variables, for example: - -```js - - - - -``` - -Then, on the server, you can replace `__SERVER_DATA__` with a JSON of real data right before sending the response. The client code can then read `window.SERVER_DATA` to use it. **Make sure to [sanitize the JSON before sending it to the client](https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0) as it makes your app vulnerable to XSS attacks.** - -## Running Tests - -> Note: this feature is available with `react-scripts@0.3.0` and higher.
- -> [Read the migration guide to learn how to enable it in older projects!](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md#migrating-from-023-to-030) - -Create React App uses [Jest](https://facebook.github.io/jest/) as its test runner. To prepare for this integration, we did a [major revamp](https://facebook.github.io/jest/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try. - -Jest is a Node-based runner. This means that the tests always run in a Node environment and not in a real browser. This lets us enable fast iteration speed and prevent flakiness. - -While Jest provides browser globals such as `window` thanks to [jsdom](https://github.com/tmpvar/jsdom), they are only approximations of the real browser behavior. Jest is intended to be used for unit tests of your logic and your components rather than the DOM quirks. - -We recommend that you use a separate tool for browser end-to-end tests if you need them. They are beyond the scope of Create React App. - -### Filename Conventions - -Jest will look for test files with any of the following popular naming conventions: - -- Files with `.js` suffix in `__tests__` folders. -- Files with `.test.js` suffix. -- Files with `.spec.js` suffix. - -The `.test.js` / `.spec.js` files (or the `__tests__` folders) can be located at any depth under the `src` top level folder. - -We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `App.js` are in the same folder, the test just needs to `import App from './App'` instead of a long relative path. Colocation also helps find tests more quickly in larger projects. - -### Command Line Interface - -When you run `npm test`, Jest will launch in the watch mode. Every time you save a file, it will re-run the tests, just like `npm start` recompiles the code. - -The watcher includes an interactive command-line interface with the ability to run all tests, or focus on a search pattern. It is designed this way so that you can keep it open and enjoy fast re-runs. You can learn the commands from the “Watch Usage” note that the watcher prints after every run: - -![Jest watch mode](http://facebook.github.io/jest/img/blog/15-watch.gif) - -### Version Control Integration - -By default, when you run `npm test`, Jest will only run the tests related to files changed since the last commit. This is an optimization designed to make your tests run fast regardless of how many tests you have. However it assumes that you don’t often commit the code that doesn’t pass the tests. - -Jest will always explicitly mention that it only ran tests related to the files changed since the last commit. You can also press `a` in the watch mode to force Jest to run all tests. - -Jest will always run all tests on a [continuous integration](#continuous-integration) server or if the project is not inside a Git or Mercurial repository. - -### Writing Tests - -To create tests, add `it()` (or `test()`) blocks with the name of the test and its code. You may optionally wrap them in `describe()` blocks for logical grouping but this is neither required nor recommended. - -Jest provides a built-in `expect()` global function for making assertions. A basic test could look like this: - -```js -import sum from './sum'; - -it('sums numbers', () => { - expect(sum(1, 2)).toEqual(3); - expect(sum(2, 2)).toEqual(4); -}); -``` - -All `expect()` matchers supported by Jest are [extensively documented here](https://facebook.github.io/jest/docs/en/expect.html#content).
-You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://facebook.github.io/jest/docs/en/expect.html#tohavebeencalled) to create “spies” or mock functions. - -### Testing Components - -There is a broad spectrum of component testing techniques. They range from a “smoke test” verifying that a component renders without throwing, to shallow rendering and testing some of the output, to full rendering and testing component lifecycle and state changes. - -Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven’t decided on a testing strategy yet, we recommend that you start with creating simple smoke tests for your components: - -```js -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); -}); -``` - -This test mounts a component and makes sure that it didn’t throw during rendering. Tests like this provide a lot of value with very little effort so they are great as a starting point, and this is the test you will find in `src/App.test.js`. - -When you encounter bugs caused by changing components, you will gain a deeper insight into which parts of them are worth testing in your application. This might be a good time to introduce more specific tests asserting specific expected output or behavior. - -If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](http://airbnb.io/enzyme/). To install it, run: - -```sh -npm install --save enzyme enzyme-adapter-react-16 react-test-renderer -``` - -Alternatively you may use `yarn`: - -```sh -yarn add enzyme enzyme-adapter-react-16 react-test-renderer -``` - -As of Enzyme 3, you will need to install Enzyme along with an Adapter corresponding to the version of React you are using. (The examples above use the adapter for React 16.) - -The adapter will also need to be configured in your [global setup file](#initializing-test-environment): - -#### `src/setupTests.js` - -```js -import { configure } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; - -configure({ adapter: new Adapter() }); -``` - -> Note: Keep in mind that if you decide to "eject" before creating `src/setupTests.js`, the resulting `package.json` file won't contain any reference to it. [Read here](#initializing-test-environment) to learn how to add this after ejecting. - -Now you can write a smoke test with it: - -```js -import React from 'react'; -import { shallow } from 'enzyme'; -import App from './App'; - -it('renders without crashing', () => { - shallow(); -}); -``` - -Unlike the previous smoke test using `ReactDOM.render()`, this test only renders `` and doesn’t go deeper. For example, even if `` itself renders a ` -
-
Current state: {this.state.status}
- - - - - Fade - - - - - This content will fade in and out as the button is pressed... - - - - - - - - - - - Collapse accordion -
- NEW -
- - -
- - - - - - - 1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non - cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird - on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred - nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft - beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. - - - - - - - - - - 2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non - cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird - on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred - nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft - beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. - - - - - - - - - - 3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non - cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird - on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred - nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft - beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. - - - -
- - - - - Collapse custom accordion -
- NEW -
- - -
-
- - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget - tristique massa. Aliquam lacinia rhoncus nibh quis ornare. -

- -
-
- - -

- Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et - malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes, - nascetur ridiculus mus. -

- -
-
- - - - - - ); - } -} - -export default Collapses; diff --git a/src/views/Base/Collapses/Collapses.test.js b/src/views/Base/Collapses/Collapses.test.js deleted file mode 100644 index 80d543459..000000000 --- a/src/views/Base/Collapses/Collapses.test.js +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Collapses from './Collapses'; -import {mount} from 'enzyme/build'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); - -describe('toggle clicks', function() { - it('collapse without crashing', () => { - const wrapper = mount(); - let collapse = wrapper.find('#toggleCollapse1').at(0); - collapse.simulate('click'); - expect(wrapper.state().collapse).toEqual(true); - collapse.simulate('click'); - expect(wrapper.state().collapse).toEqual(false); - collapse.simulate('click'); - expect(wrapper.state().collapse).toEqual(true); - wrapper.unmount() - }); - it('fade without crashing', () => { - const wrapper = mount(); - let fade = wrapper.find('#toggleFade1').at(0); - fade.simulate('click'); - expect(wrapper.state().fadeIn).toEqual(false); - fade.simulate('click'); - expect(wrapper.state().fadeIn).toEqual(true); - wrapper.unmount() - }); - it('accordion without crashing', () => { - const wrapper = mount(); - let accordion = wrapper.find('[aria-controls="collapseOne"]').at(0); - accordion.simulate('click'); - expect(wrapper.state().accordion[0]).toEqual(false); - expect(wrapper.state().accordion[1]).toEqual(false); - expect(wrapper.state().accordion[2]).toEqual(false); - accordion = wrapper.find('[aria-controls="collapseTwo"]').at(0); - accordion.simulate('click'); - expect(wrapper.state().accordion[0]).toEqual(false); - expect(wrapper.state().accordion[1]).toEqual(true); - expect(wrapper.state().accordion[2]).toEqual(false); - accordion = wrapper.find('[aria-controls="collapseThree"]').at(0); - accordion.simulate('click'); - expect(wrapper.state().accordion[0]).toEqual(false); - expect(wrapper.state().accordion[1]).toEqual(false); - expect(wrapper.state().accordion[2]).toEqual(true); - accordion = wrapper.find('[aria-controls="collapseOne"]').at(0); - accordion.simulate('click'); - expect(wrapper.state().accordion[0]).toEqual(true); - expect(wrapper.state().accordion[1]).toEqual(false); - expect(wrapper.state().accordion[2]).toEqual(false); - wrapper.unmount() - }); - it('custom without crashing', () => { - const wrapper = mount(); - let accordion = wrapper.find('[aria-controls="exampleAccordion1"]').at(0); - accordion.simulate('click'); - expect(wrapper.state().custom[0]).toEqual(false); - expect(wrapper.state().custom[1]).toEqual(false); - accordion = wrapper.find('[aria-controls="exampleAccordion1"]').at(0); - accordion.simulate('click'); - expect(wrapper.state().custom[0]).toEqual(true); - expect(wrapper.state().custom[1]).toEqual(false); - accordion = wrapper.find('[aria-controls="exampleAccordion2"]').at(0); - accordion.simulate('click'); - expect(wrapper.state().custom[0]).toEqual(false); - expect(wrapper.state().custom[1]).toEqual(true); - wrapper.unmount() - }); -}); diff --git a/src/views/Base/Collapses/package.json b/src/views/Base/Collapses/package.json deleted file mode 100644 index 542809370..000000000 --- a/src/views/Base/Collapses/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Collapses", - "version": "0.0.0", - "private": true, - "main": "./Collapses.js" -} diff --git a/src/views/Base/Dropdowns/Dropdowns.js b/src/views/Base/Dropdowns/Dropdowns.js deleted file mode 100644 index aa9a8cc17..000000000 --- a/src/views/Base/Dropdowns/Dropdowns.js +++ /dev/null @@ -1,168 +0,0 @@ -import React, { Component } from 'react'; -import { Card, CardBody, CardHeader, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Row, UncontrolledDropdown } from 'reactstrap'; - -class Dropdowns extends Component { - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.state = { - dropdownOpen: new Array(6).fill(false), - }; - } - - toggle(i) { - const newArray = this.state.dropdownOpen.map((element, index) => { - return (index === i ? !element : false); - }); - this.setState({ - dropdownOpen: newArray, - }); - } - - render() { - return ( -
- - - - - Dropdowns - - - - { - this.toggle(0); - }}> - - Dropdown - - - Header - Action - Another Action - - Another Action - - - - - - - Dropdowns - alignment - - - {this.toggle(1);}}> - - This dropdown's menu is right-aligned - - - Header - Action - Another Action - - Another Action - - - - - - - Dropdowns - sizing - - - {this.toggle(2);}} size="lg" className="mb-3"> - - Large Dropdown - - - Header - Action - Another Action - - Another Action - - - {this.toggle(3);}} className="mb-3"> - - Normal Dropdown - - - Header - Action - Another Action - - Another Action - - - {this.toggle(4);}} size="sm"> - - Small Dropdown - - - Header - Action - Another Action - - Another Action - - - - - - - Custom Dropdowns - - - {this.toggle(5);}}> - {this.toggle(5);}} - data-toggle="dropdown" - aria-expanded={this.state.dropdownOpen[5]} - > - Custom Dropdown Content * - - -
{this.toggle(5);}}>Custom dropdown item 1
-
{this.toggle(5);}}>Custom dropdown item 2
-
{this.toggle(5);}}>Custom dropdown text 3
-
-
{this.toggle(5);}}>Custom dropdown item 4
- - - - - - - Uncontrolled Dropdown - - - - - Uncontrolled Dropdown - - - Header - Action - Another Action - - Another Action - - - - - - -
- ); - } -} - -export default Dropdowns; diff --git a/src/views/Base/Dropdowns/Dropdowns.test.js b/src/views/Base/Dropdowns/Dropdowns.test.js deleted file mode 100644 index ecc269fb6..000000000 --- a/src/views/Base/Dropdowns/Dropdowns.test.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { mount } from 'enzyme' -import Dropdowns from './Dropdowns'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); -it('toggle click without crashing', () => { - const wrapper = mount(); - for (let i=0; i<5; i++) { - let Dropdown = wrapper.find('button.dropdown-toggle').at(i); - Dropdown.simulate('click'); - expect(wrapper.state().dropdownOpen[i]).toEqual(true); - } - for (let i=0; i<2; i++) { - let Dropdown = wrapper.find('[data-toggle="dropdown"]').at(0); - Dropdown.simulate('click'); - expect(wrapper.state().dropdownOpen[5]).toEqual(true); - let DropdownItem = wrapper.find('div.dropdown-menu > .dropdown-item').at(i); - DropdownItem.simulate('click'); - expect(wrapper.state().dropdownOpen[5]).toEqual(false); - } - wrapper.unmount() -}); diff --git a/src/views/Base/Dropdowns/package.json b/src/views/Base/Dropdowns/package.json deleted file mode 100644 index 6681a6de6..000000000 --- a/src/views/Base/Dropdowns/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Dropdowns", - "version": "0.0.0", - "private": true, - "main": "./Dropdowns.js" -} diff --git a/src/views/Base/Forms/Forms.js b/src/views/Base/Forms/Forms.js deleted file mode 100644 index 3c9f4fdaa..000000000 --- a/src/views/Base/Forms/Forms.js +++ /dev/null @@ -1,1161 +0,0 @@ -import React, { Component } from 'react'; -import { - Badge, - Button, - Card, - CardBody, - CardFooter, - CardHeader, - Col, - Collapse, - DropdownItem, - DropdownMenu, - DropdownToggle, - Fade, - Form, - FormGroup, - FormText, - FormFeedback, - Input, - InputGroup, - InputGroupAddon, - InputGroupButtonDropdown, - InputGroupText, - Label, - Row, -} from 'reactstrap'; - -class Forms extends Component { - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.toggleFade = this.toggleFade.bind(this); - this.state = { - collapse: true, - fadeIn: true, - timeout: 300 - }; - } - - toggle() { - this.setState({ collapse: !this.state.collapse }); - } - - toggleFade() { - this.setState((prevState) => { return { fadeIn: !prevState }}); - } - - render() { - return ( -
- - - - - Credit Card - Form - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Company - Form - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Basic Form Elements - - -
- - - - - -

Username

- - - - - - - - - This is a help text - - - - - - - - - Please enter your email - - - - - - - - - Please enter a complex password - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - Inline Form - - -
- - - - - - - - -
- - - - - - - - - - - Horizontal Form - - -
- - - - - - - Please enter your email - - - - - - - - - Please enter your password - - -
- - - - - - - - - Normal Form - - -
- - - - Please enter your email - - - - - Please enter your password - -
- - - - - - - - - Input Grid - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - Input Sizes - - -
- - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - Validation feedback Form - - - - - - Cool! Input is valid - - - - - Houston, we have a problem... - - - - - - - - Validation feedback Form - - -
- - - - Non-required - - - - - Please provide a valid information - Input provided - -
- - - - - - - - - Icon/Text Groups - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - .00 - - - - -
- - - - - - - - - - - Button Groups - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - Dropdowns Groups - - -
- - - - { this.setState({ first: !this.state.first }); }}> - - Dropdown - - - Action - Another Action - Something else here - - Separated link - - - - - - - - - - - { this.setState({ second: !this.state.second }); }}> - - Dropdown - - - Action - Another Action - Something else here - - Separated link - - - - - - - - - { this.setState({ third: !this.state.third }); }}> - Action - - Action - Another Action - Something else here - - Separated link - - - - { this.setState({ fourth: !this.state.fourth }); }}> - - Dropdown - - - Action - Another Action - Something else here - - Separated link - - - - - -
- - - - - - - - - - - - - Use the grid for big devices! - .col-lg-* .col-md-* .col-sm-* - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - Input Grid for small devices! - .col-* - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - Example Form - - -
- - - - Username - - - - - - - - - - - Email - - - - - - - - - - - Password - - - - - - - - - - -
- - - - - - - Example Form - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - Example Form - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - Form Elements -
- - - -
- - - -
- - -
- - - @ - - - -

Here's some help text

-
- - - -
- - - - .00 - - - Here's more help text -
- - - -
- - - $ - - - - .00 - - -
- - - -
- - - - - - -
- - - -
- - - - - - - -
- -
- - -
-
- - - - - - -
- ); - } -} - -export default Forms; diff --git a/src/views/Base/Forms/Forms.test.js b/src/views/Base/Forms/Forms.test.js deleted file mode 100644 index 952f0a9ef..000000000 --- a/src/views/Base/Forms/Forms.test.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Forms from './Forms'; -import {mount} from 'enzyme/build'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); - -describe('toggle clicks', function() { - it('dropdowns without crashing', () => { - const wrapper = mount(); - for (let i = 0; i < 4; i++) { - let count = i === 0 ? 'first' : i === 1 ? 'second' : i === 2 ? 'third' : 'fourth' - let Dropdown = wrapper.find('button.dropdown-toggle').at(i); - Dropdown.simulate('click'); - expect(wrapper.state()[count]).toEqual(true); - } - wrapper.unmount() - }); - it('collapse without crashing', () => { - const wrapper = mount(); - let collapse = wrapper.find('button.btn-minimize').at(0); - collapse.simulate('click'); - expect(wrapper.state().collapse).toEqual(false); - collapse.simulate('click'); - expect(wrapper.state().collapse).toEqual(true); - wrapper.unmount() - }); - it('fade without crashing', () => { - const wrapper = mount(); - let fade = wrapper.find('button.btn-close').at(0); - fade.simulate('click'); - expect(wrapper.state().fadeIn).toEqual(false); - wrapper.unmount() - }); -}) diff --git a/src/views/Base/Forms/package.json b/src/views/Base/Forms/package.json deleted file mode 100644 index 19ca2ed2e..000000000 --- a/src/views/Base/Forms/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Forms", - "version": "0.0.0", - "private": true, - "main": "./Forms.js" -} diff --git a/src/views/Base/Jumbotrons/Jumbotrons.js b/src/views/Base/Jumbotrons/Jumbotrons.js deleted file mode 100644 index 56bdacae0..000000000 --- a/src/views/Base/Jumbotrons/Jumbotrons.js +++ /dev/null @@ -1,56 +0,0 @@ -import React, { Component } from 'react'; -import { Button, Card, CardBody, CardHeader, Col, Container, Jumbotron, Row } from 'reactstrap'; - -class Jumbotrons extends Component { - - render() { - return ( -
- - - - - Jumbotron - - - - -

Hello, world!

-

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

-
-

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

-

- -

- - - - - - - - Jumbotron - fluid - - - - -

Fluid jumbotron

-

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

- - - - - - -
- ); - } -} - -export default Jumbotrons; diff --git a/src/views/Base/Jumbotrons/Jumbotrons.test.js b/src/views/Base/Jumbotrons/Jumbotrons.test.js deleted file mode 100644 index 321436566..000000000 --- a/src/views/Base/Jumbotrons/Jumbotrons.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Jumbotrons from './Jumbotrons'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Base/Jumbotrons/package.json b/src/views/Base/Jumbotrons/package.json deleted file mode 100644 index d3d3a1c63..000000000 --- a/src/views/Base/Jumbotrons/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Jumbotrons", - "version": "0.0.0", - "private": true, - "main": "./Jumbotrons.js" -} diff --git a/src/views/Base/ListGroups/ListGroups.js b/src/views/Base/ListGroups/ListGroups.js deleted file mode 100644 index e42f784f6..000000000 --- a/src/views/Base/ListGroups/ListGroups.js +++ /dev/null @@ -1,229 +0,0 @@ -import React, { Component } from 'react'; -import { Badge, Card, CardBody, CardHeader, Col, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, Row, TabContent, TabPane } from 'reactstrap'; - -class ListGroups extends Component { - - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.state = { - activeTab: 1 - }; - } - - toggle(tab) { - if (this.state.activeTab !== tab) { - this.setState({ - activeTab: tab - }); - } - } - - render() { - return ( -
- - - - - List Group - - - - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - - - - - - - - List Group - tags - - - - Cras justo odio 14 - Dapibus ac facilisis in 2 - Morbi leo risus 1 - - - - - - - - - - List Group - disabled items - - - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - - - - - - - - List Group - contextual classes - - - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - - - - - - - - - - List Group - anchors - - -

Be sure to not use the standard .btn classes here.

- - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - -

- - - - - - - List Group - buttons - - - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - - - - - - - - - - List Group - custom content - - - - - List group item heading - - Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. - - - - List group item heading - - Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. - - - - List group item heading - - Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. - - - - - - - - - - - - List Group with TabPanes -

- NEW -
- - - - - - this.toggle(0)} action active={this.state.activeTab === 0} >Home - this.toggle(1)} action active={this.state.activeTab === 1} >Profile - this.toggle(2)} action active={this.state.activeTab === 2} >Messages - this.toggle(3)} action active={this.state.activeTab === 3} >Settings - - - - - -

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

- - -

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

- - -

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

- - -

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

- - - - - - - - -
- ); - } -} - -export default ListGroups; diff --git a/src/views/Base/ListGroups/ListGroups.test.js b/src/views/Base/ListGroups/ListGroups.test.js deleted file mode 100644 index 6b9f39874..000000000 --- a/src/views/Base/ListGroups/ListGroups.test.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import ListGroups from './ListGroups'; -import {mount} from 'enzyme/build'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); -it('toggle click without crashing', () => { - const wrapper = mount(); - for (let i=0; i<4; i++) { - let ListGroup = wrapper.find('#list-tab .list-group-item-action.list-group-item').at(i); - ListGroup.simulate('click'); - expect(wrapper.state().activeTab).toEqual(i); - } - wrapper.unmount() -}); diff --git a/src/views/Base/ListGroups/package.json b/src/views/Base/ListGroups/package.json deleted file mode 100644 index c542b7528..000000000 --- a/src/views/Base/ListGroups/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "ListGroups", - "version": "0.0.0", - "private": true, - "main": "./ListGroups.js" -} diff --git a/src/views/Base/Navbars/Navbars.js b/src/views/Base/Navbars/Navbars.js deleted file mode 100644 index 4599da449..000000000 --- a/src/views/Base/Navbars/Navbars.js +++ /dev/null @@ -1,118 +0,0 @@ -import React, { Component } from 'react'; -import { - Card, - CardBody, - CardHeader, - Collapse, - DropdownItem, - DropdownMenu, - DropdownToggle, - Nav, - Navbar, - NavbarBrand, - NavbarToggler, - NavItem, - NavLink, - UncontrolledDropdown, -} from 'reactstrap'; - -class Navbars extends Component { - - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.toggleNavbar = this.toggleNavbar.bind(this); - this.state = { - isOpen: false, - collapsed: true, - }; - } - - toggle() { - this.setState({ - isOpen: !this.state.isOpen, - }); - } - - toggleNavbar() { - this.setState({ - collapsed: !this.state.collapsed, - }); - } - - render() { - return ( -
- - - Navbar - - - - - Bootstrap - - - - - - - - - - Navbar Toggler - - - - Bootstrap - - - - - - - -
- ); - } -} - -export default Navbars; \ No newline at end of file diff --git a/src/views/Base/Navbars/Navbars.test.js b/src/views/Base/Navbars/Navbars.test.js deleted file mode 100644 index 613a9bd00..000000000 --- a/src/views/Base/Navbars/Navbars.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Navbars from './Navbars'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Base/Navbars/package.json b/src/views/Base/Navbars/package.json deleted file mode 100644 index a33a6ad5d..000000000 --- a/src/views/Base/Navbars/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Navbars", - "version": "0.0.0", - "private": true, - "main": "./Navbars.js" -} diff --git a/src/views/Base/Navs/Navs.js b/src/views/Base/Navs/Navs.js deleted file mode 100644 index 71472b968..000000000 --- a/src/views/Base/Navs/Navs.js +++ /dev/null @@ -1,159 +0,0 @@ -import React, { Component } from 'react'; -import { Card, CardBody, CardHeader, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink } from 'reactstrap'; - -class Navs extends Component { - - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.state = { - dropdownOpen: [false, false], - }; - } - - toggle(i) { - const newArray = this.state.dropdownOpen.map((element, index) => { - return (index === i ? !element : false); - }); - this.setState({ - dropdownOpen: newArray, - }); - } - - render() { - return ( -
- - - Navs - - - -

List Based

- -
-

Link Based

- - - - - - Navs Tabs - - - - - - - - Navs Pills - - - - - - - - Navs Vertical - - -

List Based

- -
-

Link based

- - - -
- ); - } -} - -export default Navs; \ No newline at end of file diff --git a/src/views/Base/Navs/Navs.test.js b/src/views/Base/Navs/Navs.test.js deleted file mode 100644 index d00d93021..000000000 --- a/src/views/Base/Navs/Navs.test.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Navs from './Navs'; -import {mount} from 'enzyme/build'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); -it('toggle click without crashing', () => { - const wrapper = mount(); - for (let i=0; i<2; i++) { - let Nav = wrapper.find('a.dropdown-toggle').at(i); - Nav.simulate('click'); - expect(wrapper.state().dropdownOpen[i]).toEqual(true); - } - wrapper.unmount() -}); diff --git a/src/views/Base/Navs/package.json b/src/views/Base/Navs/package.json deleted file mode 100644 index 9728cbfa2..000000000 --- a/src/views/Base/Navs/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Navs", - "version": "0.0.0", - "private": true, - "main": "./Navs.js" -} diff --git a/src/views/Base/Paginations/Paginations.test.js b/src/views/Base/Paginations/Paginations.test.js deleted file mode 100644 index 5c7a85355..000000000 --- a/src/views/Base/Paginations/Paginations.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Paginations from './Pagnations'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Base/Paginations/Pagnations.js b/src/views/Base/Paginations/Pagnations.js deleted file mode 100644 index b39911673..000000000 --- a/src/views/Base/Paginations/Pagnations.js +++ /dev/null @@ -1,177 +0,0 @@ -import React, { Component } from 'react'; -import { Card, CardBody, CardHeader, Pagination, PaginationItem, PaginationLink } from 'reactstrap'; - -class Paginations extends Component { - - render() { - return ( -
- - - Pagination - - - - - - - - - - 1 - - - - - 2 - - - - - 3 - - - - - 4 - - - - - 5 - - - - - - - - - - - Pagination - disabled and active states - - - - - - - - - 1 - - - - - 2 - - - - - 3 - - - - - 4 - - - - - 5 - - - - - - - - - - - Pagination - sizing - - - - - - - - - 1 - - - - - 2 - - - - - 3 - - - - - - - - - - - - - 1 - - - - - 2 - - - - - 3 - - - - - - - - - - - - - 1 - - - - - 2 - - - - - 3 - - - - - - - - -
- ); - } -} - -export default Paginations; diff --git a/src/views/Base/Paginations/package.json b/src/views/Base/Paginations/package.json deleted file mode 100644 index a1bce956d..000000000 --- a/src/views/Base/Paginations/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Pagnations", - "version": "0.0.0", - "private": true, - "main": "./Pagnations.js" -} diff --git a/src/views/Base/Popovers/Popovers.js b/src/views/Base/Popovers/Popovers.js deleted file mode 100644 index f0b4ce673..000000000 --- a/src/views/Base/Popovers/Popovers.js +++ /dev/null @@ -1,108 +0,0 @@ -import React, { Component } from 'react'; -import { Button, Card, CardBody, CardHeader, Popover, PopoverBody, PopoverHeader } from 'reactstrap'; - -class PopoverItem extends Component { - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.state = { - popoverOpen: false, - }; - } - - toggle() { - this.setState({ - popoverOpen: !this.state.popoverOpen, - }); - } - - render() { - return ( - - - - Popover Title - Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. - - - ); - } -} - -class Popovers extends Component { - - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.state = { - popoverOpen: false, - popovers: [ - { - placement: 'top', - text: 'Top', - }, - { - placement: 'bottom', - text: 'Bottom', - }, - { - placement: 'left', - text: 'Left', - }, - { - placement: 'right', - text: 'Right', - }, - ], - }; - } - - toggle() { - this.setState({ - popoverOpen: !this.state.popoverOpen, - }); - } - - render() { - return ( -
- - - Popovers - - - - - - Popover Title - Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. - - - - - - Popovers - list - - - {this.state.popovers.map((popover, i) => { - return ; - })} - - -
- ); - } -} - -export default Popovers; diff --git a/src/views/Base/Popovers/Popovers.test.js b/src/views/Base/Popovers/Popovers.test.js deleted file mode 100644 index 0911fa8f2..000000000 --- a/src/views/Base/Popovers/Popovers.test.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Popovers from './Popovers'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - document.body.appendChild(div); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Base/Popovers/package.json b/src/views/Base/Popovers/package.json deleted file mode 100644 index 51e2c0516..000000000 --- a/src/views/Base/Popovers/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Popovers", - "version": "0.0.0", - "private": true, - "main": "./Popovers.js" -} diff --git a/src/views/Base/ProgressBar/ProgressBar.js b/src/views/Base/ProgressBar/ProgressBar.js deleted file mode 100644 index bb80e5cbc..000000000 --- a/src/views/Base/ProgressBar/ProgressBar.js +++ /dev/null @@ -1,167 +0,0 @@ -import React, { Component } from 'react'; -import { Card, CardBody, CardHeader, Progress } from 'reactstrap'; - -class ProgressBar extends Component { - - render() { - return ( -
- - - Progress - - - -
0%
- -
25%
- -
50%
- -
75%
- -
100%
- -
Multiple bars
- - - - - - - - - - - - Progress - color variants - - - - - - - - - - - - Progress - labels - - - 25% - 1/2 - You're almost there! - You did it! - - Meh - Wow! - Cool - 20% - !! - - - - - - Progress - striped - - - - - - - - - - - - - - - - - - Progress - animated - - - - - - - - - - - - - - - - - - Progress - multiple bars / stacked - - -
Plain
- - - - - - - -
With Labels
- - Meh - Wow! - 25% - LOOK OUT!! - -
Stripes and Animations
- - Stripes - Animated Stripes - Plain - - - - - - Progress - max value - - -
1 of 5
- -
50 of 135
- -
75 of 111
- -
463 of 500
- - -
Various (40) of 55
- - 5 - 15 - 10 - 10 - - - -
- ); - } -} - -export default ProgressBar; \ No newline at end of file diff --git a/src/views/Base/ProgressBar/ProgressBar.test.js b/src/views/Base/ProgressBar/ProgressBar.test.js deleted file mode 100644 index bbed9cd07..000000000 --- a/src/views/Base/ProgressBar/ProgressBar.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import ProgressBar from './ProgressBar'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Base/ProgressBar/package.json b/src/views/Base/ProgressBar/package.json deleted file mode 100644 index e4f62b777..000000000 --- a/src/views/Base/ProgressBar/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Progress Bar", - "version": "0.0.0", - "private": true, - "main": "./ProgressBar.js" -} diff --git a/src/views/Base/Switches/Switches.js b/src/views/Base/Switches/Switches.js deleted file mode 100644 index 1973897f1..000000000 --- a/src/views/Base/Switches/Switches.js +++ /dev/null @@ -1,494 +0,0 @@ -import React, { Component } from 'react'; -import { Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap'; -import { AppSwitch } from '@coreui/react' - -class Switches extends Component { - render() { - return ( -
- - - - - - Switch default - - - - - - - - - - - - - - - - - - Switch pills - - - - - - - - - - - - - - - - - - 3d Switch - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - 3d Switch disabled - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - - 3d Switch outline="alt" - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - 3d Switch label - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - 3d Switch outline="alt" label - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - 3d Switch outline="alt" label - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - Switch outline - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - Switch outline pills - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - Switch outline alternative - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - - Switch outline alternative - pills - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - - Switch with text - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - Switch with text pills - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - Switch with text outline - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - Switch with text outline pills - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - Switch with text outline alternative pills - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - Switch with text outline alternative pills - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - - Switch with text outline alternative - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - Switch with text outline alternative pills - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - - Switch with text outline alternative - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - Switch with text outline alternative pills - {' '}CoreUI Pro - - - - - - - - - - - - - - - - - - - Sizes - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SizeExampleProps
- Large - - - - Add size={'lg'} -
- Normal - - - - - -
- Small - - - - Add size={'sm'} -
- - - - - -
- - ); - } -} - -export default Switches; diff --git a/src/views/Base/Switches/Switches.test.js b/src/views/Base/Switches/Switches.test.js deleted file mode 100644 index 2e45ea461..000000000 --- a/src/views/Base/Switches/Switches.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Switches from './Switches'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Base/Switches/package.json b/src/views/Base/Switches/package.json deleted file mode 100644 index ce01586cf..000000000 --- a/src/views/Base/Switches/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Switches", - "version": "0.0.0", - "private": true, - "main": "./Switches.js" -} diff --git a/src/views/Base/Tables/Tables.js b/src/views/Base/Tables/Tables.js deleted file mode 100644 index 5debc82e0..000000000 --- a/src/views/Base/Tables/Tables.js +++ /dev/null @@ -1,393 +0,0 @@ -import React, { Component } from 'react'; -import { Badge, Card, CardBody, CardHeader, Col, Pagination, PaginationItem, PaginationLink, Row, Table } from 'reactstrap'; - -class Tables extends Component { - render() { - return ( -
- - - - - Simple Table - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UsernameDate registeredRoleStatus
Samppa Nori2012/01/01Member - Active -
Estavan Lykos2012/02/01Staff - Banned -
Chetan Mohamed2012/02/01Admin - Inactive -
Derick Maximinus2012/03/01Member - Pending -
Friderik Dávid2012/01/21Staff - Active -
- - - - - - 1 - - - 2 - - - 3 - - - 4 - - - - - - - - - - - - - Striped Table - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UsernameDate registeredRoleStatus
Yiorgos Avraamu2012/01/01Member - Active -
Avram Tarasios2012/02/01Staff - Banned -
Quintin Ed2012/02/01Admin - Inactive -
Enéas Kwadwo2012/03/01Member - Pending -
Agapetus Tadeáš2012/01/21Staff - Active -
- - Prev - - 1 - - 2 - 3 - 4 - Next - - - - - - - - - - - - Condensed Table - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UsernameDate registeredRoleStatus
Carwyn Fachtna2012/01/01Member - Active -
Nehemiah Tatius2012/02/01Staff - Banned -
Ebbe Gemariah2012/02/01Admin - Inactive -
Eustorgios Amulius2012/03/01Member - Pending -
Leopold Gáspár2012/01/21Staff - Active -
- - Prev - - 1 - - 2 - 3 - 4 - Next - - - - - - - - - Bordered Table - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UsernameDate registeredRoleStatus
Pompeius René2012/01/01Member - Active -
Paĉjo Jadon2012/02/01Staff - Banned -
Micheal Mercurius2012/02/01Admin - Inactive -
Ganesha Dubhghall2012/03/01Member - Pending -
Hiroto Šimun2012/01/21Staff - Active -
- - Prev - - 1 - - 2 - 3 - 4 - Next - - - - - - - - - - - - Combined All Table - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UsernameDate registeredRoleStatus
Vishnu Serghei2012/01/01Member - Active -
Zbyněk Phoibos2012/02/01Staff - Banned -
Einar Randall2012/02/01Admin - Inactive -
Félix Troels2012/03/01Member - Pending -
Aulus Agmundr2012/01/21Staff - Active -
- - - - - -
- - ); - } -} - -export default Tables; diff --git a/src/views/Base/Tables/Tables.test.js b/src/views/Base/Tables/Tables.test.js deleted file mode 100644 index 85ed43ada..000000000 --- a/src/views/Base/Tables/Tables.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Tables from './Tables'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Base/Tables/package.json b/src/views/Base/Tables/package.json deleted file mode 100644 index 548d9a387..000000000 --- a/src/views/Base/Tables/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Tables", - "version": "0.0.0", - "private": true, - "main": "./Tables.js" -} diff --git a/src/views/Base/Tabs/Tabs.js b/src/views/Base/Tabs/Tabs.js deleted file mode 100644 index cdec062ed..000000000 --- a/src/views/Base/Tabs/Tabs.js +++ /dev/null @@ -1,183 +0,0 @@ -import React, {Component} from 'react'; -import {Badge, Col, Nav, NavItem, NavLink, Row, TabContent, TabPane} from 'reactstrap'; -import classnames from 'classnames'; - -class Tabs extends Component { - - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.state = { - activeTab: new Array(4).fill('1'), - }; - } - - lorem() { - return 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.' - } - - toggle(tabPane, tab) { - const newArray = this.state.activeTab.slice() - newArray[tabPane] = tab - this.setState({ - activeTab: newArray, - }); - } - - tabPane() { - return ( - <> - - {`1. ${this.lorem()}`} - - - {`2. ${this.lorem()}`} - - - {`3. ${this.lorem()}`} - - - ); - } - - render() { - return ( -
- - - - - {this.tabPane()} - - - - - - {this.tabPane()} - - - - - - {this.tabPane()} - - - - - - {this.tabPane()} - - - -
- ); - } -} - -export default Tabs; diff --git a/src/views/Base/Tabs/Tabs.test.js b/src/views/Base/Tabs/Tabs.test.js deleted file mode 100644 index 6d3d51a2f..000000000 --- a/src/views/Base/Tabs/Tabs.test.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Tabs from './Tabs'; -import {mount} from 'enzyme/build'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); -it('toggle click without crashing', () => { - const wrapper = mount(); - for (let pane=0; pane<4; pane++) { - for( let tabId=1; tabId<4; tabId++) { - let Tab = wrapper.find('.nav-tabs .nav-item .nav-link').at((3*pane)+tabId-1); - Tab.simulate('click'); - expect(wrapper.state().activeTab[pane]).toEqual((tabId).toString()); - } - } - wrapper.unmount() -}); diff --git a/src/views/Base/Tabs/package.json b/src/views/Base/Tabs/package.json deleted file mode 100644 index e362a8093..000000000 --- a/src/views/Base/Tabs/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Tabs", - "version": "0.0.0", - "private": true, - "main": "./Tabs.js" -} diff --git a/src/views/Base/Tooltips/Tooltips.js b/src/views/Base/Tooltips/Tooltips.js deleted file mode 100644 index c3a7d8cf7..000000000 --- a/src/views/Base/Tooltips/Tooltips.js +++ /dev/null @@ -1,134 +0,0 @@ -import React, { Component } from 'react'; -import { Button, Card, CardBody, CardHeader, Tooltip, UncontrolledTooltip } from 'reactstrap'; - -class TooltipItem extends React.Component { - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.state = { - tooltipOpen: false, - }; - } - - toggle() { - this.setState({ - tooltipOpen: !this.state.tooltipOpen, - }); - } - - render() { - return ( - - - - Tooltip Content! - - - ); - } -} - -class Tooltips extends Component { - - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.state = { - tooltipOpen: [false, false], - tooltips: [ - { - placement: 'top', - text: 'Top', - }, - { - placement: 'bottom', - text: 'Bottom', - }, - { - placement: 'left', - text: 'Left', - }, - { - placement: 'right', - text: 'Right', - }, - ], - }; - } - - toggle(i) { - const newArray = this.state.tooltipOpen.map((element, index) => { - return (index === i ? !element : false); - }); - this.setState({ - tooltipOpen: newArray, - }); - } - - render() { - return ( -
- - - Tooltips - - - - {/*eslint-disable-next-line*/} -

Somewhere in here is a tooltip.

- {this.toggle(0);}}> - Hello world! - - - - - - Tooltip - disable autohide - - - {/*eslint-disable-next-line*/} -

Sometimes you need to allow users to select text within a tooltip.

- {this.toggle(1);}}> - Try to select this text! - - - - - - Tooltip - list - - - {this.state.tooltips.map((tooltip, i) => { - return ; - })} - - - - - Tooltip - uncontrolled - - - {/*eslint-disable-next-line*/} -

Somewhere in here is a tooltip.

- - Hello world! - - - -
- ); - } -} - -export default Tooltips; diff --git a/src/views/Base/Tooltips/Tooltips.test.js b/src/views/Base/Tooltips/Tooltips.test.js deleted file mode 100644 index 7e2a90c35..000000000 --- a/src/views/Base/Tooltips/Tooltips.test.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Tooltips from './Tooltips'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - document.body.appendChild(div); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Base/Tooltips/package.json b/src/views/Base/Tooltips/package.json deleted file mode 100644 index 86e050463..000000000 --- a/src/views/Base/Tooltips/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Tooltips", - "version": "0.0.0", - "private": true, - "main": "./Tooltips.js" -} diff --git a/src/views/Base/index.js b/src/views/Base/index.js deleted file mode 100644 index 0daa89bee..000000000 --- a/src/views/Base/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import Breadcrumbs from './Breadcrumbs'; -import Cards from './Cards'; -import Carousels from './Carousels'; -import Collapses from './Collapses'; -import Dropdowns from './Dropdowns'; -import Forms from './Forms'; -import Jumbotrons from './Jumbotrons'; -import ListGroups from './ListGroups'; -import Navbars from './Navbars'; -import Navs from './Navs'; -import Popovers from './Popovers'; -import Paginations from './Paginations'; -import ProgressBar from './ProgressBar'; -import Switches from './Switches'; -import Tables from './Tables'; -import Tabs from './Tabs'; -import Tooltips from './Tooltips'; - -export { - Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Forms, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Switches, Tables, Tabs, Tooltips, Paginations -}; - diff --git a/src/views/Buttons/BrandButtons/BrandButtons.js b/src/views/Buttons/BrandButtons/BrandButtons.js deleted file mode 100644 index 5ddfe9bc2..000000000 --- a/src/views/Buttons/BrandButtons/BrandButtons.js +++ /dev/null @@ -1,324 +0,0 @@ -import React, { Component } from 'react'; -import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap'; - -class BrandButtons extends Component { - render() { - return ( -
- - - - - - Brand Button - Usage ex. - - <Button className="btn-facebook btn-brand"><i className="fa fa-facebook"></i><span>Facebook</span></Button> - - - -
Size Small - Add this class .btn-sm -
-

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

-
Size Normal
-

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

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

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

- - - - - - - - - Brand Button - Icons only. Usage ex. - - <Button className="btn-facebook btn-brand icon"><i className="fa fa-facebook"></i></Button> - - - -
Size Small - Add this class .btn-sm -
-

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

-
Size Normal
-

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

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

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

- - - - - - - - - Brand Button - Text only. Usage ex. - - <Button className="btn-facebook btn-brand text"><span>Facebook</span></Button> - - - -
Size Small - Add this class .btn-sm -
-

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

-
Size Normal
-

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

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

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

- - - - -
- - ); - } -} - -export default BrandButtons; diff --git a/src/views/Buttons/BrandButtons/BrandButtons.test.js b/src/views/Buttons/BrandButtons/BrandButtons.test.js deleted file mode 100644 index 01e6f9a85..000000000 --- a/src/views/Buttons/BrandButtons/BrandButtons.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import BrandButtons from './'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Buttons/BrandButtons/package.json b/src/views/Buttons/BrandButtons/package.json deleted file mode 100644 index 41d88741e..000000000 --- a/src/views/Buttons/BrandButtons/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "BrandButtons", - "version": "0.0.0", - "private": true, - "main": "./BrandButtons.js" -} diff --git a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js b/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js deleted file mode 100644 index 4bc524372..000000000 --- a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js +++ /dev/null @@ -1,290 +0,0 @@ -import React, { Component } from 'react'; -import { Button, ButtonDropdown, Card, CardBody, CardHeader, Col, DropdownItem, DropdownMenu, DropdownToggle, Row } from 'reactstrap'; - -class ButtonDropdowns extends Component { - - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.state = { - dropdownOpen: new Array(19).fill(false), - }; - } - - toggle(i) { - const newArray = this.state.dropdownOpen.map((element, index) => { return (index === i ? !element : false); }); - this.setState({ - dropdownOpen: newArray, - }); - } - - render() { - return ( -
- - - - - Button Dropdown - - - - { this.toggle(0); }}> - - Button Dropdown - - - Header - Action Disabled - Action - - Another Action - - - - - - - Single button dropdowns - - - { this.toggle(1); }}> - - Primary - - - Header - Action Disabled - Action - - Another Action - - - { this.toggle(2); }}> - - Secondary - - - Header - Action Disabled - Action - - Another Action - - - { this.toggle(3); }}> - - Success - - - Header - Action Disabled - Action - - Another Action - - - { this.toggle(4); }}> - - Info - - - Header - Action Disabled - Action - - Another Action - - - { this.toggle(5); }}> - - Warning - - - Header - Action Disabled - Action - - Another Action - - - { this.toggle(6); }}> - - Danger - - - Header - Action Disabled - Action - - Another Action - - - - - - - Split button dropdowns - - - { this.toggle(7); }}> - - - - Header - Action Disabled - Action - - Another Action - - - { this.toggle(8); }}> - - - - Header - Action Disabled - Action - - Another Action - - - { this.toggle(9); }}> - - - - Header - Action Disabled - Action - - Another Action - - - { this.toggle(10); }}> - - - - Header - Action Disabled - Action - - Another Action - - - { this.toggle(11); }}> - - - - Header - Action Disabled - Action - - Another Action - - - { this.toggle(12); }}> - - - - Header - Action Disabled - Action - - Another Action - - - - - - - Dropdown directions - - - { this.toggle(13); }}> - - Direction Up - - - Header - Action Disabled - Action - Another Action - - - { this.toggle(14); }}> - - Direction Left - - - Header - Action Disabled - Action - Another Action - - - { this.toggle(15); }}> - - Direction Right - - - Header - Action Disabled - Action - Another Action - - - { this.toggle(16); }}> - - Default Down - - - Header - Action Disabled - Action - Another Action - - - - - - - Button Dropdown sizing - - - { this.toggle(17); }}> - - Large Button - - - Header - Action Disabled - Action - Another Action - - - { this.toggle(18); }}> - - Small Button - - - Header - Action Disabled - Action - Another Action - - - - - - -
- ); - } -} - -export default ButtonDropdowns; diff --git a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.test.js b/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.test.js deleted file mode 100644 index 26d3c616f..000000000 --- a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.test.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { mount } from 'enzyme' -import ButtonDropdowns from './ButtonDropdowns'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); -it('toggle click without crashing', () => { - const wrapper = mount(); - for (let i=0; i<19; i++) { - let ButtonDropdown = wrapper.find('button.dropdown-toggle').at(i); - ButtonDropdown.simulate('click'); - expect(wrapper.state().dropdownOpen[i]).toEqual(true); - } - wrapper.unmount() -}); - diff --git a/src/views/Buttons/ButtonDropdowns/package.json b/src/views/Buttons/ButtonDropdowns/package.json deleted file mode 100644 index bfdccf6cd..000000000 --- a/src/views/Buttons/ButtonDropdowns/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "ButtonDropdowns", - "version": "0.0.0", - "private": true, - "main": "./ButtonDropdowns.js" -} diff --git a/src/views/Buttons/ButtonGroups/ButtonGroups.js b/src/views/Buttons/ButtonGroups/ButtonGroups.js deleted file mode 100644 index 2e3a994b9..000000000 --- a/src/views/Buttons/ButtonGroups/ButtonGroups.js +++ /dev/null @@ -1,192 +0,0 @@ -import React, { Component } from 'react'; -import { - Button, - ButtonDropdown, - ButtonGroup, - ButtonToolbar, - Card, - CardBody, - CardHeader, - Col, - DropdownItem, - DropdownMenu, - DropdownToggle, - Input, - InputGroup, - InputGroupAddon, - InputGroupText, - Row, -} from 'reactstrap'; - -class ButtonGroups extends Component { - - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.state = { - dropdownOpen: new Array(2).fill(false), - }; - } - - toggle(i) { - const newArray = this.state.dropdownOpen.map((element, index) => { return (index === i ? !element : false); }); - this.setState({ - dropdownOpen: newArray, - }); - } - - render() { - return ( -
- - - - - Button Group - - - - - - - - - - - - - Vertical variation - - - - - - { this.toggle(0); }}> - - Dropdown - - - Dropdown Link - Dropdown Link - - - - - - - - Button Toolbar - - - - - - - - - - - - - - - - - - - - - - - - - Sizing - - - - - - - -
- - - - - -
- - - - - - - - - - Nesting - - - - - - { this.toggle(1); }}> - - Dropdown - - - Dropdown Link - Dropdown Link - - - - - - - - - - - - Button Toolbar with input groups - - - - - - - - - - - @ - - - - - - - - - - - - @ - - - - - - - -
- ); - } -} - -export default ButtonGroups; diff --git a/src/views/Buttons/ButtonGroups/ButtonGroups.test.js b/src/views/Buttons/ButtonGroups/ButtonGroups.test.js deleted file mode 100644 index 72186c4ee..000000000 --- a/src/views/Buttons/ButtonGroups/ButtonGroups.test.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import ButtonGroups from './ButtonGroups'; -import {mount} from 'enzyme/build'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); -it('toggle click without crashing', () => { - const wrapper = mount(); - for (let i=0; i<2; i++) { - let ButtonGroup = wrapper.find('button.dropdown-toggle').at(i); - ButtonGroup.simulate('click'); - expect(wrapper.state().dropdownOpen[i]).toEqual(true); - } - wrapper.unmount() -}); diff --git a/src/views/Buttons/ButtonGroups/package.json b/src/views/Buttons/ButtonGroups/package.json deleted file mode 100644 index 6f9bfb1aa..000000000 --- a/src/views/Buttons/ButtonGroups/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "ButtonGroups", - "version": "0.0.0", - "private": true, - "main": "./ButtonGroups.js" -} diff --git a/src/views/Buttons/Buttons/Buttons.js b/src/views/Buttons/Buttons/Buttons.js deleted file mode 100644 index 5b45a8186..000000000 --- a/src/views/Buttons/Buttons/Buttons.js +++ /dev/null @@ -1,669 +0,0 @@ -import React, { Component } from 'react'; -import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap'; - -class Buttons extends Component { - render() { - return ( -
- - - Standard Buttons - - - - - Normal - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Active State - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Disabled - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Outline Buttons - - -

- Use outline prop -

- - - Normal - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Active State - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Disabled - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Ghost Buttons - - -

- Use - .btn-ghost-* class for ghost buttons. -

- - - Normal - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Active State - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Disabled - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Square Buttons - - -

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

- - - Normal - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Active State - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Disabled - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Pill Buttons - - -

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

- - - Normal - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Active State - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Disabled - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Sizes - - -

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

- - - Small - - - - - - - - - - - - - - - - - - - - Normal - - - - - - - - - - - - - - - - - - - - Large - - - - - - - - - - - - - - - - - - - - - - With Icons - - - - - - - - - - - - - - - - - - - - - - - - - - Block Level Buttons - - -

Add prop block

- - - - - - - - - - - - - - Block Level Buttons - - -

Add prop block

- - - - - - - - - - - -
- ); - } -} - -export default Buttons; diff --git a/src/views/Buttons/Buttons/Buttons.test.js b/src/views/Buttons/Buttons/Buttons.test.js deleted file mode 100644 index 55f00c413..000000000 --- a/src/views/Buttons/Buttons/Buttons.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Buttons from './Buttons'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Buttons/Buttons/package.json b/src/views/Buttons/Buttons/package.json deleted file mode 100644 index 61422c12c..000000000 --- a/src/views/Buttons/Buttons/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Buttons", - "version": "0.0.0", - "private": true, - "main": "./Buttons.js" -} diff --git a/src/views/Buttons/index.js b/src/views/Buttons/index.js deleted file mode 100644 index ae97260c1..000000000 --- a/src/views/Buttons/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import ButtonDropdowns from './ButtonDropdowns'; -import ButtonGroups from './ButtonGroups'; -import Buttons from './Buttons'; -import BrandButtons from './BrandButtons'; - -export { - ButtonDropdowns, ButtonGroups, Buttons, BrandButtons -} diff --git a/src/views/Charts/Charts.js b/src/views/Charts/Charts.js deleted file mode 100644 index 509a520fe..000000000 --- a/src/views/Charts/Charts.js +++ /dev/null @@ -1,255 +0,0 @@ -import React, { Component } from 'react'; -import { Bar, Doughnut, Line, Pie, Polar, Radar } from 'react-chartjs-2'; -import { Card, CardBody, CardColumns, CardHeader } from 'reactstrap'; -import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'; - -const line = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - label: 'My First dataset', - fill: false, - lineTension: 0.1, - backgroundColor: 'rgba(75,192,192,0.4)', - borderColor: 'rgba(75,192,192,1)', - borderCapStyle: 'butt', - borderDash: [], - borderDashOffset: 0.0, - borderJoinStyle: 'miter', - pointBorderColor: 'rgba(75,192,192,1)', - pointBackgroundColor: '#fff', - pointBorderWidth: 1, - pointHoverRadius: 5, - pointHoverBackgroundColor: 'rgba(75,192,192,1)', - pointHoverBorderColor: 'rgba(220,220,220,1)', - pointHoverBorderWidth: 2, - pointRadius: 1, - pointHitRadius: 10, - data: [65, 59, 80, 81, 56, 55, 40], - }, - ], -}; - -const bar = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - label: 'My First dataset', - backgroundColor: 'rgba(255,99,132,0.2)', - borderColor: 'rgba(255,99,132,1)', - borderWidth: 1, - hoverBackgroundColor: 'rgba(255,99,132,0.4)', - hoverBorderColor: 'rgba(255,99,132,1)', - data: [65, 59, 80, 81, 56, 55, 40], - }, - ], -}; - -const doughnut = { - labels: [ - 'Red', - 'Green', - 'Yellow', - ], - datasets: [ - { - data: [300, 50, 100], - backgroundColor: [ - '#FF6384', - '#36A2EB', - '#FFCE56', - ], - hoverBackgroundColor: [ - '#FF6384', - '#36A2EB', - '#FFCE56', - ], - }], -}; - -const radar = { - labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'], - datasets: [ - { - label: 'My First dataset', - backgroundColor: 'rgba(179,181,198,0.2)', - borderColor: 'rgba(179,181,198,1)', - pointBackgroundColor: 'rgba(179,181,198,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(179,181,198,1)', - data: [65, 59, 90, 81, 56, 55, 40], - }, - { - label: 'My Second dataset', - backgroundColor: 'rgba(255,99,132,0.2)', - borderColor: 'rgba(255,99,132,1)', - pointBackgroundColor: 'rgba(255,99,132,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(255,99,132,1)', - data: [28, 48, 40, 19, 96, 27, 100], - }, - ], -}; - -const pie = { - labels: [ - 'Red', - 'Green', - 'Yellow', - ], - datasets: [ - { - data: [300, 50, 100], - backgroundColor: [ - '#FF6384', - '#36A2EB', - '#FFCE56', - ], - hoverBackgroundColor: [ - '#FF6384', - '#36A2EB', - '#FFCE56', - ], - }], -}; - -const polar = { - datasets: [ - { - data: [ - 11, - 16, - 7, - 3, - 14, - ], - backgroundColor: [ - '#FF6384', - '#4BC0C0', - '#FFCE56', - '#E7E9ED', - '#36A2EB', - ], - label: 'My dataset' // for legend - }], - labels: [ - 'Red', - 'Green', - 'Yellow', - 'Grey', - 'Blue', - ], -}; - -const options = { - tooltips: { - enabled: false, - custom: CustomTooltips - }, - maintainAspectRatio: false -} - -class Charts extends Component { - render() { - return ( -
- - - - Line Chart - - - -
- -
- - - - - Bar Chart - - - -
- -
- - - - - Doughnut Chart - - - -
- -
- - - - - Radar Chart - - - -
- -
- - - - - Pie Chart - - - -
- -
- - - - - Polar Area Chart - - - -
- -
- - - -
- ); - } -} - -export default Charts; diff --git a/src/views/Charts/Charts.test.js b/src/views/Charts/Charts.test.js deleted file mode 100644 index b8e9c1a1d..000000000 --- a/src/views/Charts/Charts.test.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Charts from './Charts'; - -jest.mock('react-chartjs-2', () => ({ - Line: () => null, - Polar: () => null, - Pie: () => null, - Radar: () => null, - Bar: () => null, - Doughnut: () => null, -})); - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); \ No newline at end of file diff --git a/src/views/Charts/package.json b/src/views/Charts/package.json deleted file mode 100644 index 19793aaf2..000000000 --- a/src/views/Charts/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Charts", - "version": "0.0.0", - "private": true, - "main": "./Charts.js" -} diff --git a/src/views/Dashboard/Dashboard.js b/src/views/Dashboard/Dashboard.js deleted file mode 100644 index 3a7a20e5b..000000000 --- a/src/views/Dashboard/Dashboard.js +++ /dev/null @@ -1,1129 +0,0 @@ -import React, { Component, lazy, Suspense } from 'react'; -import { Bar, Line } from 'react-chartjs-2'; -import { - Badge, - Button, - ButtonDropdown, - ButtonGroup, - ButtonToolbar, - Card, - CardBody, - CardFooter, - CardHeader, - CardTitle, - Col, - Dropdown, - DropdownItem, - DropdownMenu, - DropdownToggle, - Progress, - Row, - Table, -} from 'reactstrap'; -import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'; -import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities' - -const Widget03 = lazy(() => import('../../views/Widgets/Widget03')); - -const brandPrimary = getStyle('--primary') -const brandSuccess = getStyle('--success') -const brandInfo = getStyle('--info') -const brandWarning = getStyle('--warning') -const brandDanger = getStyle('--danger') - -// Card Chart 1 -const cardChartData1 = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - label: 'My First dataset', - backgroundColor: brandPrimary, - borderColor: 'rgba(255,255,255,.55)', - data: [65, 59, 84, 84, 51, 55, 40], - }, - ], -}; - -const cardChartOpts1 = { - tooltips: { - enabled: false, - custom: CustomTooltips - }, - maintainAspectRatio: false, - legend: { - display: false, - }, - scales: { - xAxes: [ - { - gridLines: { - color: 'transparent', - zeroLineColor: 'transparent', - }, - ticks: { - fontSize: 2, - fontColor: 'transparent', - }, - - }], - yAxes: [ - { - display: false, - ticks: { - display: false, - min: Math.min.apply(Math, cardChartData1.datasets[0].data) - 5, - max: Math.max.apply(Math, cardChartData1.datasets[0].data) + 5, - }, - }], - }, - elements: { - line: { - borderWidth: 1, - }, - point: { - radius: 4, - hitRadius: 10, - hoverRadius: 4, - }, - } -} - - -// Card Chart 2 -const cardChartData2 = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - label: 'My First dataset', - backgroundColor: brandInfo, - borderColor: 'rgba(255,255,255,.55)', - data: [1, 18, 9, 17, 34, 22, 11], - }, - ], -}; - -const cardChartOpts2 = { - tooltips: { - enabled: false, - custom: CustomTooltips - }, - maintainAspectRatio: false, - legend: { - display: false, - }, - scales: { - xAxes: [ - { - gridLines: { - color: 'transparent', - zeroLineColor: 'transparent', - }, - ticks: { - fontSize: 2, - fontColor: 'transparent', - }, - - }], - yAxes: [ - { - display: false, - ticks: { - display: false, - min: Math.min.apply(Math, cardChartData2.datasets[0].data) - 5, - max: Math.max.apply(Math, cardChartData2.datasets[0].data) + 5, - }, - }], - }, - elements: { - line: { - tension: 0.00001, - borderWidth: 1, - }, - point: { - radius: 4, - hitRadius: 10, - hoverRadius: 4, - }, - }, -}; - -// Card Chart 3 -const cardChartData3 = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - label: 'My First dataset', - backgroundColor: 'rgba(255,255,255,.2)', - borderColor: 'rgba(255,255,255,.55)', - data: [78, 81, 80, 45, 34, 12, 40], - }, - ], -}; - -const cardChartOpts3 = { - tooltips: { - enabled: false, - custom: CustomTooltips - }, - maintainAspectRatio: false, - legend: { - display: false, - }, - scales: { - xAxes: [ - { - display: false, - }], - yAxes: [ - { - display: false, - }], - }, - elements: { - line: { - borderWidth: 2, - }, - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - }, - }, -}; - -// Card Chart 4 -const cardChartData4 = { - labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''], - datasets: [ - { - label: 'My First dataset', - backgroundColor: 'rgba(255,255,255,.3)', - borderColor: 'transparent', - data: [78, 81, 80, 45, 34, 12, 40, 75, 34, 89, 32, 68, 54, 72, 18, 98], - barPercentage: 0.6, - }, - ], -}; - -const cardChartOpts4 = { - tooltips: { - enabled: false, - custom: CustomTooltips - }, - maintainAspectRatio: false, - legend: { - display: false, - }, - scales: { - xAxes: [ - { - display: false, - }], - yAxes: [ - { - display: false, - }], - }, -}; - -// Social Box Chart -const socialBoxData = [ - { data: [65, 59, 84, 84, 51, 55, 40], label: 'facebook' }, - { data: [1, 13, 9, 17, 34, 41, 38], label: 'twitter' }, - { data: [78, 81, 80, 45, 34, 12, 40], label: 'linkedin' }, - { data: [35, 23, 56, 22, 97, 23, 64], label: 'google' }, -]; - -const makeSocialBoxData = (dataSetNo) => { - const dataset = socialBoxData[dataSetNo]; - const data = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - backgroundColor: 'rgba(255,255,255,.1)', - borderColor: 'rgba(255,255,255,.55)', - pointHoverBackgroundColor: '#fff', - borderWidth: 2, - data: dataset.data, - label: dataset.label, - }, - ], - }; - return () => data; -}; - -const socialChartOpts = { - tooltips: { - enabled: false, - custom: CustomTooltips - }, - responsive: true, - maintainAspectRatio: false, - legend: { - display: false, - }, - scales: { - xAxes: [ - { - display: false, - }], - yAxes: [ - { - display: false, - }], - }, - elements: { - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - hoverBorderWidth: 3, - }, - }, -}; - -// sparkline charts -const sparkLineChartData = [ - { - data: [35, 23, 56, 22, 97, 23, 64], - label: 'New Clients', - }, - { - data: [65, 59, 84, 84, 51, 55, 40], - label: 'Recurring Clients', - }, - { - data: [35, 23, 56, 22, 97, 23, 64], - label: 'Pageviews', - }, - { - data: [65, 59, 84, 84, 51, 55, 40], - label: 'Organic', - }, - { - data: [78, 81, 80, 45, 34, 12, 40], - label: 'CTR', - }, - { - data: [1, 13, 9, 17, 34, 41, 38], - label: 'Bounce Rate', - }, -]; - -const makeSparkLineData = (dataSetNo, variant) => { - const dataset = sparkLineChartData[dataSetNo]; - const data = { - labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], - datasets: [ - { - backgroundColor: 'transparent', - borderColor: variant ? variant : '#c2cfd6', - data: dataset.data, - label: dataset.label, - }, - ], - }; - return () => data; -}; - -const sparklineChartOpts = { - tooltips: { - enabled: false, - custom: CustomTooltips - }, - responsive: true, - maintainAspectRatio: true, - scales: { - xAxes: [ - { - display: false, - }], - yAxes: [ - { - display: false, - }], - }, - elements: { - line: { - borderWidth: 2, - }, - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - hoverBorderWidth: 3, - }, - }, - legend: { - display: false, - }, -}; - -// Main Chart - -//Random Numbers -function random(min, max) { - return Math.floor(Math.random() * (max - min + 1) + min); -} - -var elements = 27; -var data1 = []; -var data2 = []; -var data3 = []; - -for (var i = 0; i <= elements; i++) { - data1.push(random(50, 200)); - data2.push(random(80, 100)); - data3.push(65); -} - -const mainChart = { - labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'], - datasets: [ - { - label: 'My First dataset', - backgroundColor: hexToRgba(brandInfo, 10), - borderColor: brandInfo, - pointHoverBackgroundColor: '#fff', - borderWidth: 2, - data: data1, - }, - { - label: 'My Second dataset', - backgroundColor: 'transparent', - borderColor: brandSuccess, - pointHoverBackgroundColor: '#fff', - borderWidth: 2, - data: data2, - }, - { - label: 'My Third dataset', - backgroundColor: 'transparent', - borderColor: brandDanger, - pointHoverBackgroundColor: '#fff', - borderWidth: 1, - borderDash: [8, 5], - data: data3, - }, - ], -}; - -const mainChartOpts = { - tooltips: { - enabled: false, - custom: CustomTooltips, - intersect: true, - mode: 'index', - position: 'nearest', - callbacks: { - labelColor: function(tooltipItem, chart) { - return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor } - } - } - }, - maintainAspectRatio: false, - legend: { - display: false, - }, - scales: { - xAxes: [ - { - gridLines: { - drawOnChartArea: false, - }, - }], - yAxes: [ - { - ticks: { - beginAtZero: true, - maxTicksLimit: 5, - stepSize: Math.ceil(250 / 5), - max: 250, - }, - }], - }, - elements: { - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - hoverBorderWidth: 3, - }, - }, -}; - -class Dashboard extends Component { - constructor(props) { - super(props); - - this.toggle = this.toggle.bind(this); - this.onRadioBtnClick = this.onRadioBtnClick.bind(this); - - this.state = { - dropdownOpen: false, - radioSelected: 2, - }; - } - - toggle() { - this.setState({ - dropdownOpen: !this.state.dropdownOpen, - }); - } - - onRadioBtnClick(radioSelected) { - this.setState({ - radioSelected: radioSelected, - }); - } - - loading = () =>
Loading...
- - render() { - - return ( -
- - - - - - { this.setState({ card1: !this.state.card1 }); }}> - - - - - Action - Another action - Disabled action - Something else here - - - -
9.823
-
Members online
- -
- -
- - - - - - - - { this.setState({ card2: !this.state.card2 }); }}> - - - - - Action - Another action - Something else here - - - -
9.823
-
Members online
- -
- -
- - - - - - - - { this.setState({ card3: !this.state.card3 }); }}> - - - - - Action - Another action - Something else here - - - -
9.823
-
Members online
- -
- -
- - - - - - - - { this.setState({ card4: !this.state.card4 }); }}> - - - - - Action - Another action - Something else here - - - -
9.823
-
Members online
- -
- -
- - - - - - - - - - Traffic -
November 2015
- - - - - - - - - - - - -
- -
- - - - -
Visits
- 29.703 Users (40%) - - - -
Unique
- 24.093 Users (20%) - - - -
Pageviews
- 78.706 Views (60%) - - - -
New Users
- 22.123 Users (80%) - - - -
Bounce Rate
- Average Rate (40.15%) - - - - - - - - - - - - ({ variant: 'facebook', friends: '89k', feeds: '459' })} > -
- -
- - - - - - - ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} > -
- -
- - - - - - - ({ variant: 'linkedin', contacts: '500+', feeds: '292' })} > -
- -
- - - - - - - ({ variant: 'google-plus', followers: '894', circles: '92' })} > -
- -
- - - - - - - - - - Traffic {' & '} Sales - - - - - - -
- New Clients -
- 9,123 -
- -
-
- - -
- Recurring Clients -
- 22,643 -
- -
-
- - -
-
-
- - Monday - -
-
- - -
-
-
-
- - Tuesday - -
-
- - -
-
-
-
- - Wednesday - -
-
- - -
-
-
-
- - Thursday - -
-
- - -
-
-
-
- - Friday - -
-
- - -
-
-
-
- - Saturday - -
-
- - -
-
-
-
- - Sunday - -
-
- - -
-
-
- -   - New clients -   -   - Recurring clients - -
- - - - -
- Pageviews -
- 78,623 -
- -
-
- - -
- Organic -
- 49,123 -
- -
-
- - -
-
    -
    -
    - - Male - 43% -
    -
    - -
    -
    -
    -
    - - Female - 37% -
    -
    - -
    -
    -
    -
    - - Organic Search - 191,235 (56%) -
    -
    - -
    -
    -
    -
    - - Facebook - 51,223 (15%) -
    -
    - -
    -
    -
    -
    - - Twitter - 37,564 (11%) -
    -
    - -
    -
    -
    -
    - - LinkedIn - 27,319 (8%) -
    -
    - -
    -
    -
    - -
    -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UserCountryUsagePayment MethodActivity
-
- admin@bootstrapmaster.com - -
- 		-
Yiorgos Avraamu
-
- New | Registered: Jan 1, 2015 -
- 		- - -
-
- 50% -
-
- Jun 11, 2015 - Jul 10, 2015 -
-
- - 		- - -
Last login
- 10 sec ago -
-
- admin@bootstrapmaster.com - -
- 		-
Avram Tarasios
-
- - Recurring | Registered: Jan 1, 2015 -
- 		- - -
-
- 10% -
-
- Jun 11, 2015 - Jul 10, 2015 -
-
- - 		- - -
Last login
- 5 minutes ago -
-
- admin@bootstrapmaster.com - -
- 		-
Quintin Ed
-
- New | Registered: Jan 1, 2015 -
- 		- - -
-
- 74% -
-
- Jun 11, 2015 - Jul 10, 2015 -
-
- - 		- - -
Last login
- 1 hour ago -
-
- admin@bootstrapmaster.com - -
- 		-
Enéas Kwadwo
-
- New | Registered: Jan 1, 2015 -
- 		- - -
-
- 98% -
-
- Jun 11, 2015 - Jul 10, 2015 -
-
- - 		- - -
Last login
- Last month -
-
- admin@bootstrapmaster.com - -
- 		-
Agapetus Tadeáš
-
- New | Registered: Jan 1, 2015 -
- 		- - -
-
- 22% -
-
- Jun 11, 2015 - Jul 10, 2015 -
-
- - 		- - -
Last login
- Last week -
-
- admin@bootstrapmaster.com - -
- 		-
Friderik Dávid
-
- New | Registered: Jan 1, 2015 -
- 		- - -
-
- 43% -
-
- Jun 11, 2015 - Jul 10, 2015 -
-
- - 		- - -
Last login
- Yesterday -
- - - - -
- ); - } -} - -export default Dashboard; diff --git a/src/views/Dashboard/Dashboard.test.js b/src/views/Dashboard/Dashboard.test.js deleted file mode 100644 index 01a74c6cc..000000000 --- a/src/views/Dashboard/Dashboard.test.js +++ /dev/null @@ -1,21 +0,0 @@ -// import React from 'react'; -// import ReactDOM from 'react-dom'; -// import Dashboard from './Dashboard'; -// import { shallow } from 'enzyme' - -// jest.mock('react-chartjs-2', () => ({ -// Line: () => null, -// Bar: () => null -// })); - -// it('renders without crashing', () => { -// const div = document.createElement('div'); -// ReactDOM.render(, div); -// ReactDOM.unmountComponentAtNode(div); -// }); - -// it('renders without crashing', () => { -// shallow(); -// }); - -it('', () => {}) diff --git a/src/views/Dashboard/package.json b/src/views/Dashboard/package.json deleted file mode 100644 index 86ec492fe..000000000 --- a/src/views/Dashboard/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Dashboard", - "version": "0.0.0", - "private": true, - "main": "./Dashboard.js" -} diff --git a/src/views/Icons/CoreUIIcons/CoreUIIcons.js b/src/views/Icons/CoreUIIcons/CoreUIIcons.js deleted file mode 100644 index 0b7bec8ba..000000000 --- a/src/views/Icons/CoreUIIcons/CoreUIIcons.js +++ /dev/null @@ -1,428 +0,0 @@ -import React, { Component } from 'react'; -import { Badge, Card, CardBody, CardHeader, Col, Row } from 'reactstrap'; - -class CoreUIIcons extends Component { - render() { - return ( -
- - - CoreUI Icons{' '} New - - - - - - -
account-logout
- - - -
action-redo
- - - -
action-undo
- - - -
align-center
- - - -
align-left
- - - -
align-right
- - - -
arrow-bottom
- - - -
arrow-left
- - - -
arrow-right
- - - -
arrow-top
- - - -
ban
- - - -
basket-loaded
- - - -
bell
- - - -
bold
- - - -
bookmark
- - - -
briefcase
- - - -
british-pound
- - - -
brush
- - - -
calculator
- - - -
calendar
- - - -
cart
- - - -
chart
- - - -
check
- - - -
chevron-bottom
- - - -
chevron-left
- - - -
chevron-right
- - - -
chevron-top
- - - -
circle-check
- - - -
circle-x
- - - -
cloud
- - - -
cloud-download
- - - -
cloud-upload
- - - -
code
- - - -
cog
- - - -
comment-square
- - - -
credit-card
- - - -
cursor
- - - -
dashboard
- - - -
delete
- - - -
dollar
- - - -
drop
- - - -
envelope-closed
- - - -
envelope-letter
- - - -
envelope-open
- - - -
euro
- - - -
file
- - - -
globe
- - - -
graph
- - - -
home
- - - -
inbox
- - - -
info
- - - -
italic
- - - -
justify-center
- - - -
justify-left
- - - -
justify-right
- - - -
laptop
- - - -
layers
- - - -
lightbulb
- - - -
list
- - - -
location-pin
- - - -
lock-locked
- - - -
lock-unlocked
- - - -
magnifying-glass
- - - -
map
- - - -
monitor
- - - -
moon
- - - -
note
- - - -
options
- - - -
paperclip
- - - -
pencil
- - - -
people
- - - -
phone
- - - -
pie-chart
- - - -
print
- - - -
puzzle
- - - -
rss
- - - -
screen-desktop
- - - -
screen-smartphone
- - - -
settings
- - - -
share
- - - -
shield
- - - -
sort-ascending
- - - -
sort-descending
- - - -
speech
- - - -
speedometer
- - - -
star
- - - -
sun
- - - -
tablet
- - - -
tags
- - - -
task
- - - -
thumb-down
- - - -
thumb-up
- - - -
trash
- - - -
underline
- - - -
user
- - - -
user-female
- - - -
user-follow
- - - -
user-unfollow
- - - -
wrench
- - - -
yen
- - - - -
- ); - } -} - -export default CoreUIIcons; - diff --git a/src/views/Icons/CoreUIIcons/CoreUIIcons.test.js b/src/views/Icons/CoreUIIcons/CoreUIIcons.test.js deleted file mode 100644 index e2ec7f922..000000000 --- a/src/views/Icons/CoreUIIcons/CoreUIIcons.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import CoreUIIcons from './CoreUIIcons'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Icons/CoreUIIcons/package.json b/src/views/Icons/CoreUIIcons/package.json deleted file mode 100644 index a3813bfca..000000000 --- a/src/views/Icons/CoreUIIcons/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "CoreUIIcons", - "version": "0.0.0", - "private": true, - "main": "./CoreUIIcons.js" -} diff --git a/src/views/Icons/Flags/Flags.js b/src/views/Icons/Flags/Flags.js deleted file mode 100644 index 05613c275..000000000 --- a/src/views/Icons/Flags/Flags.js +++ /dev/null @@ -1,1022 +0,0 @@ -import React, { Component } from 'react'; -import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap'; - -class Flags extends Component { - render() { - return ( -
- - - Flags - - - - - For using the flags inline with text add the classes .flag-icon and .flag-icon-xx (where xx is the ISO 3166-1-alpha-2 - code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well. - - - -
flag-icon-ad
- - - -
flag-icon-ae
- - - -
flag-icon-af
- - - -
flag-icon-ag
- - - -
flag-icon-ai
- - - -
flag-icon-al
- - - -
flag-icon-am
- - - -
flag-icon-ao
- - - -
flag-icon-aq
- - - -
flag-icon-ar
- - - -
flag-icon-as
- - - -
flag-icon-at
- - - -
flag-icon-au
- - - -
flag-icon-aw
- - - -
flag-icon-ax
- - - -
flag-icon-az
- - - -
flag-icon-ba
- - - -
flag-icon-bb
- - - -
flag-icon-bd
- - - -
flag-icon-be
- - - -
flag-icon-bf
- - - -
flag-icon-bg
- - - -
flag-icon-bh
- - - -
flag-icon-bi
- - - -
flag-icon-bj
- - - -
flag-icon-bl
- - - -
flag-icon-bm
- - - -
flag-icon-bn
- - - -
flag-icon-bo
- - - -
flag-icon-bq
- - - -
flag-icon-br
- - - -
flag-icon-bs
- - - -
flag-icon-bt
- - - -
flag-icon-bv
- - - -
flag-icon-bw
- - - -
flag-icon-by
- - - -
flag-icon-bz
- - - -
flag-icon-ca
- - - -
flag-icon-cc
- - - -
flag-icon-cd
- - - -
flag-icon-cf
- - - -
flag-icon-cg
- - - -
flag-icon-ch
- - - -
flag-icon-ci
- - - -
flag-icon-ck
- - - -
flag-icon-cl
- - - -
flag-icon-cm
- - - -
flag-icon-cn
- - - -
flag-icon-co
- - - -
flag-icon-cr
- - - -
flag-icon-cu
- - - -
flag-icon-cv
- - - -
flag-icon-cw
- - - -
flag-icon-cx
- - - -
flag-icon-cy
- - - -
flag-icon-cz
- - - -
flag-icon-de
- - - -
flag-icon-dj
- - - -
flag-icon-dk
- - - -
flag-icon-dm
- - - -
flag-icon-do
- - - -
flag-icon-dz
- - - -
flag-icon-ec
- - - -
flag-icon-ee
- - - -
flag-icon-eg
- - - -
flag-icon-eh
- - - -
flag-icon-er
- - - -
flag-icon-es
- - - -
flag-icon-et
- - - -
flag-icon-fi
- - - -
flag-icon-fj
- - - -
flag-icon-fk
- - - -
flag-icon-fm
- - - -
flag-icon-fo
- - - -
flag-icon-fr
- - - -
flag-icon-ga
- - - -
flag-icon-gb
- - - -
flag-icon-gd
- - - -
flag-icon-ge
- - - -
flag-icon-gf
- - - -
flag-icon-gg
- - - -
flag-icon-gh
- - - -
flag-icon-gi
- - - -
flag-icon-gl
- - - -
flag-icon-gm
- - - -
flag-icon-gn
- - - -
flag-icon-gp
- - - -
flag-icon-gq
- - - -
flag-icon-gr
- - - -
flag-icon-gs
- - - -
flag-icon-gt
- - - -
flag-icon-gu
- - - -
flag-icon-gw
- - - -
flag-icon-gy
- - - -
flag-icon-hk
- - - -
flag-icon-hm
- - - -
flag-icon-hn
- - - -
flag-icon-hr
- - - -
flag-icon-ht
- - - -
flag-icon-hu
- - - -
flag-icon-id
- - - -
flag-icon-ie
- - - -
flag-icon-il
- - - -
flag-icon-im
- - - -
flag-icon-in
- - - -
flag-icon-io
- - - -
flag-icon-iq
- - - -
flag-icon-ir
- - - -
flag-icon-is
- - - -
flag-icon-it
- - - -
flag-icon-je
- - - -
flag-icon-jm
- - - -
flag-icon-jo
- - - -
flag-icon-jp
- - - -
flag-icon-ke
- - - -
flag-icon-kg
- - - -
flag-icon-kh
- - - -
flag-icon-ki
- - - -
flag-icon-km
- - - -
flag-icon-kn
- - - -
flag-icon-kp
- - - -
flag-icon-kr
- - - -
flag-icon-kw
- - - -
flag-icon-ky
- - - -
flag-icon-kz
- - - -
flag-icon-la
- - - -
flag-icon-lb
- - - -
flag-icon-lc
- - - -
flag-icon-li
- - - -
flag-icon-lk
- - - -
flag-icon-lr
- - - -
flag-icon-ls
- - - -
flag-icon-lt
- - - -
flag-icon-lu
- - - -
flag-icon-lv
- - - -
flag-icon-ly
- - - -
flag-icon-ma
- - - -
flag-icon-mc
- - - -
flag-icon-md
- - - -
flag-icon-me
- - - -
flag-icon-mf
- - - -
flag-icon-mg
- - - -
flag-icon-mh
- - - -
flag-icon-mk
- - - -
flag-icon-ml
- - - -
flag-icon-mm
- - - -
flag-icon-mn
- - - -
flag-icon-mo
- - - -
flag-icon-mp
- - - -
flag-icon-mq
- - - -
flag-icon-mr
- - - -
flag-icon-ms
- - - -
flag-icon-mt
- - - -
flag-icon-mu
- - - -
flag-icon-mv
- - - -
flag-icon-mw
- - - -
flag-icon-mx
- - - -
flag-icon-my
- - - -
flag-icon-mz
- - - -
flag-icon-na
- - - -
flag-icon-nc
- - - -
flag-icon-ne
- - - -
flag-icon-nf
- - - -
flag-icon-ng
- - - -
flag-icon-ni
- - - -
flag-icon-nl
- - - -
flag-icon-no
- - - -
flag-icon-np
- - - -
flag-icon-nr
- - - -
flag-icon-nu
- - - -
flag-icon-nz
- - - -
flag-icon-om
- - - -
flag-icon-pa
- - - -
flag-icon-pe
- - - -
flag-icon-pf
- - - -
flag-icon-pg
- - - -
flag-icon-ph
- - - -
flag-icon-pk
- - - -
flag-icon-pl
- - - -
flag-icon-pm
- - - -
flag-icon-pn
- - - -
flag-icon-pr
- - - -
flag-icon-ps
- - - -
flag-icon-pt
- - - -
flag-icon-pw
- - - -
flag-icon-py
- - - -
flag-icon-qa
- - - -
flag-icon-re
- - - -
flag-icon-ro
- - - -
flag-icon-rs
- - - -
flag-icon-ru
- - - -
flag-icon-rw
- - - -
flag-icon-sa
- - - -
flag-icon-sb
- - - -
flag-icon-sc
- - - -
flag-icon-sd
- - - -
flag-icon-se
- - - -
flag-icon-sg
- - - -
flag-icon-sh
- - - -
flag-icon-si
- - - -
flag-icon-sj
- - - -
flag-icon-sk
- - - -
flag-icon-sl
- - - -
flag-icon-sm
- - - -
flag-icon-sn
- - - -
flag-icon-so
- - - -
flag-icon-sr
- - - -
flag-icon-ss
- - - -
flag-icon-st
- - - -
flag-icon-sv
- - - -
flag-icon-sx
- - - -
flag-icon-sy
- - - -
flag-icon-sz
- - - -
flag-icon-tc
- - - -
flag-icon-td
- - - -
flag-icon-tf
- - - -
flag-icon-tg
- - - -
flag-icon-th
- - - -
flag-icon-tj
- - - -
flag-icon-tk
- - - -
flag-icon-tl
- - - -
flag-icon-tm
- - - -
flag-icon-tn
- - - -
flag-icon-to
- - - -
flag-icon-tr
- - - -
flag-icon-tt
- - - -
flag-icon-tv
- - - -
flag-icon-tw
- - - -
flag-icon-tz
- - - -
flag-icon-ua
- - - -
flag-icon-ug
- - - -
flag-icon-um
- - - -
flag-icon-us
- - - -
flag-icon-uy
- - - -
flag-icon-uz
- - - -
flag-icon-va
- - - -
flag-icon-vc
- - - -
flag-icon-ve
- - - -
flag-icon-vg
- - - -
flag-icon-vi
- - - -
flag-icon-vn
- - - -
flag-icon-vu
- - - -
flag-icon-wf
- - - -
flag-icon-ws
- - - -
flag-icon-ye
- - - -
flag-icon-yt
- - - -
flag-icon-za
- - - -
flag-icon-zm
- - - -
flag-icon-zw
- - - - -
- ); - } -} - -export default Flags; diff --git a/src/views/Icons/Flags/Flags.test.js b/src/views/Icons/Flags/Flags.test.js deleted file mode 100644 index 0c4274824..000000000 --- a/src/views/Icons/Flags/Flags.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Flags from './Flags'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Icons/Flags/package.json b/src/views/Icons/Flags/package.json deleted file mode 100644 index 5bf64ea8c..000000000 --- a/src/views/Icons/Flags/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Flags", - "version": "0.0.0", - "private": true, - "main": "./Flags.js" -} diff --git a/src/views/Icons/FontAwesome/FontAwesome.js b/src/views/Icons/FontAwesome/FontAwesome.js deleted file mode 100644 index a53478e60..000000000 --- a/src/views/Icons/FontAwesome/FontAwesome.js +++ /dev/null @@ -1,3702 +0,0 @@ -import React, { Component } from 'react'; -import { Alert, Card, CardBody, CardHeader, Col, Row } from 'reactstrap'; - -class FontAwesome extends Component { - render() { - return ( -
- - - 55 New Icons in 4.7 - - - - -
address-book - - -
address-book-o - - -
address-card - - -
address-card-o - - -
bandcamp - - -
bath - - -
bathtub (alias) - - -
drivers-license (alias) - - -
drivers-license-o (alias) - - -
eercast - - -
envelope-open - - -
envelope-open-o - - -
etsy - - -
free-code-camp - - -
grav - - -
handshake-o - - -
id-badge - - -
id-card - - -
id-card-o - - -
imdb - - -
linode - - -
meetup - - -
microchip - - -
podcast - - -
quora - - -
ravelry - - -
s15 (alias) - - -
shower - - -
snowflake-o - - -
superpowers - - -
telegram - - -
thermometer (alias) - - -
thermometer-0 (alias) - - -
thermometer-1 (alias) - - -
thermometer-2 (alias) - - -
thermometer-3 (alias) - - -
thermometer-4 (alias) - - -
thermometer-empty - - -
thermometer-full - - -
thermometer-half - - -
thermometer-quarter - - -
thermometer-three-quarters - - -
times-rectangle (alias) - - -
times-rectangle-o (alias) - - -
user-circle - - -
user-circle-o - - -
user-o - - -
vcard (alias) - - -
vcard-o (alias) - - -
window-close - - -
window-close-o - - -
window-maximize - - -
window-minimize - - -
window-restore - - -
wpexplorer - - - - - - 20 New Icons in 4.5 - - - - -
bluetooth - - - -
bluetooth-b - - - -
codiepie - - - -
credit-card-alt - - - -
edge - - - -
fort-awesome - - - -
hashtag - - - -
mixcloud - - - -
modx - - - -
pause-circle - - - -
pause-circle-o - - - -
percent - - - -
product-hunt - - - -
reddit-alien - - - -
scribd - - - -
shopping-bag - - - -
shopping-basket - - - -
stop-circle - - - -
stop-circle-o - - - -
usb - - - - - - - - - Web Application Icons - - - - -
adjust - - - -
anchor - - - -
archive - - - -
area-chart - - - -
arrows - - - -
arrows-h - - - -
arrows-v - - - -
asterisk - - - -
at - - - -
automobile (alias) - - - -
balance-scale - - - -
ban - - - -
bank (alias) - - - -
bar-chart - - - -
bar-chart-o (alias) - - - -
barcode - - - -
bars - - - -
battery-0 (alias) - - - -
battery-1 (alias) - - - -
battery-2 (alias) - - - -
battery-3 (alias) - - - -
battery-4 (alias) - - - -
battery-empty - - - -
battery-full - - - -
battery-half - - - -
battery-quarter - - - -
battery-three-quarters - - - -
bed - - - -
beer - - - -
bell - - - -
bell-o - - - -
bell-slash - - - -
bell-slash-o - - - -
bicycle - - - -
binoculars - - - -
birthday-cake - - - -
bluetooth - - - -
bluetooth-b - - - -
bolt - - - -
bomb - - - -
book - - - -
bookmark - - - -
bookmark-o - - - -
briefcase - - - -
bug - - - -
building - - - -
building-o - - - -
bullhorn - - - -
bullseye - - - -
bus - - - -
cab (alias) - - - -
calculator - - - -
calendar - - - -
calendar-check-o - - - -
calendar-minus-o - - - -
calendar-o - - - -
calendar-plus-o - - - -
calendar-times-o - - - -
camera - - - -
camera-retro - - - -
car - - - -
caret-square-o-down - - - -
caret-square-o-left - - - -
caret-square-o-right - - - -
caret-square-o-up - - - -
cart-arrow-down - - - -
cart-plus - - - -
cc - - - -
certificate - - - -
check - - - -
check-circle - - - -
check-circle-o - - - -
check-square - - - -
check-square-o - - - -
child - - - -
circle - - - -
circle-o - - - -
circle-o-notch - - - -
circle-thin - - - -
clock-o - - - -
clone - - - -
close (alias) - - - -
cloud - - - -
cloud-download - - - -
cloud-upload - - - -
code - - - -
code-fork - - - -
coffee - - - -
cog - - - -
cogs - - - -
comment - - - -
comment-o - - - -
commenting - - - -
commenting-o - - - -
comments - - - -
comments-o - - - -
compass - - - -
copyright - - - -
creative-commons - - - -
credit-card - - - -
credit-card-alt - - - -
crop - - - -
crosshairs - - - -
cube - - - -
cubes - - - -
cutlery - - - -
dashboard (alias) - - - -
database - - - -
desktop - - - -
diamond - - - -
dot-circle-o - - - -
download - - - -
edit (alias) - - - -
ellipsis-h - - - -
ellipsis-v - - - -
envelope - - - -
envelope-o - - - -
envelope-square - - - -
eraser - - - -
exchange - - - -
exclamation - - - -
exclamation-circle - - - -
exclamation-triangle - - - -
external-link - - - -
external-link-square - - - -
eye - - - -
eye-slash - - - -
eyedropper - - - -
fax - - - -
feed (alias) - - - -
female - - - -
fighter-jet - - - -
file-archive-o - - - -
file-audio-o - - - -
file-code-o - - - -
file-excel-o - - - -
file-image-o - - - -
file-movie-o (alias) - - - -
file-pdf-o - - - -
file-photo-o (alias) - - - -
file-picture-o (alias) - - - -
file-powerpoint-o - - - -
file-sound-o (alias) - - - -
file-video-o - - - -
file-word-o - - - -
file-zip-o (alias) - - - -
film - - - -
filter - - - -
fire - - - -
fire-extinguisher - - - -
flag - - - -
flag-checkered - - - -
flag-o - - - -
flash (alias) - - - -
flask - - - -
folder - - - -
folder-o - - - -
folder-open - - - -
folder-open-o - - - -
frown-o - - - -
futbol-o - - - -
gamepad - - - -
gavel - - - -
gear (alias) - - - -
gears (alias) - - - -
gift - - - -
glass - - - -
globe - - - -
graduation-cap - - - -
group (alias) - - - -
hand-grab-o (alias) - - - -
hand-lizard-o - - - -
hand-paper-o - - - -
hand-peace-o - - - -
hand-pointer-o - - - -
hand-rock-o - - - -
hand-scissors-o - - - -
hand-spock-o - - - -
hand-stop-o (alias) - - - -
hashtag - - - -
hdd-o - - - -
headphones - - - -
heart - - - -
heart-o - - - -
heartbeat - - - -
history - - - -
home - - - -
hotel (alias) - - - -
hourglass - - - -
hourglass-1 (alias) - - - -
hourglass-2 (alias) - - - -
hourglass-3 (alias) - - - -
hourglass-end - - - -
hourglass-half - - - -
hourglass-o - - - -
hourglass-start - - - -
i-cursor - - - -
image (alias) - - - -
inbox - - - -
industry - - - -
info - - - -
info-circle - - - -
institution (alias) - - - -
key - - - -
keyboard-o - - - -
language - - - -
laptop - - - -
leaf - - - -
legal (alias) - - - -
lemon-o - - - -
level-down - - - -
level-up - - - -
life-bouy (alias) - - - -
life-buoy (alias) - - - -
life-ring - - - -
life-saver (alias) - - - -
lightbulb-o - - - -
line-chart - - - -
location-arrow - - - -
lock - - - -
magic - - - -
magnet - - - -
mail-forward (alias) - - - -
mail-reply (alias) - - - -
mail-reply-all (alias) - - - -
male - - - -
map - - - -
map-marker - - - -
map-o - - - -
map-pin - - - -
map-signs - - - -
meh-o - - - -
microphone - - - -
microphone-slash - - - -
minus - - - -
minus-circle - - - -
minus-square - - - -
minus-square-o - - - -
mobile - - - -
mobile-phone (alias) - - - -
money - - - -
moon-o - - - -
mortar-board (alias) - - - -
motorcycle - - - -
mouse-pointer - - - -
music - - - -
navicon (alias) - - - -
newspaper-o - - - -
object-group - - - -
object-ungroup - - - -
paint-brush - - - -
paper-plane - - - -
paper-plane-o - - - -
paw - - - -
pencil - - - -
pencil-square - - - -
pencil-square-o - - - -
percent - - - -
phone - - - -
phone-square - - - -
photo (alias) - - - -
picture-o - - - -
pie-chart - - - -
plane - - - -
plug - - - -
plus - - - -
plus-circle - - - -
plus-square - - - -
plus-square-o - - - -
power-off - - - -
print - - - -
puzzle-piece - - - -
qrcode - - - -
question - - - -
question-circle - - - -
quote-left - - - -
quote-right - - - -
random - - - -
recycle - - - -
refresh - - - -
registered - - - -
remove (alias) - - - -
reorder (alias) - - - -
reply - - - -
reply-all - - - -
retweet - - - -
road - - - -
rocket - - - -
rss - - - -
rss-square - - - -
search - - - -
search-minus - - - -
search-plus - - - -
send (alias) - - - -
send-o (alias) - - - -
server - - - -
share - - - -
share-alt - - - -
share-alt-square - - - -
share-square - - - -
share-square-o - - - -
shield - - - -
ship - - - -
shopping-bag - - - -
shopping-basket - - - -
shopping-cart - - - -
sign-in - - - -
sign-out - - - -
signal - - - -
sitemap - - - -
sliders - - - -
smile-o - - - -
soccer-ball-o (alias) - - - -
sort - - - -
sort-alpha-asc - - - -
sort-alpha-desc - - - -
sort-amount-asc - - - -
sort-amount-desc - - - -
sort-asc - - - -
sort-desc - - - -
sort-down (alias) - - - -
sort-numeric-asc - - - -
sort-numeric-desc - - - -
sort-up (alias) - - - -
space-shuttle - - - -
spinner - - - -
spoon - - - -
square - - - -
square-o - - - -
star - - - -
star-half - - - -
star-half-empty (alias) - - - -
star-half-full (alias) - - - -
star-half-o - - - -
star-o - - - -
sticky-note - - - -
sticky-note-o - - - -
street-view - - - -
suitcase - - - -
sun-o - - - -
support (alias) - - - -
tablet - - - -
tachometer - - - -
tag - - - -
tags - - - -
tasks - - - -
taxi - - - -
television - - - -
terminal - - - -
thumb-tack - - - -
thumbs-down - - - -
thumbs-o-down - - - -
thumbs-o-up - - - -
thumbs-up - - - -
ticket - - - -
times - - - -
times-circle - - - -
times-circle-o - - - -
tint - - - -
toggle-down (alias) - - - -
toggle-left (alias) - - - -
toggle-off - - - -
toggle-on - - - -
toggle-right (alias) - - - -
toggle-up (alias) - - - -
trademark - - - -
trash - - - -
trash-o - - - -
tree - - - -
trophy - - - -
truck - - - -
tty - - - -
tv (alias) - - - -
umbrella - - - -
university - - - -
unlock - - - -
unlock-alt - - - -
unsorted (alias) - - - -
upload - - - -
user - - - -
user-plus - - - -
user-secret - - - -
user-times - - - -
users - - - -
video-camera - - - -
volume-down - - - -
volume-off - - - -
volume-up - - - -
warning (alias) - - - -
wheelchair - - - -
wifi - - - -
wrench - - - - - - - - - Hand Icons - - - - -
hand-grab-o (alias) - - - -
hand-lizard-o - - - -
hand-o-down - - - -
hand-o-left - - - -
hand-o-right - - - -
hand-o-up - - - -
hand-paper-o - - - -
hand-peace-o - - - -
hand-pointer-o - - - -
hand-rock-o - - - -
hand-scissors-o - - - -
hand-spock-o - - - -
hand-stop-o (alias) - - - -
thumbs-down - - - -
thumbs-o-down - - - -
thumbs-o-up - - - -
thumbs-up - - - - - - - - - Transportation Icons - - - - -
ambulance - - - -
automobile (alias) - - - -
bicycle - - - -
bus - - - -
cab (alias) - - - -
car - - - -
fighter-jet - - - -
motorcycle - - - -
plane - - - -
rocket - - - -
ship - - - -
space-shuttle - - - -
subway - - - -
taxi - - - -
train - - - -
truck - - - -
wheelchair - - - - - - - - Gender Icons - - - - -
genderless - - - -
intersex (alias) - - - -
mars - - - -
mars-double - - - -
mars-stroke - - - -
mars-stroke-h - - - -
mars-stroke-v - - - -
mercury - - - -
neuter - - - -
transgender - - - -
transgender-alt - - - -
venus - - - -
venus-double - - - -
venus-mars - - - - - - - - File Type Icons - - - - -
file - - - -
file-archive-o - - - -
file-audio-o - - - -
file-code-o - - - -
file-excel-o - - - -
file-image-o - - - -
file-movie-o (alias) - - - -
file-o - - - -
file-pdf-o - - - -
file-photo-o (alias) - - - -
file-picture-o (alias) - - - -
file-powerpoint-o - - - -
file-sound-o (alias) - - - -
file-text - - - -
file-text-o - - - -
file-video-o - - - -
file-word-o - - - -
file-zip-o (alias) - - - - - - - - Spinner Icons - - -
    -
  • - - These icons work great with the fa-spin class. -
    • -
- - - - -
circle-o-notch - - - -
cog - - - -
gear (alias) - - - -
refresh - - - -
spinner - - - - - - - - Form Control Icons - - - - -
check-square - - - -
check-square-o - - - -
circle - - - -
circle-o - - - -
dot-circle-o - - - -
minus-square - - - -
minus-square-o - - - -
plus-square - - - -
plus-square-o - - - -
square - - - -
square-o - - - - - - - - Payment Icons - - - - -
cc-amex - - - -
cc-diners-club - - - -
cc-discover - - - -
cc-jcb - - - -
cc-mastercard - - - -
cc-paypal - - - -
cc-stripe - - - -
cc-visa - - - -
credit-card - - - -
credit-card-alt - - - -
google-wallet - - - -
paypal - - - - - - - - Chart Icons - - - - -
area-chart - - - -
bar-chart - - - -
bar-chart-o (alias) - - - -
line-chart - - - -
pie-chart - - - - - - - - Currency Icons - - - - -
bitcoin (alias) - - - -
btc - - - -
cny (alias) - - - -
dollar (alias) - - - -
eur - - - -
euro (alias) - - - -
gbp - - - -
gg - - - -
gg-circle - - - -
ils - - - -
inr - - - -
jpy - - - -
krw - - - -
money - - - -
rmb (alias) - - - -
rouble (alias) - - - -
rub - - - -
ruble (alias) - - - -
rupee (alias) - - - -
shekel (alias) - - - -
sheqel (alias) - - - -
try - - - -
turkish-lira (alias) - - - -
usd - - - -
won (alias) - - - -
yen (alias) - - - - - - - - Text Editor Icons - - - - -
align-center - - - -
align-justify - - - -
align-left - - - -
align-right - - - -
bold - - - -
chain (alias) - - - -
chain-broken - - - -
clipboard - - - -
columns - - - -
copy (alias) - - - -
cut (alias) - - - -
dedent (alias) - - - -
eraser - - - -
file - - - -
file-o - - - -
file-text - - - -
file-text-o - - - -
files-o - - - -
floppy-o - - - -
font - - - -
header - - - -
indent - - - -
italic - - - -
link - - - -
list - - - -
list-alt - - - -
list-ol - - - -
list-ul - - - -
outdent - - - -
paperclip - - - -
paragraph - - - -
paste (alias) - - - -
repeat - - - -
rotate-left (alias) - - - -
rotate-right (alias) - - - -
save (alias) - - - -
scissors - - - -
strikethrough - - - -
subscript - - - -
superscript - - - -
table - - - -
text-height - - - -
text-width - - - -
th - - - -
th-large - - - -
th-list - - - -
underline - - - -
undo - - - -
unlink (alias) - - - - - - - - Directional Icons - - - - -
angle-double-down - - - -
angle-double-left - - - -
angle-double-right - - - -
angle-double-up - - - -
angle-down - - - -
angle-left - - - -
angle-right - - - -
angle-up - - - -
arrow-circle-down - - - -
arrow-circle-left - - - -
arrow-circle-o-down - - - -
arrow-circle-o-left - - - -
arrow-circle-o-right - - - -
arrow-circle-o-up - - - -
arrow-circle-right - - - -
arrow-circle-up - - - -
arrow-down - - - -
arrow-left - - - -
arrow-right - - - -
arrow-up - - - -
arrows - - - -
arrows-alt - - - -
arrows-h - - - -
arrows-v - - - -
caret-down - - - -
caret-left - - - -
caret-right - - - -
caret-square-o-down - - - -
caret-square-o-left - - - -
caret-square-o-right - - - -
caret-square-o-up - - - -
caret-up - - - -
chevron-circle-down - - - -
chevron-circle-left - - - -
chevron-circle-right - - - -
chevron-circle-up - - - -
chevron-down - - - -
chevron-left - - - -
chevron-right - - - -
chevron-up - - - -
exchange - - - -
hand-o-down - - - -
hand-o-left - - - -
hand-o-right - - - -
hand-o-up - - - -
long-arrow-down - - - -
long-arrow-left - - - -
long-arrow-right - - - -
long-arrow-up - - - -
toggle-down (alias) - - - -
toggle-left (alias) - - - -
toggle-right (alias) - - - -
toggle-up (alias) - - - - - - - - Video Player Icons - - - - -
arrows-alt - - - -
backward - - - -
compress - - - -
eject - - - -
expand - - - -
fast-backward - - - -
fast-forward - - - -
forward - - - -
pause - - - -
pause-circle - - - -
pause-circle-o - - - -
play - - - -
play-circle - - - -
play-circle-o - - - -
random - - - -
step-backward - - - -
step-forward - - - -
stop - - - -
stop-circle - - - -
stop-circle-o - - - -
youtube-play - - - - - - - - Brand Icons - - -

Warning!

- Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social - Media Buttons" setting. We will not use hacks to force them to display. Please - report an issue with Adblock Plus if - you believe this to be - an error. To work around this, you'll need to modify the social icon class names. - - - - -
500px - - - -
adn - - - -
amazon - - - -
android - - - -
angellist - - - -
apple - - - -
behance - - - -
behance-square - - - -
bitbucket - - - -
bitbucket-square - - - -
bitcoin (alias) - - - -
black-tie - - - -
bluetooth - - - -
bluetooth-b - - - -
btc - - - -
buysellads - - - -
cc-amex - - - -
cc-diners-club - - - -
cc-discover - - - -
cc-jcb - - - -
cc-mastercard - - - -
cc-paypal - - - -
cc-stripe - - - -
cc-visa - - - -
chrome - - - -
codepen - - - -
codiepie - - - -
connectdevelop - - - -
contao - - - -
css3 - - - -
dashcube - - - -
delicious - - - -
deviantart - - - -
digg - - - -
dribbble - - - -
dropbox - - - -
drupal - - - -
edge - - - -
empire - - - -
expeditedssl - - - -
facebook - - - -
facebook-f (alias) - - - -
facebook-official - - - -
facebook-square - - - -
firefox - - - -
flickr - - - -
fonticons - - - -
fort-awesome - - - -
forumbee - - - -
foursquare - - - -
ge (alias) - - - -
get-pocket - - - -
gg - - - -
gg-circle - - - -
git - - - -
git-square - - - -
github - - - -
github-alt - - - -
github-square - - - -
gittip (alias) - - - -
google - - - -
google-plus - - - -
google-plus-square - - - -
google-wallet - - - -
gratipay - - - -
hacker-news - - - -
houzz - - - -
html5 - - - -
instagram - - - -
internet-explorer - - - -
ioxhost - - - -
joomla - - - -
jsfiddle - - - -
lastfm - - - -
lastfm-square - - - -
leanpub - - - -
linkedin - - - -
linkedin-square - - - -
linux - - - -
maxcdn - - - -
meanpath - - - -
medium - - - -
mixcloud - - - -
modx - - - -
odnoklassniki - - - -
odnoklassniki-square - - - -
opencart - - - -
openid - - - -
opera - - - -
optin-monster - - - -
pagelines - - - -
paypal - - - -
pied-piper - - - -
pied-piper-alt - - - -
pinterest - - - -
pinterest-p - - - -
pinterest-square - - - -
product-hunt - - - -
qq - - - -
ra (alias) - - - -
rebel - - - -
reddit - - - -
reddit-alien - - - -
reddit-square - - - -
renren - - - -
safari - - - -
scribd - - - -
sellsy - - - -
share-alt - - - -
share-alt-square - - - -
shirtsinbulk - - - -
simplybuilt - - - -
skyatlas - - - -
skype - - - -
slack - - - -
slideshare - - - -
soundcloud - - - -
spotify - - - -
stack-exchange - - - -
stack-overflow - - - -
steam - - - -
steam-square - - - -
stumbleupon - - - -
stumbleupon-circle - - - -
tencent-weibo - - - -
trello - - - -
tripadvisor - - - -
tumblr - - - -
tumblr-square - - - -
twitch - - - -
twitter - - - -
twitter-square - - - -
usb - - - -
viacoin - - - -
vimeo - - - -
vimeo-square - - - -
vine - - - -
vk - - - -
wechat (alias) - - - -
weibo - - - -
weixin - - - -
whatsapp - - - -
wikipedia-w - - - -
windows - - - -
wordpress - - - -
xing - - - -
xing-square - - - -
y-combinator - - - -
y-combinator-square (alias) - - - -
yahoo - - - -
yc (alias) - - - -
yc-square (alias) - - - -
yelp - - - -
youtube - - - -
youtube-play - - - -
youtube-square - - - -
    -
  • All brand icons are trademarks of their respective owners.
    • -
  • The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, - nor vice versa. -
    • -
  • Brand icons should only be used to represent the company or product to which they refer.
    • -
- - - - - - Medical Icons - - - - -
ambulance - - - -
h-square - - - -
heart - - - -
heart-o - - - -
heartbeat - - - -
hospital-o - - - -
medkit - - - -
plus-square - - - -
stethoscope - - - -
user-md - - - -
wheelchair - - - - - -
- - ); - } -} - -export default FontAwesome; diff --git a/src/views/Icons/FontAwesome/FontAwesome.test.js b/src/views/Icons/FontAwesome/FontAwesome.test.js deleted file mode 100644 index 77498173d..000000000 --- a/src/views/Icons/FontAwesome/FontAwesome.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import FontAwesome from './FontAwesome'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); \ No newline at end of file diff --git a/src/views/Icons/FontAwesome/package.json b/src/views/Icons/FontAwesome/package.json deleted file mode 100644 index 91f35f65c..000000000 --- a/src/views/Icons/FontAwesome/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "FontAwesome", - "version": "0.0.0", - "private": true, - "main": "./FontAwesome.js" -} diff --git a/src/views/Icons/SimpleLineIcons/SimpleLineIcons.js b/src/views/Icons/SimpleLineIcons/SimpleLineIcons.js deleted file mode 100644 index b8b56ce8f..000000000 --- a/src/views/Icons/SimpleLineIcons/SimpleLineIcons.js +++ /dev/null @@ -1,755 +0,0 @@ -import React, { Component } from 'react'; -import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap'; - -class SimpleLineIcons extends Component { - render() { - return ( -
- - - Simple Line Icons - - - - - - icon-user - - - - icon-people - - - - icon-user-female - - - - icon-user-follow - - - - icon-user-following - - - - icon-user-unfollow - - - - icon-login - - - - icon-logout - - - - icon-emotsmile - - - - icon-phone - - - - icon-call-end - - - - icon-call-in - - - - icon-call-out - - - - icon-map - - - - icon-location-pin - - - - icon-direction - - - - icon-directions - - - - icon-compass - - - - icon-layers - - - - icon-menu - - - - icon-list - - - - icon-options-vertical - - - - icon-options - - - - icon-arrow-down - - - - icon-arrow-left - - - - icon-arrow-right - - - - icon-arrow-up - - - - icon-arrow-up-circle - - - - icon-arrow-left-circle - - - - icon-arrow-right-circle - - - - icon-arrow-down-circle - - - - icon-check - - - - icon-clock - - - - icon-plus - - - - icon-close - - - - icon-trophy - - - - icon-screen-smartphone - - - - icon-screen-desktop - - - - icon-plane - - - - icon-notebook - - - - icon-mustache - - - - icon-mouse - - - - icon-magnet - - - - icon-energy - - - - icon-disc - - - - icon-cursor - - - - icon-cursor-move - - - - icon-crop - - - - icon-chemistry - - - - icon-speedometer - - - - icon-shield - - - - icon-screen-tablet - - - - icon-magic-wand - - - - icon-hourglass - - - - icon-graduation - - - - icon-ghost - - - - icon-game-controller - - - - icon-fire - - - - icon-eyeglass - - - - icon-envelope-open - - - - icon-envelope-letter - - - - icon-bell - - - - icon-badge - - - - icon-anchor - - - - icon-wallet - - - - icon-vector - - - - icon-speech - - - - icon-puzzle - - - - icon-printer - - - - icon-present - - - - icon-playlist - - - - icon-pin - - - - icon-picture - - - - icon-handbag - - - - icon-globe-alt - - - - icon-globe - - - - icon-folder-alt - - - - icon-folder - - - - icon-film - - - - icon-feed - - - - icon-drop - - - - icon-drawer - - - - icon-docs - - - - icon-doc - - - - icon-diamond - - - - icon-cup - - - - icon-calculator - - - - icon-bubbles - - - - icon-briefcase - - - - icon-book-open - - - - icon-basket-loaded - - - - icon-basket - - - - icon-bag - - - - icon-action-undo - - - - icon-action-redo - - - - icon-wrench - - - - icon-umbrella - - - - icon-trash - - - - icon-tag - - - - icon-support - - - - icon-frame - - - - icon-size-fullscreen - - - - icon-size-actual - - - - icon-shuffle - - - - icon-share-alt - - - - icon-share - - - - icon-rocket - - - - icon-question - - - - icon-pie-chart - - - - icon-pencil - - - - icon-note - - - - icon-loop - - - - icon-home - - - - icon-grid - - - - icon-graph - - - - icon-microphone - - - - icon-music-tone-alt - - - - icon-music-tone - - - - icon-earphones-alt - - - - icon-earphones - - - - icon-equalizer - - - - icon-like - - - - icon-dislike - - - - icon-control-start - - - - icon-control-rewind - - - - icon-control-play - - - - icon-control-pause - - - - icon-control-forward - - - - icon-control-end - - - - icon-volume-1 - - - - icon-volume-2 - - - - icon-volume-off - - - - icon-calendar - - - - icon-bulb - - - - icon-chart - - - - icon-ban - - - - icon-bubble - - - - icon-camrecorder - - - - icon-camera - - - - icon-cloud-download - - - - icon-cloud-upload - - - - icon-envelope - - - - icon-eye - - - - icon-flag - - - - icon-heart - - - - icon-info - - - - icon-key - - - - icon-link - - - - icon-lock - - - - icon-lock-open - - - - icon-magnifier - - - - icon-magnifier-add - - - - icon-magnifier-remove - - - - icon-paper-clip - - - - icon-paper-plane - - - - icon-power - - - - icon-refresh - - - - icon-reload - - - - icon-settings - - - - icon-star - - - - icon-symbol-female - - - - icon-symbol-male - - - - icon-target - - - - icon-credit-card - - - - icon-paypal - - - - icon-social-tumblr - - - - icon-social-twitter - - - - icon-social-facebook - - - - icon-social-instagram - - - - icon-social-linkedin - - - - icon-social-pinterest - - - - icon-social-github - - - - icon-social-gplus - - - - icon-social-reddit - - - - icon-social-skype - - - - icon-social-dribbble - - - - icon-social-behance - - - - icon-social-foursqare - - - - icon-social-soundcloud - - - - icon-social-spotify - - - - icon-social-stumbleupon - - - - icon-social-youtube - - - - icon-social-dropbox - - - - - -
- ); - } -} - -export default SimpleLineIcons; diff --git a/src/views/Icons/SimpleLineIcons/SimpleLineIcons.test.js b/src/views/Icons/SimpleLineIcons/SimpleLineIcons.test.js deleted file mode 100644 index 84a931eba..000000000 --- a/src/views/Icons/SimpleLineIcons/SimpleLineIcons.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import SimpleLineIcons from './SimpleLineIcons'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); \ No newline at end of file diff --git a/src/views/Icons/SimpleLineIcons/package.json b/src/views/Icons/SimpleLineIcons/package.json deleted file mode 100644 index f9437fec3..000000000 --- a/src/views/Icons/SimpleLineIcons/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "SimpleLineIcons", - "version": "0.0.0", - "private": true, - "main": "./SimpleLineIcons.js" -} diff --git a/src/views/Icons/index.js b/src/views/Icons/index.js deleted file mode 100644 index 5a80a2a8c..000000000 --- a/src/views/Icons/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import CoreUIIcons from './CoreUIIcons'; -import Flags from './Flags'; -import FontAwesome from './FontAwesome'; -import SimpleLineIcons from './SimpleLineIcons'; - -export { - CoreUIIcons, Flags, FontAwesome, SimpleLineIcons -}; diff --git a/src/views/Notifications/Alerts/Alerts.js b/src/views/Notifications/Alerts/Alerts.js deleted file mode 100644 index db1d63ab1..000000000 --- a/src/views/Notifications/Alerts/Alerts.js +++ /dev/null @@ -1,146 +0,0 @@ -import React, { Component } from 'react'; -import { Alert, Card, CardBody, CardHeader, Col, Row } from 'reactstrap'; - -class Alerts extends Component { - constructor(props) { - super(props); - - this.state = { - visible: true, - }; - - this.onDismiss = this.onDismiss.bind(this); - } - - onDismiss() { - this.setState({ visible: false }); - } - - render() { - return ( -
- - - - - Alerts - - - - - This is a primary alert — check it out! - - - This is a secondary alert — check it out! - - - This is a success alert — check it out! - - - This is a danger alert — check it out! - - - This is a warning alert — check it out! - - - This is a info alert — check it out! - - - This is a light alert — check it out! - - - This is a dark alert — check it out! - - - - - - - - Alerts - use .alert-link to provide links - - - - {/*eslint-disable-next-line*/} - This is a primary alert with an example link. Give it a click if you like. - - - {/*eslint-disable-next-line*/} - This is a secondary alert with an example link. Give it a click if you like. - - - {/*eslint-disable-next-line*/} - This is a success alert with an example link. Give it a click if you like. - - - {/*eslint-disable-next-line*/} - This is a danger alert with an example link. Give it a click if you like. - - - {/*eslint-disable-next-line*/} - This is a warning alert with an example link. Give it a click if you like. - - - {/*eslint-disable-next-line*/} - This is a info alert with an example link. Give it a click if you like. - - - {/*eslint-disable-next-line*/} - This is a light alert with an example link. Give it a click if you like. - - - {/*eslint-disable-next-line*/} - This is a dark alert with an example link. Give it a click if you like. - - - - - - - - - - Alerts - additional content - - - -

Well done!

-

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

-
-

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

- - - - - - - - Alerts - dismissing - - - - I am an alert and I can be dismissed! - - - - - -
- ); - } -} - -export default Alerts; diff --git a/src/views/Notifications/Alerts/Alerts.test.js b/src/views/Notifications/Alerts/Alerts.test.js deleted file mode 100644 index 9db72cf0c..000000000 --- a/src/views/Notifications/Alerts/Alerts.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Alerts from './Alerts'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Notifications/Alerts/package.json b/src/views/Notifications/Alerts/package.json deleted file mode 100644 index f0234ecb1..000000000 --- a/src/views/Notifications/Alerts/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Alerts", - "version": "0.0.0", - "private": true, - "main": "./Alerts.js" -} diff --git a/src/views/Notifications/Badges/Badges.js b/src/views/Notifications/Badges/Badges.js deleted file mode 100644 index 17e3ec4e6..000000000 --- a/src/views/Notifications/Badges/Badges.js +++ /dev/null @@ -1,87 +0,0 @@ -import React, { Component } from 'react'; -import { Badge, Button, Card, CardBody, CardFooter, CardHeader, Col, Row } from 'reactstrap'; - -class Badges extends Component { - render() { - return ( -
- - - - - Badges - - - -

Heading New

-

Heading New

-

Heading New

-

Heading New

-
Heading New
-
Heading New
- - - - - - - - - - Badges contextual variations - - - Primary - Secondary - Success - Danger - Warning - Info - Light - Dark - - - - - Badges pill badges - - - Primary - Secondary - Success - Danger - Warning - Info - Light - Dark - - - - - Badges links - - - Primary - Secondary - Success - Danger - Warning - Info - Light - Dark - - - - -
- ); - } -} - -export default Badges; diff --git a/src/views/Notifications/Badges/Badges.test.js b/src/views/Notifications/Badges/Badges.test.js deleted file mode 100644 index 8602dc4dc..000000000 --- a/src/views/Notifications/Badges/Badges.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Badges from './Badges'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Notifications/Badges/package.json b/src/views/Notifications/Badges/package.json deleted file mode 100644 index 6ea6e74ff..000000000 --- a/src/views/Notifications/Badges/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Badges", - "version": "0.0.0", - "private": true, - "main": "./Badges.js" -} diff --git a/src/views/Notifications/Modals/Modals.js b/src/views/Notifications/Modals/Modals.js deleted file mode 100644 index 99c100503..000000000 --- a/src/views/Notifications/Modals/Modals.js +++ /dev/null @@ -1,233 +0,0 @@ -import React, { Component } from 'react'; -import { Button, Card, CardBody, CardHeader, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row } from 'reactstrap'; - -class Modals extends Component { - - constructor(props) { - super(props); - this.state = { - modal: false, - large: false, - small: false, - primary: false, - success: false, - warning: false, - danger: false, - info: false, - }; - - this.toggle = this.toggle.bind(this); - this.toggleLarge = this.toggleLarge.bind(this); - this.toggleSmall = this.toggleSmall.bind(this); - this.togglePrimary = this.togglePrimary.bind(this); - this.toggleSuccess = this.toggleSuccess.bind(this); - this.toggleWarning = this.toggleWarning.bind(this); - this.toggleDanger = this.toggleDanger.bind(this); - this.toggleInfo = this.toggleInfo.bind(this); - } - - toggle() { - this.setState({ - modal: !this.state.modal, - }); - } - - toggleLarge() { - this.setState({ - large: !this.state.large, - }); - } - - toggleSmall() { - this.setState({ - small: !this.state.small, - }); - } - - togglePrimary() { - this.setState({ - primary: !this.state.primary, - }); - } - - toggleSuccess() { - this.setState({ - success: !this.state.success, - }); - } - - toggleWarning() { - this.setState({ - warning: !this.state.warning, - }); - } - - toggleDanger() { - this.setState({ - danger: !this.state.danger, - }); - } - - toggleInfo() { - this.setState({ - info: !this.state.info, - }); - } - - render() { - return ( -
- - - - - Bootstrap Modals - - - - - Modal title - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. - - - {' '} - - - - - - - Modal title - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. - - - {' '} - - - - - - - Modal title - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. - - - {' '} - - - - -
- - - - Modal title - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. - - - {' '} - - - - - - - Modal title - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. - - - {' '} - - - - - - - Modal title - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. - - - {' '} - - - - - - - Modal title - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. - - - {' '} - - - - - - - Modal title - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. - - - {' '} - - - - - - - - -
- ); - } -} - -export default Modals; diff --git a/src/views/Notifications/Modals/Modals.test.js b/src/views/Notifications/Modals/Modals.test.js deleted file mode 100644 index 63d4db765..000000000 --- a/src/views/Notifications/Modals/Modals.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Modals from './Modals'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Notifications/Modals/package.json b/src/views/Notifications/Modals/package.json deleted file mode 100644 index 04e7ea00b..000000000 --- a/src/views/Notifications/Modals/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Modals", - "version": "0.0.0", - "private": true, - "main": "./Modals.js" -} diff --git a/src/views/Notifications/index.js b/src/views/Notifications/index.js deleted file mode 100644 index daf9d6e19..000000000 --- a/src/views/Notifications/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import Alerts from './Alerts'; -import Badges from './Badges'; -import Modals from './Modals'; - -export { - Alerts, Badges, Modals -}; diff --git a/src/views/Pages/Login/Login.js b/src/views/Pages/Login/Login.js deleted file mode 100644 index faf1d9b78..000000000 --- a/src/views/Pages/Login/Login.js +++ /dev/null @@ -1,66 +0,0 @@ -import React, { Component } from 'react'; -import { Link } from 'react-router-dom'; -import { Button, Card, CardBody, CardGroup, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap'; - -class Login extends Component { - render() { - return ( -
- - - - - - -
-

Login

-

Sign In to your account

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

Sign up

-

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

- - - -
- - - - - - -
- ); - } -} - -export default Login; diff --git a/src/views/Pages/Login/Login.test.js b/src/views/Pages/Login/Login.test.js deleted file mode 100644 index b10e7b859..000000000 --- a/src/views/Pages/Login/Login.test.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { MemoryRouter } from 'react-router-dom'; -import Login from './Login'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Pages/Login/package.json b/src/views/Pages/Login/package.json deleted file mode 100644 index c01f87e85..000000000 --- a/src/views/Pages/Login/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Login", - "version": "0.0.0", - "private": true, - "main": "./Login.js" -} diff --git a/src/views/Pages/Page404/Page404.js b/src/views/Pages/Page404/Page404.js deleted file mode 100644 index 6df0070da..000000000 --- a/src/views/Pages/Page404/Page404.js +++ /dev/null @@ -1,35 +0,0 @@ -import React, { Component } from 'react'; -import { Button, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap'; - -class Page404 extends Component { - render() { - return ( -
- - - -
-

404

-

Oops! You're lost.

-

The page you are looking for was not found.

-
- - - - - - - - - - - - - - -
- ); - } -} - -export default Page404; diff --git a/src/views/Pages/Page404/Page404.test.js b/src/views/Pages/Page404/Page404.test.js deleted file mode 100644 index f7a01a66d..000000000 --- a/src/views/Pages/Page404/Page404.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Page404 from './Page404'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Pages/Page404/package.json b/src/views/Pages/Page404/package.json deleted file mode 100644 index ffbc77cab..000000000 --- a/src/views/Pages/Page404/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Page404", - "version": "0.0.0", - "private": true, - "main": "./Page404.js" -} diff --git a/src/views/Pages/Page500/Page500.js b/src/views/Pages/Page500/Page500.js deleted file mode 100644 index 24e51d4d7..000000000 --- a/src/views/Pages/Page500/Page500.js +++ /dev/null @@ -1,35 +0,0 @@ -import React, { Component } from 'react'; -import { Button, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap'; - -class Page500 extends Component { - render() { - return ( -
- - - - -

500

-

Houston, we have a problem!

-

The page you are looking for is temporarily unavailable.

- - - - - - - - - - - - - - - -
- ); - } -} - -export default Page500; diff --git a/src/views/Pages/Page500/Page500.test.js b/src/views/Pages/Page500/Page500.test.js deleted file mode 100644 index db10df43e..000000000 --- a/src/views/Pages/Page500/Page500.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Page500 from './Page500'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Pages/Page500/package.json b/src/views/Pages/Page500/package.json deleted file mode 100644 index 1c3ef2b6e..000000000 --- a/src/views/Pages/Page500/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Page500", - "version": "0.0.0", - "private": true, - "main": "./Page500.js" -} diff --git a/src/views/Pages/Register/Register.js b/src/views/Pages/Register/Register.js deleted file mode 100644 index c355535f4..000000000 --- a/src/views/Pages/Register/Register.js +++ /dev/null @@ -1,68 +0,0 @@ -import React, { Component } from 'react'; -import { Button, Card, CardBody, CardFooter, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap'; - -class Register extends Component { - render() { - return ( -
- - - - - -
-

Register

-

Create your account

- - - - - - - - - - - @ - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - -
- ); - } -} - -export default Register; diff --git a/src/views/Pages/Register/Register.test.js b/src/views/Pages/Register/Register.test.js deleted file mode 100644 index ffced4f4a..000000000 --- a/src/views/Pages/Register/Register.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Register from './Register'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Pages/Register/package.json b/src/views/Pages/Register/package.json deleted file mode 100644 index b76b5dd86..000000000 --- a/src/views/Pages/Register/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Register", - "version": "0.0.0", - "private": true, - "main": "./Register.js" -} diff --git a/src/views/Pages/index.js b/src/views/Pages/index.js deleted file mode 100644 index e90b2c764..000000000 --- a/src/views/Pages/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import Login from './Login'; -import Page404 from './Page404'; -import Page500 from './Page500'; -import Register from './Register'; - -export { - Login, Page404, Page500, Register -}; \ No newline at end of file diff --git a/src/views/Theme/Colors/Colors.js b/src/views/Theme/Colors/Colors.js deleted file mode 100644 index 96959ac79..000000000 --- a/src/views/Theme/Colors/Colors.js +++ /dev/null @@ -1,184 +0,0 @@ -import React, { Component } from 'react'; -import ReactDOM from 'react-dom'; -import classNames from 'classnames'; -import { Row, Col } from 'reactstrap' -import { rgbToHex } from '@coreui/coreui/dist/js/coreui-utilities' - -class ThemeView extends Component { - constructor(props) { - super(props); - - this.state = { - bgColor: 'rgb(255, 255, 255)' - } - } - - componentDidMount () { - const elem = ReactDOM.findDOMNode(this).parentNode.firstChild - const color = window.getComputedStyle(elem).getPropertyValue('background-color') - this.setState({ - bgColor: color || this.state.bgColor - }) - } - - render() { - - return ( - - - - - - - - - - - -
HEX:{ rgbToHex(this.state.bgColor) }
RGB:{ this.state.bgColor }
- ) - } -} - -class ThemeColor extends Component { - // constructor(props) { - // super(props); - // } - render() { - - // const { className, children, ...attributes } = this.props - const { className, children } = this.props - - const classes = classNames(className, 'theme-color w-75 rounded mb-3') - - return ( - -
- {children} - - - ) - } -} - -class Colors extends Component { - render() { - return ( -
-
-
- Theme colors -
-
- - -
Brand Primary Color
- - -
Brand Secondary Color
- - -
Brand Success Color
- - -
Brand Danger Color
- - -
Brand Warning Color
- - -
Brand Info Color
- - -
Brand Light Color
- - -
Brand Dark Color
- - -
-
-
-
- Grays -
-
- - -
Gray 100 Color
- - -
Gray 200 Color
- - -
Gray 300 Color
- - -
Gray 400 Color
- - -
Gray 500 Color
- - -
Gray 600 Color
- - -
Gray 700 Color
- - -
Gray 800 Color
- - -
Gray 900 Color
- - -
-
-
-
- Additional colors -
-
- - -
Blue Color
- - -
Light Blue Color
- - -
Indigo Color
- - -
Purple Color
- - -
Pink Color
- - -
Red Color
- - -
Orange Color
- - -
Yellow Color
- - -
Green Color
- - -
Teal Color
- - -
Cyan Color
- - -
-
-
- ); - } -} - -export default Colors; diff --git a/src/views/Theme/Colors/Colors.test.js b/src/views/Theme/Colors/Colors.test.js deleted file mode 100644 index dbed6eb24..000000000 --- a/src/views/Theme/Colors/Colors.test.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import Colors from './Colors'; -import { mount } from 'enzyme' - -it('renders without crashing', () => { - mount(); -}); diff --git a/src/views/Theme/Colors/package.json b/src/views/Theme/Colors/package.json deleted file mode 100644 index 6a2c041d9..000000000 --- a/src/views/Theme/Colors/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Colors", - "version": "0.0.0", - "private": true, - "main": "./Colors.js" -} diff --git a/src/views/Theme/Typography/Typography.js b/src/views/Theme/Typography/Typography.js deleted file mode 100644 index 658f70e64..000000000 --- a/src/views/Theme/Typography/Typography.js +++ /dev/null @@ -1,170 +0,0 @@ -import React, { Component } from 'react'; - -class Typography extends Component { - render() { - return ( -
-
-
- Headings -
-
-

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

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

<h1></h1>

- 		h1. Bootstrap heading
-

<h2></h2>

- 		h2. Bootstrap heading
-

<h3></h3>

- 		h3. Bootstrap heading
-

<h4></h4>

- 		h4. Bootstrap heading
-

<h5></h5>

- 		h5. Bootstrap heading
-

<h6></h6>

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

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

-
-

h1. Bootstrap heading

-

h2. Bootstrap heading

-

h3. Bootstrap heading

-

h4. Bootstrap heading

-

h5. Bootstrap heading

-

h6. Bootstrap heading

-
-
-
-
-
- Display headings -
-
-

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

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

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

-
-

You can use the mark tag to highlight text.

-

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

-

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

-

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

-

This line of text will render as underlined

-

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

-

This line rendered as bold text.

-

This line rendered as italicized text.

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

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

-
-
-
Description lists
-
A description list is perfect for defining terms.
- -
Euismod
-
-

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

-

Donec id elit non mi porta gravida at eget metus.

-
- -
Malesuada porta
-
Etiam porta sem malesuada magna mollis euismod.
- -
Truncated term is truncated
-
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- -
Nesting
-
-
-
Nested definition list
-
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
-
-
-
-
-
-
-
- ); - } -} - -export default Typography; diff --git a/src/views/Theme/Typography/Typography.test.js b/src/views/Theme/Typography/Typography.test.js deleted file mode 100644 index f80f35291..000000000 --- a/src/views/Theme/Typography/Typography.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Typography from './Typography'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); \ No newline at end of file diff --git a/src/views/Theme/Typography/package.json b/src/views/Theme/Typography/package.json deleted file mode 100644 index 565eac289..000000000 --- a/src/views/Theme/Typography/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Typography", - "version": "0.0.0", - "private": true, - "main": "./Typography.js" -} diff --git a/src/views/Theme/index.js b/src/views/Theme/index.js deleted file mode 100644 index 0c540f19f..000000000 --- a/src/views/Theme/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import Colors from './Colors'; -import Typography from './Typography'; - -export { - Colors, Typography, -}; \ No newline at end of file diff --git a/src/views/Users/User.js b/src/views/Users/User.js deleted file mode 100644 index 1663343ac..000000000 --- a/src/views/Users/User.js +++ /dev/null @@ -1,46 +0,0 @@ -import React, { Component } from 'react'; -import { Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap'; - -import usersData from './UsersData' - -class User extends Component { - - render() { - - const user = usersData.find( user => user.id.toString() === this.props.match.params.id) - - const userDetails = user ? Object.entries(user) : [['id', ( Not found)]] - - return ( -
- - - - - User id: {this.props.match.params.id} - - - - - { - userDetails.map(([key, value]) => { - return ( - - - - - ) - }) - } - -
{`${key}:`}{value}
- - - - -
- ) - } -} - -export default User; diff --git a/src/views/Users/User.test.js b/src/views/Users/User.test.js deleted file mode 100644 index df0e3f4c3..000000000 --- a/src/views/Users/User.test.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import {MemoryRouter} from 'react-router-dom'; -import { mount } from 'enzyme' -import User from './User'; - - -it('renders without crashing', () => { - const wrapper = mount( - - - - ); - expect(wrapper.containsMatchingElement(Samppa Nori)).toEqual(true) - wrapper.unmount() -}); diff --git a/src/views/Users/Users.js b/src/views/Users/Users.js deleted file mode 100644 index 657442916..000000000 --- a/src/views/Users/Users.js +++ /dev/null @@ -1,70 +0,0 @@ -import React, { Component } from 'react'; -import { Link } from 'react-router-dom'; -import { Badge, Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap'; - -import usersData from './UsersData' - -function UserRow(props) { - const user = props.user - const userLink = `/users/${user.id}` - - const getBadge = (status) => { - return status === 'Active' ? 'success' : - status === 'Inactive' ? 'secondary' : - status === 'Pending' ? 'warning' : - status === 'Banned' ? 'danger' : - 'primary' - } - - return ( - - {user.id} - {user.name} - {user.registered} - {user.role} - {user.status} - - ) -} - -class Users extends Component { - - render() { - - const userList = usersData.filter((user) => user.id < 10) - - return ( -
- - - - - Users example - - - - - - - - - - - - - - {userList.map((user, index) => - - )} - -
idnameregisteredrolestatus
- - - - -
- ) - } -} - -export default Users; diff --git a/src/views/Users/Users.test.js b/src/views/Users/Users.test.js deleted file mode 100644 index 946fec612..000000000 --- a/src/views/Users/Users.test.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { MemoryRouter } from 'react-router-dom'; -import Users from './Users'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/views/Users/package.json b/src/views/Users/package.json deleted file mode 100644 index 46e3b025f..000000000 --- a/src/views/Users/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Users", - "version": "0.0.0", - "private": true, - "main": "./Users.js" -} diff --git a/src/views/Widgets/Widget01.js b/src/views/Widgets/Widget01.js deleted file mode 100644 index bc4b3847b..000000000 --- a/src/views/Widgets/Widget01.js +++ /dev/null @@ -1,63 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { Card, CardBody, Progress } from 'reactstrap'; -import classNames from 'classnames'; -import { mapToCssModules } from 'reactstrap/lib/utils'; - -const propTypes = { - header: PropTypes.string, - mainText: PropTypes.string, - smallText: PropTypes.string, - color: PropTypes.string, - value: PropTypes.string, - children: PropTypes.node, - className: PropTypes.string, - cssModule: PropTypes.object, - variant: PropTypes.string, -}; - -const defaultProps = { - header: '89.9%', - mainText: 'Lorem ipsum...', - smallText: 'Lorem ipsum dolor sit amet enim.', - // color: '', - value: '25', - variant: '', -}; - -class Widget01 extends Component { - render() { - const { className, cssModule, header, mainText, smallText, color, value, children, variant, ...attributes } = this.props; - - // demo purposes only - const progress = { style: '', color: color, value: value }; - const card = { style: '', bgColor: '' }; - - if (variant === 'inverse') { - progress.style = 'progress-white'; - progress.color = ''; - card.style = 'text-white'; - card.bgColor = 'bg-' + color; - } - - const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule); - progress.style = classNames('progress-xs my-3', progress.style); - - return ( - - -
{header}
-
{mainText}
- - {smallText} -
{children}
- - - ); - } -} - -Widget01.propTypes = propTypes; -Widget01.defaultProps = defaultProps; - -export default Widget01; diff --git a/src/views/Widgets/Widget02.js b/src/views/Widgets/Widget02.js deleted file mode 100644 index 7326b3459..000000000 --- a/src/views/Widgets/Widget02.js +++ /dev/null @@ -1,76 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { Card, CardBody, CardFooter } from 'reactstrap'; -import classNames from 'classnames'; -import { mapToCssModules } from 'reactstrap/lib/utils'; - -const propTypes = { - header: PropTypes.string, - mainText: PropTypes.string, - icon: PropTypes.string, - color: PropTypes.string, - variant: PropTypes.string, - footer: PropTypes.bool, - link: PropTypes.string, - children: PropTypes.node, - className: PropTypes.string, - cssModule: PropTypes.object, -}; - -const defaultProps = { - header: '$1,999.50', - mainText: 'Income', - icon: 'fa fa-cogs', - color: 'primary', - variant: '0', - link: '#', -}; - -class Widget02 extends Component { - render() { - const { className, cssModule, header, mainText, icon, color, footer, link, children, variant, ...attributes } = this.props; - - // demo purposes only - const padding = (variant === '0' ? { card: 'p-3', icon: 'p-3', lead: 'mt-2' } : (variant === '1' ? { - card: 'p-0', icon: 'p-4', lead: 'pt-3', - } : { card: 'p-0', icon: 'p-4 px-5', lead: 'pt-3' })); - - const card = { style: 'clearfix', color: color, icon: icon, classes: '' }; - card.classes = mapToCssModules(classNames(className, card.style, padding.card), cssModule); - - const lead = { style: 'h5 mb-0', color: color, classes: '' }; - lead.classes = classNames(lead.style, 'text-' + card.color, padding.lead); - - const blockIcon = function (icon) { - const classes = classNames(icon, 'bg-' + card.color, padding.icon, 'font-2xl mr-3 float-left'); - return (); - }; - - const cardFooter = function () { - if (footer) { - return ( - - View More - - - ); - } - }; - - return ( - - - {blockIcon(card.icon)} -
{header}
-
{mainText}
- - {cardFooter()} - - ); - } -} - -Widget02.propTypes = propTypes; -Widget02.defaultProps = defaultProps; - -export default Widget02; \ No newline at end of file diff --git a/src/views/Widgets/Widget03.js b/src/views/Widgets/Widget03.js deleted file mode 100644 index 37a82e440..000000000 --- a/src/views/Widgets/Widget03.js +++ /dev/null @@ -1,65 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import { mapToCssModules } from 'reactstrap/lib/utils'; - -const propTypes = { - children: PropTypes.node, - className: PropTypes.string, - cssModule: PropTypes.object, - dataBox: PropTypes.func, -}; - -const defaultProps = { - dataBox: () => ({ variant: 'facebook', friends: '-', feeds: '-' }), -}; - -class Widget03 extends Component { - render() { - - // eslint-disable-next-line - const { children, className, cssModule, dataBox, ...attributes } = this.props; - - // demo purposes only - const data = dataBox(); - const variant = data.variant; - - if (!variant || ['facebook', 'twitter', 'linkedin', 'google-plus'].indexOf(variant) < 0) { - return (null); - } - - const back = 'bg-' + variant; - const icon = 'fa fa-' + variant; - const keys = Object.keys(data); - const vals = Object.values(data); - - const classCard = 'brand-card'; - const classCardHeader = classNames(`${classCard}-header`, back); - const classCardBody = classNames(`${classCard}-body`); - const classes = mapToCssModules(classNames(classCard, className), cssModule); - - return ( -
-
- - {children} -
-
-
-
{vals[1]}
-
{keys[1]}
-
-
-
{vals[2]}
-
{keys[2]}
-
-
-
- ); - } -} - -Widget03.propTypes = propTypes; -Widget03.defaultProps = defaultProps; - -export default Widget03; diff --git a/src/views/Widgets/Widget04.js b/src/views/Widgets/Widget04.js deleted file mode 100644 index 0f76743a2..000000000 --- a/src/views/Widgets/Widget04.js +++ /dev/null @@ -1,63 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { Card, CardBody, Progress } from 'reactstrap'; -import classNames from 'classnames'; -import { mapToCssModules } from 'reactstrap/lib/utils'; - -const propTypes = { - header: PropTypes.string, - icon: PropTypes.string, - color: PropTypes.string, - value: PropTypes.string, - children: PropTypes.node, - className: PropTypes.string, - cssModule: PropTypes.object, - invert: PropTypes.bool, -}; - -const defaultProps = { - header: '87.500', - icon: 'icon-people', - color: 'info', - value: '25', - children: 'Visitors', - invert: false, -}; - -class Widget04 extends Component { - render() { - const { className, cssModule, header, icon, color, value, children, invert, ...attributes } = this.props; - - // demo purposes only - const progress = { style: '', color: color, value: value }; - const card = { style: '', bgColor: '', icon: icon }; - - if (invert) { - progress.style = 'progress-white'; - progress.color = ''; - card.style = 'text-white'; - card.bgColor = 'bg-' + color; - } - - const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule); - progress.style = classNames('progress-xs mt-3 mb-0', progress.style); - - return ( - - -
- -
-
{header}
- {children} - - - - ); - } -} - -Widget04.propTypes = propTypes; -Widget04.defaultProps = defaultProps; - -export default Widget04; \ No newline at end of file diff --git a/src/views/Widgets/Widgets.js b/src/views/Widgets/Widgets.js deleted file mode 100644 index e94374c02..000000000 --- a/src/views/Widgets/Widgets.js +++ /dev/null @@ -1,232 +0,0 @@ -import React, { Component } from 'react'; -import { CardGroup, Col, Row } from 'reactstrap'; -import Widget01 from './Widget01'; -import Widget02 from './Widget02'; -import Widget03 from './Widget03'; -import Widget04 from './Widget04'; -import { Line } from 'react-chartjs-2'; - - -// Brand Card Chart -const makeSocialBoxData = (dataSetNo) => { - const socialBoxData = [ - { data: [65, 59, 84, 84, 51, 55, 40], label: 'facebook' }, - { data: [1, 13, 9, 17, 34, 41, 38], label: 'twitter' }, - { data: [78, 81, 80, 45, 34, 12, 40], label: 'linkedin' }, - { data: [35, 23, 56, 22, 97, 23, 64], label: 'google' }, - ]; - - const dataset = socialBoxData[dataSetNo]; - const data = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - backgroundColor: 'rgba(255,255,255,.1)', - borderColor: 'rgba(255,255,255,.55)', - pointHoverBackgroundColor: '#fff', - borderWidth: 2, - data: dataset.data, - label: dataset.label, - }, - ], - }; - return () => data; -}; - -const socialChartOpts = { - responsive: true, - maintainAspectRatio: false, - legend: { - display: false, - }, - scales: { - xAxes: [ - { - display: false, - }], - yAxes: [ - { - display: false, - }], - }, - elements: { - point: { - radius: 0, - hitRadius: 10, - hoverRadius: 4, - hoverBorderWidth: 3, - }, - }, -}; - -class Widgets extends Component { - render() { - return ( -
- - - - - - - - - - Excepteur sint occaecat... - - - - - - - - - - - - - - Excepteur sint occaecat... - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ({ variant: 'facebook', friends: '89k', feeds: '459' })} > -
- -
- - - - ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} > -
- -
- - - - ({ variant: 'linkedin', contacts: '500+', feeds: '292' })} > -
- -
- - - - ({ variant: 'google-plus', followers: '894', circles: '92' })} > -
- -
- - - - - Visitors - New Clients - Products sold - Returning Visitors - Avg. Time - - - - Visitors - - - New Clients - - - Products sold - - - Returning Visitors - - - Avg. Time - - - Comments - - - - - Visitors - - - New Clients - - - Products sold - - - Returning Visitors - - - Avg. Time - - - Comments - - -
- ); - } -} - -export default Widgets; diff --git a/src/views/Widgets/Widgets.test.js b/src/views/Widgets/Widgets.test.js deleted file mode 100644 index 27fdf3fbb..000000000 --- a/src/views/Widgets/Widgets.test.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Widgets from './Widgets'; - -jest.mock('react-chartjs-2', () => ({ - Line: () => null, -})); - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}) \ No newline at end of file diff --git a/src/views/Widgets/package.json b/src/views/Widgets/package.json deleted file mode 100644 index 03481380f..000000000 --- a/src/views/Widgets/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Widgets", - "version": "0.0.0", - "private": true, - "main": "./Widgets.js" -} diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/base/breadcrumbs/Breadcrumbs.js new file mode 100644 index 000000000..c1bc3ec2a --- /dev/null +++ b/src/views/base/breadcrumbs/Breadcrumbs.js @@ -0,0 +1,73 @@ +import React from 'react' +import { + CBreadcrumb, + CBreadcrumbItem, + CBreadcrumbRouter, + CCard, + CCardBody, + CCardHeader, + CLink, + CCol, + CRow +} from '@coreui/react' +import routes from '../../../routes' + +const Breadcrumbs = () => { + return ( + + + + + Bootstrap Breadcrumb + + + +
CBreadcrumbRouter wrapper component
+ +
Manual
+ + + Home + + Library + + + + Home + + + Library + + Data + + + + Home + + + Library + + + Data + + + Bootstrap + + + + + + + ) +} + +export default Breadcrumbs diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js new file mode 100644 index 000000000..6404457ab --- /dev/null +++ b/src/views/base/cards/Cards.js @@ -0,0 +1,411 @@ +import React from 'react' +import { + CBadge, + CCard, + CCardBody, + CCardFooter, + CCardHeader, + CCol, + CRow, + CCollapse, + CFade, + CSwitch, + CLink +} from '@coreui/react' +import CIcon from '@coreui/icons-react' + +const Cards = () => { + const [collapsed, setCollapsed] = React.useState(true) + const [showCard, setShowCard] = React.useState(true) + + return ( + <> + + + + + Card title + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + Card footer + + + + + + Card with icon +
+ +
+ + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card with switch +
+ +
+ + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card with label +
+ Success +
+ + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card with label +
+ 42 +
+ + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + + + Card outline primary + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card outline secondary + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card outline success + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card outline info + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card outline warning + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card outline danger + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + + + + Card with accent + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card with accent + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card with accent + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card with accent + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card with accent + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card with accent + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + + +
+

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

+
Someone famous in Source Title
+
+ + + + + + +
+

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

+
Someone famous in Source Title
+
+ + + + + + +
+

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

+
Someone famous in Source Title
+
+ + + + + + +
+

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

+
Someone famous in Source Title
+
+ + + + + + +
+

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

+
Someone famous in Source Title
+
+ + + + + + +
+

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

+
Someone famous in Source Title
+
+ + + + + + + + + Card title + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card title + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card title + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card title + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + Card title - gradient + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + + Card actions +
+ + + + setCollapsed(!collapsed)}> + + + setShowCard(false)}> + + +
+ + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut + laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation + ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. + + + + + + + + ) +} + +export default Cards diff --git a/src/views/base/carousels/Carousels.js b/src/views/base/carousels/Carousels.js new file mode 100644 index 000000000..82a5e3c55 --- /dev/null +++ b/src/views/base/carousels/Carousels.js @@ -0,0 +1,139 @@ +import React, { useState } from 'react' +import { + CCard, + CCardBody, + CCardHeader, + CCarousel, + CCarouselCaption, + CCarouselControl, + CCarouselIndicators, + CCarouselInner, + CCarouselItem, + CCol, + CRow +} from '@coreui/react' + +const slides = [ + 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', + 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', + 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', +] + +const Carousels = () => { + const [activeIndex] = useState(1) + + return ( + + + + + Carousel with controls + + + + + + slide 1 + + + slide 2 + + + slide 3 + + + + + + + + + + + + Carousel with controls, indicators and caption + + + + + + + slide 1 +

Slide 1

Slide 1

 + + + slide 2 +

Slide 2

Slide 2

 + + + slide 3 +

Slide 3

Slide 3

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

Slide 1

Slide 1

 + + + slide 2 +

Slide 2

Slide 2

 + + + slide 3 +

Slide 3

Slide 3

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

Slide 1

Slide 1

 + + + slide 2 +

Slide 2

Slide 2

 + + + slide 3 +

Slide 3

Slide 3

 + + + + + + + + + + ) +} + +export default Carousels diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js new file mode 100644 index 000000000..18597eec9 --- /dev/null +++ b/src/views/base/collapses/Collapses.js @@ -0,0 +1,227 @@ +import React, { useState } from 'react' +import { + CButton, + CCard, + CCardBody, + CCardFooter, + CCardHeader, + CCol, + CCollapse, + CFade, + CRow +} from '@coreui/react'; + +const Collapses = () => { + + const [collapse, setCollapse] = useState(false) + const [collapseMulti, setCollapseMulti] = useState([false, false]) + const [accordion, setAccordion] = useState(1) + const [fade, setFade] = useState(true) + + const toggle = (e) => { + setCollapse(!collapse) + e.preventDefault() + } + + const toggleMulti = (type) => { + let newCollapse = collapseMulti.slice() + switch (type) { + case "left": + newCollapse[0] = !collapseMulti[0]; + break; + case "right": + newCollapse[1] = !collapseMulti[1]; + break; + case "both": + newCollapse[0] = !collapseMulti[0]; + newCollapse[1] = !collapseMulti[1]; + break; + default: + } + setCollapseMulti(newCollapse) + } + + const toggleFade = () => { + setFade(!fade) + } + + return ( + + + + + Collapse + + + + +

+ Anim pariatur cliche reprehenderit, + enim eiusmod high life accusamus terry richardson ad squid. Nihil + anim keffiyeh helvetica, craft beer labore wes anderson cred + nesciunt sapiente ea proident. +

+

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

+ + + + Toggling button + + + + + + Collapse + multi target + + +

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

+ + + + + + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. + + + + + + + + + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. + + + + + + + + +
+ + + + Fade + + + + + This content will fade in and out as the button is pressed... + + + + Toggle Fade + + + + + + + Collapse + accordion + + +
+ + + setAccordion(accordion === 0 ? null : 0)} + > +
Collapsible Group Item #1
+ + + + + 1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non + cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird + on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred + nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft + beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS. + + + + + + setAccordion(accordion === 1 ? null : 1)} + > +
Collapsible Group Item #2
+ + + + + 2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non + cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird + on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred + nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft + beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS. + + + + + + setAccordion(accordion === 2 ? null : 2)} + > +
Collapsible Group Item #3
+ + + + + 3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non + cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird + on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred + nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft + beer farm-to-table, raw denim aesthetic synth nesciunt you probably havent heard of them accusamus labore sustainable VHS. + + + +
+ + + + + ) +} + +export default Collapses diff --git a/src/views/base/forms/BasicForms.js b/src/views/base/forms/BasicForms.js new file mode 100644 index 000000000..7f0489393 --- /dev/null +++ b/src/views/base/forms/BasicForms.js @@ -0,0 +1,1164 @@ +import React from 'react' +import { + CButton, + CCard, + CCardBody, + CCardFooter, + CCardHeader, + CCol, + CCollapse, + CDropdownItem, + CDropdownMenu, + CDropdownToggle, + CFade, + CForm, + CFormGroup, + CFormText, + CValidFeedback, + CInvalidFeedback, + CTextarea, + CInput, + CInputFile, + CInputCheckbox, + CInputRadio, + CInputGroup, + CInputGroupAppend, + CInputGroupPrepend, + CDropdown, + CInputGroupText, + CLabel, + CSelect, + CRow +} from '@coreui/react' +import CIcon from '@coreui/icons-react' + +const BasicForms = () => { + const [collapsed, setCollapsed] = React.useState(true) + const [showElements, setShowElements] = React.useState(true) + + return ( + <> + + + + + Credit Card + Form + + + + + + Name + + + + + + + + Credit Card Number + + + + + + + + Month + + + + + + + + + + + + + + + + + + + Year + + + + + + + + + + + + + + + + + CVV/CVC + + + + + + + + + + + Company + Form + + + + Company + + + + VAT + + + + Street + + + + + + City + + + + + + Postal Code + + + + + + Country + + + + + + + + + + + Basic Form + Elements + + + + + + Static + + +

Username

+ + + + + Text Input + + + + This is a help text + + + + + Email Input + + + + Please enter your email + + + + + Password + + + + Please enter a complex password + + + + + Date Input + + + + + + + + Disabled Input + + + + + + + + Textarea + + + + + + + + Select + + + + + + + + + + + + + Select Large + + + + + + + + + + + + + Select Small + + + + + + + + + + + + + + + Disabled Select + + + + + + + + + + + + + Radios + + + + + Option 1 + + + + Option 2 + + + + Option 3 + + + + + + Inline Radios + + + + + One + + + + Two + + + + Three + + + + + Checkboxes + + + + Option 1 + + + + Option 2 + + + + Option 3 + + + + + + Inline Checkboxes + + + + + One + + + + Two + + + + Three + + + + + File input + + + + + + + Multiple File input + + + + + Choose Files... + + + + + Custom file input + + + + Choose file... + + + + + + + Submit + Reset + + + + + Inline + Form + + + + + Name + + + + Email + + + + + + Submit + Reset + + + + + + + Horizontal + Form + + + + + + Email + + + + Please enter your email + + + + + Password + + + + Please enter your password + + + + + + Submit Reset + + + + + Normal + Form + + + + + Email + + Please enter your email + + + Password + + Please enter your password + + + + + Submit Reset + + + + + Input + Grid + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Login Reset + + + + + Input + Sizes + + + + + Small Input + + + + + + Normal Input + + + + + + Large Input + + + + + + + + Submit + Reset + + + + + + + + + Form + validation feedback + + + + Input is valid + + Cool! Input is valid + + + Input is invalid + + Houston, we have a problem... + + + + + + + + Validation feedback Form + + + + + Non-required input + + Non-required + + + Required input + + + Please provide a valid information + + Input provided + + + + + + + + + + + Icon/Text Groups + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + .00 + + + + + + + + Submit + Reset + + + + + + + Button Groups + + + + + + + + Search + + + + + + + + + + + Submit + + + + + + + + + + + + + + + + + + + + + Submit + Reset + + + + + + + Dropdowns Groups + + + + + + + + + Dropdown + + + Action + Another Action + Something else here + + Separated link + + + + + + + + + + + + + Dropdown + + + Action + Another Action + Something else here + + Separated link + + + + + + + + + + Action + + Action + Another Action + Something else here + + Separated link + + + + + + Dropdown + + + Action + Another Action + Something else here + + Separated link + + + + + + + + + Submit + Reset + + + + + + + + + Use the grid for big devices! + .col-lg-* .col-md-* .col-sm-* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Action + Action + Action + Action + Action + + + + + + + Input Grid for small devices! + .col-* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Action + Action + Action + Action + Action + + + + + + + + + Example Form + + + + + + + Username + + + + + + + + + + + Email + + + + + + + + + + + Password + + + + + + + + + Submit + + + + + + + + + Example Form + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Submit + + + + + + + + + Example Form + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Submit + + + + + + + + + + + + Form Elements +
+ + + + setCollapsed(!collapsed)} + > + + + setShowElements(false)} + > + + +
+ + + + + + Prepended text +
+ + + @ + + + +

Here's some help text

+
+ + + Appended text +
+ + + + .00 + + + Here's more help text +
+ + + Append and prepend +
+ + + $ + + + + .00 + + +
+ + + Append with button +
+ + + + Go! + + +
+ + + Two-button append +
+ + + + Search + Options + + +
+ +
+ Save changes + Cancel +
+ + + + + + + + + ) +} + +export default BasicForms diff --git a/src/views/base/jumbotrons/Jumbotrons.js b/src/views/base/jumbotrons/Jumbotrons.js new file mode 100644 index 000000000..ccaeacf3a --- /dev/null +++ b/src/views/base/jumbotrons/Jumbotrons.js @@ -0,0 +1,79 @@ +import React from 'react' +import { + CButton, + CCard, + CCardBody, + CCardHeader, + CCol, + CContainer, + CJumbotron, + CRow, + CEmbed, + CEmbedItem +} from '@coreui/react' + +const Jumbotrons = () => { + + return ( + <> + + + + + Jumbotron + + + + +

Hello, world!

+

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

+
+

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

+

+ Learn More +

+ + + + + + + + Jumbotron + fluid + + + + +

Fluid jumbotron

+

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

+ + + + + + + + + + + Embed + + + + + + + + + + + ) +} + +export default Jumbotrons diff --git a/src/views/base/list-groups/ListGroups.js b/src/views/base/list-groups/ListGroups.js new file mode 100644 index 000000000..2653b582a --- /dev/null +++ b/src/views/base/list-groups/ListGroups.js @@ -0,0 +1,275 @@ +import React, { useState } from 'react'; +import { + CBadge, + CCard, + CCardBody, + CCardHeader, + CCol, + CListGroup, + CListGroupItem, + CRow, + CTabContent, + CTabPane +} from '@coreui/react'; + +const ListGroups = () => { + const [activeTab, setActiveTab] = useState(1) + + return ( + <> + + + + + + List group + + + + + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + + + + + + + + + List group links + with first item active and last item disabled + + + + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + + + + + + + + + + + + List group + contextual classes + + + + Dapibus ac facilisis in + This is a primary list group item + This is a secondary list group item + This is a success list group item + This is a danger list group item + This is a warning list group item + This is a info list group item + This is a light list group item + This is a dark list group item + + + + + + + + + + List group + contextual classes with .action + + + + Dapibus ac facilisis in + This is a primary list group item + This is a secondary list group item + This is a success list group item + This is a danger list group item + This is a warning list group item + This is a info list group item + This is a light list group item + This is a dark list group item + + + + + + + + + + + List group + accent + + + + This is a primary list group item + This is a secondary list group item + This is a success list group item + This is a danger list group item + This is a warning list group item + This is a info list group item + This is a light list group item + This is a dark list group item + + + + + + + + List group + accent with color + + + + This is a primary list group item + This is a secondary list group item + This is a success list group item + This is a danger list group item + This is a warning list group item + This is a info list group item + This is a light list group item + This is a dark list group item + + + + + + + + + + List group + with badges + + + + + Cras justo odio + 14 + + + Dapibus ac facilisis in + 2 + + + Morbi leo risus + 1 + + + + + + + + + + + List group + custom content + + + + + +
+ List group item heading + 3 days ago +
+
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. + Donec id elit non mi porta. +
+ + +
List group item heading
+
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. +
+ Small. + + +
List group item heading
+
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. +
+ Small. + + + + + + + + + + + + List group + tab Javascript plugin + + + + + + setActiveTab(0)} action active={activeTab === 0} >Home + setActiveTab(1)} action active={activeTab === 1} >Profile + setActiveTab(2)} action active={activeTab === 2} >Messages + setActiveTab(3)} action active={activeTab === 3} >Settings + + + + + +

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

+ + +

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

+ + +

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

+ + +

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

+ + + + + + + + + + ) +} + +export default ListGroups diff --git a/src/views/base/navbars/Navbars.js b/src/views/base/navbars/Navbars.js new file mode 100644 index 000000000..9575dd3a7 --- /dev/null +++ b/src/views/base/navbars/Navbars.js @@ -0,0 +1,202 @@ +import React, { useState } from 'react' +import { + CCard, + CCardBody, + CCardHeader, + CCollapse, + CDropdownItem, + CDropdownMenu, + CDropdownToggle, + CNavbar, + CNavbarNav, + CNavbarBrand, + CNavbarText, + CToggler, + CNavLink, + CDropdown, + CForm, + CInput, + CButton, + CImg +} from '@coreui/react' +// import CIcon from '@coreui/icons-react' + +const CNavbars = () => { + const [isOpen, setIsOpen] = useState(false) + const [isOpenDropdown, setIsOpenDropdown] = useState(false) + const [navbarText, setNavbarText] = useState(false) + + return ( + <> + + + + CNavbar + + + + setIsOpen(!isOpen)}/> + + NavbarBrand + + + + Home + Link + + + + + Search + + + + Lang + + + EN + ES + RU + FA + + + + + User + + + Account + Settings + + + + + + + + + + + CNavbar brand + + + + + + CoreUI React + + + + + + + + CNavbar text + + + + { setNavbarText(!navbarText)}} + /> + NavbarBrand + + + Navbar text + + + + + + + + + CNavbar dropdown + + + + {setIsOpenDropdown(!isOpenDropdown)}} /> + + + Home + Link + + + Lang + + + EN + ES + RU + FA + + + + + User + + + Account + Settings + + + + + + + + + + + CNavbar form + + + + + + Search + + + + + + + + CNavbar input group + + + + + + + + + + + ) +} + +export default CNavbars diff --git a/src/views/base/navs/Navs.js b/src/views/base/navs/Navs.js new file mode 100644 index 000000000..bac7f817f --- /dev/null +++ b/src/views/base/navs/Navs.js @@ -0,0 +1,311 @@ +import React from 'react' +import { + CRow, + CCol, + CCard, + CCardBody, + CCardHeader, + CDropdown, + CDropdownItem, + CDropdownMenu, + CDropdownToggle, + CNav, + CNavItem, + CNavLink +} from '@coreui/react' + +const Navs = () => { + return ( + <> + + + + + Navs + + + + List Based + + + Active + + + Link + + + Link + + +
+ Link Based + + Active + Link + Link + Disabled + +
+ Link Base + + Active + Link + Link + Disabled + +
+ Link Based + + Active + Link + Link + Disabled + + + + + + + + Navs + vertical / links + + + + Active + Link + Link + Disabled + + + + + + + + Navs + vertical / list + + + + + Link + + + Link + + + Another Link + + + Disabled Link + + + + + + + + + + + + Navs + tabs + + + + Active + Link + Link + Disabled + + + + + + + + Navs + pills + + + + + Link + + + Link + + + Link + + + Disabled + + + + + + + + + + + Navs + fill and justify + + + + + Active + + + Longer nav link + + + Link + + + Disabled + + + +
+ + + Active + Link + Link + Disabled + + +
+ + + + Active + + + Longer nav link + + + Link + + + Disabled + + + +
+ + + Active + Link + Link + Disabled + + + + + + + + + + + + Navs + with flex + + + + Active + Link + Link + Disabled + + + + + + + + + + + + Navs + tabs with dropdowns + + + + + Link + + + + Dropdown + + + Action + Another action + Something else here + + Separated link + + + + Link + + + Disabled + + + + + + + + + + Navs + pills with dropdowns + + + + + Link + + + + Dropdown + + + Action + Another action + Something else here + + Separated link + + + + Link + + + Disabled + + + + + + + + ) +} + +export default Navs diff --git a/src/views/base/paginations/Pagnations.js b/src/views/base/paginations/Pagnations.js new file mode 100644 index 000000000..c3d65246a --- /dev/null +++ b/src/views/base/paginations/Pagnations.js @@ -0,0 +1,95 @@ +import React, { useState } from 'react' +import { + CCard, + CCardBody, + CCardHeader, + CPagination +} from '@coreui/react' + +const Paginations = () => { + const [currentPage, setCurrentPage] = useState(2) + + return ( + <> + + + Pagination + + + +
Default
+ +

+ +
Small
+ +

+ +
+
Large
+ +

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

+ +
Center alignment
+ +

+ +
Right (end) alignment
+ +

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

+ Hover over the links below to see popover: +

+ +

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

+ + + +
+ + + + Popovers + placement + + +
+ + {placements.map(placement => { + return ( + + + { placement } + + + ) + })} + +
+ + + + ) +} + +export default Popovers diff --git a/src/views/base/progress-bar/ProgressBar.js b/src/views/base/progress-bar/ProgressBar.js new file mode 100644 index 000000000..8e082f172 --- /dev/null +++ b/src/views/base/progress-bar/ProgressBar.js @@ -0,0 +1,102 @@ +import React from 'react' +import { + CCard, + CCardBody, + CCardHeader, + CProgress, + CProgressBar +} from '@coreui/react' + +const ProgressBar = () => { + return ( + <> + + + Progress + + + + + + + + + + + + + Progress + labels + + + + + + + + + + Progress + heights + + + + + + + + + Progress + backgrounds + + + + + + + + + + + Progress + multiple bar + + + + + + + + + + + + Progress + striped + + + + + + + + + + + + Progress + animated + + + + + + + ) +} + +export default ProgressBar diff --git a/src/views/base/switches/Switches.js b/src/views/base/switches/Switches.js new file mode 100644 index 000000000..551bbb870 --- /dev/null +++ b/src/views/base/switches/Switches.js @@ -0,0 +1,483 @@ +import React from 'react' +import { + CCard, + CCardBody, + CCardHeader, + CCol, + CRow, + CSwitch +} from '@coreui/react' + +const Switches = () => { + return ( + + + + + 3d Switch + + + console.log(e.target.checked)}/> + + + + + + + + + + + + + + + Switch default + + + + + + + + + + + + + + + Switch default - pills + + + + + + + + + + + + + +

Outline

+ + + + + + Switch outline + + + + + + + + + + + + + + + + Switch outline pills + + + + + + + + + + + + + + +

Opposite

+ + + + + + Switch outline alternative + + + + + + + + + + + + + + + + Switch outline alternative - pills + + + + + + + + + + + + + + +

With text

+ + + + + + Switch with text + + + + + + + + + + + + + + + + Switch with text pills + + + + + + + + + + + + + + + + Switch with text outline + + + + + + + + + + + + + + + + Switch with text outline pills + + + + + + + + + + + + + + + + Switch with text outline alternative + + + + + + + + + + + + + + + + Switch with text outline alternative pills + + + + + + + + + + + + + + +

With icon

+ + + + + + Switch with text + + + + + + + + + + + + + + + + Switch with text pills + + + + + + + + + + + + + + + + Switch with text outline + + + + + + + + + + + + + + + + Switch with text outline pills + + + + + + + + + + + + + + + + Switch with text outline alternative + + + + + + + + + + + + + + + + Switch with text outline alternative pills + + + + + + + + + + + + + + +

Disabled

+ + + + + + 3d Switch + + + + + + + + + + + + + + + + + + + 3d Switch + + + + + + + + + + + + + + + + +

3D

+ + + + + + 3d Switch + + + + + + + + + + + + + + + + + + 3d Switch + + + + + + + + + + + + + + + + +

Sizes

+ + + + + + Sizes + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SizeExampleProps
+ Large + + + + Add size={'lg'} +
+ Normal + + + + - +
+ Small + + + + Add size={'sm'} +
+ + + + + ) +} + +export default Switches diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js new file mode 100644 index 000000000..963853292 --- /dev/null +++ b/src/views/base/tables/Tables.js @@ -0,0 +1,212 @@ +import React from 'react' +import { + CBadge, + CCard, + CCardBody, + CCardHeader, + CCol, + CDataTable, + CRow +} from '@coreui/react' + +import usersData from '../../users/UsersData' + +const getBadge = status => { + switch (status) { + case 'Active': return 'success' + case 'Inactive': return 'secondary' + case 'Pending': return 'warning' + case 'Banned': return 'danger' + default: return 'primary' + } +} +const fields = ['name','registered', 'role', 'status'] + +const Tables = () => { + return ( + <> + + + + + Simple Table + + + ( + + + {item.status} + + + ) + + }} + /> + + + + + + + + Striped Table + + + ( + + + {item.status} + + + ) + + }} + /> + + + + + + + + + + + Condensed Table + + + ( + + + {item.status} + + + ) + + }} + /> + + + + + + + + Bordered Table + + + ( + + + {item.status} + + + ) + + }} + /> + + + + + + + + + + + Combined All Table + + + ( + + + {item.status} + + + ) + }} + /> + + + + + + + + + Combined All dark Table + + + ( + + + {item.status} + + + ) + }} + /> + + + + + + ) +} + +export default Tables diff --git a/src/views/base/tabs/Tabs.js b/src/views/base/tabs/Tabs.js new file mode 100644 index 000000000..9347e91bb --- /dev/null +++ b/src/views/base/tabs/Tabs.js @@ -0,0 +1,188 @@ +import React, { useState } from 'react' +import { + CCol, + CNav, + CNavItem, + CNavLink, + CRow, + CTabContent, + CTabPane, + CCard, + CCardBody, + CTabs, + CCardHeader +} from '@coreui/react' +import CIcon from '@coreui/icons-react' + +const Tabs = () => { + const [active, setActive] = useState(1) + const lorem = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.' + + return ( + + + + + Index indentifiers + + + + + + + Home + + + + + Profile + + + + + Messages + + + + + + {`1. ${lorem}`} + + + {`2. ${lorem}`} + + + {`3. ${lorem}`} + + + + + + + + + + Id indentifiers + + + + + + + Home + + + + + Profile + + + + + Messages + + + + + + {`1. ${lorem}`} + + + {`2. ${lorem}`} + + + {`3. ${lorem}`} + + + + + + + + + + + No fade animation tabs + + + + + + + + + + + + + + + + + + + + + + + {`1. ${lorem}`} + + + {`2. ${lorem}`} + + + {`3. ${lorem}`} + + + + + + + + + + + Controlled tabs + + + setActive(idx)}> + + + + + { active === 0 && ' Home'} + + + + + + { active === 1 && ' Profile'} + + + + + + { active === 2 && ' Messages'} + + + + + + {`1. ${lorem}`} + + + {`2. ${lorem}`} + + + {`3. ${lorem}`} + + + + + + + + ) +} + +export default Tabs diff --git a/src/views/base/tooltips/Tooltips.js b/src/views/base/tooltips/Tooltips.js new file mode 100644 index 000000000..6b17b3fc8 --- /dev/null +++ b/src/views/base/tooltips/Tooltips.js @@ -0,0 +1,107 @@ +import React from 'react' +import { + CButton, + CCard, + CCardBody, + CCardHeader, + CTooltip, + CRow, + CCol, + CLink +} from '@coreui/react' + +const Tooltips = () => { + const placements = [ + 'top-start', 'top', 'top-end', + 'bottom-start', 'bottom', 'bottom-end', + 'right-start', 'right', 'right-end', + 'left-start', 'left', 'left-end' + ] + + return ( + <> + + + Tooltips + + + + {/*eslint-disable-next-line*/} + +

+ Hover over the links below to see tooltips: +

+ +

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

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

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

+
Size Normal
+

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

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

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

+ + + + + + + + Brand button + only icons + + +
Size Small + Add this class .btn-sm +
+

+ + + + + + + + + + + + + + + + + +

+
Size Normal
+

+ + + + + + + + + + + + + + + + + +

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

+ + + + + + + + + + + + + + + + + +

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

+ + Left + Middle + Right + +

+ + Left + Middle + Right + + + + + + + Button Group + nestingccc + + + + 1 + 2 + + + Dropdown + + + Dropdown Link + Dropdown Link + + + + + + + + + Button Group + vertical + + + + 1 + 2 + + + Dropdown + + + Dropdown Link + Dropdown Link + + + + + + + + ) +} + +export default ButtonGroups diff --git a/src/views/buttons/buttons/Buttons.js b/src/views/buttons/buttons/Buttons.js new file mode 100644 index 000000000..7a8137595 --- /dev/null +++ b/src/views/buttons/buttons/Buttons.js @@ -0,0 +1,674 @@ +import React from 'react' +import { + CButton, + CCard, + CCardBody, + CCardHeader, + CCol, + CRow +} from '@coreui/react' +import CIcon from '@coreui/icons-react' + +const Buttons = () => { + return ( + <> + + + Standard Buttons + + + + + Normal + + + Primary + + + Secondary + + + Success + + + Warning + + + Danger + + + Info + + + Light + + + Dark + + + Link + + + + + Active State + + + Primary + + + Secondary + + + Success + + + Warning + + + Danger + + + Info + + + Light + + + Dark + + + Link + + + + + Disabled + + + Primary + + + Secondary + + + Success + + + Warning + + + Danger + + + Info + + + Light + + + Dark + + + Link + + + + + + + variant="outline" Buttons + + +

+ With outline prop. +

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

+ Use .btn-ghost-* class for variant="ghost" buttons. +

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

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

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

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

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

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

+ + + Small + + + Standard Button + + + Outline Button + + + Ghost Button + + + Square Button + + + Pill Button + + + + + Normal + + + Standard Button + + + Outline Button + + + Ghost Button + + + Square Button + + + Pill Button + + + + + Large + + + Standard Button + + + Outline Button + + + Ghost Button + + + Square Button + + + Pill Button + + + + + + + + With Icons + + + + + + Standard Button + + + + + Outline Button + + + + + Ghost Button + + + + + Square Button + + + + + Pill Button + + + + + + + + + + Block Level Buttons + + +

Add prop block

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

Add prop block

+ Block level button + Block level button + Block level button + Block level button + Block level button + Block level button + Block level button + + + + + + ) +} + +export default Buttons diff --git a/src/views/charts/ChartBarSimple.js b/src/views/charts/ChartBarSimple.js new file mode 100644 index 000000000..485ff955b --- /dev/null +++ b/src/views/charts/ChartBarSimple.js @@ -0,0 +1,76 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { getColor } from '@coreui/utils/src' +import { CChartBar } from '@coreui/react-chartjs' + +const ChartBarSimple = props => { + + const { + backgroundColor, + pointHoverBackgroundColor, + dataPoints, + label, + pointed, + ...attributes + } = props + + const defaultDatasets = (()=>{ + return [ + { + data: dataPoints, + backgroundColor: getColor(backgroundColor), + pointHoverBackgroundColor: getColor(pointHoverBackgroundColor), + label: label, + barPercentage: 0.5, + categoryPercentage: 1 + } + ] + })() + + const defaultOptions = (()=>{ + return { + maintainAspectRatio: false, + legend: { + display: false + }, + scales: { + xAxes: [{ + display: false + }], + yAxes: [{ + display: false + }] + } + } + })() + + // render + return ( + + ) +} + +ChartBarSimple.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + className: PropTypes.string, + // + backgroundColor: PropTypes.string, + pointHoverBackgroundColor: PropTypes.string, + dataPoints: PropTypes.array, + label: PropTypes.string, + pointed: PropTypes.bool +}; + +ChartBarSimple.defaultProps = { + backgroundColor: 'rgba(0,0,0,.2)', + dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12], + label: 'Sales' +}; + +export default ChartBarSimple diff --git a/src/views/charts/ChartLineSimple.js b/src/views/charts/ChartLineSimple.js new file mode 100644 index 000000000..2aa7c11cf --- /dev/null +++ b/src/views/charts/ChartLineSimple.js @@ -0,0 +1,153 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { getColor, deepObjectsMerge } from '@coreui/utils/src' +import { CChartLine } from '@coreui/react-chartjs' + +const ChartLineSimple = props => { + + const { + borderColor, + backgroundColor, + pointHoverBackgroundColor, + dataPoints, + label, + pointed, + ...attributes + } = props + + const pointHoverColor = (()=>{ + if (pointHoverBackgroundColor) { + return pointHoverBackgroundColor + } else if (backgroundColor !== 'transparent') { + return backgroundColor + } + return borderColor + })() + + const defaultDatasets = (()=>{ + return [ + { + data: dataPoints, + borderColor: getColor(borderColor), + backgroundColor: getColor(backgroundColor), + pointBackgroundColor: getColor(pointHoverColor), + pointHoverBackgroundColor: getColor(pointHoverColor), + label + } + ] + })() + + const pointedOptions = (()=>{ + return { + scales: { + xAxes: [ + { + offset: true, + gridLines: { + color: 'transparent', + zeroLineColor: 'transparent' + }, + ticks: { + fontSize: 2, + fontColor: 'transparent' + } + } + ], + yAxes: [ + { + display: false, + ticks: { + display: false, + min: Math.min.apply(Math, dataPoints) - 5, + max: Math.max.apply(Math, dataPoints) + 5 + } + } + ] + }, + elements: { + line: { + borderWidth: 1 + }, + point: { + radius: 4, + hitRadius: 10, + hoverRadius: 4 + } + } + } + })() + + const straightOptions = (()=>{ + return { + scales: { + xAxes: [{ + display: false + }], + yAxes: [{ + display: false + }] + }, + elements: { + line: { + borderWidth: 2 + }, + point: { + radius: 0, + hitRadius: 10, + hoverRadius: 4 + } + } + } + })() + + const defaultOptions = (()=>{ + const options = pointed ? pointedOptions : straightOptions + return Object.assign({}, options, { + maintainAspectRatio: false, + legend: { + display: false + } + }) + })() + + const computedDatasets = (() => { + return deepObjectsMerge(defaultDatasets, attributes.datasets || {}) + })() + + const computedOptions = (() => { + return deepObjectsMerge(defaultOptions, attributes.options || {}) + })() + + // render + + return ( + + ) +} + +ChartLineSimple.propTypes = { + tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + className: PropTypes.string, + // + borderColor: PropTypes.string, + backgroundColor: PropTypes.string, + pointHoverBackgroundColor: PropTypes.string, + dataPoints: PropTypes.array, + label: PropTypes.string, + pointed: PropTypes.bool +}; + +ChartLineSimple.defaultProps = { + borderColor: 'rgba(255,255,255,.55)', + backgroundColor: 'transparent', + dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12], + label: 'Sales' +}; + +export default ChartLineSimple diff --git a/src/views/charts/Charts.js b/src/views/charts/Charts.js new file mode 100644 index 000000000..4761cc0e9 --- /dev/null +++ b/src/views/charts/Charts.js @@ -0,0 +1,224 @@ +import React from 'react' +import { + CCard, + CCardBody, + CCardGroup, + CCardHeader +} from '@coreui/react' +import { + CChartBar, + CChartLine, + CChartDoughnut, + CChartRadar, + CChartPie, + CChartPolarArea +} from '@coreui/react-chartjs' + +const Charts = () => { + + return ( + + + + Bar Chart + + + + + + + + + + Doughnut Chart + + + + + + + + + Line Chart + + + + + + + + + Pie Chart + + + + + + + + + Polar Area Chart + + + + + + + + + Radar Chart + + + + + + + ) +} + +export default Charts diff --git a/src/views/charts/MainChartExample.js b/src/views/charts/MainChartExample.js new file mode 100644 index 000000000..1fecbd6f1 --- /dev/null +++ b/src/views/charts/MainChartExample.js @@ -0,0 +1,101 @@ +import React from 'react' +import { CChartLine } from '@coreui/react-chartjs' +import { getStyle, hexToRgba } from '@coreui/utils/src' + +const brandSuccess = getStyle('success') || '#4dbd74' +const brandInfo = getStyle('info') || '#20a8d8' +const brandDanger = getStyle('danger') || '#f86c6b' + +const MainChartExample = attributes => { + const random = (min, max)=>{ + return Math.floor(Math.random() * (max - min + 1) + min) + } + + const defaultDatasets = (()=>{ + let elements = 27 + const data1 = [] + const data2 = [] + const data3 = [] + for (let i = 0; i <= elements; i++) { + data1.push(random(50, 200)) + data2.push(random(80, 100)) + data3.push(65) + } + return [ + { + label: 'My First dataset', + backgroundColor: hexToRgba(brandInfo, 10), + borderColor: brandInfo, + pointHoverBackgroundColor: brandInfo, + borderWidth: 2, + data: data1 + }, + { + label: 'My Second dataset', + backgroundColor: 'transparent', + borderColor: brandSuccess, + pointHoverBackgroundColor: brandSuccess, + borderWidth: 2, + data: data2 + }, + { + label: 'My Third dataset', + backgroundColor: 'transparent', + borderColor: brandDanger, + pointHoverBackgroundColor: brandDanger, + borderWidth: 1, + borderDash: [8, 5], + data: data3 + } + ] + })() + + const defaultOptions = (()=>{ + return { + maintainAspectRatio: false, + legend: { + display: false + }, + scales: { + xAxes: [{ + gridLines: { + drawOnChartArea: false + } + }], + yAxes: [{ + ticks: { + beginAtZero: true, + maxTicksLimit: 5, + stepSize: Math.ceil(250 / 5), + max: 250 + }, + gridLines: { + display: true + } + }] + }, + elements: { + point: { + radius: 0, + hitRadius: 10, + hoverRadius: 4, + hoverBorderWidth: 3 + } + } + } + } + )() + + // render + return ( + + ) +} + + +export default MainChartExample diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js new file mode 100644 index 000000000..38cad0229 --- /dev/null +++ b/src/views/dashboard/Dashboard.js @@ -0,0 +1,557 @@ +import React, { lazy } from 'react' +import { + CBadge, + CButton, + CButtonGroup, + CCard, + CCardBody, + CCardFooter, + CCardHeader, + CCol, + CProgress, + CRow, + CCallout +} from '@coreui/react' +import CIcon from '@coreui/icons-react' + +import MainChartExample from '../charts/MainChartExample.js' + +const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js')) +const WidgetsBrand = lazy(() => import('../widgets/WidgetsBrand.js')) + +const Dashboard = () => { + return ( + <> + + + + + +

Traffic

+
November 2017
+ + + + + + + { + ['Day', 'Month', 'Year'].map(value => ( + + {value} + + )) + } + + + + + + + + +
Visits
+ 29.703 Users (40%) + + + +
Unique
+ 24.093 Users (20%) + + + +
Pageviews
+ 78.706 Views (60%) + + + +
New Users
+ 22.123 Users (80%) + + + +
Bounce Rate
+ Average Rate (40.15%) + + + + + + + + + + + + + Traffic {' & '} Sales + + + + + + + + + New Clients +
+ 9,123 + + + + + Recurring Clients +
+ 22,643 + + + + +
+ +
+
+ + Monday + +
+
+ + +
+
+
+
+ + Tuesday + +
+
+ + +
+
+
+
+ + Wednesday + +
+
+ + +
+
+
+
+ + Thursday + +
+
+ + +
+
+
+
+ + Friday + +
+
+ + +
+
+
+
+ + Saturday + +
+
+ + +
+
+
+
+ + Sunday + +
+
+ + +
+
+
+ +   + New clients +   +   + Recurring clients + +
+ + + + + + + + Pageviews +
+ 78,623 + + + + + Organic +
+ 49,123 + + + + +
+ +
+
+ + Male + 43% +
+
+ +
+
+
+
+ + Female + 37% +
+
+ +
+
+
+
+ + Organic Search + 191,235 (56%) +
+
+ +
+
+ + +
+
+ + Facebook + 51,223 (15%) +
+
+ +
+
+
+
+ + Twitter + 37,564 (11%) +
+
+ +
+
+
+
+ + LinkedIn + 27,319 (8%) +
+
+ +
+
+
+ + + +
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UserCountryUsagePayment MethodActivity
+
+ admin@bootstrapmaster.com + +
+ 		+
Yiorgos Avraamu
+
+ New | Registered: Jan 1, 2015 +
+ 		+ + +
+
+ 50% +
+
+ Jun 11, 2015 - Jul 10, 2015 +
+
+ + 		+ + +
Last login
+ 10 sec ago +
+
+ admin@bootstrapmaster.com + +
+ 		+
Avram Tarasios
+
+ + Recurring | Registered: Jan 1, 2015 +
+ 		+ + +
+
+ 10% +
+
+ Jun 11, 2015 - Jul 10, 2015 +
+
+ + 		+ + +
Last login
+ 5 minutes ago +
+
+ admin@bootstrapmaster.com + +
+ 		+
Quintin Ed
+
+ New | Registered: Jan 1, 2015 +
+ 		+ + +
+
+ 74% +
+
+ Jun 11, 2015 - Jul 10, 2015 +
+
+ + 		+ + +
Last login
+ 1 hour ago +
+
+ admin@bootstrapmaster.com + +
+ 		+
Enéas Kwadwo
+
+ New | Registered: Jan 1, 2015 +
+ 		+ + +
+
+ 98% +
+
+ Jun 11, 2015 - Jul 10, 2015 +
+
+ + 		+ + +
Last login
+ Last month +
+
+ admin@bootstrapmaster.com + +
+ 		+
Agapetus Tadeáš
+
+ New | Registered: Jan 1, 2015 +
+ 		+ + +
+
+ 22% +
+
+ Jun 11, 2015 - Jul 10, 2015 +
+
+ + 		+ + +
Last login
+ Last week +
+
+ admin@bootstrapmaster.com + +
+ 		+
Friderik Dávid
+
+ New | Registered: Jan 1, 2015 +
+ 		+ + +
+
+ 43% +
+
+ Jun 11, 2015 - Jul 10, 2015 +
+
+ + 		+ + +
Last login
+ Yesterday +
+ + + + + + + ) +} + +export default Dashboard diff --git a/src/views/icons/brands/Brands.js b/src/views/icons/brands/Brands.js new file mode 100644 index 000000000..3168e8b4e --- /dev/null +++ b/src/views/icons/brands/Brands.js @@ -0,0 +1,39 @@ +import React from 'react' +import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' +import CIcon from '@coreui/icons-react' +import { brandSet } from '@coreui/icons' + +const toKebabCase = (str) => { + return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase() +} + +export const getIconsView = iconset => { + return Object.entries(iconset).map(([name, value]) => ( + + +
{toKebabCase(name)}
+ + )) +} + +const CoreUIIcons = () => { + return ( + + + Brand Icons / as CIcon{' '} + + + + + {getIconsView(brandSet)} + + + + ) +} + +export default CoreUIIcons diff --git a/src/views/icons/coreui-icons/CoreUIIcons.js b/src/views/icons/coreui-icons/CoreUIIcons.js new file mode 100644 index 000000000..91fcd27a2 --- /dev/null +++ b/src/views/icons/coreui-icons/CoreUIIcons.js @@ -0,0 +1,26 @@ +import React from 'react' +import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react' +import { freeSet } from '@coreui/icons' +import { getIconsView } from '../brands/Brands.js' + +const CoreUIIcons = () => { + return ( + + + Free Icons / as CIcon{' '} + + + + + {getIconsView(freeSet)} + + + + ) +} + +export default CoreUIIcons diff --git a/src/views/icons/flags/Flags.js b/src/views/icons/flags/Flags.js new file mode 100644 index 000000000..192760059 --- /dev/null +++ b/src/views/icons/flags/Flags.js @@ -0,0 +1,26 @@ +import React from 'react' +import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react' +import { getIconsView } from '../brands/Brands.js' +import { flagSet } from '@coreui/icons' + +const CoreUIIcons = () => { + return ( + + + Flag Icons / as CIcon{' '} + + + + + {getIconsView(flagSet)} + + + + ) +} + +export default CoreUIIcons diff --git a/src/views/index.js b/src/views/index.js deleted file mode 100644 index 1a87c6ffa..000000000 --- a/src/views/index.js +++ /dev/null @@ -1,69 +0,0 @@ -import { - Breadcrumbs, - Cards, - Carousels, - Collapses, - Dropdowns, - Forms, - Jumbotrons, - ListGroups, - Navbars, - Navs, - Paginations, - Popovers, - ProgressBar, - Switches, - Tables, - Tabs, - Tooltips, -} from './Base'; - -import { ButtonDropdowns, ButtonGroups, Buttons, BrandButtons } from './Buttons'; -import Charts from './Charts'; -import Dashboard from './Dashboard'; -import { CoreUIIcons, Flags, FontAwesome, SimpleLineIcons } from './Icons'; -import { Alerts, Badges, Modals } from './Notifications'; -import { Login, Page404, Page500, Register } from './Pages'; -import { Colors, Typography } from './Theme'; -import Widgets from './Widgets'; - -export { - Badges, - Typography, - Colors, - CoreUIIcons, - Page404, - Page500, - Register, - Login, - Modals, - Alerts, - Flags, - SimpleLineIcons, - FontAwesome, - ButtonDropdowns, - ButtonGroups, - BrandButtons, - Buttons, - Tooltips, - Tabs, - Tables, - Charts, - Dashboard, - Widgets, - Jumbotrons, - Switches, - ProgressBar, - Popovers, - Navs, - Navbars, - ListGroups, - Forms, - Dropdowns, - Collapses, - Carousels, - Cards, - Breadcrumbs, - Paginations, -}; - diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js new file mode 100644 index 000000000..0a7c78ebe --- /dev/null +++ b/src/views/notifications/alerts/Alerts.js @@ -0,0 +1,180 @@ +import React from 'react' +import { + CAlert, + CButton, + CCard, + CCardBody, + CCardHeader, + CCol, + CLink, + CProgress, + CRow +} from '@coreui/react' + +const Alerts = () => { + const [visible, setVisible] = React.useState(10) + + return ( + <> + + + + + Alerts + + + + + This is a primary alert — check it out! + + + This is a secondary alert — check it out! + + + This is a success alert — check it out! + + + This is a danger alert — check it out! + + + This is a warning alert — check it out! + + + This is a info alert — check it out! + + + This is a light alert — check it out! + + + This is a dark alert — check it out! + + + + + + + + Alerts + use .alert-link to provide links + + + + {/*eslint-disable-next-line*/} + This is a primary alert with  + an example link. + Give it a click if you like. + + + {/*eslint-disable-next-line*/} + This is a secondary alert with  + an example link. + Give it a click if you like. + + + {/*eslint-disable-next-line*/} + This is a success alert with  + an example link. + Give it a click if you like. + + + {/*eslint-disable-next-line*/} + This is a danger alert with  + an example link. + Give it a click if you like. + + + {/*eslint-disable-next-line*/} + This is a warning alert with  + an example link. + Give it a click if you like. + + + {/*eslint-disable-next-line*/} + This is a info alert with  + an example link. + Give it a click if you like. + + + {/*eslint-disable-next-line*/} + This is a light alert with  + an example link. + Give it a click if you like. + + + {/*eslint-disable-next-line*/} + This is a dark alert with  + an example link. + Give it a click if you like. + + + + + + + + + + Alerts + additional content + + + +

Well done!

+

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

+
+

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

+ + + + + + + + Alerts + dismissing + + + + I am an dismissible alert! + + + I will be closed in {visible} seconds! + + + + setVisible(10)}> + Reset timer + + + + + + + ) +} + +export default Alerts diff --git a/src/views/notifications/badges/Badges.js b/src/views/notifications/badges/Badges.js new file mode 100644 index 000000000..45a15f6f9 --- /dev/null +++ b/src/views/notifications/badges/Badges.js @@ -0,0 +1,95 @@ +import React from 'react' +import { + CBadge, + CButton, + CCard, + CCardBody, + CCardFooter, + CCardHeader, + CCol, + CRow +} from '@coreui/react' + +const Badges = () => { + return ( + + + + + Badges + + + +

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+
Example heading New
+
Example heading New
+ + + + Notifications 9 + + + + + + + + Badges + contextual variations + + + Primary + Secondary + Success + Danger + Warning + Info + Light + Dark + + + + + Badges + pill badges + + + Primary + Secondary + Success + Danger + Warning + Info + Light + Dark + + + + + Badges + links + + + Primary + Secondary + Success + Danger + Warning + Info + Light + Dark + + + + + ) +} + +export default Badges diff --git a/src/views/notifications/modals/Modals.js b/src/views/notifications/modals/Modals.js new file mode 100644 index 000000000..c3c8de841 --- /dev/null +++ b/src/views/notifications/modals/Modals.js @@ -0,0 +1,237 @@ +import React, { useState } from 'react' +import { + CButton, + CCard, + CCardBody, + CCardHeader, + CCol, + CModal, + CModalBody, + CModalFooter, + CModalHeader, + CModalTitle, + CRow +} from '@coreui/react' + +const Modals = () => { + + const [modal, setModal] = useState(true) + const [large, setLarge] = useState(false) + const [small, setSmall] = useState(false) + const [primary, setPrimary] = useState(false) + const [success, setSuccess] = useState(false) + const [warning, setWarning] = useState(false) + const [danger, setDanger] = useState(false) + const [info, setInfo] = useState(false) + + return ( + + + + + Bootstrap Modals + + + setModal(!modal)} + className="mr-1" + >Launch demo modal + setLarge(!large)} className="mr-1"> + Launch large modal + + setSmall(!large)} className="mr-1"> + Launch small modal + + + + Modal title + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + + + Do Something{' '} + setModal(false)} + >Cancel + + + + + setLarge(!large)} + size="lg" + > + + Modal title + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + + + setLarge(!large)}>Do Something{' '} + setLarge(!large)}>Cancel + + + + setSmall(!small)} + size="sm" + > + + Modal title + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + + + setSmall(!small)}>Do Something{' '} + setSmall(!small)}>Cancel + + + +
+ + setPrimary(!primary)} className="mr-1"> + Primary modal + + setSuccess(!success)} className="mr-1">Success modal + setWarning(!warning)} className="mr-1">Warning modal + setDanger(!danger)} className="mr-1">Danger modal + setInfo(!info)} className="mr-1">Info modal + + setPrimary(!primary)} + color="primary" + > + + Modal title + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + + + setPrimary(!primary)}> + Do Something + {' '} + setPrimary(!primary)}> + Cancel + + + + + setSuccess(!success)} + color="success" + > + + Modal title + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + + + setSuccess(!success)}>Do Something{' '} + setSuccess(!success)}>Cancel + + + + setWarning(!warning)} + color="warning" + > + + Modal title + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + + + setWarning(!warning)}>Do Something{' '} + setWarning(!warning)}>Cancel + + + + setDanger(!danger)} + color="danger" + > + + Modal title + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + + + setDanger(!danger)}>Do Something{' '} + setDanger(!danger)}>Cancel + + + + setInfo(!info)} + color="info" + > + + Modal title + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + + + setInfo(!info)}>Cancel + setInfo(!info)}>Do Something{' '} + + + + + + + + ) +} + +export default Modals diff --git a/src/views/notifications/toaster/Toaster.js b/src/views/notifications/toaster/Toaster.js new file mode 100644 index 000000000..04ade5d29 --- /dev/null +++ b/src/views/notifications/toaster/Toaster.js @@ -0,0 +1,183 @@ +import React, { useState } from 'react' +import { + CCard, + CCardHeader, + CCardBody, + CToast, + CToastBody, + CToastHeader, + CToaster, + CForm, + CInput, + CInputCheckbox, + CButton, + CContainer, + CRow, + CCol, + CFormGroup, + CLabel +} from '@coreui/react' + +const Toaster = () => { + + const positions = [ + 'static', + 'top-left', + 'top-center', + 'top-right', + 'top-full', + 'bottom-left', + 'bottom-center', + 'bottom-right', + 'bottom-full' + ] + + const [toasts, setToasts] = useState([ + { position: 'static'}, + { position: 'static'}, + { position: 'top-right', autohide: 3000 } + ]) + + const [position, setPosition] = useState('top-right') + const [autohide, setAutohide] = useState(true) + const [autohideValue, setAutohideValue] = useState(5000) + const [closeButton, setCloseButton] = useState(true) + const [fade, setFade] = useState(true) + + const addToast = () => { + setToasts([ + ...toasts, + { position, autohide: autohide && autohideValue, closeButton, fade } + ]) + } + + + const toasters = (()=>{ + return toasts.reduce((toasters, toast) => { + toasters[toast.position] = toasters[toast.position] || [] + toasters[toast.position].push(toast) + return toasters + }, {}) + })() + + + return ( + + + Toasts. + + + + + + +
Add toast with following props:
+ + + { setAutohide(e.target.checked) }} + custom + /> + + Autohide of the toast + + + { + autohide && + + Time to autohide + { + setAutohideValue(Number(e.target.value)) + }} + /> + + } + + + Position + + + + + { setFade(e.target.checked) }} + custom + /> + fade + + + + { setCloseButton(e.target.checked) }} + /> + + closeButton + + + + + Add toast + + + + + + {Object.keys(toasters).map((toasterKey) => ( + + { + toasters[toasterKey].map((toast, key)=>{ + return( + + + Toast title + + + {`This is a toast in ${toasterKey} positioned toaster number ${key + 1}.`} + + + ) + }) + } + + ))} + + + + + + ) +} + +export default Toaster diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js new file mode 100644 index 000000000..7f90972cb --- /dev/null +++ b/src/views/pages/login/Login.js @@ -0,0 +1,78 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import { + CButton, + CCard, + CCardBody, + CCardGroup, + CCol, + CContainer, + CForm, + CInput, + CInputGroup, + CInputGroupPrepend, + CInputGroupText, + CRow +} from '@coreui/react' +import CIcon from '@coreui/icons-react' + +const Login = () => { + return ( +
+ + + + + + + +

Login

+

Sign In to your account

+ + + + + + + + + + + + + + + + + + + Login + + + Forgot password? + + + + + + + +
+

Sign up

+

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

+ + Register Now! + +
+ + + + + + +
+ ) +} + +export default Login diff --git a/src/views/pages/page404/Page404.js b/src/views/pages/page404/Page404.js new file mode 100644 index 000000000..4461e640f --- /dev/null +++ b/src/views/pages/page404/Page404.js @@ -0,0 +1,44 @@ +import React from 'react' +import { + CButton, + CCol, + CContainer, + CInput, + CInputGroup, + CInputGroupPrepend, + CInputGroupAppend, + CInputGroupText, + CRow +} from '@coreui/react' +import CIcon from '@coreui/icons-react' + +const Page404 = () => { + return ( +
+ + + +
+

404

+

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

+

The page you are looking for was not found.

+
+ + + + + + + + + Search + + + + + +
+ ) +} + +export default Page404 diff --git a/src/views/pages/page500/Page500.js b/src/views/pages/page500/Page500.js new file mode 100644 index 000000000..1ea399854 --- /dev/null +++ b/src/views/pages/page500/Page500.js @@ -0,0 +1,44 @@ +import React from 'react' +import { + CButton, + CCol, + CContainer, + CInput, + CInputGroup, + CInputGroupAppend, + CInputGroupPrepend, + CInputGroupText, + CRow +} from '@coreui/react' +import CIcon from '@coreui/icons-react' + +const Page500 = () => { + return ( +
+ + + + +

500

+

Houston, we have a problem!

+

The page you are looking for is temporarily unavailable.

+ + + + + + + + + + Search + + + + + +
+ ) +} + +export default Page500 diff --git a/src/views/pages/register/Register.js b/src/views/pages/register/Register.js new file mode 100644 index 000000000..6837ae62b --- /dev/null +++ b/src/views/pages/register/Register.js @@ -0,0 +1,80 @@ +import React from 'react' +import { + CButton, + CCard, + CCardBody, + CCardFooter, + CCol, + CContainer, + CForm, + CInput, + CInputGroup, + CInputGroupPrepend, + CInputGroupText, + CRow +} from '@coreui/react' +import CIcon from '@coreui/icons-react' + +const Register = () => { + return ( +
+ + + + + + +

Register

+

Create your account

+ + + + + + + + + + + @ + + + + + + + + + + + + + + + + + + + + Create Account + + + + + + facebook + + + twitter + + + + + + + +
+ ) +} + +export default Register diff --git a/src/views/theme/colors/Colors.js b/src/views/theme/colors/Colors.js new file mode 100644 index 000000000..72297a3e6 --- /dev/null +++ b/src/views/theme/colors/Colors.js @@ -0,0 +1,119 @@ +import React, { useEffect, useState, createRef } from 'react' +import classNames from 'classnames' +import { CRow, CCol } from '@coreui/react' +import { rgbToHex } from '@coreui/utils/src' + +const ThemeView = () => { + const [color, setColor] = useState('rgb(255, 255, 255)') + const ref = createRef() + + useEffect(() => { + const el = ref.current.parentNode.firstChild + const varColor = window.getComputedStyle(el).getPropertyValue('background-color') + setColor(varColor) + }, [ref]) + + return ( + + + + + + + + + + + +
HEX:{ rgbToHex(color) }
RGB:{ color }
+ ) +} + +const ThemeColor = ({className, children}) => { + const classes = classNames(className, 'theme-color w-75 rounded mb-3') + return ( + +
+ {children} + + + ) +} + +const Colors = () => { + return ( + <> +
+
+ Theme colors +
+
+ + +
Brand Primary Color
+ + +
Brand Secondary Color
+ + +
Brand Success Color
+ + +
Brand Danger Color
+ + +
Brand Warning Color
+ + +
Brand Info Color
+ + +
Brand Light Color
+ + +
Brand Dark Color
+ + +
+
+
+
+ Grays +
+
+ + +
Gray 100 Color
+ + +
Gray 200 Color
+ + +
Gray 300 Color
+ + +
Gray 400 Color
+ + +
Gray 500 Color
+ + +
Gray 600 Color
+ + +
Gray 700 Color
+ + +
Gray 800 Color
+ + +
Gray 900 Color
+ + +
+
+ + ) +} + +export default Colors diff --git a/src/views/theme/typography/Typography.js b/src/views/theme/typography/Typography.js new file mode 100644 index 000000000..5b5645d76 --- /dev/null +++ b/src/views/theme/typography/Typography.js @@ -0,0 +1,168 @@ +import React from 'react' + +const Typography = () => { + return ( + <> +
+
+ Headings +
+
+

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeadingExample
+

<h1></h1>

+ 		h1. Bootstrap heading
+

<h2></h2>

+ 		h2. Bootstrap heading
+

<h3></h3>

+ 		h3. Bootstrap heading
+

<h4></h4>

+ 		h4. Bootstrap heading
+

<h5></h5>

+ 		h5. Bootstrap heading
+

<h6></h6>

+ 		h6. Bootstrap heading
+
+
+
+
+ Headings +
+
+

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

+
+

h1. Bootstrap heading

+

h2. Bootstrap heading

+

h3. Bootstrap heading

+

h4. Bootstrap heading

+

h5. Bootstrap heading

+

h6. Bootstrap heading

+
+
+
+
+
+ Display headings +
+
+

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

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

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

+
+

You can use the mark tag to highlight text.

+

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

+

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

+

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

+

This line of text will render as underlined

+

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

+

This line rendered as bold text.

+

This line rendered as italicized text.

+
+
+
+
+
+ Description list alignment +
+
+

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

+
+
+
Description lists
+
A description list is perfect for defining terms.
+ +
Euismod
+
+

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

+

Donec id elit non mi porta gravida at eget metus.

+
+ +
Malesuada porta
+
Etiam porta sem malesuada magna mollis euismod.
+ +
Truncated term is truncated
+
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+ +
Nesting
+
+
+
Nested definition list
+
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
+
+
+
+
+
+
+ + ) +} + +export default Typography diff --git a/src/views/users/User.js b/src/views/users/User.js new file mode 100644 index 000000000..330d15445 --- /dev/null +++ b/src/views/users/User.js @@ -0,0 +1,41 @@ +import React from 'react' +import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' +import CIcon from '@coreui/icons-react' + +import usersData from './UsersData' + +const User = ({match}) => { + const user = usersData.find( user => user.id.toString() === match.params.id) + const userDetails = user ? Object.entries(user) : + [['id', ( Not found)]] + + return ( + + + + + User id: {match.params.id} + + + + + { + userDetails.map(([key, value], index) => { + return ( + + + + + ) + }) + } + +
{`${key}:`}{value}
+ + + + + ) +} + +export default User diff --git a/src/views/users/Users.js b/src/views/users/Users.js new file mode 100644 index 000000000..05d525b9a --- /dev/null +++ b/src/views/users/Users.js @@ -0,0 +1,86 @@ +import React, { useState, useEffect } from 'react' +import { useHistory, useLocation } from 'react-router-dom' +import { + CBadge, + CCard, + CCardBody, + CCardHeader, + CCol, + CDataTable, + CRow, + CPagination +} from '@coreui/react' + +import usersData from './UsersData' + +const getBadge = status => { + switch (status) { + case 'Active': return 'success' + case 'Inactive': return 'secondary' + case 'Pending': return 'warning' + case 'Banned': return 'danger' + default: return 'primary' + } +} + +const Users = () => { + const history = useHistory() + const queryPage = useLocation().search.match(/page=([0-9]+)/, '') + const currentPage = Number(queryPage && queryPage[1] ? queryPage[1] : 1) + const [page, setPage] = useState(currentPage) + + const pageChange = newPage => { + currentPage !== newPage && history.push(`/users?page=${newPage}`) + } + + useEffect(() => { + currentPage !== page && setPage(currentPage) + }, [currentPage, page]) + + return ( + + + + + Users + example + + + history.push(`/users/${item.id}`)} + scopedSlots = {{ + 'status': + (item)=>( + + + {item.status} + + + ) + }} + /> + + + + + + ) +} + +export default Users diff --git a/src/views/Users/UsersData.js b/src/views/users/UsersData.js similarity index 86% rename from src/views/Users/UsersData.js rename to src/views/users/UsersData.js index 977920d50..f5f923a3f 100644 --- a/src/views/Users/UsersData.js +++ b/src/views/users/UsersData.js @@ -22,10 +22,8 @@ const usersData = [ {id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'}, {id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'}, {id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, - {id: 23, name: 'Einar Randall', registered: '2018/02/01', role: 'Admin', status: 'Inactive'}, - {id: 24, name: 'Félix Troels', registered: '2018/03/21', role: 'Staff', status: 'Active'}, - {id: 25, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'}, - {id: 42, name: 'Ford Prefex', registered: '2001/05/21', role: 'Alien', status: 'Don\'t panic!'} + {id: 23, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'}, + {id: 42, name: 'Ford Prefect', registered: '2001/05/25', role: 'Alien', status: 'Don\'t panic!'} ] export default usersData diff --git a/src/views/widgets/Widgets.js b/src/views/widgets/Widgets.js new file mode 100644 index 000000000..f072de76b --- /dev/null +++ b/src/views/widgets/Widgets.js @@ -0,0 +1,370 @@ +import React from 'react' +import { + CCardGroup, + CCardFooter, + CCol, + CLink, + CRow, + CWidgetProgress, + CWidgetIcon, + CWidgetProgressIcon, + CWidgetSimple, + CProgress, +} from '@coreui/react' +import WidgetsBrand from './WidgetsBrand' +import WidgetsDropdown from './WidgetsDropdown' + +import ChartLineSimple from '../charts/ChartLineSimple' +import ChartBarSimple from '../charts/ChartBarSimple' + +import CIcon from '@coreui/icons-react' + +const Widgets = () => { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + View more + + + + } + > + + + + + + + + + + + + + + + + + + + + } + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default Widgets diff --git a/src/views/widgets/WidgetsBrand.js b/src/views/widgets/WidgetsBrand.js new file mode 100644 index 000000000..4cf071943 --- /dev/null +++ b/src/views/widgets/WidgetsBrand.js @@ -0,0 +1,177 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { CWidgetBrand, CRow, CCol } from '@coreui/react'; +import CIcon from '@coreui/icons-react'; +import ChartLineSimple from '../charts/ChartLineSimple'; + +const WidgetsBrand = ({withCharts})=>{ + + // render + + return withCharts ? + + + + + + + + + + + + + + + + + + + + + + + + + + + + + : + + + + + + + + + + + + + + + + + + + + + + + + + + +} + +WidgetsBrand.propTypes = { + withCharts: PropTypes.bool +} + +export default WidgetsBrand diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js new file mode 100644 index 000000000..3d0d86fbd --- /dev/null +++ b/src/views/widgets/WidgetsDropdown.js @@ -0,0 +1,146 @@ +import React from 'react' +import { + CWidgetDropdown, + CRow, + CCol, + CDropdown, + CDropdownMenu, + CDropdownItem, + CDropdownToggle +} from '@coreui/react' +import CIcon from '@coreui/icons-react' +import ChartLineSimple from '../charts/ChartLineSimple' +import ChartBarSimple from '../charts/ChartBarSimple' + +const WidgetsDropdown = () => { + // render + return ( + + + + } + > + + + + + + Action + Another action + Something else here... + Disabled action + + + + + + + + } + > + + + + + + Action + Another action + Something else here... + Disabled action + + + + + + + + } + > + + + + + + Action + Another action + Something else here... + Disabled action + + + + + + + + } + > + + + + + + Action + Another action + Something else here... + Disabled action + + + + + + ) +} + +export default WidgetsDropdown