gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #20 from mrholek/react-v16

Browse Source 
React v16, Reactstrap v5
This commit is contained in:
xidedix 2017-10-10 15:44:46 +02:00 committed by GitHub
commit 5766d28938
95 changed files with 564 additions and 654 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
CHANGELOG.md
View File

@ -1,24 +1,44 @@
## Changelog [react](./REACT.md) version
## [react](./REACT.md) version `changelog`
##### 2017.08.24
###### `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
###### `2017.08.11`
- Bootstrap 4 beta
- Dashboard component (full):
- line chart for social box
- sparkline chart for callout
##### 2017.08.01
###### `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
###### `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)

1
React_Full_Project/.gitignore vendored
View File

@ -2,6 +2,7 @@
# dependencies
node_modules
package-lock.json
# testing
coverage

35
React_Full_Project/CHANGELOG.md
View File

@ -1,35 +0,0 @@
### Changelog [react](./REACT.md) version
#### 2017.08.26
- 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)

36
React_Full_Project/REACT.md
View File

@ -1,36 +0,0 @@
# React version
## Intro
It uses Sass (with .scss). The style is loaded at the component level.
Dependencies can be handled by **npm**.
## Directories
```
src (js|jsx source)
scss (scss source)
public (html template)
public/img (images)
```
## Usage
**npm i** - to install dependencies
## Sctipts
**npm start** for developing (it runs webpack-dev-server)
**npm run build** to run a dev build
**npm run clean** to clean build dir
**npm run dev** to run a dev build with watching filesystem for changes
## See also
[Changelog](./CHANGELOG.md)
[Readme](./README.md)

30
React_Full_Project/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@coreui/react",
"version": "1.0.0",
"version": "1.0.1",
"description": "",
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
"url": "http://coreui.io",
@ -14,22 +14,22 @@
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"copy-webpack-plugin": "^4.0.1",
"css-hot-loader": "^1.3.1",
"copy-webpack-plugin": "^4.1.1",
"css-hot-loader": "^1.3.2",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.5",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.5.3",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.6",
"source-list-map": "^2.0.0",
"style-loader": "^0.18.2",
"uglify-js": "^3.1.1",
"url-loader": "^0.5.9",
"style-loader": "^0.19.0",
"uglify-js": "^3.1.3",
"url-loader": "^0.6.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.8.2"
"webpack-dev-server": "^2.9.1"
},
"dependencies": {
"bootstrap": "^4.0.0-beta",
@ -37,12 +37,12 @@
"font-awesome": "^4.7.0",
"history": "4.7.2",
"is-url-external": "^1.0.3",
"react": "^15.6.1",
"react-chartjs-2": "2.6.2",
"react-dom": "^15.6.1",
"react-router-dom": "4.2.2",
"react-transition-group": "^1.2.0",
"reactstrap": "^4.8.0",
"react": "^16.0.0",
"react-chartjs-2": "2.6.4",
"react-dom": "^16.0.0",
"react-router-dom": "^4.2.2",
"react-transition-group": "^2.2.1",
"reactstrap": "^5.0.0-alpha.3",
"simple-line-icons": "^2.4.1"
},
"scripts": {

9
React_Full_Project/scss/core/_dropdown-menu-right.scss
View File

@ -1,7 +1,8 @@
// Temp fix for reactstrap
.show {
> .dropdown-menu-right {
right: 0;
left: auto; // Reset the default from `.dropdown-menu`
.app-header {
.navbar-nav {
.dropdown-menu-right {
right: auto;
}
}
}

5
React_Full_Project/scss/core/_footer.scss
View File

@ -1,8 +1,9 @@
.app-footer {
min-height: $footer-height;
display: flex;
padding: 0 $spacer;
line-height: $footer-height;
color: $footer-color;
background: $footer-bg;
flex-wrap: wrap;
align-items: center;
@include borders($footer-borders);
}

9
React_Full_Project/scss/core/_layout.scss
View File

@ -11,8 +11,8 @@
app-dashboard,
app-root {
display: flex;
flex-direction: column;
min-height: 100vh;
flex-direction: column;
}
.app-header {
@ -26,12 +26,12 @@ app-root {
.app-body {
display: flex;
flex-direction: row;
flex-grow: 1;
overflow-x: hidden;
flex-grow: 1;
.main {
flex: 1;
min-width: 0;
flex: 1;
}
.sidebar {
@ -328,7 +328,8 @@ app-root {
margin-top: $navbar-height;
}
.sidebar {
.sidebar,
.sidebar-fixed .sidebar {
position: fixed;
z-index: $zindex-sticky - 1;
width: $mobile-sidebar-width;

19
React_Full_Project/scss/core/_navbar.scss
View File

@ -1,7 +1,7 @@
.app-header.navbar {
position: relative;
flex-direction: row;
height: $navbar-height;
flex-direction: row;
padding: 0;
margin: 0;
background-color: $navbar-bg;
@ -102,13 +102,16 @@
background-color: rgba(0,0,0,.075);
}
.brand-minimized {
.app-header.navbar {
.navbar-brand {
width: $navbar-brand-minimized-width;
background-color: $navbar-brand-minimized-bg;
background-image: $navbar-brand-minimized-logo;
background-size: $navbar-brand-minimized-logo-size;
@include media-breakpoint-up(lg) {
.brand-minimized {
.app-header.navbar {
.navbar-brand {
width: $navbar-brand-minimized-width;
background-color: $navbar-brand-minimized-bg;
background-image: $navbar-brand-minimized-logo;
background-size: $navbar-brand-minimized-logo-size;
@include borders($navbar-brand-minimized-border);
}
}
}
}

4
React_Full_Project/scss/core/_sidebar.scss
View File

@ -78,8 +78,8 @@
.nav {
@include sidebar-width($sidebar-borders, $sidebar-width);
flex-direction: column;
min-height: 100%;
flex-direction: column;
}
.nav-title {
@ -254,6 +254,7 @@
flex: 0 0 $sidebar-footer-height;
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
background: $sidebar-footer-bg;
@include borders($sidebar-footer-borders);
}
.sidebar-minimizer {
@ -261,6 +262,7 @@
flex: 0 0 $sidebar-minimizer-height;
background-color: $sidebar-minimizer-bg;
border: 0;
@include borders($sidebar-minimizer-borders);
&::before {
position: absolute;

7
React_Full_Project/scss/core/_variables.scss
View File

@ -58,10 +58,11 @@ $navbar-brand-border: (
)
) !default;
$navbar-brand-minimized-width: 50px !default
$navbar-brand-minimized-bg: #fff !default;
$navbar-brand-minimized-width: 50px !default;
$navbar-brand-minimized-bg: $navbar-brand-bg !default;
$navbar-brand-minimized-logo: url('../img/logo-symbol.png') !default;
$navbar-brand-minimized-logo-size: 24px !default;
$navbar-brand-minimized-border: $navbar-brand-border !default;
$navbar-color: $gray-600 !default;
$navbar-hover-color: $gray-800 !default;
@ -132,11 +133,13 @@ $sidebar-footer-height: auto !default;
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
$sidebar-footer-padding-y: .75rem !default;
$sidebar-footer-padding-x: 1rem !default;
$sidebar-footer-borders: 0 !default;
// Sidebar Minimizer
$sidebar-minimizer-height: 50px !default;
$sidebar-minimizer-bg: rgba(0,0,0,.2) !default;
$sidebar-minimizer-borders: 0 !default;
$sidebar-minimizer-indicator-color: $gray-600 !default;
$sidebar-minimizer-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
$sidebar-minimizer-hover-bg: rgba(0,0,0,.3) !default;

10
React_Full_Project/scss/style.scss
View File

@ -1,6 +1,6 @@
/*!
* CoreUI - Open Source Bootstrap Admin Template
* @version v1.0.0
* @version v1.0.1
* @link http://coreui.io
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
* @license MIT
@ -11,23 +11,17 @@
// Import Bootstrap source files
@import "bootstrap/bootstrap";
// If you want you can import bootstrap scss files directly from node_modules or bower_components.
// If you want you can import bootstrap scss files directly from node_modules.
// To do this please remove @import "bootstrap/bootstrap"; and uncomment proper line.
// Import Bootstrap source files from node_modules
// @import "node_modules/bootstrap/scss/bootstrap";
// Import Bootstrap source files from bower_components
// @import "bower_components/bootstrap/scss/bootstrap";
// Override core variables
@import "core-variables";
// Import core styles
@import "core/core";
// Import vendors styles
@import "vendors/vendors";
// Custom styles
@import "custom";

9
React_Full_Project/scss/vendors/_variables.scss vendored Normal file
View File

@ -0,0 +1,9 @@
// @import "node_modules/bootstrap/scss/bootstrap/functions";
@import "../bootstrap/functions";
@import "../bootstrap-variables";
// @import "node_modules/bootstrap/scss/bootstrap/variables";
@import "../bootstrap/variables";
// @import "node_modules/bootstrap/scss/bootstrap/mixins";
@import "../bootstrap/mixins";
@import "../core-variables";
@import "../core/variables";

1
React_Full_Project/scss/vendors/_vendors.scss vendored
View File

@ -1 +0,0 @@
@import "chart.js/chart";

3
React_Full_Project/scss/vendors/chart.js/chart.scss vendored
View File

@ -1,3 +1,6 @@
// Import variables
@import '../variables';
.chart-legend,
.bar-legend,
.line-legend,

2
React_Full_Project/src/components/Aside/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Aside",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Aside.js"
}

2
React_Full_Project/src/components/Breadcrumb/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Breadcrumb",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Breadcrumb.js"
}

4
React_Full_Project/src/components/Footer/Footer.js
View File

@ -4,8 +4,8 @@ class Footer extends Component {
render() {
return (
<footer className="app-footer">
<a href="http://coreui.io">CoreUI</a> &copy; 2017 creativeLabs.
<span className="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
<span><a href="http://coreui.io">CoreUI</a> &copy; 2017 creativeLabs.</span>
<span className="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
</footer>
)
}

2
React_Full_Project/src/components/Footer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Footer",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Footer.js"
}

59
React_Full_Project/src/components/Header/Header.js
View File

@ -1,15 +1,6 @@
import React, {Component} from 'react';
import {
Badge,
Dropdown,
DropdownMenu,
DropdownItem,
Nav,
NavItem,
NavLink,
NavbarToggler,
NavbarBrand,
DropdownToggle
Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavbarBrand, NavbarToggler, NavDropdown, NavItem, NavLink
} from 'reactstrap';
class Header extends Component {
@ -76,33 +67,31 @@ class Header extends Component {
<NavItem className="d-md-down-none">
<NavLink href="#"><i className="icon-location-pin"></i></NavLink>
</NavItem>
<NavItem>
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle className="nav-link dropdown-toggle">
<img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<span className="d-md-down-none">admin</span>
</DropdownToggle>
<DropdownMenu right className={this.state.dropdownOpen ? 'show' : ''}>
<DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
<DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
<DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
<DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
<DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
<DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
<DropdownItem divider/>
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
<DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
</DropdownMenu>
</Dropdown>
</NavItem>
<NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle nav caret>
<img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<span className="d-md-down-none">admin</span>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
<DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
<DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
<DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
<DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
<DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
<DropdownItem divider/>
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
<DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
</DropdownMenu>
</NavDropdown>
</Nav>
<NavbarToggler className="d-md-down-none" type="button" onClick={this.asideToggle}>&#9776;</NavbarToggler>
<NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>&#9776;</NavbarToggler>
</header>
)
);
}
}

2
React_Full_Project/src/components/Header/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Header",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Header.js"
}

2
React_Full_Project/src/components/Sidebar/Sidebar.js
View File

@ -61,7 +61,7 @@ class Sidebar extends Component {
return (
<NavItem key={key} className={classes}>
{ isExternal(item.url) ?
<RsNavLink href={item.url} className={variant} activeClassName="active">
<RsNavLink href={item.url} className={variant} active>
<i className={item.icon}></i>{item.name}{badge(item.badge)}
</RsNavLink>
:

2
React_Full_Project/src/components/Sidebar/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Sidebar",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Sidebar.js"
}

2
React_Full_Project/src/components/SidebarFooter/package.json
View File

@ -1,6 +1,6 @@
{
"name": "SidebarFooter",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./SidebarFooter.js"
}

2
React_Full_Project/src/components/SidebarForm/package.json
View File

@ -1,6 +1,6 @@
{
"name": "SidebarForm",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./SidebarForm.js"
}

2
React_Full_Project/src/components/SidebarHeader/package.json
View File

@ -1,6 +1,6 @@
{
"name": "SidebarHeader",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./SidebarHeader.js"
}

2
React_Full_Project/src/components/SidebarMinimizer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "SidebarMinimizer",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./SidebarMinimizer.js"
}

2
React_Full_Project/src/containers/Full/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Full",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Full.js"
}

30
React_Full_Project/src/views/Charts/Charts.js
View File

@ -1,6 +1,6 @@
import React, {Component} from "react";
import {Bar, Doughnut, Line, Pie, Polar, Radar} from "react-chartjs-2";
import {CardColumns, Card, CardHeader, CardBlock} from "reactstrap";
import React, {Component} from 'react';
import {Bar, Doughnut, Line, Pie, Polar, Radar} from 'react-chartjs-2';
import {CardColumns, Card, CardHeader, CardBody} from 'reactstrap';
const line = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
@ -153,7 +153,7 @@ class Charts extends Component {
</a>
</div>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<div className="chart-wrapper">
<Line data={line}
options={{
@ -161,7 +161,7 @@ class Charts extends Component {
}}
/>
</div>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
@ -172,7 +172,7 @@ class Charts extends Component {
</a>
</div>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<div className="chart-wrapper">
<Bar data={bar}
options={{
@ -180,7 +180,7 @@ class Charts extends Component {
}}
/>
</div>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
@ -191,11 +191,11 @@ class Charts extends Component {
</a>
</div>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<div className="chart-wrapper">
<Doughnut data={doughnut}/>
</div>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
@ -206,11 +206,11 @@ class Charts extends Component {
</a>
</div>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<div className="chart-wrapper">
<Radar data={radar}/>
</div>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
@ -221,11 +221,11 @@ class Charts extends Component {
</a>
</div>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<div className="chart-wrapper">
<Pie data={pie}/>
</div>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
@ -236,11 +236,11 @@ class Charts extends Component {
</a>
</div>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<div className="chart-wrapper">
<Polar data={polar}/>
</div>
</CardBlock>
</CardBody>
</Card>
</CardColumns>
</div>

2
React_Full_Project/src/views/Charts/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Charts",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Charts.js"
}

60
React_Full_Project/src/views/Components/Buttons/Buttons.js
View File

@ -1,5 +1,5 @@
import React, {Component} from "react";
import {Row, Col, Card, CardHeader, CardBlock, Button} from "reactstrap";
import React, {Component} from 'react';
import {Row, Col, Card, CardHeader, CardBody, Button} from 'reactstrap';
class Buttons extends Component {
render() {
@ -11,34 +11,34 @@ class Buttons extends Component {
<CardHeader>
<strong>Options</strong>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Button color="primary">Primary</Button>{' '}
<Button color="secondary">Secondary</Button>{' '}
<Button color="success">Success</Button>{' '}
<Button color="warning">Warning</Button>{' '}
<Button color="danger">Danger</Button>{' '}
<Button color="link">Link</Button>{' '}
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
<strong>With Icons</strong>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Button color="primary"><i className="fa fa-star"></i>{'\u00A0'} Primary</Button>
<Button color="secondary"><i className="fa fa-lightbulb-o"></i>{'\u00A0 Secondary'}</Button>
<Button color="success"><i className="fa fa-magic"></i>&nbsp; Success</Button>
<Button color="warning"><i className="fa fa-map-marker"></i>&nbsp; Warning</Button>
<Button color="danger"><i className="fa fa-rss"></i>&nbsp; Danger</Button>
<Button color="link"><i className="fa fa-link"></i>&nbsp; Link</Button>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
<strong>Size Large</strong>
<small>Add this class <code>.btn-lg</code></small>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Button color="primary" size="lg">Primary</Button>
<Button color="secondary" size="lg">Secondary</Button>
<Button color="success" size="lg">Success</Button>
@ -46,14 +46,14 @@ class Buttons extends Component {
<Button color="warning" size="lg">Warning</Button>
<Button color="danger" size="lg">Danger</Button>
<Button color="link" size="lg">Link</Button>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
<strong>Size Small</strong>
<small>Add this class <code>.btn-sm</code></small>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Button color="primary" size="sm">Primary</Button>
<Button color="secondary" size="sm">Secondary</Button>
<Button color="success" size="sm">Success</Button>
@ -61,14 +61,14 @@ class Buttons extends Component {
<Button color="warning" size="sm">Warning</Button>
<Button color="danger" size="sm">Danger</Button>
<Button color="link" size="sm">Link</Button>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
<strong>Disabled state</strong>
<small>Add this <code>disabled="disabled"</code></small>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Button color="primary" disabled>Primary</Button>
<Button color="secondary" disabled>Secondary</Button>
<Button color="success" disabled>Success</Button>
@ -76,14 +76,14 @@ class Buttons extends Component {
<Button color="warning" disabled>Warning</Button>
<Button color="danger" disabled>Danger</Button>
<Button color="link" disabled>Link</Button>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
<strong>Active state</strong>
<small>Add this class <code>.active</code></small>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Button color="primary" active>Primary</Button>
<Button color="secondary" active>Secondary</Button>
<Button color="success" active>Success</Button>
@ -91,14 +91,14 @@ class Buttons extends Component {
<Button color="warning" active>Warning</Button>
<Button color="danger" active>Danger</Button>
<Button color="link" active>Link</Button>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
<strong>Block Level Buttons</strong>
<small>Add this class <code>.btn-block</code></small>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Button color="secondary" size="lg" block>Block level button</Button>
<Button color="primary" size="lg" block>Block level button</Button>
<Button color="success" size="lg" block>Block level button</Button>
@ -106,7 +106,7 @@ class Buttons extends Component {
<Button color="warning" size="lg" block>Block level button</Button>
<Button color="danger" size="lg" block>Block level button</Button>
<Button color="link" size="lg" block>Block level button</Button>
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" md="6">
@ -114,95 +114,95 @@ class Buttons extends Component {
<CardHeader>
<strong>Options</strong>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Button outline color="primary">Primary</Button>
<Button outline color="secondary">Secondary</Button>
<Button outline color="success">Success</Button>
<Button outline color="warning">Warning</Button>
<Button outline color="danger">Danger</Button>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
<strong>With Icons</strong>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Button outline color="primary"><i className="fa fa-star"></i>&nbsp; Primary</Button>
<Button outline color="secondary"><i className="fa fa-lightbulb-o"></i>&nbsp; Secondary</Button>
<Button outline color="success"><i className="fa fa-magic"></i>&nbsp; Success</Button>
<Button outline color="warning"><i className="fa fa-map-marker"></i>&nbsp; Warning</Button>
<Button outline color="danger"><i className="fa fa-rss"></i>&nbsp; Danger</Button>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
<strong>Size Large</strong>
<small>Add this class <code>.btn-lg</code></small>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Button outline color="primary" size="lg">Primary</Button>
<Button outline color="secondary" size="lg">Secondary</Button>
<Button outline color="success" size="lg">Success</Button>
<Button outline color="info" size="lg">Info</Button>
<Button outline color="warning" size="lg">Warning</Button>
<Button outline color="danger" size="lg">Danger</Button>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
<strong>Size Small</strong>
<small>Add this class <code>.btn-sm</code></small>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Button outline color="primary" size="sm">Primary</Button>
<Button outline color="secondary" size="sm">Secondary</Button>
<Button outline color="success" size="sm">Success</Button>
<Button outline color="info" size="sm">Info</Button>
<Button outline color="warning" size="sm">Warning</Button>
<Button outline color="danger" size="sm">Danger</Button>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
<strong>Disabled state</strong>
<small>Add this <code>disabled="disabled"</code></small>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Button outline color="primary" disabled>Primary</Button>
<Button outline color="secondary" disabled>Secondary</Button>
<Button color="success" disabled>Success</Button>
<Button outline color="info" disabled>Info</Button>
<Button outline color="warning" disabled>Warning</Button>
<Button outline color="danger" disabled>Danger</Button>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
<strong>Active state</strong>
<small>Add this class <code>.active</code></small>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Button outline color="primary" active>Primary</Button>
<Button outline color="secondary" active>Secondary</Button>
<Button outline color="success" active>Success</Button>
<Button outline color="info" active>Info</Button>
<Button outline color="warning" active>Warning</Button>
<Button outline color="danger" active>Danger</Button>
</CardBlock>
</CardBody>
</Card>
<Card>
<CardHeader>
<strong>Block Level Buttons</strong>
<small>Add this class <code>.btn-block</code></small>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Button outline color="secondary" size="lg" block>Block level button</Button>
<Button outline color="primary" size="lg" block>Block level button</Button>
<Button outline color="success" size="lg" block>Block level button</Button>
<Button outline color="info" size="lg" block>Block level button</Button>
<Button outline color="warning" size="lg" block>Block level button</Button>
<Button outline color="danger" size="lg" block>Block level button</Button>
</CardBlock>
</CardBody>
</Card>
</Col>
</Row>

2
React_Full_Project/src/views/Components/Buttons/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Buttons",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Buttons.js"
}

120
React_Full_Project/src/views/Components/Cards/Cards.js
View File

@ -1,5 +1,5 @@
import React, {Component} from "react";
import {Badge, Row, Col, Card, CardHeader, CardFooter, CardBlock, Label, Input} from "reactstrap";
import React, {Component} from 'react';
import {Badge, Row, Col, Card, CardHeader, CardFooter, CardBody, Label, Input} from 'reactstrap';
class Cards extends Component {
render() {
@ -11,20 +11,20 @@ class Cards extends Component {
<CardHeader>
Card title
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
<CardFooter>Card footer</CardFooter>
</Card>
</Col>
@ -33,11 +33,11 @@ class Cards extends Component {
<CardHeader>
<i className="fa fa-check float-right"></i>Card with icon
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -50,11 +50,11 @@ class Cards extends Component {
<span className="switch-handle"></span>
</Label>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -63,11 +63,11 @@ class Cards extends Component {
Card with label
<Badge color="success" className="float-right">Success</Badge>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -76,11 +76,11 @@ class Cards extends Component {
Card with label
<Badge pill color="danger" className="float-right">42</Badge>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
</Row>
@ -90,11 +90,11 @@ class Cards extends Component {
<CardHeader>
Card outline primary
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -102,11 +102,11 @@ class Cards extends Component {
<CardHeader>
Card outline secondary
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -114,11 +114,11 @@ class Cards extends Component {
<CardHeader>
Card outline success
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -126,11 +126,11 @@ class Cards extends Component {
<CardHeader>
Card outline info
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -138,11 +138,11 @@ class Cards extends Component {
<CardHeader>
Card outline warning
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -150,11 +150,11 @@ class Cards extends Component {
<CardHeader>
Card outline danger
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
</Row>
@ -165,11 +165,11 @@ class Cards extends Component {
<CardHeader>
Card with accent
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -177,11 +177,11 @@ class Cards extends Component {
<CardHeader>
Card with accent
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -189,11 +189,11 @@ class Cards extends Component {
<CardHeader>
Card with accent
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -201,11 +201,11 @@ class Cards extends Component {
<CardHeader>
Card with accent
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -213,11 +213,11 @@ class Cards extends Component {
<CardHeader>
Card with accent
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -225,73 +225,73 @@ class Cards extends Component {
<CardHeader>
Card with accent
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-primary text-center">
<CardBlock className="card-body">
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
</blockquote>
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-success text-center">
<CardBlock className="card-body">
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
</blockquote>
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-info text-center">
<CardBlock className="card-body">
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
</blockquote>
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-warning text-center">
<CardBlock className="card-body">
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
</blockquote>
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-danger text-center">
<CardBlock className="card-body">
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
</blockquote>
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
<Card className="text-white bg-primary text-center">
<CardBlock className="card-body">
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
</blockquote>
</CardBlock>
</CardBody>
</Card>
</Col>
</Row>
@ -301,11 +301,11 @@ class Cards extends Component {
<CardHeader>
Card title
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -313,11 +313,11 @@ class Cards extends Component {
<CardHeader>
Card title
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -325,11 +325,11 @@ class Cards extends Component {
<CardHeader>
Card title
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -337,11 +337,11 @@ class Cards extends Component {
<CardHeader>
Card title
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6" md="4">
@ -349,11 +349,11 @@ class Cards extends Component {
<CardHeader>
Card title
</CardHeader>
<CardBlock className="card-body">
<CardBody>
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.
</CardBlock>
</CardBody>
</Card>
</Col>
</Row>

2
React_Full_Project/src/views/Components/Cards/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Cards",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Cards.js"
}

125
React_Full_Project/src/views/Components/Forms/Forms.js
View File

@ -1,4 +1,4 @@
import React, {Component} from "react";
import React, {Component} from 'react';
import {
Row,
Col,
@ -10,7 +10,7 @@ import {
Card,
CardHeader,
CardFooter,
CardBlock,
CardBody,
Form,
FormGroup,
FormText,
@ -19,7 +19,7 @@ import {
InputGroup,
InputGroupAddon,
InputGroupButton
} from "reactstrap";
} from 'reactstrap';
class Forms extends Component {
constructor(props) {
@ -38,7 +38,7 @@ class Forms extends Component {
<strong>Credit Card</strong>
<small> Form</small>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row>
<Col xs="12">
<FormGroup>
@ -99,7 +99,7 @@ class Forms extends Component {
</FormGroup>
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6">
@ -108,7 +108,7 @@ class Forms extends Component {
<strong>Company</strong>
<small> Form</small>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<FormGroup>
<Label htmlFor="company">Company</Label>
<Input type="text" id="company" placeholder="Enter your company name"/>
@ -139,7 +139,7 @@ class Forms extends Component {
<Label htmlFor="country">Country</Label>
<Input type="text" id="country" placeholder="Country name"/>
</FormGroup>
</CardBlock>
</CardBody>
</Card>
</Col>
</Row>
@ -149,7 +149,7 @@ class Forms extends Component {
<CardHeader>
<strong>Basic Form</strong> Elements
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Form action="" method="post" encType="multipart/form-data" className="form-horizontal">
<FormGroup row>
<Col md="3">
@ -371,8 +371,19 @@ class Forms extends Component {
<Input type="file" id="file-multiple-input" name="file-multiple-input" multiple/>
</Col>
</FormGroup>
<FormGroup row hidden>
<Col md="3">
<Label className="custom-file" htmlFor="file-input">Custom file input</Label>
</Col>
<Col xs="12" md="9">
<Label className="custom-file">
<Input className="custom-file" type="file" id="file-input" name="file-input"/>
<span className="custom-file-control"></span>
</Label>
</Col>
</FormGroup>
</Form>
</CardBlock>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@ -382,7 +393,7 @@ class Forms extends Component {
<CardHeader>
<strong>Inline</strong> Form
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Form action="" method="post" inline>
<FormGroup>
<Label htmlFor="exampleInputName2" className="pr-1">Name</Label>
@ -393,7 +404,7 @@ class Forms extends Component {
<Input type="email" id="exampleInputEmail2" placeholder="jane.doe@example.com" required/>
</FormGroup>
</Form>
</CardBlock>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@ -405,7 +416,7 @@ class Forms extends Component {
<CardHeader>
<strong>Horizontal</strong> Form
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="3">
@ -426,7 +437,7 @@ class Forms extends Component {
</Col>
</FormGroup>
</Form>
</CardBlock>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@ -436,7 +447,7 @@ class Forms extends Component {
<CardHeader>
<strong>Normal</strong> Form
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Form action="" method="post">
<FormGroup>
<Label htmlFor="nf-email">Email</Label>
@ -449,7 +460,7 @@ class Forms extends Component {
<span className="help-block">Please enter your password</span>
</FormGroup>
</Form>
</CardBlock>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@ -459,7 +470,7 @@ class Forms extends Component {
<CardHeader>
Input <strong>Grid</strong>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col sm="3">
@ -512,7 +523,7 @@ class Forms extends Component {
</Col>
</FormGroup>
</Form>
</CardBlock>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-user"></i> Login</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@ -522,7 +533,7 @@ class Forms extends Component {
<CardHeader>
Input <strong>Sizes</strong>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col sm="5">
@ -551,7 +562,7 @@ class Forms extends Component {
</Col>
</FormGroup>
</Form>
</CardBlock>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@ -563,39 +574,37 @@ class Forms extends Component {
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Validation states</strong> Form
<strong>Validation feedback</strong> Form
</CardHeader>
<CardBlock className="card-body">
<FormGroup color="success">
<CardBody>
<FormGroup>
<Label htmlFor="inputIsValid">Input is valid</Label>
<Input state="success" type="text" className="is-valid" id="inputIsValid"/>
<Input type="text" className="is-valid" id="inputIsValid"/>
</FormGroup>
<FormGroup className="has-warning">
<FormGroup>
<Label htmlFor="inputIsInvalid">Input is invalid</Label>
<Input type="text" className="is-invalid" id="inputIsInvalid"/>
</FormGroup>
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Validation states</strong> with optional icons <em>(deprecated)</em>
<strong>Validation feedback</strong> Form
</CardHeader>
<CardBlock className="card-body">
<FormGroup className="has-success">
<Label htmlFor="inputSuccess2i">Input with success</Label>
<Input type="text" className="form-control-success" id="inputSuccess2i"/>
</FormGroup>
<FormGroup className="has-warning">
<Label htmlFor="inputWarning2i">Input with warning</Label>
<Input type="text" className="form-control-warning" id="inputWarning2i"/>
</FormGroup>
<FormGroup className="has-danger has-feedback">
<Label htmlFor="inputError2i">Input with error</Label>
<Input type="text" className="form-control-danger" id="inputError2i"/>
</FormGroup>
</CardBlock>
<CardBody>
<Form className="was-validated">
<FormGroup>
<Label htmlFor="inputSuccess2i">Non-required input</Label>
<Input type="text" className="form-control-success" id="inputSuccess2i"/>
</FormGroup>
<FormGroup>
<Label htmlFor="inputWarning2i">Required input</Label>
<Input type="text" className="form-control-warning" id="inputWarning2i" required/>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
</Row>
@ -605,7 +614,7 @@ class Forms extends Component {
<CardHeader>
<strong>Icon/Text</strong> Groups
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="12">
@ -633,7 +642,7 @@ class Forms extends Component {
</Col>
</FormGroup>
</Form>
</CardBlock>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@ -645,7 +654,7 @@ class Forms extends Component {
<CardHeader>
<strong>Buttons</strong> Groups
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="12">
@ -681,7 +690,7 @@ class Forms extends Component {
</Col>
</FormGroup>
</Form>
</CardBlock>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@ -693,7 +702,7 @@ class Forms extends Component {
<CardHeader>
<strong>Dropdowns</strong> Groups
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Form className="form-horizontal">
<FormGroup row>
<Col md="12">
@ -776,7 +785,7 @@ class Forms extends Component {
</Col>
</FormGroup>
</Form>
</CardBlock>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
@ -791,7 +800,7 @@ class Forms extends Component {
Use the grid for big devices!
<small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="8">
@ -834,7 +843,7 @@ class Forms extends Component {
</Col>
</FormGroup>
</Form>
</CardBlock>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary">Action</Button>
<Button size="sm" color="danger">Action</Button>
@ -850,7 +859,7 @@ class Forms extends Component {
Input Grid for small devices!
<small><code>.col-*</code></small>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col xs="4">
@ -893,7 +902,7 @@ class Forms extends Component {
</Col>
</FormGroup>
</Form>
</CardBlock>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary">Action</Button>
<Button size="sm" color="danger">Action</Button>
@ -910,7 +919,7 @@ class Forms extends Component {
<CardHeader>
Example Form
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
@ -937,7 +946,7 @@ class Forms extends Component {
<Button type="submit" size="sm" color="primary">Submit</Button>
</FormGroup>
</Form>
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="4">
@ -945,7 +954,7 @@ class Forms extends Component {
<CardHeader>
Example Form
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
@ -969,7 +978,7 @@ class Forms extends Component {
<Button type="submit" size="sm" color="secondary">Submit</Button>
</FormGroup>
</Form>
</CardBlock>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="4">
@ -977,7 +986,7 @@ class Forms extends Component {
<CardHeader>
Example Form
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
@ -1001,7 +1010,7 @@ class Forms extends Component {
<Button type="submit" size="sm" color="success">Submit</Button>
</FormGroup>
</Form>
</CardBlock>
</CardBody>
</Card>
</Col>
</Row>
@ -1016,7 +1025,7 @@ class Forms extends Component {
<a href="#" className="btn-close"><i className="icon-close"></i></a>
</div>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Form className="form-horizontal">
<FormGroup>
<Label htmlFor="prependedInput">Prepended text</Label>
@ -1072,7 +1081,7 @@ class Forms extends Component {
<Button color="secondary">Cancel</Button>
</div>
</Form>
</CardBlock>
</CardBody>
</Card>
</Col>
</Row>

2
React_Full_Project/src/views/Components/Forms/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Forms",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Forms.js"
}

8
React_Full_Project/src/views/Components/Modals/Modals.js
View File

@ -1,5 +1,5 @@
import React, {Component} from "react";
import {Row, Col, Button, Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBlock} from "reactstrap";
import React, {Component} from 'react';
import {Row, Col, Button, Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBody} from 'reactstrap';
class Modals extends Component {
@ -84,7 +84,7 @@ class Modals extends Component {
<CardHeader>
<i className="fa fa-align-justify"></i> Bootstrap Modals
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Button onClick={this.toggle}>Launch demo modal</Button>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
@ -222,7 +222,7 @@ class Modals extends Component {
</ModalFooter>
</Modal>
</CardBlock>
</CardBody>
</Card>
</Col>
</Row>

2
React_Full_Project/src/views/Components/Modals/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Modals",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Modals.js"
}

16
React_Full_Project/src/views/Components/SocialButtons/SocialButtons.js
View File

@ -1,5 +1,5 @@
import React, {Component} from "react";
import {Row, Col, Card, CardHeader, CardBlock, Button} from "reactstrap";
import React, {Component} from 'react';
import {Row, Col, Card, CardHeader, CardBody, Button} from 'reactstrap';
class SocialButtons extends Component {
render() {
@ -14,7 +14,7 @@ class SocialButtons extends Component {
<code style={{textTransform: 'lowercase'}}>&lt;button className="btn-facebook"&gt;&lt;span&gt;
Facebook&lt;/span&gt;&lt;/Button&gt;</code>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<h6>Size Small
<small>Add this class <code>.btn-sm</code></small>
</h6>
@ -103,7 +103,7 @@ class SocialButtons extends Component {
<Button size="lg" className="btn-foursquare"><span>Forsquare</span></Button>
<Button size="lg" className="btn-vimeo"><span>Vimeo</span></Button>
</p>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -115,7 +115,7 @@ class SocialButtons extends Component {
<code style={{textTransform: 'lowercase'}}>&lt;button className="btn-facebook icon"&gt;&lt;span&gt;
Facebook&lt;/span&gt;&lt;/Button&gt;</code>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<h6>Size Small
<small>Add this class <code>.btn-sm</code></small>
</h6>
@ -204,7 +204,7 @@ class SocialButtons extends Component {
<Button size="lg" className="btn-foursquare icon"><span>Forsquare</span></Button>
<Button size="lg" className="btn-vimeo icon"><span>Vimeo</span></Button>
</p>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -216,7 +216,7 @@ class SocialButtons extends Component {
<code style={{textTransform: 'lowercase'}}>&lt;button className="btn-facebook text"&gt;&lt;span&gt;
Facebook&lt;/span&gt;&lt;/Button&gt;</code>
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<h6>Size Small
<small>Add this class <code>.btn-sm</code></small>
</h6>
@ -305,7 +305,7 @@ class SocialButtons extends Component {
<Button size="lg" className="btn-foursquare text"><span>Forsquare</span></Button>
<Button size="lg" className="btn-vimeo text"><span>Vimeo</span></Button>
</p>
</CardBlock>
</CardBody>
</Card>
</Col>
</Row>

2
React_Full_Project/src/views/Components/SocialButtons/package.json
View File

@ -1,6 +1,6 @@
{
"name": "SocialButtons",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./SocialButtons.js"
}

84
React_Full_Project/src/views/Components/Switches/Switches.js
View File

@ -1,5 +1,5 @@
import React, {Component} from "react";
import {Row, Col, Card, CardHeader, CardBlock, Label, Input, Table} from "reactstrap";
import React, {Component} from 'react';
import {Row, Col, Card, CardHeader, CardBody, Label, Input, Table} from 'reactstrap';
class Switches extends Component {
render() {
@ -12,7 +12,7 @@ class Switches extends Component {
<CardHeader>
3d Switch
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-3d switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label"></span>
@ -48,7 +48,7 @@ class Switches extends Component {
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -57,7 +57,7 @@ class Switches extends Component {
<CardHeader>
Switch default
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-default switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label"></span>
@ -93,7 +93,7 @@ class Switches extends Component {
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -102,7 +102,7 @@ class Switches extends Component {
<CardHeader>
Switch default - pills
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-default switch-pill switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label"></span>
@ -138,7 +138,7 @@ class Switches extends Component {
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -147,7 +147,7 @@ class Switches extends Component {
<CardHeader>
Switch outline
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-default switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label"></span>
@ -183,7 +183,7 @@ class Switches extends Component {
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -192,7 +192,7 @@ class Switches extends Component {
<CardHeader>
Switch outline - pills
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-default switch-pill switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label"></span>
@ -228,7 +228,7 @@ class Switches extends Component {
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -237,7 +237,7 @@ class Switches extends Component {
<CardHeader>
Switch outline alternative
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-default switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label"></span>
@ -273,7 +273,7 @@ class Switches extends Component {
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -282,7 +282,7 @@ class Switches extends Component {
<CardHeader>
Switch outline alternative - pills
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-default switch-pill switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label"></span>
@ -318,7 +318,7 @@ class Switches extends Component {
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -327,7 +327,7 @@ class Switches extends Component {
<CardHeader>
Switch with text
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-text switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label" data-on="On" data-off="Off"></span>
@ -363,7 +363,7 @@ class Switches extends Component {
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -372,7 +372,7 @@ class Switches extends Component {
<CardHeader>
Switch with text - pills
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-text switch-pill switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label" data-on="On" data-off="Off"></span>
@ -408,7 +408,7 @@ class Switches extends Component {
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -417,7 +417,7 @@ class Switches extends Component {
<CardHeader>
Switch with text outline
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-text switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
@ -454,7 +454,7 @@ class Switches extends Component {
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -463,7 +463,7 @@ class Switches extends Component {
<CardHeader>
Switch with text outline - pills
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-text switch-pill switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
@ -500,7 +500,7 @@ class Switches extends Component {
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -509,7 +509,7 @@ class Switches extends Component {
<CardHeader>
Switch with text outline alternative
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-text switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label" data-on="On" data-off="Off"></span>
@ -545,7 +545,7 @@ class Switches extends Component {
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -554,7 +554,7 @@ class Switches extends Component {
<CardHeader>
Switch with text outline alternative - pills
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-text switch-pill switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label" data-on="On" data-off="Off"></span>
@ -590,7 +590,7 @@ class Switches extends Component {
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -599,7 +599,7 @@ class Switches extends Component {
<CardHeader>
Switch with icon
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-icon switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label" data-on={'\uf164'} data-off={'\uf165'}></span>
@ -635,7 +635,7 @@ class Switches extends Component {
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -644,7 +644,7 @@ class Switches extends Component {
<CardHeader>
Switch with icon - pills
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-icon switch-pill switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
@ -680,7 +680,7 @@ class Switches extends Component {
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -689,7 +689,7 @@ class Switches extends Component {
<CardHeader>
Switch with icon outline
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-icon switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
@ -725,7 +725,7 @@ class Switches extends Component {
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -734,7 +734,7 @@ class Switches extends Component {
<CardHeader>
Switch with icon outline - pills
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-icon switch-pill switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
@ -770,7 +770,7 @@ class Switches extends Component {
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -779,7 +779,7 @@ class Switches extends Component {
<CardHeader>
Switch with icon outline alternative
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-icon switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
@ -815,7 +815,7 @@ class Switches extends Component {
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -824,7 +824,7 @@ class Switches extends Component {
<CardHeader>
Switch with icon outline alternative - pills
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Label className="switch switch-icon switch-pill switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
@ -860,7 +860,7 @@ class Switches extends Component {
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -869,7 +869,7 @@ class Switches extends Component {
<CardHeader>
Sizes
</CardHeader>
<CardBlock className="card-body p-0">
<CardBody className="p-0">
<Table hover striped className="table-align-middle mb-0">
<thead>
<tr>
@ -941,7 +941,7 @@ class Switches extends Component {
</tr>
</tbody>
</Table>
</CardBlock>
</CardBody>
</Card>
</Col>

2
React_Full_Project/src/views/Components/Switches/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Switches",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Switches.js"
}

28
React_Full_Project/src/views/Components/Tables/Tables.js
View File

@ -1,16 +1,16 @@
import React, {Component} from "react";
import React, {Component} from 'react';
import {
Badge,
Row,
Col,
Card,
CardHeader,
CardBlock,
CardBody,
Table,
Pagination,
PaginationItem,
PaginationLink
} from "reactstrap";
} from 'reactstrap';
class Tables extends Component {
@ -23,7 +23,7 @@ class Tables extends Component {
<CardHeader>
<i className="fa fa-align-justify"></i> Simple Table
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Table responsive>
<thead>
<tr>
@ -96,7 +96,7 @@ class Tables extends Component {
<PaginationLink next href="#"></PaginationLink>
</PaginationItem>
</Pagination>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -105,7 +105,7 @@ class Tables extends Component {
<CardHeader>
<i className="fa fa-align-justify"></i> Striped Table
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Table responsive striped>
<thead>
<tr>
@ -168,7 +168,7 @@ class Tables extends Component {
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
</Pagination>
</CardBlock>
</CardBody>
</Card>
</Col>
</Row>
@ -180,7 +180,7 @@ class Tables extends Component {
<CardHeader>
<i className="fa fa-align-justify"></i> Condensed Table
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Table responsive size="sm">
<thead>
<tr>
@ -243,7 +243,7 @@ class Tables extends Component {
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
</Pagination>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -252,7 +252,7 @@ class Tables extends Component {
<CardHeader>
<i className="fa fa-align-justify"></i> Bordered Table
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Table responsive bordered>
<thead>
<tr>
@ -310,12 +310,12 @@ class Tables extends Component {
<PaginationItem active>
<PaginationLink href="#">1</PaginationLink>
</PaginationItem>
<lPaginationItemi className="page-item"><PaginationLink href="#">2</PaginationLink></lPaginationItemi>
<PaginationItem className="page-item"><PaginationLink href="#">2</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
</Pagination>
</CardBlock>
</CardBody>
</Card>
</Col>
@ -327,7 +327,7 @@ class Tables extends Component {
<CardHeader>
<i className="fa fa-align-justify"></i> Combined All Table
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Table hover bordered striped responsive size="sm">
<thead>
<tr>
@ -392,7 +392,7 @@ class Tables extends Component {
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
</Pagination>
</nav>
</CardBlock>
</CardBody>
</Card>
</Col>
</Row>

2
React_Full_Project/src/views/Components/Tables/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Tables",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Tables.js"
}

6
React_Full_Project/src/views/Components/Tabs/Tabs.js
View File

@ -1,6 +1,6 @@
import React, {Component} from "react";
import {Badge, Row, Col, TabContent, TabPane, Nav, NavItem, NavLink} from "reactstrap";
import classnames from "classnames";
import React, {Component} from 'react';
import {Badge, Row, Col, TabContent, TabPane, Nav, NavItem, NavLink} from 'reactstrap';
import classnames from 'classnames';
class Tabs extends Component {

2
React_Full_Project/src/views/Components/Tabs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Tabs",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Tabs.js"
}

44
React_Full_Project/src/views/Dashboard/Dashboard.js
View File

@ -1,5 +1,5 @@
import React, {Component} from "react";
import {Bar, Line} from "react-chartjs-2";
import React, { Component } from 'react';
import {Bar, Line} from 'react-chartjs-2';
import {
Badge,
Row,
@ -11,7 +11,7 @@ import {
DropdownItem,
Card,
CardHeader,
CardBlock,
CardBody,
CardFooter,
CardTitle,
Button,
@ -21,7 +21,7 @@ import {
Label,
Input,
Table
} from "reactstrap";
} from 'reactstrap';
const brandPrimary = '#20a8d8';
const brandSuccess = '#4dbd74';
@ -435,14 +435,14 @@ class Dashboard extends Component {
<Row>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-primary">
<CardBlock className="card-body pb-0">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<ButtonDropdown id='card1' isOpen={this.state.card1}
toggle={() => { this.setState({ card1: !this.state.card1 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu className={this.state.card1 ? "show" : ""} right>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem disabled>Disabled action</DropdownItem>
@ -452,7 +452,7 @@ class Dashboard extends Component {
</ButtonGroup>
<h4 className="mb-0">9.823</h4>
<p>Members online</p>
</CardBlock>
</CardBody>
<div className="chart-wrapper px-3" style={{height:'70px'}}>
<Line data={cardChartData1} options={cardChartOpts1} height={70}/>
</div>
@ -461,14 +461,14 @@ class Dashboard extends Component {
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-info">
<CardBlock className="card-body pb-0">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<Dropdown id='card2' isOpen={this.state.card2}
toggle={() => { this.setState({ card2: !this.state.card2 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
<DropdownToggle className="p-0" color="transparent">
<i className="icon-location-pin"></i>
</DropdownToggle>
<DropdownMenu className={this.state.card2 ? "show" : ""} right>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
@ -477,7 +477,7 @@ class Dashboard extends Component {
</ButtonGroup>
<h4 className="mb-0">9.823</h4>
<p>Members online</p>
</CardBlock>
</CardBody>
<div className="chart-wrapper px-3" style={{height:'70px'}}>
<Line data={cardChartData2} options={cardChartOpts2} height={70}/>
</div>
@ -486,14 +486,14 @@ class Dashboard extends Component {
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-warning">
<CardBlock className="card-body pb-0">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<Dropdown id='card3' isOpen={this.state.card3}
toggle={() => { this.setState({ card3: !this.state.card3 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu className={this.state.card3 ? "show" : ""} right>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
@ -502,7 +502,7 @@ class Dashboard extends Component {
</ButtonGroup>
<h4 className="mb-0">9.823</h4>
<p>Members online</p>
</CardBlock>
</CardBody>
<div className="chart-wrapper px-0" style={{height:'70px'}}>
<Line data={cardChartData3} options={cardChartOpts3} height={70}/>
</div>
@ -511,14 +511,14 @@ class Dashboard extends Component {
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-danger">
<CardBlock className="card-body pb-0">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<ButtonDropdown id='card4' isOpen={this.state.card4}
toggle={() => { this.setState({ card4: !this.state.card4 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu className={this.state.card4 ? "show" : ""} right>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
@ -527,7 +527,7 @@ class Dashboard extends Component {
</ButtonGroup>
<h4 className="mb-0">9.823</h4>
<p>Members online</p>
</CardBlock>
</CardBody>
<div className="chart-wrapper px-3" style={{height:'70px'}}>
<Bar data={cardChartData4} options={cardChartOpts4} height={70}/>
</div>
@ -537,7 +537,7 @@ class Dashboard extends Component {
<Row>
<Col>
<Card>
<CardBlock className="card-body">
<CardBody>
<Row>
<Col sm="5">
<CardTitle className="mb-0">Traffic</CardTitle>
@ -563,7 +563,7 @@ class Dashboard extends Component {
<div className="chart-wrapper" style={{height: 300 + 'px', marginTop: 40 + 'px'}}>
<Line data={mainChart} options={mainChartOpts} height={300}/>
</div>
</CardBlock>
</CardBody>
<CardFooter>
<ul>
<li>
@ -682,7 +682,7 @@ class Dashboard extends Component {
<CardHeader>
Traffic {'&'} Sales
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row>
<Col xs="12" md="6" xl="4">
<Row>
@ -1216,7 +1216,7 @@ class Dashboard extends Component {
</tr>
</tbody>
</Table>
</CardBlock>
</CardBody>
</Card>
</Col>
</Row>

2
React_Full_Project/src/views/Dashboard/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Dashboard",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Dashboard.js"
}

70
React_Full_Project/src/views/Icons/FontAwesome/FontAwesome.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Alert, Row, Col, Card, CardHeader, CardBlock} from 'reactstrap';
import {Alert, Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
class FontAwesome extends Component {
@ -8,7 +8,7 @@ class FontAwesome extends Component {
<div className="animated fadeIn">
<Card id="new47">
<CardHeader>55 New Icons in 4.7</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col className="fa-hover" xs="6" sm="4" md="3" lg="2">
<i className="fa fa-address-book fa-lg mt-4"></i><br/>address-book
@ -176,11 +176,11 @@ class FontAwesome extends Component {
<i className="fa fa-wpexplorer fa-lg mt-4"></i><br/>wpexplorer
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
<Card id="new">
<CardHeader>20 New Icons in 4.5</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col xs="6" sm="4" md="3" lg="2">
@ -265,12 +265,12 @@ class FontAwesome extends Component {
</Row>
</CardBlock>
</CardBody>
</Card>
<Card id="web-application">
<CardHeader>Web Application Icons</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col xs="6" sm="4" md="3" lg="2">
@ -1862,13 +1862,13 @@ class FontAwesome extends Component {
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
<Card id="hand">
<CardHeader>Hand Icons</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col xs="6" sm="4" md="3" lg="2">
@ -1942,13 +1942,13 @@ class FontAwesome extends Component {
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
<Card id="transportation">
<CardHeader>Transportation Icons</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col xs="6" sm="4" md="3" lg="2">
@ -2021,12 +2021,12 @@ class FontAwesome extends Component {
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
<Card id="gender">
<CardHeader>Gender Icons</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col xs="6" sm="4" md="3" lg="2">
@ -2086,12 +2086,12 @@ class FontAwesome extends Component {
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
<Card id="file-type">
<CardHeader>File Type Icons</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col xs="6" sm="4" md="3" lg="2">
@ -2171,12 +2171,12 @@ class FontAwesome extends Component {
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
<Card id="spinner">
<CardHeader>Spinner Icons</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Alert color="success">
<ul className="fa-ul">
<li>
@ -2208,12 +2208,12 @@ class FontAwesome extends Component {
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
<Card id="form-control">
<CardHeader>Form Control Icons</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col xs="6" sm="4" md="3" lg="2">
@ -2261,12 +2261,12 @@ class FontAwesome extends Component {
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
<Card id="payment">
<CardHeader>Payment Icons</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col xs="6" sm="4" md="3" lg="2">
@ -2318,12 +2318,12 @@ class FontAwesome extends Component {
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
<Card id="chart">
<CardHeader>Chart Icons</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col xs="6" sm="4" md="3" lg="2">
@ -2348,12 +2348,12 @@ class FontAwesome extends Component {
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
<Card id="currency">
<CardHeader>Currency Icons</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col xs="6" sm="4" md="3" lg="2">
@ -2462,12 +2462,12 @@ class FontAwesome extends Component {
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
<Card id="text-editor">
<CardHeader>Text Editor Icons</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col xs="6" sm="4" md="3" lg="2">
@ -2669,12 +2669,12 @@ class FontAwesome extends Component {
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
<Card id="directional">
<CardHeader>Directional Icons</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col xs="6" sm="4" md="3" lg="2">
@ -2893,12 +2893,12 @@ class FontAwesome extends Component {
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
<Card id="video-player">
<CardHeader>Video Player Icons</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col xs="6" sm="4" md="3" lg="2">
@ -2986,12 +2986,12 @@ class FontAwesome extends Component {
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
<Card id="brand">
<CardHeader>Brand Icons</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Alert color="warning">
<h4><i className="fa fa-warning"></i> Warning!</h4>
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
@ -3637,12 +3637,12 @@ class FontAwesome extends Component {
<li>Brand icons should only be used to represent the company or product to which they refer.</li>
</ul>
</Alert>
</CardBlock>
</CardBody>
</Card>
<Card id="medical">
<CardHeader>Medical Icons</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col xs="6" sm="4" md="3" lg="2">
@ -3690,7 +3690,7 @@ class FontAwesome extends Component {
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
</div>

2
React_Full_Project/src/views/Icons/FontAwesome/package.json
View File

@ -1,6 +1,6 @@
{
"name": "FontAwesome",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./FontAwesome.js"
}

10
React_Full_Project/src/views/Icons/SimpleLineIcons/SimpleLineIcons.js
View File

@ -1,15 +1,15 @@
import React, {Component} from "react";
import {Row, Col, Card, CardHeader, CardBlock} from "reactstrap";
import React, {Component} from 'react';
import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
class SimpleLineIcons extends Component {
render() {
return (
<div className="animated fadeIn">
<Card color="secondary" className="card-default">
<Card>
<CardHeader>
<i className="fa fa-picture-o"></i> Simple Line Icons
</CardHeader>
<CardBlock className="card-body">
<CardBody>
<Row className="text-center">
<Col xs="6" sm="4" md="3">
@ -745,7 +745,7 @@ class SimpleLineIcons extends Component {
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
</div>
)

2
React_Full_Project/src/views/Icons/SimpleLineIcons/package.json
View File

@ -1,6 +1,6 @@
{
"name": "SimpleLineIcons",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./SimpleLineIcons.js"
}

12
React_Full_Project/src/views/Pages/Login/Login.js
View File

@ -1,5 +1,5 @@
import React, {Component} from "react";
import {Container, Row, Col, CardGroup, Card, CardBlock, Button, Input, InputGroup, InputGroupAddon} from "reactstrap";
import React, {Component} from 'react';
import {Container, Row, Col, CardGroup, Card, CardBody, Button, Input, InputGroup, InputGroupAddon} from 'reactstrap';
class Login extends Component {
@ -11,7 +11,7 @@ class Login extends Component {
<Col md="8">
<CardGroup className="mb-0">
<Card className="p-4">
<CardBlock className="card-body">
<CardBody>
<h1>Login</h1>
<p className="text-muted">Sign In to your account</p>
<InputGroup className="mb-3">
@ -30,17 +30,17 @@ class Login extends Component {
<Button color="link" className="px-0">Forgot password?</Button>
</Col>
</Row>
</CardBlock>
</CardBody>
</Card>
<Card className="text-white bg-primary py-5 d-md-down-none" style={{ width: 44 + '%' }}>
<CardBlock className="card-body text-center">
<CardBody className="text-center">
<div>
<h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
<Button color="primary" className="mt-3" active>Register Now!</Button>
</div>
</CardBlock>
</CardBody>
</Card>
</CardGroup>
</Col>

2
React_Full_Project/src/views/Pages/Login/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Login",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Login.js"
}

4
React_Full_Project/src/views/Pages/Page404/Page404.js
View File

@ -1,5 +1,5 @@
import React, {Component} from "react";
import {Container, Row, Col, Button, Input, InputGroupAddon, InputGroup, InputGroupButton} from "reactstrap";
import React, {Component} from 'react';
import {Container, Row, Col, Button, Input, InputGroupAddon, InputGroup, InputGroupButton} from 'reactstrap';
class Page404 extends Component {
render() {

2
React_Full_Project/src/views/Pages/Page404/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Page404",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Page404.js"
}

4
React_Full_Project/src/views/Pages/Page500/Page500.js
View File

@ -1,5 +1,5 @@
import React, {Component} from "react";
import {Container, Row, Col, Button, Input, InputGroup, InputGroupAddon, InputGroupButton} from "reactstrap";
import React, {Component} from 'react';
import {Container, Row, Col, Button, Input, InputGroup, InputGroupAddon, InputGroupButton} from 'reactstrap';
class Page500 extends Component {
render() {

2
React_Full_Project/src/views/Pages/Page500/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Page500",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Page500.js"
}

8
React_Full_Project/src/views/Pages/Register/Register.js
View File

@ -1,5 +1,5 @@
import React, {Component} from "react";
import {Container, Row, Col, Card, CardBlock, CardFooter, Button, Input, InputGroup, InputGroupAddon} from "reactstrap";
import React, {Component} from 'react';
import {Container, Row, Col, Card, CardBody, CardFooter, Button, Input, InputGroup, InputGroupAddon} from 'reactstrap';
class Register extends Component {
render() {
@ -9,7 +9,7 @@ class Register extends Component {
<Row className="justify-content-center">
<Col md="6">
<Card className="mx-4">
<CardBlock className="card-body p-4">
<CardBody className="p-4">
<h1>Register</h1>
<p className="text-muted">Create your account</p>
<InputGroup className="mb-3">
@ -29,7 +29,7 @@ class Register extends Component {
<Input type="password" placeholder="Repeat password"/>
</InputGroup>
<Button color="success" block>Create Account</Button>
</CardBlock>
</CardBody>
<CardFooter className="p-4">
<Row>
<Col xs="12" sm="6">

2
React_Full_Project/src/views/Pages/Register/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Register",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Register.js"
}

8
React_Full_Project/src/views/Widgets/Widget01.js
View File

@ -1,6 +1,6 @@
import React, {Component} from "react";
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Card, CardBlock, Progress} from "reactstrap";
import {Card, CardBody, Progress} from 'reactstrap';
import classNames from 'classnames';
import {mapToCssModules} from 'reactstrap/lib/utils';
@ -45,13 +45,13 @@ class Widget01 extends Component {
return (
<Card className={ classes } {...attributes}>
<CardBlock className="card-body">
<CardBody>
<div className="h4 m-0">{ header }</div>
<div>{ mainText }</div>
<Progress className={ progress.style } color={ progress.color } value={ progress.value }/>
<small className="text-muted">{ smallText }</small>
<div>{children}</div>
</CardBlock>
</CardBody>
</Card>
)
}

10
React_Full_Project/src/views/Widgets/Widget02.js
View File

@ -1,6 +1,6 @@
import React, {Component} from "react";
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Card, CardBlock, CardFooter} from "reactstrap";
import {Card, CardBody, CardFooter} from 'reactstrap';
import classNames from 'classnames';
import {mapToCssModules} from 'reactstrap/lib/utils';
@ -34,7 +34,7 @@ class Widget02 extends Component {
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: "card-body clearfix", color: color, icon: icon, classes: ""};
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: ""};
@ -58,11 +58,11 @@ class Widget02 extends Component {
return (
<Card>
<CardBlock className={ card.classes } {...attributes}>
<CardBody className={ card.classes } {...attributes}>
{ blockIcon(card.icon) }
<div className={ lead.classes }>{ header }</div>
<div className="text-muted text-uppercase font-weight-bold font-xs">{ mainText }</div>
</CardBlock>
</CardBody>
{ cardFooter() }
</Card>
)

2
React_Full_Project/src/views/Widgets/Widget03.js
View File

@ -1,4 +1,4 @@
import React, {Component} from "react";
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import {mapToCssModules} from 'reactstrap/lib/utils';

8
React_Full_Project/src/views/Widgets/Widget04.js
View File

@ -1,6 +1,6 @@
import React, {Component} from "react";
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Card, CardBlock, Progress} from "reactstrap";
import {Card, CardBody, Progress} from 'reactstrap';
import classNames from 'classnames';
import {mapToCssModules} from 'reactstrap/lib/utils';
@ -44,14 +44,14 @@ class Widget04 extends Component {
return (
<Card className={ classes } {...attributes}>
<CardBlock className="card-body">
<CardBody>
<div className="h1 text-muted text-right mb-2">
<i className={ card.icon }></i>
</div>
<div className="h4 mb-0">{ header }</div>
<small className="text-muted text-uppercase font-weight-bold">{ children }</small>
<Progress className={ progress.style } color={ progress.color } value={ progress.value }/>
</CardBlock>
</CardBody>
</Card>
)
}

20
React_Full_Project/src/views/Widgets/Widgets.js
View File

@ -1,5 +1,5 @@
import React, {Component} from "react";
import {Row, Col, CardGroup} from "reactstrap";
import React, {Component} from 'react';
import {Row, Col, CardGroup} from 'reactstrap';
import Widget01 from './Widget01';
import Widget02 from './Widget02';
import Widget03 from './Widget03';
@ -68,28 +68,28 @@ class Widgets extends Component {
</Col>
</Row>
<Row>
<Col xs="12" sm="6" >
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-cogs" color="primary" variant="1"/>
</Col>
<Col xs="12" sm="6" >
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-laptop" color="info" variant="1"/>
</Col>
<Col xs="12" sm="6" >
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-moon-o" color="warning" variant="1"/>
</Col>
<Col xs="12" sm="6" >
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-bell" color="danger" variant="1"/>
</Col>
<Col xs="12" sm="6" >
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-cogs" color="primary" variant="2"/>
</Col>
<Col xs="12" sm="6" >
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-laptop" color="info" variant="2"/>
</Col>
<Col xs="12" sm="6" >
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-moon-o" color="warning" variant="2"/>
</Col>
<Col xs="12" sm="6" >
<Col xs="12" sm="6" lg="3">
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-bell" color="danger" variant="2"/>
</Col>
</Row>

2
React_Full_Project/src/views/Widgets/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Widgets",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Widgets.js"
}

1
React_Starter/.gitignore vendored
View File

@ -2,6 +2,7 @@
# dependencies
node_modules
package-lock.json
# testing
coverage

35
React_Starter/CHANGELOG.md
View File

@ -1,35 +0,0 @@
### Changelog [react](./REACT.md) version
#### 2017.08.26
- 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)

36
React_Starter/REACT.md
View File

@ -1,36 +0,0 @@
# React version
## Intro
It uses Sass (with .scss). The style is loaded at the component level.
Dependencies can be handled by **npm**.
## Directories
```
src (js|jsx source)
scss (scss source)
public (html template)
public/img (images)
```
## Usage
**npm i** - to install dependencies
## Sctipts
**npm start** for developing (it runs webpack-dev-server)
**npm run build** to run a dev build
**npm run clean** to clean build dir
**npm run dev** to run a dev build with watching filesystem for changes
## See also
[Changelog](./CHANGELOG.md)
[Readme](./README.md)

28
React_Starter/package.json
View File

@ -14,22 +14,22 @@
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"copy-webpack-plugin": "^4.0.1",
"css-hot-loader": "^1.3.1",
"copy-webpack-plugin": "^4.1.1",
"css-hot-loader": "^1.3.2",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.5",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.5.3",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.6",
"source-list-map": "^2.0.0",
"style-loader": "^0.18.2",
"uglify-js": "^3.1.1",
"url-loader": "^0.5.9",
"style-loader": "^0.19.0",
"uglify-js": "^3.1.3",
"url-loader": "^0.6.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.8.2"
"webpack-dev-server": "^2.9.1"
},
"dependencies": {
"bootstrap": "^4.0.0-beta",
@ -37,12 +37,12 @@
"font-awesome": "^4.7.0",
"history": "4.7.2",
"is-url-external": "^1.0.3",
"react": "^15.6.1",
"react-chartjs-2": "2.6.2",
"react-dom": "^15.6.1",
"react-router-dom": "4.2.2",
"react-transition-group": "^1.2.0",
"reactstrap": "^4.8.0",
"react": "^16.0.0",
"react-chartjs-2": "2.6.4",
"react-dom": "^16.0.0",
"react-router-dom": "^4.2.2",
"react-transition-group": "^2.2.1",
"reactstrap": "^5.0.0-alpha.3",
"simple-line-icons": "^2.4.1"
},
"scripts": {

9
React_Starter/scss/core/_dropdown-menu-right.scss
View File

@ -1,7 +1,8 @@
// Temp fix for reactstrap
.show {
> .dropdown-menu-right {
right: 0;
left: auto; // Reset the default from `.dropdown-menu`
.app-header {
.navbar-nav {
.dropdown-menu-right {
right: auto;
}
}
}

5
React_Starter/scss/core/_footer.scss
View File

@ -1,8 +1,9 @@
.app-footer {
min-height: $footer-height;
display: flex;
padding: 0 $spacer;
line-height: $footer-height;
color: $footer-color;
background: $footer-bg;
flex-wrap: wrap;
align-items: center;
@include borders($footer-borders);
}

9
React_Starter/scss/core/_layout.scss
View File

@ -11,8 +11,8 @@
app-dashboard,
app-root {
display: flex;
flex-direction: column;
min-height: 100vh;
flex-direction: column;
}
.app-header {
@ -26,12 +26,12 @@ app-root {
.app-body {
display: flex;
flex-direction: row;
flex-grow: 1;
overflow-x: hidden;
flex-grow: 1;
.main {
flex: 1;
min-width: 0;
flex: 1;
}
.sidebar {
@ -328,7 +328,8 @@ app-root {
margin-top: $navbar-height;
}
.sidebar {
.sidebar,
.sidebar-fixed .sidebar {
position: fixed;
z-index: $zindex-sticky - 1;
width: $mobile-sidebar-width;

19
React_Starter/scss/core/_navbar.scss
View File

@ -1,7 +1,7 @@
.app-header.navbar {
position: relative;
flex-direction: row;
height: $navbar-height;
flex-direction: row;
padding: 0;
margin: 0;
background-color: $navbar-bg;
@ -102,13 +102,16 @@
background-color: rgba(0,0,0,.075);
}
.brand-minimized {
.app-header.navbar {
.navbar-brand {
width: $navbar-brand-minimized-width;
background-color: $navbar-brand-minimized-bg;
background-image: $navbar-brand-minimized-logo;
background-size: $navbar-brand-minimized-logo-size;
@include media-breakpoint-up(lg) {
.brand-minimized {
.app-header.navbar {
.navbar-brand {
width: $navbar-brand-minimized-width;
background-color: $navbar-brand-minimized-bg;
background-image: $navbar-brand-minimized-logo;
background-size: $navbar-brand-minimized-logo-size;
@include borders($navbar-brand-minimized-border);
}
}
}
}

4
React_Starter/scss/core/_sidebar.scss
View File

@ -78,8 +78,8 @@
.nav {
@include sidebar-width($sidebar-borders, $sidebar-width);
flex-direction: column;
min-height: 100%;
flex-direction: column;
}
.nav-title {
@ -254,6 +254,7 @@
flex: 0 0 $sidebar-footer-height;
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
background: $sidebar-footer-bg;
@include borders($sidebar-footer-borders);
}
.sidebar-minimizer {
@ -261,6 +262,7 @@
flex: 0 0 $sidebar-minimizer-height;
background-color: $sidebar-minimizer-bg;
border: 0;
@include borders($sidebar-minimizer-borders);
&::before {
position: absolute;

7
React_Starter/scss/core/_variables.scss
View File

@ -58,10 +58,11 @@ $navbar-brand-border: (
)
) !default;
$navbar-brand-minimized-width: 50px !default
$navbar-brand-minimized-bg: #fff !default;
$navbar-brand-minimized-width: 50px !default;
$navbar-brand-minimized-bg: $navbar-brand-bg !default;
$navbar-brand-minimized-logo: url('../img/logo-symbol.png') !default;
$navbar-brand-minimized-logo-size: 24px !default;
$navbar-brand-minimized-border: $navbar-brand-border !default;
$navbar-color: $gray-600 !default;
$navbar-hover-color: $gray-800 !default;
@ -132,11 +133,13 @@ $sidebar-footer-height: auto !default;
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
$sidebar-footer-padding-y: .75rem !default;
$sidebar-footer-padding-x: 1rem !default;
$sidebar-footer-borders: 0 !default;
// Sidebar Minimizer
$sidebar-minimizer-height: 50px !default;
$sidebar-minimizer-bg: rgba(0,0,0,.2) !default;
$sidebar-minimizer-borders: 0 !default;
$sidebar-minimizer-indicator-color: $gray-600 !default;
$sidebar-minimizer-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
$sidebar-minimizer-hover-bg: rgba(0,0,0,.3) !default;

10
React_Starter/scss/style.scss
View File

@ -1,6 +1,6 @@
/*!
* CoreUI - Open Source Bootstrap Admin Template
* @version v1.0.0
* @version v1.0.1
* @link http://coreui.io
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
* @license MIT
@ -11,23 +11,17 @@
// Import Bootstrap source files
@import "bootstrap/bootstrap";
// If you want you can import bootstrap scss files directly from node_modules or bower_components.
// If you want you can import bootstrap scss files directly from node_modules.
// To do this please remove @import "bootstrap/bootstrap"; and uncomment proper line.
// Import Bootstrap source files from node_modules
// @import "node_modules/bootstrap/scss/bootstrap";
// Import Bootstrap source files from bower_components
// @import "bower_components/bootstrap/scss/bootstrap";
// Override core variables
@import "core-variables";
// Import core styles
@import "core/core";
// Import vendors styles
@import "vendors/vendors";
// Custom styles
@import "custom";

9
React_Starter/scss/vendors/_variables.scss vendored Normal file
View File

@ -0,0 +1,9 @@
// @import "node_modules/bootstrap/scss/bootstrap/functions";
@import "../bootstrap/functions";
@import "../bootstrap-variables";
// @import "node_modules/bootstrap/scss/bootstrap/variables";
@import "../bootstrap/variables";
// @import "node_modules/bootstrap/scss/bootstrap/mixins";
@import "../bootstrap/mixins";
@import "../core-variables";
@import "../core/variables";

1
React_Starter/scss/vendors/_vendors.scss vendored
View File

@ -1 +0,0 @@
@import "chart.js/chart";

3
React_Starter/scss/vendors/chart.js/chart.scss vendored
View File

@ -1,3 +1,6 @@
// Import variables
@import '../variables';
.chart-legend,
.bar-legend,
.line-legend,

2
React_Starter/src/components/Aside/Aside.js
View File

@ -5,7 +5,7 @@ class Aside extends Component {
render() {
return (
<aside className="aside-menu">
Aside Menu
{/*Aside Menu*/}
</aside>
)
}

2
React_Starter/src/components/Aside/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Aside",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Aside.js"
}

2
React_Starter/src/components/Breadcrumb/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Breadcrumb",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Breadcrumb.js"
}

4
React_Starter/src/components/Footer/Footer.js
View File

@ -4,8 +4,8 @@ class Footer extends Component {
render() {
return (
<footer className="app-footer">
<a href="http://coreui.io">CoreUI</a> &copy; 2017 creativeLabs.
<span className="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
<span><a href="http://coreui.io">CoreUI</a> &copy; 2017 creativeLabs.</span>
<span className="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
</footer>
)
}

2
React_Starter/src/components/Footer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Footer",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Footer.js"
}

1
React_Starter/src/components/Header/Header.js
View File

@ -34,6 +34,7 @@ class Header extends Component {
<NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>&#9776;</NavbarToggler>
<NavbarBrand href="#"></NavbarBrand>
<NavbarToggler className="d-md-down-none mr-auto" onClick={this.sidebarToggle}>&#9776;</NavbarToggler>
<NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>&#9776;</NavbarToggler>
</header>
)
}

2
React_Starter/src/components/Header/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Header",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Header.js"
}

1
React_Starter/src/components/Sidebar/Sidebar.js
View File

@ -17,7 +17,6 @@ class Sidebar extends Component {
}
activeRoute(routeName, props) {
// return this.props.location.pathname.indexOf(routeName) > -1 ? 'nav-item nav-dropdown open' : 'nav-item nav-dropdown';
return props.location.pathname.indexOf(routeName) > -1 ? 'nav-item nav-dropdown open' : 'nav-item nav-dropdown';
}

2
React_Starter/src/components/Sidebar/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Sidebar",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Sidebar.js"
}

2
React_Starter/src/components/SidebarFooter/package.json
View File

@ -1,6 +1,6 @@
{
"name": "SidebarFooter",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./SidebarFooter.js"
}

2
React_Starter/src/components/SidebarForm/package.json
View File

@ -1,6 +1,6 @@
{
"name": "SidebarForm",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./SidebarForm.js"
}

2
React_Starter/src/components/SidebarHeader/package.json
View File

@ -1,6 +1,6 @@
{
"name": "SidebarHeader",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./SidebarHeader.js"
}

2
React_Starter/src/components/SidebarMinimizer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "SidebarMinimizer",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./SidebarMinimizer.js"
}

2
React_Starter/src/containers/Full/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Full",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Full.js"
}

2
React_Starter/src/views/Dashboard/package.json
View File

@ -1,6 +1,6 @@
{
"name": "Dashboard",
"version": "1.0.0",
"version": "1.0.1",
"private": true,
"main": "./Dashboard.js"
}