diff --git a/.babelrc b/.babelrc new file mode 100755 index 0000000..b18aa08 --- /dev/null +++ b/.babelrc @@ -0,0 +1,19 @@ +{ + "presets": [ + "@babel/preset-env", + "@babel/preset-react", + ], + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-syntax-dynamic-import", + "universal-import", + "react-hot-loader/babel" + ], + "env": { + "development": { + "plugins": [ + "react-hot-loader/babel" + ] + } + } +} \ No newline at end of file diff --git a/.eslintrc b/.eslintrc new file mode 100755 index 0000000..cb70d82 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,26 @@ +{ + "parser": "babel-eslint", + "plugins": [ + "react" + ], + "parserOptions": { + "ecmaVersion": 6, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true, + "experimentalObjectRestSpread": true + } + }, + "env": { + "es6": true, + "browser": true, + "node": true, + "mocha": true + }, + "extends": [ + "eslint:recommended", + "plugin:react/recommended" + ], + "rules": { + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100755 index 0000000..00fa1ae --- /dev/null +++ b/.gitignore @@ -0,0 +1,10 @@ +# build output +dist + +# dependencies +node_modules +package-lock.json +yarn.lock + +# other +.DS_Store \ No newline at end of file diff --git a/.npmrc b/.npmrc new file mode 100755 index 0000000..239cfdf --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +//registry.npmjs.org/:_authToken=57c97b55-1617-4b16-9f1b-2bffb2cdcc7e \ No newline at end of file diff --git a/app/colors.js b/app/colors.js new file mode 100755 index 0000000..972d63e --- /dev/null +++ b/app/colors.js @@ -0,0 +1,14 @@ +import _ from 'lodash'; + +import colors from './colors.scss'; + +const colorKeys = _ + .chain(colors) + .keys() + .filter((colorKey) => ( + colorKey.indexOf('bg-') === -1 && + colorKey.indexOf('fg-') === -1 + )) + .value(); + +export default _.pick(colors, colorKeys); \ No newline at end of file diff --git a/app/colors.scss b/app/colors.scss new file mode 100755 index 0000000..6979b63 --- /dev/null +++ b/app/colors.scss @@ -0,0 +1,16 @@ +@import "./styles/variables"; + +@each $name, $color in $dashboard-colors { + .fg-color--#{ $name } { + color: $color; + } + .bg-color--#{ $name } { + background-color: $color; + } +} + +:export { + @each $name, $color in $dashboard-colors { + #{$name}: $color + } +} \ No newline at end of file diff --git a/app/common.js b/app/common.js new file mode 100755 index 0000000..f1eff98 --- /dev/null +++ b/app/common.js @@ -0,0 +1,3 @@ +import * as CommonDashboardFuncs from '@owczar/dashboard-style--airframe'; + +export default CommonDashboardFuncs; \ No newline at end of file diff --git a/app/components/Accordion/Accordion.js b/app/components/Accordion/Accordion.js new file mode 100755 index 0000000..de15765 --- /dev/null +++ b/app/components/Accordion/Accordion.js @@ -0,0 +1,62 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Card from './../Card'; + +import { Provider } from './context'; + +export class Accordion extends React.Component { + static propTypes = { + initialOpen: PropTypes.bool, + onToggle: PropTypes.func, + open: PropTypes.bool, + children: PropTypes.node, + className: PropTypes.string + }; + + constructor(props) { + super(props); + + this.state = { + isOpen: props.initialOpen + } + + if (props.open !== 'undefined' && props.onToggle === 'undefined') { + throw "Accordion: props.open has to be used combined with props.onToggle " + + "use props.initialOpen to create an uncontrolled Accordion." + } + } + + toggleHandler() { + const { onToggle } = this.props; + + if (!onToggle) { + this.setState({ isOpen: !this.state.isOpen }); + } else { + this.onToggle(!this.props.open); + } + } + + isOpen() { + return !this.props.onToggle ? + this.state.isOpen : this.props.open; + } + + render() { + /* eslint-disable-next-line no-unused-vars */ + const { className, children, initialOpen, ...otherProps } = this.props; + + return ( + + + { children } + + + ); + } +} \ No newline at end of file diff --git a/app/components/Accordion/AccordionBody.js b/app/components/Accordion/AccordionBody.js new file mode 100755 index 0000000..b81d807 --- /dev/null +++ b/app/components/Accordion/AccordionBody.js @@ -0,0 +1,24 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { Collapse, CardBody } from 'reactstrap'; + +import { Consumer } from './context'; + +export const AccordionBody = (props) => ( + + { + ({ isOpen }) => ( + + + { props.children } + + + ) + } + +); +AccordionBody.propTypes = { + children: PropTypes.node, + className: PropTypes.string +}; diff --git a/app/components/Accordion/AccordionHeader.js b/app/components/Accordion/AccordionHeader.js new file mode 100755 index 0000000..d1f8a01 --- /dev/null +++ b/app/components/Accordion/AccordionHeader.js @@ -0,0 +1,33 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import CardHeader from './../CardHeader'; + +import { Consumer } from './context'; +import classes from './AccordionHeader.scss'; + +export const AccordionHeader = (props) => ( + + { + ({ onToggle }) => ( + + { props.children } + + ) + } + +); +AccordionHeader.propTypes = { + children: PropTypes.node, + onClick: PropTypes.func, + className: PropTypes.string +}; diff --git a/app/components/Accordion/AccordionHeader.scss b/app/components/Accordion/AccordionHeader.scss new file mode 100755 index 0000000..246cb18 --- /dev/null +++ b/app/components/Accordion/AccordionHeader.scss @@ -0,0 +1,14 @@ +@import '../../styles/variables'; + +div.header { + background: none; + border-bottom: none; + cursor: pointer; + color: $link-color; + text-decoration: $link-decoration; + + &:hover { + color: $link-hover-color; + text-decoration: $link-hover-decoration; + } +} \ No newline at end of file diff --git a/app/components/Accordion/AccordionIndicator.js b/app/components/Accordion/AccordionIndicator.js new file mode 100755 index 0000000..e2a1f6a --- /dev/null +++ b/app/components/Accordion/AccordionIndicator.js @@ -0,0 +1,27 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { Consumer } from './context'; + +export const AccordionIndicator = (props) => ( + + { + ({ isOpen }) => isOpen ? + React.cloneElement(props.open, { + className: classNames(props.className, props.open.props.className) + }) : React.cloneElement(props.closed, { + className: classNames(props.className, props.closed.props.className) + }) + } + +); +AccordionIndicator.propTypes = { + open: PropTypes.node, + closed: PropTypes.node, + className: PropTypes.string +} +AccordionIndicator.defaultProps = { + open: , + closed: +} diff --git a/app/components/Accordion/context.js b/app/components/Accordion/context.js new file mode 100755 index 0000000..2a04f4e --- /dev/null +++ b/app/components/Accordion/context.js @@ -0,0 +1,8 @@ +import React from 'react'; + +const { Provider, Consumer } = React.createContext(); + +export { + Provider, + Consumer +}; diff --git a/app/components/Accordion/index.js b/app/components/Accordion/index.js new file mode 100755 index 0000000..1559d99 --- /dev/null +++ b/app/components/Accordion/index.js @@ -0,0 +1,10 @@ +import { Accordion } from './Accordion'; +import { AccordionBody } from './AccordionBody'; +import { AccordionHeader } from './AccordionHeader'; +import { AccordionIndicator } from './AccordionIndicator'; + +Accordion.Body = AccordionBody; +Accordion.Header = AccordionHeader; +Accordion.Indicator = AccordionIndicator; + +export default Accordion; diff --git a/app/components/App/AppClient.js b/app/components/App/AppClient.js new file mode 100755 index 0000000..1d1af1c --- /dev/null +++ b/app/components/App/AppClient.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { hot } from 'react-hot-loader' +import { BrowserRouter as Router } from 'react-router-dom'; + +import AppLayout from './../../layout/default'; +import { RoutedContent } from './../../routes'; + +const basePath = process.env.BASE_PATH || '/'; + +const AppClient = () => { + return ( + + + + + + ); +} + +export default hot(module)(AppClient); \ No newline at end of file diff --git a/app/components/App/index.js b/app/components/App/index.js new file mode 100755 index 0000000..60bb647 --- /dev/null +++ b/app/components/App/index.js @@ -0,0 +1,3 @@ +import AppClient from './AppClient'; + +export default AppClient; \ No newline at end of file diff --git a/app/components/Avatar/Avatar.js b/app/components/Avatar/Avatar.js new file mode 100755 index 0000000..0101079 --- /dev/null +++ b/app/components/Avatar/Avatar.js @@ -0,0 +1,71 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import _ from 'lodash'; + +const Avatar = (props) => { + const avatarClass = classNames( + 'avatar', + `avatar--${ props.size }`, + props.className + ); + const addOnsdArr = React.Children.toArray(props.addOns); + const badge = _.find(addOnsdArr, (avatarAddOn) => + avatarAddOn.type.addOnId === "avatar--badge"); + const icons = _.filter(addOnsdArr, (avatarAddOn) => + avatarAddOn.type.addOnId === "avatar--icon"); + const isNested = _.reduce(addOnsdArr, (acc, avatarAddOn) => + acc || !!avatarAddOn.props.small, false); + + return ( +
+ { + badge && ( +
+ { badge } +
+ ) + } + { + !_.isEmpty(icons) && (() => { + switch(icons.length) { + case 1: + return ( +
+ { _.first(icons) } +
+ ) + default: + return ( +
+ { icons } +
+ ) + } + })() + } +
+ { props.children } +
+
+ ); +}; +Avatar.propTypes = { + size: PropTypes.string, + children: PropTypes.node.isRequired, + addOns: PropTypes.node, + style: PropTypes.object, + className: PropTypes.string +}; +Avatar.defaultProps = { + size: "md", + style: {} +}; + +export { Avatar }; \ No newline at end of file diff --git a/app/components/Avatar/AvatarAddonBadge.js b/app/components/Avatar/AvatarAddonBadge.js new file mode 100755 index 0000000..2fa8c00 --- /dev/null +++ b/app/components/Avatar/AvatarAddonBadge.js @@ -0,0 +1,21 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { Badge } from 'reactstrap'; + +const AvatarAddonBadge = (props) => { + const { children, ...badgeProps } = props; + + return ( + + { children } + + ); +}; +AvatarAddonBadge.propTypes = { + children: PropTypes.node, + className: PropTypes.string +}; +AvatarAddonBadge.addOnId = "avatar--badge"; + +export { AvatarAddonBadge }; \ No newline at end of file diff --git a/app/components/Avatar/AvatarAddonIcon.js b/app/components/Avatar/AvatarAddonIcon.js new file mode 100755 index 0000000..31e1979 --- /dev/null +++ b/app/components/Avatar/AvatarAddonIcon.js @@ -0,0 +1,26 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import avatarColors from './../../colors.scss'; + +const AvatarAddonIcon = (props) => { + const addOnClass = classNames({ + 'avatar__icon__inner': props.small + }, avatarColors[`fg-color--${ props.color }`]); + + return ( + + ); +}; +AvatarAddonIcon.propTypes = { + small: PropTypes.bool, + className: PropTypes.string, + color: PropTypes.string +}; +AvatarAddonIcon.defaultProps = { + color: "success" +}; +AvatarAddonIcon.addOnId = "avatar--icon"; + +export { AvatarAddonIcon }; \ No newline at end of file diff --git a/app/components/Avatar/AvatarFont.js b/app/components/Avatar/AvatarFont.js new file mode 100755 index 0000000..0a0a591 --- /dev/null +++ b/app/components/Avatar/AvatarFont.js @@ -0,0 +1,65 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { Avatar } from './Avatar'; + +import avatarColors from './../../colors.scss'; + +const AvatarFont = (props) => { + const { + children, + bgColor, + fgColor, + bgColorCustom, + fgColorCustom, + ...avatarProps + } = props; + const parentClass = classNames( + 'avatar-font', + `avatar-font--${avatarProps.size}`, + bgColor && avatarColors[`bg-color--${ bgColor }`] + ); + const childClass = classNames('avatar-font__text', + fgColor && avatarColors[`fg-color--${ fgColor }`] + ); + const parentCustomStyle = bgColorCustom ? { + backgroundColor: bgColorCustom + } : { }; + const childCustomStyle = fgColorCustom ? { + color: fgColorCustom + } : { }; + const child = ( + + { children } + + ); + + return ( + +
+ { + React.cloneElement(child, { + style: childCustomStyle, + className: classNames(child.props.className, childClass) + }) + } +
+ + ); +}; +AvatarFont.propTypes = { + children: PropTypes.node, + bgColor: PropTypes.string, + fgColor: PropTypes.string, + bgColorCustom: PropTypes.string, + fgColorCustom: PropTypes.string, + ...Avatar.propTypes +}; +AvatarFont.defaultProps = { + bgColor: '400', + fgColor: 'white', + size: 'md' +}; + +export { AvatarFont }; \ No newline at end of file diff --git a/app/components/Avatar/AvatarImage.js b/app/components/Avatar/AvatarImage.js new file mode 100755 index 0000000..f6e9857 --- /dev/null +++ b/app/components/Avatar/AvatarImage.js @@ -0,0 +1,57 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import _ from 'lodash'; + +import { Avatar } from './Avatar'; +import { AvatarFont } from './AvatarFont'; + +class AvatarImage extends React.PureComponent { + static propTypes = { + src: PropTypes.string.isRequired, + placeholder: PropTypes.node, + alt: PropTypes.string, + className: PropTypes.string, + ..._.omit(Avatar.propTypes, ['children']) + }; + + static defaultProps = { + placeholder: + } + + constructor(props) { + super(props); + + this.state = { + imgLoaded: false + }; + } + + render() { + const { src, placeholder, alt, className, ...avatarProps } = this.props; + const parentClass = classNames('avatar-image', { + 'avatar-image--loaded': this.state.imgLoaded + }, className); + + return ( +
+ + { { this.setState({ imgLoaded: true }) } } + /> + + { + !this.state.imgLoaded && ( + + { placeholder } + + ) + } +
+ ) + } +} + +export { AvatarImage }; diff --git a/app/components/Avatar/index.js b/app/components/Avatar/index.js new file mode 100755 index 0000000..2402a5b --- /dev/null +++ b/app/components/Avatar/index.js @@ -0,0 +1,17 @@ +import { Avatar } from './Avatar'; +import { AvatarFont } from './AvatarFont'; +import { AvatarImage } from './AvatarImage'; + +import { AvatarAddonBadge } from './AvatarAddonBadge'; +import { AvatarAddonIcon } from './AvatarAddonIcon'; + +Avatar.Font = AvatarFont; +Avatar.Image = AvatarImage; + +const AvatarAddOn = { + Icon: AvatarAddonIcon, + Badge: AvatarAddonBadge +}; + +export default Avatar; +export { AvatarAddOn }; \ No newline at end of file diff --git a/app/components/Card/Card.js b/app/components/Card/Card.js new file mode 100755 index 0000000..19d9cdd --- /dev/null +++ b/app/components/Card/Card.js @@ -0,0 +1,33 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { + Card as BsCard +} from 'reactstrap'; + +import classes from './Card.scss'; + +const Card = (props) => { + const { children, type, color, className, ...otherProps } = props; + const cardClass = classNames(className, + classes['custom-card'], + classes[`custom-card--${ type }`], + color && classes[`custom-card--color-${ color }`] + ); + return ( + + { children } + + ); +} +Card.propTypes = { + ...BsCard.propTypes, + type: PropTypes.string, + color: PropTypes.string +}; +Card.defaultProps = { + type: 'border', + color: null +}; + +export { Card }; diff --git a/app/components/Card/Card.scss b/app/components/Card/Card.scss new file mode 100755 index 0000000..1143592 --- /dev/null +++ b/app/components/Card/Card.scss @@ -0,0 +1,52 @@ +@import "../../styles/variables"; + +.custom-card { + &--border-dash, + &--border-dot, + &--border { + @each $name, $color in $dashboard-colors { + &.custom-card--color-#{$name} { + border-color: $color + } + } + } + + &--side-border { + border-left-width: 2px; + + @each $name, $color in $dashboard-colors { + &.custom-card--color-#{$name} { + border-left-color: $color + } + } + } + + &--background { + color: map-get($dashboard-colors, 'white'); + + @each $name, $color in $dashboard-colors { + &.custom-card--color-#{$name} { + background-color: $color; + } + } + } + + &--border-dash { + border-style: dashed; + border-width: 2px; + } + + &--border-dot { + border-style: dotted; + border-width: 2px; + } + + &--shadow { + box-shadow: 0 1px 2px 0 rgba(31, 45, 61, 0.07); + } + + &--none { + border: none; + background: none; + } +} \ No newline at end of file diff --git a/app/components/Card/index.js b/app/components/Card/index.js new file mode 100755 index 0000000..6a8c7d2 --- /dev/null +++ b/app/components/Card/index.js @@ -0,0 +1,3 @@ +import { Card } from './Card'; + +export default Card; \ No newline at end of file diff --git a/app/components/CardHeader/CardHeader.js b/app/components/CardHeader/CardHeader.js new file mode 100755 index 0000000..fee8048 --- /dev/null +++ b/app/components/CardHeader/CardHeader.js @@ -0,0 +1,30 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { + CardHeader as BsCardHeader +} from 'reactstrap'; + +import classes from './CardHeader.scss'; + +const CardHeader = (props) => { + const { type, color, className, children, ...otherProps } = props; + const cardHeaderClass = classNames(className, + classes['custom-card-header'], + type && classes[`custom-card-header--${ type }`], + color && classes[`custom-card-header--color-${ color }`] + ); + return ( + + { children } + + ); +}; +CardHeader.propTypes = { + type: PropTypes.string, + color: PropTypes.string, + className: PropTypes.string, + ...BsCardHeader.propTypes +}; + +export { CardHeader }; diff --git a/app/components/CardHeader/CardHeader.scss b/app/components/CardHeader/CardHeader.scss new file mode 100755 index 0000000..58e9da4 --- /dev/null +++ b/app/components/CardHeader/CardHeader.scss @@ -0,0 +1,24 @@ +@import "../../styles/variables"; + +.custom-card-header { + &--background { + color: map-get($dashboard-colors, "white"); + + @each $name, $color in $dashboard-colors { + &.custom-card-header--color-#{$name} { + background-color: $color; + } + } + } + + &--border { + @each $name, $color in $dashboard-colors { + border-bottom: 2px solid; + background: none; + + &.custom-card-header--color-#{$name} { + border-bottom-color: $color; + } + } + } +} \ No newline at end of file diff --git a/app/components/CardHeader/index.js b/app/components/CardHeader/index.js new file mode 100755 index 0000000..0e0d89d --- /dev/null +++ b/app/components/CardHeader/index.js @@ -0,0 +1,3 @@ +import { CardHeader } from './CardHeader'; + +export default CardHeader; \ No newline at end of file diff --git a/app/components/Checkable/Checkable.js b/app/components/Checkable/Checkable.js new file mode 100755 index 0000000..18e7ed6 --- /dev/null +++ b/app/components/Checkable/Checkable.js @@ -0,0 +1,45 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { Provider } from './context'; + +class Checkable extends React.Component { + static propTypes = { + children: PropTypes.node.isRequired, + tag: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string + ]) + }; + static defaultProps = { + tag: "div" + }; + + constructor(props) { + super(props); + + this.state = { + isChecked: false + }; + } + + render() { + const { tag, children, ...otherProps } = this.props; + const Tag = this.props.tag; + + return ( + { this.setState({ isChecked: enabled || !this.state.isChecked }) } + }} + > + + { children } + + + ); + } +} + +export { Checkable }; diff --git a/app/components/Checkable/CheckableInput.js b/app/components/Checkable/CheckableInput.js new file mode 100755 index 0000000..72d5afb --- /dev/null +++ b/app/components/Checkable/CheckableInput.js @@ -0,0 +1,53 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Input } from 'reactstrap'; + +import { Consumer } from './context'; + +class CheckableInput extends React.Component { + static propTypes = { + tag: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string + ]), + type: PropTypes.string, + defaultChecked: PropTypes.bool, + toggle: PropTypes.func, + isChecked: PropTypes.bool + }; + static defaultProps = { + tag: Input, + type: "checkbox" + }; + + componentDidMount() { + if (this.props.defaultChecked) { + this.props.toggle(this.props.defaultChecked); + } + } + + render() { + const { tag, isChecked, toggle, ...otherProps } = this.props; + const Tag = tag; + + return ( + { toggle(e.target.checked) } } + { ...otherProps } + /> + ); + } +} + +const ContextCheckableInput = (props) => ( + + { + (value) => ( + + ) + } + +); + +export { ContextCheckableInput as CheckableInput }; diff --git a/app/components/Checkable/CheckableTrigger.js b/app/components/Checkable/CheckableTrigger.js new file mode 100755 index 0000000..50d8785 --- /dev/null +++ b/app/components/Checkable/CheckableTrigger.js @@ -0,0 +1,38 @@ +import React from 'react'; +import classNames from 'classnames'; +import PropTypes from 'prop-types'; + +import { Consumer } from './context'; + +import classes from './CheckableTrigger.scss'; + +const CheckableTrigger = (props) => { + const { children, tag, className, ...otherProps } = props; + const Tag = tag; + const tagClass = classNames(classes['checkable__trigger'], className); + + return ( + + { + (value) => ( + { value.toggle() } }> + { children } + + ) + } + + ); +}; +CheckableTrigger.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + tag: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string + ]) +}; +CheckableTrigger.defaultProps = { + tag: "div" +}; + +export { CheckableTrigger }; \ No newline at end of file diff --git a/app/components/Checkable/CheckableTrigger.scss b/app/components/Checkable/CheckableTrigger.scss new file mode 100755 index 0000000..23140e2 --- /dev/null +++ b/app/components/Checkable/CheckableTrigger.scss @@ -0,0 +1,3 @@ +.checkable__trigger { + cursor: pointer; +} \ No newline at end of file diff --git a/app/components/Checkable/context.js b/app/components/Checkable/context.js new file mode 100755 index 0000000..2a04f4e --- /dev/null +++ b/app/components/Checkable/context.js @@ -0,0 +1,8 @@ +import React from 'react'; + +const { Provider, Consumer } = React.createContext(); + +export { + Provider, + Consumer +}; diff --git a/app/components/Checkable/index.js b/app/components/Checkable/index.js new file mode 100755 index 0000000..4498c04 --- /dev/null +++ b/app/components/Checkable/index.js @@ -0,0 +1,8 @@ +import { Checkable } from './Checkable'; +import { CheckableTrigger } from './CheckableTrigger'; +import { CheckableInput } from './CheckableInput'; + +Checkable.Trigger = CheckableTrigger; +Checkable.Input = CheckableInput; + +export default Checkable; \ No newline at end of file diff --git a/app/components/CustomInput/CustomInput.js b/app/components/CustomInput/CustomInput.js new file mode 100755 index 0000000..bbb7496 --- /dev/null +++ b/app/components/CustomInput/CustomInput.js @@ -0,0 +1,17 @@ +import React from 'react'; +import classNames from 'classnames'; +import { CustomInput as RSCustomInput } from 'reactstrap'; + +const CustomInput = (props) => { + const { className, ...otherProps } = props; + const inputClass = classNames(className, { + 'custom-control-empty': !props.label + }); + + return ( + + ); +} +CustomInput.propTypes = { ...RSCustomInput.propTypes }; + +export { CustomInput }; diff --git a/app/components/CustomInput/index.js b/app/components/CustomInput/index.js new file mode 100755 index 0000000..d2ecf7a --- /dev/null +++ b/app/components/CustomInput/index.js @@ -0,0 +1,3 @@ +import { CustomInput } from './CustomInput'; + +export default CustomInput; diff --git a/app/components/Divider/Divider.js b/app/components/Divider/Divider.js new file mode 100755 index 0000000..e2808ea --- /dev/null +++ b/app/components/Divider/Divider.js @@ -0,0 +1,22 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const Divider = ({ position, children, className }) => { + const dividerClass = classNames({ + 'hr-text-center': position === 'center', + 'hr-text-right': position === 'right' + }, 'hr-text', className); + + return ( +
+ { children } +
+ ) +} + +Divider.propTypes = { + position: PropTypes.string, + className: PropTypes.string, + children: PropTypes.node +} \ No newline at end of file diff --git a/app/components/Divider/index.js b/app/components/Divider/index.js new file mode 100755 index 0000000..f07ba30 --- /dev/null +++ b/app/components/Divider/index.js @@ -0,0 +1,3 @@ +import { Divider } from './Divider'; + +export default Divider; diff --git a/app/components/EmptyLayout/EmptyLayout.js b/app/components/EmptyLayout/EmptyLayout.js new file mode 100755 index 0000000..7721456 --- /dev/null +++ b/app/components/EmptyLayout/EmptyLayout.js @@ -0,0 +1,47 @@ +import React from 'react'; +import _ from 'lodash'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { + withPageConfig +} from './../../components/Layout'; + +class EmptyLayout extends React.Component { + static propTypes = { + pageConfig: PropTypes.object.isRequired, + children: PropTypes.node.isRequired, + className: PropTypes.string + }; + + componentDidMount() { + this.props.pageConfig.setElementsVisibility({ + navbarHidden: true, + sidebarHidden: true, + footerHidden: true + }); + } + + componentWillUnmount() { + this.props.pageConfig.setElementsVisibility({ + navbarHidden: false, + sidebarHidden: false, + footerHidden: false + }); + } + + render() { + const emptyLayoutClass = classNames('fullscreen', this.props.className); + + return ( +
+ { this.props.children } +
+ ); + } +}; + +const PageConfigEmptyLayout = withPageConfig(EmptyLayout); + +export { + PageConfigEmptyLayout as EmptyLayout +}; diff --git a/app/components/EmptyLayout/EmptyLayoutSection.js b/app/components/EmptyLayout/EmptyLayoutSection.js new file mode 100755 index 0000000..5ee732b --- /dev/null +++ b/app/components/EmptyLayout/EmptyLayoutSection.js @@ -0,0 +1,32 @@ +import React from 'react'; +import _ from 'lodash'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +const EmptyLayoutSection = (props) => { + const sectionClass = classNames(props.className, 'fullscreen__section', { + 'fullscreen__section--center': props.center + }); + const maxWidth = _.isNumber(props.width) ? `${props.width}px` : props.width; + return ( +
+ { + props.center ? +
+ { props.children } +
: props.children + } +
+ ) +}; +EmptyLayoutSection.propTypes = { + className: PropTypes.string, + children: PropTypes.node.isRequired, + center: PropTypes.bool, + width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]) +}; +EmptyLayoutSection.defaultProps = { + width: '420px' +} + +export { EmptyLayoutSection }; diff --git a/app/components/EmptyLayout/index.js b/app/components/EmptyLayout/index.js new file mode 100755 index 0000000..083fb66 --- /dev/null +++ b/app/components/EmptyLayout/index.js @@ -0,0 +1,6 @@ +import { EmptyLayout } from './EmptyLayout'; +import { EmptyLayoutSection } from './EmptyLayoutSection'; + +EmptyLayout.Section = EmptyLayoutSection; + +export default EmptyLayout; diff --git a/app/components/ExtendedDropdown/ExtendedDropdown.js b/app/components/ExtendedDropdown/ExtendedDropdown.js new file mode 100755 index 0000000..67c2c63 --- /dev/null +++ b/app/components/ExtendedDropdown/ExtendedDropdown.js @@ -0,0 +1,17 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { DropdownMenu } from 'reactstrap'; + +export const ExtendedDropdown = ({ className, ...otherProps }) => { + const classes = classNames( + className, + 'extended-dropdown' + ); + return ( + + ); +} +ExtendedDropdown.propTypes = { + className: PropTypes.string, +}; diff --git a/app/components/ExtendedDropdown/ExtendedDropdownLink.js b/app/components/ExtendedDropdown/ExtendedDropdownLink.js new file mode 100755 index 0000000..d9629ec --- /dev/null +++ b/app/components/ExtendedDropdown/ExtendedDropdownLink.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { DropdownContext } from 'reactstrap/es/DropdownContext'; + +const ExtendedDropdownLink = (props) => { + const { children, ...otherProps } = props; + + return ( + + { + ({ toggle }) => ( + { toggle(); } }> + { children } + + ) + } + + ); +}; +ExtendedDropdownLink.propTypes = { ...Link.propTypes }; +ExtendedDropdownLink.defaultProps = { ...Link.defaultProps }; + +export { ExtendedDropdownLink }; diff --git a/app/components/ExtendedDropdown/ExtendedDropdownSection.js b/app/components/ExtendedDropdown/ExtendedDropdownSection.js new file mode 100755 index 0000000..d68c618 --- /dev/null +++ b/app/components/ExtendedDropdown/ExtendedDropdownSection.js @@ -0,0 +1,30 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +const ExtendedDropdownSection = (props) => { + const { children, list, className, tag, ...otherProps } = props; + const sectionClass = classNames( + "extended-dropdown__section", className, { + "extended-dropdown__section--list": list + } + ); + const Tag = tag; + + return ( + + { children } + + ); +}; +ExtendedDropdownSection.propTypes = { + children: PropTypes.node, + list: PropTypes.bool, + className: PropTypes.string, + tag: PropTypes.oneOfType([PropTypes.string, PropTypes.func]) +}; +ExtendedDropdownSection.defaultProps = { + tag: "div" +}; + +export { ExtendedDropdownSection }; \ No newline at end of file diff --git a/app/components/ExtendedDropdown/index.js b/app/components/ExtendedDropdown/index.js new file mode 100755 index 0000000..fa7a40a --- /dev/null +++ b/app/components/ExtendedDropdown/index.js @@ -0,0 +1,8 @@ +import { ExtendedDropdown } from './ExtendedDropdown'; +import { ExtendedDropdownSection } from './ExtendedDropdownSection'; +import { ExtendedDropdownLink } from './ExtendedDropdownLink'; + +ExtendedDropdown.Section = ExtendedDropdownSection; +ExtendedDropdown.Link = ExtendedDropdownLink; + +export default ExtendedDropdown; \ No newline at end of file diff --git a/app/components/FloatGrid/Col.js b/app/components/FloatGrid/Col.js new file mode 100755 index 0000000..6972cae --- /dev/null +++ b/app/components/FloatGrid/Col.js @@ -0,0 +1,89 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import classNames from 'classnames'; + +import { Col as BootstrapCol } from 'reactstrap'; + +// Twice Smaller than Bootstrap breakpoints +const breakPoints = [ + { id: 'xl', min: 600 }, + { id: 'lg', min: 496, max: 600 }, + { id: 'md', min: 384, max: 496 }, + { id: 'sm', min: 288, max: 384 }, + { id: 'xs', max: 288 } +]; + +const getCurrentbreakPoint = (width, breakPoints) => { + let output = 'xl'; + for (let bp of breakPoints) { + if ( + (_.isUndefined(bp.min) || bp.min <= width) && + (_.isUndefined(bp.max) || bp.max > width) + ) { + output = bp.id; + } + } + return output; +}; + +export class Col extends React.Component { + static propTypes = { + active: PropTypes.bool, + + lg: PropTypes.number, + md: PropTypes.number, + sm: PropTypes.number, + xs: PropTypes.number, + xl: PropTypes.number, + + xlH: PropTypes.number, + lgH: PropTypes.number, + mdH: PropTypes.number, + smH: PropTypes.number, + xsH: PropTypes.number, + + xlX: PropTypes.number, + lgX: PropTypes.number, + mdX: PropTypes.number, + smX: PropTypes.number, + xsX: PropTypes.number, + + xlY: PropTypes.number, + lgY: PropTypes.number, + mdY: PropTypes.number, + smY: PropTypes.number, + xsY: PropTypes.number, + + trueSize: PropTypes.object, + children: PropTypes.node, + className: PropTypes.string + } + + static defaultProps = { + active: true + } + + render() { + const { active, children, className, trueSize } = this.props; + const bsColumnProps = _.pick(this.props, ['xl', 'lg', 'md', 'sm', 'xs']); + const otherProps = _.omit(this.props, [..._.keys(Col.propTypes), + 'minW', 'maxW', 'minH', 'maxH', 'moved', 'static', 'isDraggable', 'isResizable']); + const floatColBpId = trueSize ? getCurrentbreakPoint(trueSize.wPx, breakPoints) : 'xl'; + const floatColClasses = classNames(className, 'float-col', + 'float-column', `float-column--size-${floatColBpId}`); + + return active ? ( +
+ { children } +
+ ) : ( + + { children } + + ); + } +} diff --git a/app/components/FloatGrid/Grid.js b/app/components/FloatGrid/Grid.js new file mode 100755 index 0000000..5819823 --- /dev/null +++ b/app/components/FloatGrid/Grid.js @@ -0,0 +1,122 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { Container } from 'reactstrap'; +import { FloatGridContext } from './floatGridContext'; +import './../../styles/components/float-grid.scss'; + +export class Grid extends React.Component { + static propTypes = { + active: PropTypes.bool, + children: PropTypes.node, + fluid: PropTypes.bool, + rowHeight: PropTypes.number, + className: PropTypes.string + } + + static defaultProps = { + active: true, + fluid: false, + rowHeight: 100 + } + + state = { + gridSize: { w: 0, h: 0 }, + gridReady: false, + } + _gridRef = React.createRef(); + _resizeDebounceTimeout = 0; + + componentDidMount() { + this.setState({ + gridSize: { + w: this._gridRef.current.clientWidth, + h: this._gridRef.current.clientHeight + } + }); + + if (typeof window !== 'undefined') { + window.addEventListener('resize', this._resizeHandler); + } + } + + componentDidUpdate(nextProps) { + // HACK + if ( + typeof window !== 'undefined' && + nextProps.fluid !== this.props.fluid + ) { + window.dispatchEvent(new Event('resize')); + } + } + + componentWillUnmount() { + if (typeof window !== 'undefined') { + window.removeEventListener('resize', this._resizeHandler); + } + } + + render() { + const { active, children, fluid, className, rowHeight, ...otherProps } = this.props; + const { gridSize } = this.state; + const modifiedChildren = React.Children.map(children, child => ( + React.cloneElement(child, { + ...otherProps, + active, + gridSize + }) + )); + + const floatWrapClasses = classNames({ + ['float-grid-parent__static']: !fluid + }, className, 'float-grid-parent'); + + return( + { + return { + wPx: w / 12 * gridSize.w, + hPx: h * rowHeight + } + }, + active, + gridReady: this.state.gridReady, + setGridReady: () => { this.setState({ gridReady: true }) } + }} + > + { + active ? ( +
+ { modifiedChildren } +
+ ) : ( +
+ + { modifiedChildren } + +
+ ) + } + + + ); + } + + _resizeHandler = () => { + clearInterval(this._resizeDebounceTimeout); + + this._resizeDebounceTimeout = setTimeout(() => { + this.setState({ + gridSize: { + w: this._gridRef.current.clientWidth, + h: this._gridRef.current.clientHeight + } + }); + }, 1000 / 60 * 10); //Every 10 frames debounce + } +} diff --git a/app/components/FloatGrid/Ready.js b/app/components/FloatGrid/Ready.js new file mode 100755 index 0000000..1f3212c --- /dev/null +++ b/app/components/FloatGrid/Ready.js @@ -0,0 +1,14 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { FloatGridContext } from './floatGridContext'; + +export const Ready = ({ children }) => ( + + { + ({ gridReady }) => gridReady ? children : null + } + +); +Ready.propTypes = { + children: PropTypes.node +} \ No newline at end of file diff --git a/app/components/FloatGrid/Row.js b/app/components/FloatGrid/Row.js new file mode 100755 index 0000000..bd00253 --- /dev/null +++ b/app/components/FloatGrid/Row.js @@ -0,0 +1,207 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import { + WidthProvider, + Responsive +} from 'react-grid-layout'; +import { Row as BSRow } from 'reactstrap'; + +import { FloatGridContext } from './floatGridContext'; + +const ResponsiveGrid = WidthProvider(Responsive); +const responsiveBreakpoints = { + xl: 1139, lg: 959, md: 719, sm: 539, xs: 0 + //xl: Number.MAX_VALUE, lg: 1199, md: 991, sm: 767, xs: 576 +}; +const breakPointSteps = _.keys(responsiveBreakpoints); +const TOTAL_ROW = 12; + +const simplifyChildrenArray = (reactChildren) => _.map(reactChildren, child => ( + { ...child, key: child.key.replace(/\.\$/g, '') } +)); + +export class Row extends React.Component { + static propTypes = { + children: PropTypes.node, + columns: PropTypes.object, + onLayoutChange: PropTypes.func, + rowHeight: PropTypes.number, + gridSize: PropTypes.object + }; + + static contextType = FloatGridContext; + + _lastLayouts = { }; + state = { + trueColSizes: { }, + activeLayout: 'xl' + } + initialDebounceTimeout = false; + + componentDidUpdate(nextProps) { + if (!_.isEqual(nextProps.gridSize, this.props.gridSize)) { + if (!_.isEmpty(this._lastLayouts)) { + this._updateTrueColSizes(this._lastLayouts[this.state.activeLayout]); + } + } + } + + render() { + const { children, rowHeight, onLayoutChange, ...otherProps } = this.props; + const { trueColSizes } = this.state; + + if (this.context.active) { + const layouts = this._lastLayouts = this._calculateLayouts(children); + const adjustedChildren = simplifyChildrenArray( + React.Children.map(children, (child) => + React.cloneElement(child, { trueSize: trueColSizes[child.props.i] }))); + + return ( + { + // Notify the parent + onLayoutChange(this._transformForChangeHandler(allLayouts)); + // Recalculate true sizes + this._updateTrueColSizes(currentLayout); + + clearTimeout(this.initialDebounceTimeout); + this.initialDebounceTimeout = setTimeout(() => { + this.context.setGridReady(); + }, 0); + }} + onBreakpointChange={(activeLayout) => { + this.setState({ activeLayout }); + }} + onResize={ + (layout, oldItem, newItem) => { + this.setState({ + trueColSizes: { + ...trueColSizes, + [newItem.i]: this.context.gridUnitsToPx(newItem.w, newItem.h) + } + }); + } + } + { ...otherProps } + > + { adjustedChildren } + + ); + } else { + const adjustedChildren = React.Children.map(children, (child) => + React.cloneElement(child, { active: false })); + + return ( + + { adjustedChildren } + + ); + } + } + + _updateTrueColSizes = (layout) => { + const { trueColSizes } = this.state; + for (let child of layout) { + trueColSizes[child.i] = this.context.gridUnitsToPx(child.w, child.h); + } + this.setState({ trueColSizes }); + } + + /** + * Finds the nearest breakpoint relative to the one provided in the + * first param. For example - when the `definition` param contains + * such bps - { md: 6, xs: 8 }, for `breakpoint` - xl/md will return 6 + */ + _findClosestBreakpoint = (breakpoint, definition) => { + let found = 12; + for (let bp of _.drop(breakPointSteps, _.indexOf(breakPointSteps, breakpoint))) { + if (!_.isUndefined(definition[bp])) { + found = definition[bp]; + } + } + return found; + } + + _calculateLayouts = (children) => { + let output = { }; + const childrenArray = React.Children.toArray(children); + for (let breakPoint of breakPointSteps) { + let rowChildren = []; + let rowCounter = 0; + let y = 0; + for (let child of childrenArray) { + let bpData = { }; + // Save the props for current child and breakpoint + const config = _.pick(child.props, [ + 'i', + 'h', 'minH', 'maxH', + 'minW', 'maxW', + breakPoint, `${breakPoint}MinW`, `${breakPoint}MaxW`, + 'moved', 'static', 'isResizable', 'isDraggable' + ]); + // Calculate the needed definition + bpData = Object.assign(bpData, { + ...config, + // Add default heights when none provided + ...{ + // Set the x to the calculated value or take from the + // props if defined for controlled type + x: _.isUndefined(child.props[`${breakPoint}X`]) ? + rowCounter : child.props[`${breakPoint}X`], + h: child.props[`${breakPoint}H`] || config.h || 1, + minH: config.minH || (config.h || 1), + maxH: config.maxH || (config.h || 1), + }, + w: config[breakPoint] || + this._findClosestBreakpoint(breakPoint, child.props), + // Set the y to the calculated value or take from the + // props if defined for controlled type + y: _.isUndefined(child.props[`${breakPoint}Y`]) ? + y : child.props[`${breakPoint}Y`] + }); + rowChildren = [...rowChildren, bpData]; + rowCounter += bpData.w; + if (rowCounter + bpData.x > TOTAL_ROW) { + // Increase by the largest found height + y += _.max(_.map(rowChildren, 'h')); + rowCounter = 0; + rowChildren = []; + } + output = { + ...output, + [breakPoint]: [...(output[breakPoint] || []), bpData] + } + } + } + return output; + } + + /** + * Transform the calculated layout to a structure + * which is provided by `layouts` props + */ + _transformForChangeHandler = (layouts) => { + let output = { }; + for (let breakPoint of breakPointSteps) { + const bpLayout = layouts[breakPoint]; + for (let element of bpLayout) { + output[element.i] = { + ...(output[element.i]), + ...(element), + [breakPoint]: element.w, + [`${breakPoint}X`]: element.x, + [`${breakPoint}Y`]: element.y, + [`${breakPoint}H`]: element.h + } + } + } + return output; + } +} diff --git a/app/components/FloatGrid/floatGridContext.js b/app/components/FloatGrid/floatGridContext.js new file mode 100755 index 0000000..1910ad6 --- /dev/null +++ b/app/components/FloatGrid/floatGridContext.js @@ -0,0 +1,3 @@ +import React from 'react'; + +export const FloatGridContext = React.createContext(); diff --git a/app/components/FloatGrid/index.js b/app/components/FloatGrid/index.js new file mode 100755 index 0000000..1b5c093 --- /dev/null +++ b/app/components/FloatGrid/index.js @@ -0,0 +1,16 @@ +import { Col } from './Col'; +import { Row } from './Row'; +import { Grid } from './Grid'; +import { Ready } from './Ready'; + +Grid.Col = Col; +Grid.Row = Row; +Grid.Ready = Ready; + +export const applyColumn = (columnId, layouts) => ({ + ...layouts[columnId], + i: columnId, + key: columnId +}); + +export default Grid; diff --git a/app/components/HolderProvider/HolderIconProvider.js b/app/components/HolderProvider/HolderIconProvider.js new file mode 100755 index 0000000..5d6669c --- /dev/null +++ b/app/components/HolderProvider/HolderIconProvider.js @@ -0,0 +1,23 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { HolderTextProvider } from './HolderTextProvider'; + +const HolderIconProvider = (props) => { + const { iconChar, children, ...otherProps } = props; + return ( + + { children } + + ); +}; +HolderIconProvider.propTypes = { + iconChar: PropTypes.string.isRequired, + children: PropTypes.node +}; + +export { HolderIconProvider }; \ No newline at end of file diff --git a/app/components/HolderProvider/HolderTextProvider.js b/app/components/HolderProvider/HolderTextProvider.js new file mode 100755 index 0000000..ac69b39 --- /dev/null +++ b/app/components/HolderProvider/HolderTextProvider.js @@ -0,0 +1,92 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import uid from 'uuid/v4'; +import qs from 'query-string'; + +import colors from './../../colors'; + +class HolderTextProvider extends React.Component { + static propTypes = { + bg: PropTypes.string, + fg: PropTypes.string, + text: PropTypes.string, + width: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string + ]), + height: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string + ]), + font: PropTypes.string, + align: PropTypes.string, + outline: PropTypes.bool, + lineWrap: PropTypes.number, + children: PropTypes.node + } + static defaultProps = { + width: '100p', + height: 220, + bg: colors['200'], + fg: colors['500'] + } + + constructor(props) { + super(props); + + this.domId = `holderjs--${uid()}`; + } + + componentDidMount() { + this.initPlaceholder(); + + if (typeof window !== 'undefined') { + window.onload = this.initPlaceholder.bind(this); + } + } + + componentDidUpdate() { + this.initPlaceholder(); + } + + initPlaceholder() { + if ( + typeof window !== 'undefined' && + typeof document !== 'undefined' && + document.readyState === 'complete' + ) { + const Holder = require('holderjs'); + const domElement = document.getElementById(this.domId); + + if (domElement) { + Holder.run({ + domain: 'holder.js', + images: domElement, + object: null, + bgnodes: null, + stylenodes: null + }) + + return true; + } + } + + return false; + } + + render() { + const onlyChild = React.Children.only(this.props.children); + + const phProps = _.omit(this.props, ['children', 'width', 'height']); + const phPropsQuery = qs.stringify(phProps); + + return React.cloneElement(onlyChild, { + 'id': this.domId, + 'data-src': `holder.js/${this.props.width}x${this.props.height}?${phPropsQuery}` + }); + } +} + +export { HolderTextProvider }; + diff --git a/app/components/HolderProvider/index.js b/app/components/HolderProvider/index.js new file mode 100755 index 0000000..2e1a578 --- /dev/null +++ b/app/components/HolderProvider/index.js @@ -0,0 +1,10 @@ +import { HolderTextProvider } from './HolderTextProvider'; +import { HolderIconProvider } from './HolderIconProvider'; + +const HolderProvider = { + Text: HolderTextProvider, + Icon: HolderIconProvider +}; + +export default HolderProvider; + diff --git a/app/components/IconWithBadge/IconWithBadge.js b/app/components/IconWithBadge/IconWithBadge.js new file mode 100755 index 0000000..8fe771d --- /dev/null +++ b/app/components/IconWithBadge/IconWithBadge.js @@ -0,0 +1,27 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +const IconWithBadge = (props) => { + const { badge, children, className } = props; + const adjustedBadge = React.cloneElement(badge, { + className: classNames( + badge.props.className, + 'icon-with-badge__badge' + ) + }); + const wrapClass = classNames(className, 'icon-with-badge'); + return ( +
+ { children } + { adjustedBadge } +
+ ); +}; +IconWithBadge.propTypes = { + badge: PropTypes.node, + children: PropTypes.node, + className: PropTypes.string +}; + +export { IconWithBadge }; diff --git a/app/components/IconWithBadge/index.js b/app/components/IconWithBadge/index.js new file mode 100755 index 0000000..6ba6ddd --- /dev/null +++ b/app/components/IconWithBadge/index.js @@ -0,0 +1,3 @@ +import { IconWithBadge } from './IconWithBadge'; + +export default IconWithBadge; diff --git a/app/components/InputGroupAddon/InputGroupAddon.js b/app/components/InputGroupAddon/InputGroupAddon.js new file mode 100755 index 0000000..227753b --- /dev/null +++ b/app/components/InputGroupAddon/InputGroupAddon.js @@ -0,0 +1,33 @@ +import React from 'react'; +import _ from 'lodash'; + +import { + InputGroupAddon as BsInputGroupAddon +} from 'reactstrap'; + +const InputGroupAddon = (props) => { + const { children, ...otherProps } = props; + const childArr = React.Children.toArray(children); + const isFa = _.some(childArr, (child) => + React.isValidElement(child) && child.props.className && _.includes(child.props.className, 'fa')); + const isCheckRadio = _.some(childArr, (child) => + React.isValidElement(child) && (child.props.type === 'radio' || child.props.type === 'checkbox')); + + let child = isFa || isCheckRadio ? ( +
+ { children } +
+ ) : children; + + return ( + + { child } + + ); +} +InputGroupAddon.propTypes = { + ...BsInputGroupAddon.propTypes +}; +InputGroupAddon.defaultProps = BsInputGroupAddon.defaultProps; + +export { InputGroupAddon }; diff --git a/app/components/InputGroupAddon/index.js b/app/components/InputGroupAddon/index.js new file mode 100755 index 0000000..2a0bf30 --- /dev/null +++ b/app/components/InputGroupAddon/index.js @@ -0,0 +1,3 @@ +import { InputGroupAddon } from './InputGroupAddon'; + +export default InputGroupAddon; \ No newline at end of file diff --git a/app/components/Layout/Layout.js b/app/components/Layout/Layout.js new file mode 100755 index 0000000..10efd3a --- /dev/null +++ b/app/components/Layout/Layout.js @@ -0,0 +1,275 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { Helmet } from 'react-helmet'; +import { withRouter } from 'react-router-dom'; +import _ from 'lodash'; + +import { LayoutContent } from './LayoutContent'; +import { LayoutNavbar } from './LayoutNavbar'; +import { LayoutSidebar } from './LayoutSidebar'; +import { PageConfigContext } from './PageConfigContext'; +import { ThemeClass } from './../Theme'; + +import config from './../../../config'; + +const findChildByType = (children, targetType) => { + let result; + + React.Children.forEach(children, (child) => { + if (child.type.layoutPartName === targetType.layoutPartName) { + result = child; + } + }); + + return result; +}; +const findChildrenByType = (children, targetType) => { + return _.filter(React.Children.toArray(children), (child) => + child.type.layoutPartName === targetType.layoutPartName); +}; + +const responsiveBreakpoints = { + 'xs': { max: 575.8 }, + 'sm': { min: 576, max: 767.8 }, + 'md': { min: 768, max: 991.8 }, + 'lg': { min: 992, max: 1199.8 }, + 'xl': { min: 1200 } +}; + +class Layout extends React.Component { + static propTypes = { + children: PropTypes.node, + sidebarSlim: PropTypes.bool, + location: PropTypes.object, + favIcons: PropTypes.array + } + + constructor(props) { + super(props); + + this.state = { + sidebarHidden: false, + navbarHidden: false, + footerHidden: false, + sidebarCollapsed: false, + screenSize: '', + animationsDisabled: true, + + pageTitle: null, + pageDescription: config.siteDescription, + pageKeywords: config.siteKeywords + }; + + this.lastLgSidebarCollapsed = false; + this.containerRef = React.createRef(); + } + + componentDidMount() { + // Determine the current window size + // and set it up in the context state + const layoutAdjuster = () => { + const { screenSize } = this.state; + let currentScreenSize; + + _.forOwn(responsiveBreakpoints, (value, key) => { + const queryParts = [ + `${ _.isUndefined(value.min) ? '' : `(min-width: ${value.min}px)` }`, + `${ _.isUndefined(value.max) ? '' : `(max-width: ${value.max}px)`}` + ]; + const query = _.compact(queryParts).join(' and '); + + if (window.matchMedia(query).matches) { + currentScreenSize = key; + } + }); + + if (screenSize !== currentScreenSize) { + this.setState({ screenSize: currentScreenSize }); + this.updateLayoutOnScreenSize(currentScreenSize); + } + }; + + // Add window initialization + if (typeof window !== 'undefined') { + window.addEventListener('resize', () => { + setTimeout(layoutAdjuster.bind(this), 0); + }); + + layoutAdjuster(); + + window.requestAnimationFrame(() => { + this.setState({ animationsDisabled: false }); + }); + } + // Add document initialization + if (typeof document !== 'undefined') { + this.bodyElement = document.body; + this.documentElement = document.documentElement; + } + } + + componentDidUpdate(prevProps, prevState) { + // Prevent content scrolling in overlay mode + if ( + this.bodyElement && this.documentElement && ( + this.state.screenSize === 'xs' || + this.state.screenSize === 'sm' || + this.state.screenSize === 'md' + ) + ) { + if (prevState.sidebarCollapsed !== this.state.sidebarCollapsed) { + // Most of the devices + const styleUpdate = this.state.sidebarCollapsed ? { + overflowY: 'auto', + touchAction: 'auto' + }: { + overflowY: 'hidden', + touchAction: 'none' + } + Object.assign(this.bodyElement.style, styleUpdate); + Object.assign(this.documentElement.style, styleUpdate); + } + } + + // After location change + if (prevProps.location.pathname !== this.props.location.pathname) { + // Scroll to top + if (this.bodyElement && this.documentElement) { + this.documentElement.scrollTop = this.bodyElement.scrollTop = 0; + } + + // Hide the sidebar when in overlay mode + if ( + !this.state.sidebarCollapsed && ( + this.state.screenSize === 'xs' || + this.state.screenSize === 'sm' || + this.state.screenSize === 'md' + ) + ) { + // Add some time to prevent jank while the dom is updating + setTimeout(() => { + this.setState({ sidebarCollapsed: true }); + }, 100); + } + } + + // Update positions of STICKY navbars + this.updateNavbarsPositions(); + } + + updateLayoutOnScreenSize(screenSize) { + if ( + screenSize === 'md' || + screenSize === 'sm' || + screenSize === 'xs' + ) { + // Save for recovering to lg later + this.lastLgSidebarCollapsed = this.state.sidebarCollapsed; + this.setState({ sidebarCollapsed: true }); + } else { + this.setState({ sidebarCollapsed: this.lastLgSidebarCollapsed }); + } + } + + updateNavbarsPositions() { + // eslint-disable-next-line react/no-find-dom-node + const containerElement = ReactDOM.findDOMNode(this.containerRef.current); + if (containerElement) { + const navbarElements = containerElement.querySelectorAll(":scope .layout__navbar"); + + // Calculate and update style.top of each navbar + let totalNavbarsHeight = 0; + navbarElements.forEach((navbarElement) => { + const navbarBox = navbarElement.getBoundingClientRect(); + navbarElement.style.top = `${totalNavbarsHeight}px`; + totalNavbarsHeight += navbarBox.height; + }); + } + } + + toggleSidebar() { + this.setState({ + sidebarCollapsed: !this.state.sidebarCollapsed + }); + } + + setElementsVisibility(elements) { + this.setState(_.pick(elements, ['sidebarHidden', 'navbarHidden', 'footerHidden'])); + } + + render() { + const { children, favIcons } = this.props; + const sidebar = findChildByType(children, LayoutSidebar); + const navbars = findChildrenByType(children, LayoutNavbar); + const content = findChildByType(children, LayoutContent); + const otherChildren = _.differenceBy( + React.Children.toArray(children), + [ + sidebar, + ...navbars, + content + ], + 'type' + ); + const layoutClass = classNames('layout', 'layout--animations-enabled', { + //'layout--only-navbar': this.state.sidebarHidden && !this.state.navbarHidden + }); + + return ( + { this.setState(metaData) } + }} + > + + + { config.siteTitle + (this.state.pageTitle ? ` - ${this.state.pageTitle}` : '') } + + + { + _.map(favIcons, (favIcon, index) => ( + + )) + } + + + + {(themeClass) => ( +
+ { + !this.state.sidebarHidden && sidebar && React.cloneElement(sidebar, { + sidebarSlim: !!this.props.sidebarSlim && this.state.sidebarCollapsed && ( + this.state.screenSize === 'lg' || this.state.screenSize === 'xl' + ), + sidebarCollapsed: !this.props.sidebarSlim && this.state.sidebarCollapsed + }) + } + +
+ { !this.state.navbarHidden && navbars } + + { content } +
+ + { otherChildren } +
+ )} + + + ); + } +} + +const routedLayout = withRouter(Layout); + +export { routedLayout as Layout }; diff --git a/app/components/Layout/LayoutContent.js b/app/components/Layout/LayoutContent.js new file mode 100755 index 0000000..a95ae51 --- /dev/null +++ b/app/components/Layout/LayoutContent.js @@ -0,0 +1,17 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const LayoutContent = (props) => ( +
+ { props.children } +
+); + +LayoutContent.propTypes = { + children: PropTypes.node +}; +LayoutContent.layoutPartName = "content"; + +export { + LayoutContent +}; diff --git a/app/components/Layout/LayoutNavbar.js b/app/components/Layout/LayoutNavbar.js new file mode 100755 index 0000000..03acc24 --- /dev/null +++ b/app/components/Layout/LayoutNavbar.js @@ -0,0 +1,23 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const LayoutNavbar = (props) => { + const navbar = React.Children.only(props.children); + + return ( +
+ { + React.cloneElement(navbar, { fixed: null }) + } +
+ ); +}; + +LayoutNavbar.propTypes = { + children: PropTypes.node +}; +LayoutNavbar.layoutPartName = "navbar"; + +export { + LayoutNavbar +}; diff --git a/app/components/Layout/LayoutSidebar.js b/app/components/Layout/LayoutSidebar.js new file mode 100755 index 0000000..8f4dfea --- /dev/null +++ b/app/components/Layout/LayoutSidebar.js @@ -0,0 +1,27 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +const LayoutSidebar = (props) => { + const sidebarClass = classNames("layout__sidebar", { + "layout__sidebar--slim": props.sidebarSlim, + "layout__sidebar--collapsed": props.sidebarCollapsed + }); + + return ( +
+ { props.children } +
+ ); +}; + +LayoutSidebar.propTypes = { + children: PropTypes.node, + sidebarSlim: PropTypes.bool, + sidebarCollapsed: PropTypes.bool +}; +LayoutSidebar.layoutPartName = "sidebar"; + +export { + LayoutSidebar +}; diff --git a/app/components/Layout/PageConfigContext.js b/app/components/Layout/PageConfigContext.js new file mode 100755 index 0000000..2e99100 --- /dev/null +++ b/app/components/Layout/PageConfigContext.js @@ -0,0 +1,7 @@ +import React from 'react'; + +const PageConfigContext = React.createContext(); + +export { + PageConfigContext +}; diff --git a/app/components/Layout/index.js b/app/components/Layout/index.js new file mode 100755 index 0000000..078e211 --- /dev/null +++ b/app/components/Layout/index.js @@ -0,0 +1,17 @@ +import { Layout } from './Layout'; +import { LayoutContent } from './LayoutContent'; +import { LayoutNavbar } from './LayoutNavbar'; +import { LayoutSidebar } from './LayoutSidebar'; +import { withPageConfig } from './withPageConfig'; +import { setupPage } from './setupPage'; +import { PageConfigContext } from './PageConfigContext'; + +Layout.Sidebar = LayoutSidebar; +Layout.Navbar = LayoutNavbar; +Layout.Content = LayoutContent; + +const PageConfigProvider = PageConfigContext.Provider; +const PageConfigConsumer = PageConfigContext.Consumer; + +export default Layout; +export { withPageConfig, setupPage, PageConfigProvider, PageConfigConsumer }; diff --git a/app/components/Layout/setupPage.js b/app/components/Layout/setupPage.js new file mode 100755 index 0000000..5b0c571 --- /dev/null +++ b/app/components/Layout/setupPage.js @@ -0,0 +1,30 @@ +import React from 'react'; +import _ from 'lodash'; +import PropTypes from 'prop-types'; +import { withPageConfig } from './withPageConfig' + +export const setupPage = (startupConfig) => + (Component) => { + class PageSetupWrap extends React.Component { + static propTypes = { + pageConfig: PropTypes.object + } + componentDidMount() { + this.prevConfig = _.pick(this.props.pageConfig, + ['pageTitle', 'pageDescription', 'pageKeywords']); + this.props.pageConfig.changeMeta(startupConfig); + } + + componentWillUnmount() { + this.props.pageConfig.changeMeta(this.prevConfig); + } + + render() { + return ( + + ) + } + } + + return withPageConfig(PageSetupWrap); + }; \ No newline at end of file diff --git a/app/components/Layout/withPageConfig.js b/app/components/Layout/withPageConfig.js new file mode 100755 index 0000000..6ace786 --- /dev/null +++ b/app/components/Layout/withPageConfig.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { PageConfigContext } from './PageConfigContext'; + +export const withPageConfig = (Component) => { + const WithPageConfig = (props) => ( + + { + (pageConfig) => + } + + ); + return WithPageConfig; +}; diff --git a/app/components/Nav/index.js b/app/components/Nav/index.js new file mode 100755 index 0000000..2cdd24f --- /dev/null +++ b/app/components/Nav/index.js @@ -0,0 +1,3 @@ +import { Nav } from './nav'; + +export default Nav; diff --git a/app/components/Nav/nav.js b/app/components/Nav/nav.js new file mode 100755 index 0000000..10b12e2 --- /dev/null +++ b/app/components/Nav/nav.js @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { Nav as BsNav } from 'reactstrap'; + +const Nav = ({ accent, className, ...otherProps }) => { + return ( + + ); +}; +Nav.propTypes = { + ...BsNav.propTypes, + accent: PropTypes.bool, +}; +Nav.defaultProps = { + accent: false +}; + +export { Nav }; diff --git a/app/components/Navbar/index.js b/app/components/Navbar/index.js new file mode 100755 index 0000000..f38595f --- /dev/null +++ b/app/components/Navbar/index.js @@ -0,0 +1,3 @@ +import { Navbar } from './navbar'; + +export default Navbar; \ No newline at end of file diff --git a/app/components/Navbar/navbar.js b/app/components/Navbar/navbar.js new file mode 100755 index 0000000..8bd47e5 --- /dev/null +++ b/app/components/Navbar/navbar.js @@ -0,0 +1,63 @@ +import React from 'react'; +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import { Navbar as BSNavbar, Container } from 'reactstrap'; + +const Navbar = ({ + themed, + fluid, + shadow, + className, + children, + dark, + light, + color, + ...otherProps +}) => { + let navbarClass = classNames({ + 'navbar-themed': themed || !!color, + 'navbar-shadow': shadow, + }, 'navbar-multi-collapse', className); + + // When a combination of light or dark is present + // with a color - use a custom class instead of bootstrap's + if ((dark || light) && color) { + navbarClass = classNames(navbarClass, + `navbar-${light ? 'light' : '' }${dark ? 'dark' : ''}-${color}`); + } + + return ( + + { + + { children } + + } + + ) +}; +Navbar.propTypes = { + themed: PropTypes.bool, + fluid: PropTypes.bool, + shadow: PropTypes.bool, + className: PropTypes.string, + children: PropTypes.node, + color: PropTypes.string, + dark: PropTypes.bool, + light: PropTypes.bool +} +Navbar.defaultProps = { + fluid: false, + themed: false, +} + +export { Navbar }; diff --git a/app/components/NavbarThemeProvider/NavbarThemeProvider.js b/app/components/NavbarThemeProvider/NavbarThemeProvider.js new file mode 100755 index 0000000..5c94c20 --- /dev/null +++ b/app/components/NavbarThemeProvider/NavbarThemeProvider.js @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +const NavbarThemeProvider = ({ style, color, children, className }) => { + const isSingleChild = React.Children.count(children) === 1; + const themeClass = `navbar-${style}-${color}`; + + if (isSingleChild) { + const child = React.Children.only(children); + + return React.cloneElement(child, { + className: classNames( + child.props.className, + themeClass + ), + }); + } else { + return ( +
+ { children } +
+ ); + } +}; +NavbarThemeProvider.propTypes = { + children: PropTypes.node.isRequired, + style: PropTypes.string, + color: PropTypes.string, +}; +NavbarThemeProvider.defaultProps = { + style: 'light', + color: 'primary', +}; + +export { NavbarThemeProvider }; diff --git a/app/components/NavbarThemeProvider/index.js b/app/components/NavbarThemeProvider/index.js new file mode 100755 index 0000000..cca269d --- /dev/null +++ b/app/components/NavbarThemeProvider/index.js @@ -0,0 +1,3 @@ +import { NavbarThemeProvider } from './NavbarThemeProvider'; + +export default NavbarThemeProvider; diff --git a/app/components/NestedDropdown/NestedDropdown.js b/app/components/NestedDropdown/NestedDropdown.js new file mode 100755 index 0000000..d2cf1b0 --- /dev/null +++ b/app/components/NestedDropdown/NestedDropdown.js @@ -0,0 +1,52 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { UncontrolledDropdown } from 'reactstrap'; + +import { Provider } from './context'; + +export class NestedDropdown extends React.Component { + constructor(props) { + super(props); + + this.state = { + openId: null + } + } + + handleOpen(targetId) { + this.setState({ + openId: targetId + }); + } + + render() { + const { tag: Tag, className, children, ...otherProps } = this.props; + const dropdownClass = classNames(className, 'nested-dropdown'); + + return ( + + + { children } + + + ); + } +} + +NestedDropdown.propTypes = { + tag: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func + ]), + className: PropTypes.string, + children: PropTypes.node +}; +NestedDropdown.defaultProps = { + tag: UncontrolledDropdown +}; diff --git a/app/components/NestedDropdown/NestedDropdownSubmenu.js b/app/components/NestedDropdown/NestedDropdownSubmenu.js new file mode 100755 index 0000000..065e68d --- /dev/null +++ b/app/components/NestedDropdown/NestedDropdownSubmenu.js @@ -0,0 +1,82 @@ +import React from 'react'; +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import uuid from 'uuid/v4'; + +import { Consumer } from './context'; + +class NestedDropdownSubmenu extends React.Component { + componentDidMount() { + this.id = uuid(); + } + + render() { + const { + tag: Tag, + subMenuTag: SubMenuTag, + title, + children, + className, + openId, + onOpen + } = this.props; + const itemClass = classNames(className, 'nested-dropdown__submenu-item', { + 'nested-dropdown__submenu-item--open': openId === this.id + }); + const linkClass = classNames('nested-dropdown__submenu-item__link', 'dropdown-item'); + + return ( + + { onOpen(this.id) } } + > + { title } + +
+ + { children } + +
+ + ); + } +} +NestedDropdownSubmenu.propTypes = { + children: PropTypes.node, + title: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.node + ]), + tag: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func + ]), + subMenuTag: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func + ]), + className: PropTypes.string, + // Context Provided: + openId: PropTypes.string, + onOpen: PropTypes.func.isRequired +}; +NestedDropdownSubmenu.defaultProps = { + tag: "div", + subMenuTag: "div" +}; + +const ContextNestedDropdownSubmenu = (props) => ( + + { + (contextProps) => ( + + ) + } + +); + +export { + ContextNestedDropdownSubmenu as NestedDropdownSubmenu +}; diff --git a/app/components/NestedDropdown/context.js b/app/components/NestedDropdown/context.js new file mode 100755 index 0000000..879899c --- /dev/null +++ b/app/components/NestedDropdown/context.js @@ -0,0 +1,8 @@ +import React from 'react'; + +const { Consumer, Provider } = React.createContext(); + +export { + Consumer, + Provider +}; diff --git a/app/components/NestedDropdown/index.js b/app/components/NestedDropdown/index.js new file mode 100755 index 0000000..f0e4788 --- /dev/null +++ b/app/components/NestedDropdown/index.js @@ -0,0 +1,6 @@ +import { NestedDropdown } from './NestedDropdown'; +import { NestedDropdownSubmenu } from './NestedDropdownSubmenu'; + +NestedDropdown.Submenu = NestedDropdownSubmenu; + +export default NestedDropdown; diff --git a/app/components/OuterClick/OuterClick.js b/app/components/OuterClick/OuterClick.js new file mode 100755 index 0000000..bd95fa8 --- /dev/null +++ b/app/components/OuterClick/OuterClick.js @@ -0,0 +1,76 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ReactDOM from 'react-dom'; +import _ from 'lodash'; + +// Safely gets the browser document object, +// returns a simple mock for server rendering purposes +const getDocument = () => + typeof document === 'undefined' ? + { + querySelector() { return null; } + } : document + +/* + Calls an EventHandler when User clicks outside of the child element +*/ +class OuterClick extends React.Component { + static propTypes = { + onClickOutside: PropTypes.func, + children: PropTypes.node, + excludedElements: PropTypes.array, + active: PropTypes.bool + } + + static defaultProps = { + onClickOutside: () => { }, + excludedElements: [], + active: true + } + + componentDidMount() { + this.rootElement = getDocument().querySelector('body'); + + if (this.rootElement) { + this.rootElement.addEventListener('click', this.handleDocumentClick); + this.rootElement.addEventListener('touchstart', this.handleDocumentClick); + } + } + + componentWillUnmount() { + if (this.rootElement) { + this.rootElement.removeEventListener('click', this.handleDocumentClick); + this.rootElement.removeEventListener('touchstart', this.handleDocumentClick); + } + } + + assignRef(elementRef) { + this.elementRef = elementRef; + } + + handleDocumentClick = (evt) => { + if(this.props.active) { + // eslint-disable-next-line react/no-find-dom-node + const domElement = ReactDOM.findDOMNode(this.elementRef); + + const isExcluded = _.some(this.props.excludedElements, + // eslint-disable-next-line react/no-find-dom-node + (element) => element && ReactDOM.findDOMNode(element).contains(evt.target)); + + if (!isExcluded && !domElement.contains(evt.target)) { + this.props.onClickOutside(evt); + } + } + } + + render() { + const onlyChild = React.Children.only(this.props.children); + + const updatedChild = React.isValidElement(onlyChild) ? + React.cloneElement(onlyChild, { ref: this.assignRef.bind(this) }) : onlyChild; + + return updatedChild; + } +} + +export { OuterClick }; \ No newline at end of file diff --git a/app/components/OuterClick/index.js b/app/components/OuterClick/index.js new file mode 100755 index 0000000..48381dc --- /dev/null +++ b/app/components/OuterClick/index.js @@ -0,0 +1,3 @@ +import { OuterClick } from './OuterClick'; + +export default OuterClick; \ No newline at end of file diff --git a/app/components/PageLoader/PageLoader.js b/app/components/PageLoader/PageLoader.js new file mode 100755 index 0000000..e171263 --- /dev/null +++ b/app/components/PageLoader/PageLoader.js @@ -0,0 +1,9 @@ +import React from 'react'; + +import classes from './PageLoader.scss'; + +const PageLoader = () => ( +
Loading...
+); + +export default PageLoader; \ No newline at end of file diff --git a/app/components/PageLoader/PageLoader.scss b/app/components/PageLoader/PageLoader.scss new file mode 100755 index 0000000..70b8265 --- /dev/null +++ b/app/components/PageLoader/PageLoader.scss @@ -0,0 +1,9 @@ +.pageLoader { + background-color: cyan; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 1000; +} \ No newline at end of file diff --git a/app/components/PageLoader/index.js b/app/components/PageLoader/index.js new file mode 100755 index 0000000..a09a919 --- /dev/null +++ b/app/components/PageLoader/index.js @@ -0,0 +1,3 @@ +import PageLoader from './PageLoader'; + +export default PageLoader; \ No newline at end of file diff --git a/app/components/Progress/Progress.js b/app/components/Progress/Progress.js new file mode 100755 index 0000000..2f0ce31 --- /dev/null +++ b/app/components/Progress/Progress.js @@ -0,0 +1,30 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { + Progress as BsProgress +} from 'reactstrap'; + +import classes from './Progress.scss'; + +const Progress = (props) => { + const { children, slim, className, ...otherProps } = props; + const progressClass = classNames(className, { + [classes['slim']]: slim + }); + + return ( + + { !slim && children } + + ); +}; + +Progress.propTypes = { + slim: PropTypes.bool, + className: PropTypes.string, + children: PropTypes.node +}; + +export { Progress }; \ No newline at end of file diff --git a/app/components/Progress/Progress.scss b/app/components/Progress/Progress.scss new file mode 100755 index 0000000..8e1f067 --- /dev/null +++ b/app/components/Progress/Progress.scss @@ -0,0 +1,3 @@ +.slim { + height: 0.3rem; +} \ No newline at end of file diff --git a/app/components/Progress/index.js b/app/components/Progress/index.js new file mode 100755 index 0000000..4935ac0 --- /dev/null +++ b/app/components/Progress/index.js @@ -0,0 +1,3 @@ +import { Progress } from './Progress'; + +export default Progress; diff --git a/app/components/Recharts/CartesianGrid.js b/app/components/Recharts/CartesianGrid.js new file mode 100755 index 0000000..1c3ddfd --- /dev/null +++ b/app/components/Recharts/CartesianGrid.js @@ -0,0 +1,12 @@ +import { CartesianGrid } from 'recharts'; + +import styleConfig from './config'; + +class CustomCartesianGrid extends CartesianGrid { + static defaultProps = { + ...CartesianGrid.defaultProps, + ...styleConfig.grid, + } +} + +export { CustomCartesianGrid as CartesianGrid }; diff --git a/app/components/Recharts/DefAreaValueColor.js b/app/components/Recharts/DefAreaValueColor.js new file mode 100755 index 0000000..32e5616 --- /dev/null +++ b/app/components/Recharts/DefAreaValueColor.js @@ -0,0 +1,40 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import colors from './../../colors'; + +const gradientOffset = (data) => { + const dataMax = Math.max(...data.map((i) => i.uv)); + const dataMin = Math.min(...data.map((i) => i.uv)); + + if (dataMax <= 0){ + return 0 + } + else if (dataMin >= 0){ + return 1 + } + else{ + return dataMax / (dataMax - dataMin); + } +} + +export const DefAreaValueColor = (props) => { + const offset = gradientOffset(props.data); + + return ( + + + + + ); +}; +DefAreaValueColor.propTypes = { + positiveColor: PropTypes.string, + negativeColor: PropTypes.string, + id: PropTypes.string.isRequired, + data: PropTypes.array.isRequired +}; +DefAreaValueColor.defaultProps = { + positiveColor: colors['success-07'], + negativeColor: colors['danger-07'] +}; diff --git a/app/components/Recharts/Legend.js b/app/components/Recharts/Legend.js new file mode 100755 index 0000000..b393ebf --- /dev/null +++ b/app/components/Recharts/Legend.js @@ -0,0 +1,10 @@ +import { Legend as RCLegend } from 'recharts'; + +import styleConfig from './config'; + +export class Legend extends RCLegend { + static defaultProps = { + ...RCLegend.defaultProps, + ...styleConfig.legend + } +} \ No newline at end of file diff --git a/app/components/Recharts/PieValueLabel.js b/app/components/Recharts/PieValueLabel.js new file mode 100755 index 0000000..faa115c --- /dev/null +++ b/app/components/Recharts/PieValueLabel.js @@ -0,0 +1,35 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import config from './config'; + +const RADIAN = Math.PI / 180; + +export const PieValueLabel = (props) => { + const { cx, cy, midAngle, innerRadius, outerRadius, percent, color } = props; + const radius = innerRadius + (outerRadius - innerRadius) * 0.5; + const x = cx + radius * Math.cos(-midAngle * RADIAN); + const y = cy + radius * Math.sin(-midAngle * RADIAN); + + return ( + cx ? 'start' : 'end' } + dominantBaseline="central" + fill={ props.color || config.pieLabel.fill } + fontSize={ config.pieLabel.fontSize } + > + {`${(percent * 100).toFixed(0)}%`} + + ); +}; +PieValueLabel.propTypes = { + cx: PropTypes.number, + cy: PropTypes.number, + midAngle: PropTypes.number, + innerRadius: PropTypes.number, + outerRadius: PropTypes.number, + percent: PropTypes.number, + color: PropTypes.string +}; diff --git a/app/components/Recharts/PolarAngleAxis.js b/app/components/Recharts/PolarAngleAxis.js new file mode 100755 index 0000000..cde75f8 --- /dev/null +++ b/app/components/Recharts/PolarAngleAxis.js @@ -0,0 +1,10 @@ +import { PolarAngleAxis as RCPolarAngleAxis} from 'recharts'; + +import styleConfig from './config'; + +export class PolarAngleAxis extends RCPolarAngleAxis { + static defaultProps = { + ...RCPolarAngleAxis.defaultProps, + ...styleConfig.polarAngleAxis + } +} \ No newline at end of file diff --git a/app/components/Recharts/PolarGrid.js b/app/components/Recharts/PolarGrid.js new file mode 100755 index 0000000..8b58504 --- /dev/null +++ b/app/components/Recharts/PolarGrid.js @@ -0,0 +1,12 @@ +import { PolarGrid } from 'recharts'; + +import styleConfig from './config'; + +class CustomPolarGrid extends PolarGrid { + static defaultProps = { + ...PolarGrid.defaultProps, + ...styleConfig.polarGrid + } +} + +export { CustomPolarGrid as PolarGrid }; diff --git a/app/components/Recharts/PolarRadiusAxis.js b/app/components/Recharts/PolarRadiusAxis.js new file mode 100755 index 0000000..196daaf --- /dev/null +++ b/app/components/Recharts/PolarRadiusAxis.js @@ -0,0 +1,10 @@ +import { PolarRadiusAxis as RCPolarRadiusAxis} from 'recharts'; + +import styleConfig from './config'; + +export class PolarRadiusAxis extends RCPolarRadiusAxis { + static defaultProps = { + ...RCPolarRadiusAxis.defaultProps, + ...styleConfig.polarRadiusAxis + } +} \ No newline at end of file diff --git a/app/components/Recharts/Tooltip.js b/app/components/Recharts/Tooltip.js new file mode 100755 index 0000000..826d905 --- /dev/null +++ b/app/components/Recharts/Tooltip.js @@ -0,0 +1,10 @@ +import { Tooltip as RCTooltip } from 'recharts'; + +import styleConfig from './config'; + +export class Tooltip extends RCTooltip { + static defaultProps = { + ...RCTooltip.defaultProps, + ...styleConfig.tooltip + } +} \ No newline at end of file diff --git a/app/components/Recharts/ValueLabel.js b/app/components/Recharts/ValueLabel.js new file mode 100755 index 0000000..45117c2 --- /dev/null +++ b/app/components/Recharts/ValueLabel.js @@ -0,0 +1,20 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import config from './config'; + +export const ValueLabel = (props) => + + { props.value } + ; + +ValueLabel.propTypes = { + value: PropTypes.number, + x: PropTypes.number, + y: PropTypes.number +}; \ No newline at end of file diff --git a/app/components/Recharts/XAxis.js b/app/components/Recharts/XAxis.js new file mode 100755 index 0000000..354e265 --- /dev/null +++ b/app/components/Recharts/XAxis.js @@ -0,0 +1,10 @@ +import { XAxis as RCXAxis } from 'recharts'; + +import styleConfig from './config'; + +export class XAxis extends RCXAxis { + static defaultProps = { + ...RCXAxis.defaultProps, + ...styleConfig.axis + } +} \ No newline at end of file diff --git a/app/components/Recharts/YAxis.js b/app/components/Recharts/YAxis.js new file mode 100755 index 0000000..a250de8 --- /dev/null +++ b/app/components/Recharts/YAxis.js @@ -0,0 +1,10 @@ +import { YAxis as RCYAxis } from 'recharts'; + +import styleConfig from './config'; + +export class YAxis extends RCYAxis { + static defaultProps = { + ...RCYAxis.defaultProps, + ...styleConfig.axis + } +} \ No newline at end of file diff --git a/app/components/Recharts/ZAxis.js b/app/components/Recharts/ZAxis.js new file mode 100755 index 0000000..f552f67 --- /dev/null +++ b/app/components/Recharts/ZAxis.js @@ -0,0 +1,10 @@ +import { ZAxis as RCZAxis } from 'recharts'; + +import styleConfig from './config'; + +export class ZAxis extends RCZAxis { + static defaultProps = { + ...RCZAxis.defaultProps, + ...styleConfig.axis + } +} diff --git a/app/components/Recharts/config.js b/app/components/Recharts/config.js new file mode 100755 index 0000000..9dcf174 --- /dev/null +++ b/app/components/Recharts/config.js @@ -0,0 +1,61 @@ +// ReCharts styling configuration +import colors from './../../colors'; + +export default { + grid: { + stroke: colors['400'], + strokeWidth: 1, + strokeDasharray: '1px' + }, + polarGrid: { + stroke: colors['400'], + }, + axis: { + stroke: colors['500'], + strokeWidth: 1, + style: { + fontSize: '12px' + }, + tick: { + // Axis Labels color: + fill: colors['900'] + } + }, + polarRadiusAxis: { + stroke: colors['400'], + tick: { + fill: colors['900'] + } + }, + polarAngleAxis: { + tick: { + fill: colors['900'] + }, + style: { + fontSize: '12px' + } + }, + label: { + fontSize: 11, + fill: colors['900'] + }, + legend: { + wrapperStyle: { + color: colors['900'] + } + }, + pieLabel: { + fontSize: 12, + fill: colors[100] + }, + tooltip: { + cursor: { + fill: colors['primary-01'] + }, + contentStyle: { + background: colors['900'], + border: `1px solid ${colors['900']}`, + color: colors['white'] + } + } +}; \ No newline at end of file diff --git a/app/components/Sidebar/Sidebar.js b/app/components/Sidebar/Sidebar.js new file mode 100755 index 0000000..99590bb --- /dev/null +++ b/app/components/Sidebar/Sidebar.js @@ -0,0 +1,38 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import OuterClick from './../OuterClick'; +import { withPageConfig } from './../Layout'; +import { SidebarContent } from './SidebarContent'; + +const Sidebar = (props) => ( + + { /* Enable OuterClick only in sidebar overlay mode */} + props.pageConfig.toggleSidebar() } + > + + + +); + +Sidebar.propTypes = { + children: PropTypes.node, + slim: PropTypes.bool, + collapsed: PropTypes.bool, + animationsDisabled: PropTypes.bool, + pageConfig: PropTypes.object +}; + +const cfgSidebar = withPageConfig(Sidebar); + +export { + cfgSidebar as Sidebar +}; diff --git a/app/components/Sidebar/SidebarClose.js b/app/components/Sidebar/SidebarClose.js new file mode 100755 index 0000000..0bb64a3 --- /dev/null +++ b/app/components/Sidebar/SidebarClose.js @@ -0,0 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const SidebarClose = (props) => ( +
+ { props.children } +
+); +SidebarClose.propTypes = { + children: PropTypes.node +}; + +export { SidebarClose }; \ No newline at end of file diff --git a/app/components/Sidebar/SidebarContent.js b/app/components/Sidebar/SidebarContent.js new file mode 100755 index 0000000..7cec90c --- /dev/null +++ b/app/components/Sidebar/SidebarContent.js @@ -0,0 +1,69 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import Common from './../../common'; + +export class SidebarContent extends React.Component { + static propTypes = { + children: PropTypes.node, + slim: PropTypes.bool, + collapsed: PropTypes.bool, + animationsDisabled: PropTypes.bool, + pageConfig: PropTypes.object + } + + sidebarRef = React.createRef(); + + constructor(props) { + super(props); + + this.state = { + entryAnimationFinished: false, + }; + } + + componentDidMount() { + this.sidebarEntryAnimate = new Common.SidebarEntryAnimate(); + this.slimSidebarAnimate = new Common.SlimSidebarAnimate(); + this.slimMenuAnimate = new Common.SlimMenuAnimate(); + + this.sidebarEntryAnimate.assignParentElement(this.sidebarRef.current); + this.slimSidebarAnimate.assignParentElement(this.sidebarRef.current); + this.slimMenuAnimate.assignSidebarElement(this.sidebarRef.current); + + this.sidebarEntryAnimate.executeAnimation() + .then(() => { + this.setState({ entryAnimationFinished: true }); + }); + } + + componentWillUnmount() { + this.sidebarEntryAnimate.destroy(); + this.slimSidebarAnimate.destroy(); + this.slimMenuAnimate.destroy(); + } + + render() { + const { + animationsDisabled, + collapsed, + pageConfig, + slim, + children, + } = this.props; + + const sidebarClass = classNames('sidebar', 'sidebar--animations-enabled', { + 'sidebar--slim': slim || pageConfig.sidebarSlim, + 'sidebar--collapsed': collapsed || pageConfig.sidebarCollapsed, + 'sidebar--animations-disabled': animationsDisabled || pageConfig.animationsDisabled, + 'sidebar--animate-entry-complete': this.state.entryAnimationFinished, + }); + + return ( +
+ { children } +
+ ); + } +} \ No newline at end of file diff --git a/app/components/Sidebar/SidebarHideSlim.js b/app/components/Sidebar/SidebarHideSlim.js new file mode 100755 index 0000000..df92fe3 --- /dev/null +++ b/app/components/Sidebar/SidebarHideSlim.js @@ -0,0 +1,18 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const SidebarHideSlim = ({ children }) => { + return React.Children.map(children, (child) => + React.cloneElement(child, { + className: classNames( + child.props.className, + 'sidebar__hide-slim' + ) + }) + ); +}; + +SidebarHideSlim.propTypes = { + children: PropTypes.node, +}; diff --git a/app/components/Sidebar/SidebarMobileFluid.js b/app/components/Sidebar/SidebarMobileFluid.js new file mode 100755 index 0000000..0a5d2ed --- /dev/null +++ b/app/components/Sidebar/SidebarMobileFluid.js @@ -0,0 +1,22 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +const SidebarMobileFluid = (props) => { + const wrapClass = classNames("sidebar__mobile-fluid", props.className); + + return ( +
+ { props.children } +
+ ); +}; + +SidebarMobileFluid.propTypes = { + children: PropTypes.node, + className: PropTypes.string +}; + +export { + SidebarMobileFluid +}; diff --git a/app/components/Sidebar/SidebarSection.js b/app/components/Sidebar/SidebarSection.js new file mode 100755 index 0000000..18ec0e1 --- /dev/null +++ b/app/components/Sidebar/SidebarSection.js @@ -0,0 +1,27 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +const SidebarSection = (props) => { + const sectionClass = classNames("sidebar__section", { + 'sidebar__section--fluid': props.fluid, + 'sidebar__section--cover': props.cover + }, props.className); + + return ( +
+ { props.children } +
+ ); +}; + +SidebarSection.propTypes = { + children: PropTypes.node, + fluid: PropTypes.bool, + cover: PropTypes.bool, + className: PropTypes.string +}; + +export { + SidebarSection +}; diff --git a/app/components/Sidebar/SidebarShowSlim.js b/app/components/Sidebar/SidebarShowSlim.js new file mode 100755 index 0000000..70f0447 --- /dev/null +++ b/app/components/Sidebar/SidebarShowSlim.js @@ -0,0 +1,18 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const SidebarShowSlim = ({ children }) => { + return React.Children.map(children, (child) => + React.cloneElement(child, { + className: classNames( + child.props.className, + 'sidebar__show-slim' + ) + }) + ); +}; + +SidebarShowSlim.propTypes = { + children: PropTypes.node, +}; diff --git a/app/components/Sidebar/index.js b/app/components/Sidebar/index.js new file mode 100755 index 0000000..bab74f5 --- /dev/null +++ b/app/components/Sidebar/index.js @@ -0,0 +1,14 @@ +import { Sidebar } from './Sidebar'; +import { SidebarSection } from './SidebarSection'; +import { SidebarClose } from './SidebarClose'; +import { SidebarMobileFluid } from './SidebarMobileFluid'; +import { SidebarShowSlim } from './SidebarShowSlim'; +import { SidebarHideSlim } from './SidebarHideSlim'; + +Sidebar.Section = SidebarSection; +Sidebar.Close = SidebarClose; +Sidebar.MobileFluid = SidebarMobileFluid; +Sidebar.ShowSlim = SidebarShowSlim; +Sidebar.HideSlim = SidebarHideSlim; + +export default Sidebar; \ No newline at end of file diff --git a/app/components/SidebarMenu/MenuContext.js b/app/components/SidebarMenu/MenuContext.js new file mode 100755 index 0000000..2fa2382 --- /dev/null +++ b/app/components/SidebarMenu/MenuContext.js @@ -0,0 +1,9 @@ +import React from 'react'; + +const MenuContext = React.createContext({ + entries: { }, + addEntry: () => { }, + removeEntry: () => { } +}); + +export { MenuContext }; \ No newline at end of file diff --git a/app/components/SidebarMenu/SidebarMenu.js b/app/components/SidebarMenu/SidebarMenu.js new file mode 100755 index 0000000..dbb40a5 --- /dev/null +++ b/app/components/SidebarMenu/SidebarMenu.js @@ -0,0 +1,169 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withRouter } from 'react-router-dom'; +import _ from 'lodash'; +import classNames from 'classnames'; + +import { withPageConfig } from './../Layout/withPageConfig' +import Common from './../../common'; +import { MenuContext } from './MenuContext'; + +class SidebarMenu extends React.Component { + static propTypes = { + children: PropTypes.node, + currentUrl: PropTypes.string, + slim: PropTypes.bool, + location: PropTypes.object, + pageConfig: PropTypes.object, + disabled: PropTypes.bool + } + + containerRef = React.createRef(); + + constructor(props) { + super(props); + + this.state = { + entries: this.entries = { } + }; + } + + addEntry(entry) { + this.setState({ + entries: this.entries = { + ...this.entries, + [entry.id]: { + open: false, + active: false, + ...entry + } + } + }); + } + + updateEntry(id, stateMods) { + this.setState({ + entries: this.entries = { + ...this.state.entries, + [id]: { + ...this.state.entries[id], + ...stateMods + } + } + }); + } + + removeEntry(id) { + // eslint-disable-next-line no-unused-vars + const { [id]: toRemove, ...rest } = this.state.entries; + this.setState({ entries: this.entries = rest }); + } + + setActiveEntries(openActive = false) { + const activeId = (childEntry, entries, previous = []) => { + if (childEntry.parentId) { + const parentEntry = entries[childEntry.parentId]; + const activeIds = [...previous, parentEntry.id]; + return activeId(parentEntry, entries, activeIds); + } + return previous; + } + + const activeChild = _.find(this.state.entries, (entry) => { + const { pathname } = this.props.location; + + const noTailSlashLocation = pathname[pathname.length - 1] === '/' && pathname.length > 1 ? + pathname.replace(/\/$/, '') : pathname; + + return entry.exact ? + entry.url === noTailSlashLocation : + _.includes(noTailSlashLocation, entry.url) + }); + + if (activeChild) { + const activeEntries = [...activeId(activeChild, this.entries), activeChild.id]; + + this.setState({ + entries: this.entries = _.mapValues(this.entries, (entry) => { + const isActive = _.includes(activeEntries, entry.id); + + return { + ...entry, + active: isActive, + open: openActive ? (!entry.url && isActive) : entry.open + }; + }) + }); + } + } + + componentDidMount() { + this.sidebarAnimation = new Common.SideMenuAnimate(); + this.sidebarAnimation.assignParentElement( + this.containerRef.current + ); + + setTimeout(() => { + this.setActiveEntries(true); + }, 0); + } + + componentDidUpdate(prevProps) { + if (this.props.location.pathname !== prevProps.location.pathname) { + this.setActiveEntries(); + } + } + + componentWillUnmount() { + if (this.sidebarAnimation) { + this.sidebarAnimation.destroy(); + } + } + + render() { + const isSlim = this.props.slim || ( + this.props.pageConfig.sidebarSlim && + this.props.pageConfig.sidebarCollapsed && ( + this.props.pageConfig.screenSize === 'lg' || + this.props.pageConfig.screenSize === 'xl' + ) + ); + const sidebarMenuClass = classNames('sidebar-menu', { + 'sidebar-menu--slim': isSlim, + 'sidebar-menu--disabled': this.props.disabled + }); + + return ( + +
    + { + React.Children.map(this.props.children, (child) => + + { + (ctx) => React.cloneElement(child, { + ...ctx, + currentUrl: this.props.location.pathname, + slim: isSlim + }) + } + + ) + } +
+ + ) + } +} + +const RouterSidebarMenu = withPageConfig(withRouter(SidebarMenu)); + +export { + RouterSidebarMenu as SidebarMenu +}; diff --git a/app/components/SidebarMenu/SidebarMenuItem.js b/app/components/SidebarMenu/SidebarMenuItem.js new file mode 100755 index 0000000..3f513a3 --- /dev/null +++ b/app/components/SidebarMenu/SidebarMenuItem.js @@ -0,0 +1,173 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Link } from 'react-router-dom'; +import classNames from 'classnames'; +import uuid from 'uuid/v4'; + +import { MenuContext } from './MenuContext'; + +/** + * Renders a collapse trigger or a ReactRouter Link + */ +const SidebarMenuItemLink = (props) => ( + (props.to || props.href) ? ( + props.to ? ( + + { props.children } + + ) : ( + + { props.children } + + ) + + ) : ( + props.onToggle() } + > + { props.children } + + ) +) +SidebarMenuItemLink.propTypes = { + to: PropTypes.string, + href: PropTypes.string, + active: PropTypes.bool, + onToggle: PropTypes.func, + children: PropTypes.node, + classBase: PropTypes.string +} + +/** + * The main menu entry component + */ +export class SidebarMenuItem extends React.Component { + static propTypes = { + // MenuContext props + addEntry: PropTypes.func, + updateEntry: PropTypes.func, + removeEntry: PropTypes.func, + entries: PropTypes.object, + // Provided props + parentId: PropTypes.string, + children: PropTypes.node, + isSubNode: PropTypes.bool, + currentUrl: PropTypes.string, + slim: PropTypes.bool, + // User props + icon: PropTypes.node, + title: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.node + ]), + to: PropTypes.string, + href: PropTypes.string, + exact: PropTypes.bool, + noCaret: PropTypes.bool, + } + + static defaultProps = { + exact: true + } + + constructor(props) { + super(props); + + this.id = uuid(); + } + + componentDidMount() { + const entry = { + id: this.id, + parentId: this.props.parentId, + exact: !!this.props.exact + }; + + if (this.props.to) { + entry.url = this.props.to; + } + + this.props.addEntry(entry); + } + + componentWillUnmount() { + this.props.removeEntry(this.id); + } + + getEntry() { + return this.props.entries[this.id]; + } + + toggleNode() { + const entry = this.getEntry(); + + this.props.updateEntry(this.id, { open: !entry.open }); + } + + render() { + const entry = this.getEntry(); + const classBase = this.props.isSubNode ? "sidebar-submenu" : "sidebar-menu"; + const itemClass = classNames(`${classBase}__entry`, { + [`${classBase}__entry--nested`]: !!this.props.children, + 'open': entry && entry.open, + 'active': entry && entry.active + }); + + return ( +
  • + + { + this.props.icon && React.cloneElement(this.props.icon, { + className: classNames( + this.props.icon.props.className, + `${classBase}__entry__icon` + ) + }) + } + { + typeof this.props.title === 'string' ? + { this.props.title } : + this.props.title + } + + { + this.props.children && ( +
      + { + React.Children.map(this.props.children, (child) => ( + + { + (ctx) => React.cloneElement(child, { + isSubNode: true, + parentId: this.id, + currentUrl: this.props.currentUrl, + slim: this.props.slim, + ...ctx + }) + } + + )) + } +
    + ) + } +
    • + ); + } +} diff --git a/app/components/SidebarMenu/index.js b/app/components/SidebarMenu/index.js new file mode 100755 index 0000000..739df13 --- /dev/null +++ b/app/components/SidebarMenu/index.js @@ -0,0 +1,6 @@ +import { SidebarMenu } from './SidebarMenu'; +import { SidebarMenuItem } from './SidebarMenuItem'; + +SidebarMenu.Item = SidebarMenuItem; + +export default SidebarMenu; diff --git a/app/components/SidebarTrigger/SidebarTrigger.js b/app/components/SidebarTrigger/SidebarTrigger.js new file mode 100755 index 0000000..28759be --- /dev/null +++ b/app/components/SidebarTrigger/SidebarTrigger.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { NavLink } from 'reactstrap'; +import PropTypes from 'prop-types'; +import { withPageConfig } from './../Layout'; + +const SidebarTrigger = (props) => { + const { tag: Tag, pageConfig, ...otherProps } = props; + return ( + { props.pageConfig.toggleSidebar(); return false; } } + active={ Tag !== 'a' ? !pageConfig.sidebarCollapsed : undefined } + { ...otherProps } + > + { props.children } + + ) +}; +SidebarTrigger.propTypes = { + tag: PropTypes.any, + children: PropTypes.node, + pageConfig: PropTypes.object +} +SidebarTrigger.defaultProps = { + tag: NavLink, + children: +} + +const cfgSidebarTrigger = withPageConfig(SidebarTrigger); + +export { + cfgSidebarTrigger as SidebarTrigger +} diff --git a/app/components/SidebarTrigger/index.js b/app/components/SidebarTrigger/index.js new file mode 100755 index 0000000..bb26c4d --- /dev/null +++ b/app/components/SidebarTrigger/index.js @@ -0,0 +1,3 @@ +import { SidebarTrigger } from './SidebarTrigger'; + +export default SidebarTrigger; \ No newline at end of file diff --git a/app/components/StarRating/StarRating.js b/app/components/StarRating/StarRating.js new file mode 100755 index 0000000..518bb3f --- /dev/null +++ b/app/components/StarRating/StarRating.js @@ -0,0 +1,64 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import classes from './StarRating.scss'; + +export const StarRating = (props) => { + const { + className, + max: maxStars, + at: currentStars, + starColor, + onSelect, + ...otherProps + } = props; + + const starRatingClass = classNames(classes.starRating, className); + + const isInterctive = !!onSelect; + const StartElement = isInterctive ? 'a' : 'i'; + + return ( +
    + { + (() => { + const stars = []; + + for(let i = 1; i <= maxStars; i++) { + const starProps = { + key: i, + className: classNames('fa fa-fw', { + 'fa-star': i <= currentStars, + 'fa-star-o': i > currentStars, + [`text-${starColor}`]: i <= currentStars + }), + onClick: () => isInterctive && onSelect(i) + }; + + if (isInterctive) { + starProps['href'] = 'javascript:;'; + } + + stars.push(); + } + + return stars; + })() + } +
    + ); +}; + +StarRating.propTypes = { + className: PropTypes.string, + max: PropTypes.number, + at: PropTypes.number, + starColor: PropTypes.string, + onSelect: PropTypes.func +}; + +StarRating.defaultProps = { + max: 5, + at: 0, + starColor: 'warning', +}; diff --git a/app/components/StarRating/StarRating.scss b/app/components/StarRating/StarRating.scss new file mode 100755 index 0000000..5dd7540 --- /dev/null +++ b/app/components/StarRating/StarRating.scss @@ -0,0 +1,3 @@ +.starRating { + display: inline-block; +} diff --git a/app/components/StarRating/index.js b/app/components/StarRating/index.js new file mode 100755 index 0000000..f67e135 --- /dev/null +++ b/app/components/StarRating/index.js @@ -0,0 +1,3 @@ +import { StarRating } from './StarRating'; + +export default StarRating; diff --git a/app/components/Theme/ThemeClass.js b/app/components/Theme/ThemeClass.js new file mode 100755 index 0000000..b373866 --- /dev/null +++ b/app/components/Theme/ThemeClass.js @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { Consumer } from './ThemeContext'; + +const ThemeClass = ({ children, color, style }) => { + const layoutThemeClass = `layout--theme--${ style }--${ color }`; + + return children(layoutThemeClass); +}; +ThemeClass.propTypes = { + children: PropTypes.func.isRequired, + color: PropTypes.string, + style: PropTypes.string, +}; + +const ContextThemeClass = (otherProps) => + + { + (themeState) => + } + ; + +export { ContextThemeClass as ThemeClass }; + diff --git a/app/components/Theme/ThemeContext.js b/app/components/Theme/ThemeContext.js new file mode 100755 index 0000000..7a80bb1 --- /dev/null +++ b/app/components/Theme/ThemeContext.js @@ -0,0 +1,5 @@ +import React from 'react'; + +const { Provider, Consumer } = React.createContext(); + +export { Provider, Consumer }; diff --git a/app/components/Theme/ThemeProvider.js b/app/components/Theme/ThemeProvider.js new file mode 100755 index 0000000..b8139cc --- /dev/null +++ b/app/components/Theme/ThemeProvider.js @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { Provider } from './ThemeContext'; + +export class ThemeProvider extends React.Component { + static propTypes = { + children: PropTypes.node, + initialStyle: PropTypes.string, + initialColor: PropTypes.string, + }; + + constructor(props) { + super(props); + + this.state = { + style: 'light', + color: 'primary', + }; + } + + componentDidMount() { + const { initialStyle, initialColor } = this.props; + + if (initialStyle) { + this.setState({ style: initialStyle }); + } + if (initialColor) { + this.setState({ color: initialColor }); + } + } + + onChangeTheme(themeState) { + this.setState(themeState); + } + + render() { + const { children } = this.props; + + return ( + + { children } + + ); + } +} diff --git a/app/components/Theme/ThemeSelector.js b/app/components/Theme/ThemeSelector.js new file mode 100755 index 0000000..cc9d531 --- /dev/null +++ b/app/components/Theme/ThemeSelector.js @@ -0,0 +1,166 @@ +import React from 'react'; +import _ from 'lodash'; +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import { + Card, + CardBody, + Button, + FormGroup, + CustomInput +} from 'reactstrap'; + +import './../../styles/components/theme-selector.scss'; +import { Consumer } from './ThemeContext'; + +class ThemeSelector extends React.Component { + static propTypes = { + style: PropTypes.string.isRequired, + color: PropTypes.string.isRequired, + styleOptions: PropTypes.array, + styleDisabled: PropTypes.bool, + colorOptions: PropTypes.array, + onChangeTheme: PropTypes.func, + }; + static defaultProps = { + styleOptions: [ + { name: 'Light', value: 'light' }, + { name: 'Dark', value: 'dark' }, + { name: 'Color', value: 'color' } + ], + colorOptions: [ + { name: 'Primary', value: 'primary' }, + { name: 'Success', value: 'success' }, + { name: 'Info', value: 'info' }, + { name: 'Danger', value: 'danger' }, + { name: 'Warning', value: 'warning' }, + { name: 'Indigo', value: 'indigo' }, + { name: 'Purple', value: 'purple' }, + { name: 'Pink', value: 'pink' }, + { name: 'Yellow', value: 'yellow' } + ] + }; + + constructor(props) { + super(props); + + this.state = { + isActive: false, + initialStyle: '', + initialColor: '', + }; + } + + componentDidMount() { + this.setState({ + initialColor: this.props.color, + initialStyle: this.props.style + }); + } + + render() { + const rootClass = classNames('theme-config', { + 'theme-config--active': this.state.isActive, + }); + + return ( +
    + + + +
    + Configurator +
    + + + + Nav Color + + { + _.map(this.props.colorOptions, (option, index) => ( + { + if (ev.target.checked) { + this.props.onChangeTheme({ + color: option.value + }); + } + }} + label={( + + { option.name } + + + )} + /> + )) + } + + + + Nav Style + + { + _.map(this.props.styleOptions, (option, index) => ( + { + if (ev.target.checked) { + this.props.onChangeTheme({ + style: option.value + }); + } + }} + label={ option.name } + /> + )) + } + + + + +     +     +
    + ); + } +} + +const ContextThemeSelector = (props) => + + { + (themeState) => + } + + +export { ContextThemeSelector as ThemeSelector }; diff --git a/app/components/Theme/index.js b/app/components/Theme/index.js new file mode 100755 index 0000000..021c576 --- /dev/null +++ b/app/components/Theme/index.js @@ -0,0 +1,4 @@ +export * from './ThemeClass'; +export * from './ThemeSelector'; +export * from './ThemeProvider'; +export { Consumer as ThemeConsumer } from './ThemeContext'; diff --git a/app/components/Tools/DefaultOnly.js b/app/components/Tools/DefaultOnly.js new file mode 100755 index 0000000..395bcfc --- /dev/null +++ b/app/components/Tools/DefaultOnly.js @@ -0,0 +1,29 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import MediaQuery from 'react-responsive'; + +import { withPageConfig } from './../Layout/withPageConfig'; + +const DefaultOnly = (props) => ( + + { + props.pageConfig.sidebarSlim && props.pageConfig.sidebarCollapsed ? ( + + { props.children } + + ) : ( + props.children + ) + } + +); +DefaultOnly.propTypes = { + children: PropTypes.node.isRequired, + pageConfig: PropTypes.object +}; + +const ExtendedDefaultOnly = withPageConfig(DefaultOnly); + +export { + ExtendedDefaultOnly as DefaultOnly +}; \ No newline at end of file diff --git a/app/components/Tools/SlimOnly.js b/app/components/Tools/SlimOnly.js new file mode 100755 index 0000000..8cabc8f --- /dev/null +++ b/app/components/Tools/SlimOnly.js @@ -0,0 +1,23 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import MediaQuery from 'react-responsive'; + +import { withPageConfig } from './../Layout/withPageConfig'; + +const SlimOnly = (props) => ( + + { + props.pageConfig.sidebarSlim && props.pageConfig.sidebarCollapsed && props.children + } + +); +SlimOnly.propTypes = { + children: PropTypes.node.isRequired, + pageConfig: PropTypes.object +}; + +const ExtendedSlimOnly = withPageConfig(SlimOnly); + +export { + ExtendedSlimOnly as SlimOnly +}; diff --git a/app/components/Tools/SlimProps.js b/app/components/Tools/SlimProps.js new file mode 100755 index 0000000..2b7a3bb --- /dev/null +++ b/app/components/Tools/SlimProps.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import MatchMedia from 'react-responsive'; + +import { withPageConfig } from './../../components/Layout/withPageConfig'; + +const SlimProps = (props) => { + const { + pageConfig, + children, + slimProps + } = props; + + return ( + + + { + /* If slim is enabled extend the children with slimProps */ + pageConfig.sidebarSlim && pageConfig.sidebarCollapsed ? + React.Children.map(children, (child) => React.cloneElement(child, slimProps)) : + children + } + + + { children } + + + ); +}; +SlimProps.propTypes = { + children: PropTypes.node, + pageConfig: PropTypes.object, + slimProps: PropTypes.object, + defaultProps: PropTypes.object +}; + +const ExtendedSlimProps + = withPageConfig(SlimProps); + +export { + ExtendedSlimProps as SlimProps +} \ No newline at end of file diff --git a/app/components/Tools/index.js b/app/components/Tools/index.js new file mode 100755 index 0000000..6a9aac4 --- /dev/null +++ b/app/components/Tools/index.js @@ -0,0 +1,11 @@ +import { SlimOnly } from './SlimOnly'; +import { DefaultOnly } from './DefaultOnly'; +import { SlimProps } from './SlimProps'; + +const Tools = { + SlimOnly, + DefaultOnly, + SlimProps +}; + +export default Tools; diff --git a/app/components/UncontrolledModal/UncontrolledModal.js b/app/components/UncontrolledModal/UncontrolledModal.js new file mode 100755 index 0000000..1b812de --- /dev/null +++ b/app/components/UncontrolledModal/UncontrolledModal.js @@ -0,0 +1,63 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import { Modal } from 'reactstrap'; + +import { Provider } from './context'; + +class UncontrolledModal extends React.Component { + static propTypes = { + target: PropTypes.string.isRequired + } + + constructor(props) { + super(props); + + this.state = { + isOpen: false + }; + + this.boundClickEventHandler = this.clickEventHandler.bind(this); + } + + componentDidMount() { + if (typeof document !== 'undefined') { + this.triggerElement = document.querySelector(`#${this.props.target}`); + + if (!this.triggerElement) { + // eslint-disable-next-line no-console + console.error('UncontrolledModal: \'target\' element has not been found in the DOM via querySelector'); + return; + } + + this.triggerElement.addEventListener('click', this.boundClickEventHandler); + } + } + + componentWillUnmount() { + if (this.triggerElement) { + this.triggerElement.removeEventListener('click', this.boundClickEventHandler); + } + } + + clickEventHandler() { + this.setState({ isOpen: true }); + } + + render() { + const modalProps = _.omit(this.props, ['target']); + const toggleModal = () => { this.setState({ isOpen: !this.state.isOpen }) }; + + return ( + + + + ); + } +} + +export { UncontrolledModal }; diff --git a/app/components/UncontrolledModal/UncontrolledModalClose.js b/app/components/UncontrolledModal/UncontrolledModalClose.js new file mode 100755 index 0000000..5f8ad29 --- /dev/null +++ b/app/components/UncontrolledModal/UncontrolledModalClose.js @@ -0,0 +1,34 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Button } from 'reactstrap'; + +import { Consumer } from './context'; + +const UncontrolledModalClose = (props) => { + const { tag, ...otherProps } = props; + const Tag = tag; + + return ( + + { + (value) => ( + value.toggleModal() } + /> + ) + } + + ) +}; +UncontrolledModalClose.propTypes = { + tag: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string + ]) +}; +UncontrolledModalClose.defaultProps = { + tag: Button +}; + +export { UncontrolledModalClose }; diff --git a/app/components/UncontrolledModal/context.js b/app/components/UncontrolledModal/context.js new file mode 100755 index 0000000..bf325a1 --- /dev/null +++ b/app/components/UncontrolledModal/context.js @@ -0,0 +1,8 @@ +import React from 'react'; + +const { Provider, Consumer } = React.createContext(); + +export { + Provider, + Consumer +} diff --git a/app/components/UncontrolledModal/index.js b/app/components/UncontrolledModal/index.js new file mode 100755 index 0000000..3927d23 --- /dev/null +++ b/app/components/UncontrolledModal/index.js @@ -0,0 +1,6 @@ +import { UncontrolledModal } from './UncontrolledModal'; +import { UncontrolledModalClose } from './UncontrolledModalClose'; + +UncontrolledModal.Close = UncontrolledModalClose; + +export default UncontrolledModal; \ No newline at end of file diff --git a/app/components/UncontrolledPopover/UncontrolledPopover.js b/app/components/UncontrolledPopover/UncontrolledPopover.js new file mode 100755 index 0000000..863ba3e --- /dev/null +++ b/app/components/UncontrolledPopover/UncontrolledPopover.js @@ -0,0 +1,71 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import { + Popover +} from 'reactstrap'; + +class UncontrollerPopover extends React.Component { + constructor(props) { + super(props); + + this.state = { + isOpen: false + }; + } + + componentDidMount() { + const { target } = this.props; + + if (typeof document !== 'undefined') { + this.triggerElement = document.querySelector(`#${target}`); + + if (!this.triggerElement) { + // eslint-disable-next-line no-console + console.error('UncontrolledPopover: \'target\' element has not been found in the DOM via querySelector'); + return; + } + + this.triggerElement.addEventListener('click', this.clickEventHandler.bind(this)); + } + } + + componentDidUpdate() { + if (this.props.activateTrigger && this.triggerElement) { + const { activeClassName } = this.props; + this.triggerElement.classList.toggle(activeClassName, this.state.isOpen); + } + } + + componentWillUnmount() { + if (this.triggerElement) { + this.triggerElement.removeEventListener('click', this.clickEventHandler); + } + } + + clickEventHandler() { + this.setState({ isOpen: !this.state.isOpen }); + } + + render() { + return ( + { this.setState({ isOpen: !this.state.isOpen }) } } + > + { this.props.children } + + ) + } +} +UncontrollerPopover.propTypes = { + activateTrigger: PropTypes.bool, + activeClassName: PropTypes.string +}; +UncontrollerPopover.defaultProps = { + activateTrigger: true, + activeClassName: 'active' +}; + +export { UncontrollerPopover }; diff --git a/app/components/UncontrolledPopover/index.js b/app/components/UncontrolledPopover/index.js new file mode 100755 index 0000000..02dc5c8 --- /dev/null +++ b/app/components/UncontrolledPopover/index.js @@ -0,0 +1,3 @@ +import { UncontrollerPopover } from './UncontrolledPopover'; + +export default UncontrollerPopover; \ No newline at end of file diff --git a/app/components/UncontrolledTabs/UncontrolledTabs.js b/app/components/UncontrolledTabs/UncontrolledTabs.js new file mode 100755 index 0000000..43c9036 --- /dev/null +++ b/app/components/UncontrolledTabs/UncontrolledTabs.js @@ -0,0 +1,32 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { Provider } from './context'; + +class UncontrolledTabs extends React.Component { + static propTypes = { + children: PropTypes.node.isRequired, + initialActiveTabId: PropTypes.string + }; + + constructor(props) { + super(props); + + this.state = { + activeTabId: this.props.initialActiveTabId || null + }; + } + + render() { + return ( + { this.setState({ activeTabId: tabId }) }, + activeTabId: this.state.activeTabId + }}> + { this.props.children } + + ); + } +} + +export { UncontrolledTabs }; diff --git a/app/components/UncontrolledTabs/UncontrolledTabsNavLink.js b/app/components/UncontrolledTabs/UncontrolledTabsNavLink.js new file mode 100755 index 0000000..bf8fb55 --- /dev/null +++ b/app/components/UncontrolledTabs/UncontrolledTabsNavLink.js @@ -0,0 +1,28 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import _ from 'lodash'; +import { NavLink } from 'reactstrap'; + +import { Consumer } from './context'; + +const UncontrolledTabsNavLink = (props) => ( + + { + (value) => ( + { value.setActiveTabId(props.tabId) } } + className={ classNames({ active: props.tabId === value.activeTabId }) } + href="javascript:;" + /> + ) + } + +); +UncontrolledTabsNavLink.propTypes = { + tabId: PropTypes.string.isRequired +}; + +export { UncontrolledTabsNavLink }; + diff --git a/app/components/UncontrolledTabs/UncontrolledTabsTabContent.js b/app/components/UncontrolledTabs/UncontrolledTabsTabContent.js new file mode 100755 index 0000000..757289b --- /dev/null +++ b/app/components/UncontrolledTabs/UncontrolledTabsTabContent.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { TabContent } from 'reactstrap'; + +import { Consumer } from './context'; + +const UncontrolledTabsTabContent = (props) => ( + + { + (value) => ( + + ) + } + +); + +export { UncontrolledTabsTabContent }; \ No newline at end of file diff --git a/app/components/UncontrolledTabs/context.js b/app/components/UncontrolledTabs/context.js new file mode 100755 index 0000000..30ae177 --- /dev/null +++ b/app/components/UncontrolledTabs/context.js @@ -0,0 +1,8 @@ +import React from 'react'; + +const { Provider, Consumer } = React.createContext({}); + +export { + Provider, + Consumer +}; diff --git a/app/components/UncontrolledTabs/index.js b/app/components/UncontrolledTabs/index.js new file mode 100755 index 0000000..8153bd3 --- /dev/null +++ b/app/components/UncontrolledTabs/index.js @@ -0,0 +1,8 @@ +import { UncontrolledTabs } from './UncontrolledTabs'; +import { UncontrolledTabsNavLink } from './UncontrolledTabsNavLink'; +import { UncontrolledTabsTabContent } from './UncontrolledTabsTabContent'; + +UncontrolledTabs.NavLink = UncontrolledTabsNavLink; +UncontrolledTabs.TabContent = UncontrolledTabsTabContent; + +export default UncontrolledTabs; diff --git a/app/components/Wizard/Wizard.js b/app/components/Wizard/Wizard.js new file mode 100755 index 0000000..9ed8b59 --- /dev/null +++ b/app/components/Wizard/Wizard.js @@ -0,0 +1,67 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; + +import './../../styles/components/wizard.scss'; + +export class Wizard extends React.Component { + static propTypes = { + children: PropTypes.node, + onStepChanged: PropTypes.func, + activeStep: PropTypes.string, + initialActiveStep: PropTypes.string + } + + componentDidMount() { + const { initialActiveStep, activeStep, onStepChanged } = this.props; + + if (activeStep && !onStepChanged) { + // eslint-disable-next-line no-console + console.warn( + 'Warning: You need to provide onStepChanged props if you want the ' + + 'component to be controlled. For uncontrolled type, use initialActiveStep.' + ); + } + + if (!onStepChanged) { + this.setState({ + activeStep: initialActiveStep || activeStep + }) + } + } + + stepClick(id) { + this.setState({ + activeStep: id + }); + + this.props.onStepChanged(id); + } + + getActiveStep() { + const { activeStep, onStepChanged } = this.props; + if (_.isUndefined(activeStep) || _.isUndefined(onStepChanged)) { + return this.state.activeStep; + } + return this.props.activeStep; + } + + render() { + const { children } = this.props; + const activeStep = this.getActiveStep(); + + return ( +
    + { + _.map(children, (child, index) => ( + React.cloneElement(child, { + onClick: () => {this.stepClick(child.props.id || '')}, + active: child.props.id === activeStep, + key: index + }) + )) + } +
    + ); + } +} diff --git a/app/components/Wizard/WizardStep.js b/app/components/Wizard/WizardStep.js new file mode 100755 index 0000000..f21dbc0 --- /dev/null +++ b/app/components/Wizard/WizardStep.js @@ -0,0 +1,39 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const WizardStep = props => { + const stepClass = classNames({ + 'wizard-step--active': props.active, + 'wizard-step--complete': props.complete, + 'wizard-step--disabled': props.disabled + }, 'wizard-step', props.className); + + return ( + !props.disabled && props.onClick()}> +
    + { !props.complete ? props.icon : props.successIcon } +
    +
    + { props.children } +
    +     + ) +}; + +WizardStep.defaultProps = { + successIcon: (), + onClick: () => {} +} + +WizardStep.propTypes = { + active: PropTypes.bool, + complete: PropTypes.bool, + disabled: PropTypes.bool, + className: PropTypes.string, + id: PropTypes.string.required, + onClick: PropTypes.func.required, + icon: PropTypes.node, + successIcon: PropTypes.node, + children: PropTypes.node +} diff --git a/app/components/Wizard/index.js b/app/components/Wizard/index.js new file mode 100755 index 0000000..e7b9a11 --- /dev/null +++ b/app/components/Wizard/index.js @@ -0,0 +1,6 @@ +import { Wizard } from './Wizard'; +import { WizardStep } from './WizardStep'; + +Wizard.Step = WizardStep; + +export default Wizard; diff --git a/app/components/agGrid.js b/app/components/agGrid.js new file mode 100755 index 0000000..ac24ca4 --- /dev/null +++ b/app/components/agGrid.js @@ -0,0 +1,2 @@ +export * from 'ag-grid-react'; +export * from 'ag-grid-community'; \ No newline at end of file diff --git a/app/components/index.js b/app/components/index.js new file mode 100755 index 0000000..482a604 --- /dev/null +++ b/app/components/index.js @@ -0,0 +1,157 @@ +import Accordion from './Accordion'; +import Avatar, { AvatarAddOn } from './Avatar'; +import Card from './Card'; +import CardHeader from './CardHeader'; +import Checkable from './Checkable'; +import CustomInput from './CustomInput'; +import Divider from './Divider'; +import EmptyLayout from './EmptyLayout'; +import ExtendedDropdown from './ExtendedDropdown'; +import FloatGrid from './FloatGrid'; +import HolderProvider from './HolderProvider'; +import IconWithBadge from './IconWithBadge'; +import InputGroupAddon from './InputGroupAddon'; +import Layout, { + withPageConfig, + setupPage, + PageConfigProvider, + PageConfigConsumer +} from './Layout'; +import Nav from './Nav'; +import Navbar from './Navbar'; +import NavbarThemeProvider from './NavbarThemeProvider'; +import NestedDropdown from './NestedDropdown'; +import OuterClick from './OuterClick'; +import PageLoader from './PageLoader'; +import Progress from './Progress'; +import Sidebar from './Sidebar'; +import SidebarMenu from './SidebarMenu'; +import SidebarTrigger from './SidebarTrigger'; +import StarRating from './StarRating'; +import { + ThemeClass, + ThemeProvider, + ThemeSelector, + ThemeConsumer, +} from './Theme'; +import Tools from './Tools'; +import UncontrolledModal from './UncontrolledModal'; +import UncontrolledPopover from './UncontrolledPopover'; +import UncontrolledTabs from './UncontrolledTabs'; +import Wizard from './Wizard'; +// Export non overriden Reactstrap components +export { + Alert, + Badge, + Breadcrumb, + BreadcrumbItem, + Button, + ButtonDropdown, + ButtonGroup, + ButtonToolbar, + CardBody, + CardColumns, + CardDeck, + CardFooter, + CardGroup, + CardImg, + CardImgOverlay, + CardLink, + CardSubtitle, + CardText, + CardTitle, + Carousel, + CarouselCaption, + CarouselControl, + CarouselIndicators, + CarouselItem, + Col, + Collapse, + Container, + Dropdown, + DropdownItem, + DropdownMenu, + DropdownToggle, + Fade, + Form, + FormFeedback, + FormGroup, + FormText, + Input, + InputGroup, + InputGroupButtonDropdown, + InputGroupText, + Jumbotron, + Label, + ListGroup, + ListGroupItem, + ListGroupItemHeading, + ListGroupItemText, + Media, + Modal, + ModalBody, + ModalFooter, + ModalHeader, + NavbarBrand, + NavbarToggler, + NavItem, + NavLink, + Pagination, + PaginationItem, + PaginationLink, + Popover, + PopoverBody, + PopoverHeader, + Row, + TabContent, + Table, + TabPane, + Tooltip, + UncontrolledAlert, + UncontrolledButtonDropdown, + UncontrolledDropdown, + UncontrolledCollapse, + UncontrolledTooltip +} from 'reactstrap'; +export { + Accordion, + //App, + Avatar, + AvatarAddOn, + Card, + CardHeader, + Checkable, + CustomInput, + Divider, + EmptyLayout, + ExtendedDropdown, + FloatGrid, + IconWithBadge, + InputGroupAddon, + HolderProvider, + Layout, + Nav, + Navbar, + NavbarThemeProvider, + NestedDropdown, + withPageConfig, + setupPage, + OuterClick, + PageLoader, + PageConfigConsumer, + PageConfigProvider, + Progress, + Sidebar, + SidebarMenu, + SidebarTrigger, + StarRating, + ThemeClass, + ThemeConsumer, + ThemeProvider, + ThemeSelector, + Tools, + UncontrolledPopover, + UncontrolledTabs, + UncontrolledModal, + Wizard +}; diff --git a/app/components/recharts.js b/app/components/recharts.js new file mode 100755 index 0000000..c0a04fe --- /dev/null +++ b/app/components/recharts.js @@ -0,0 +1,62 @@ +import { CartesianGrid } from './Recharts/CartesianGrid'; +import { PolarGrid } from './Recharts/PolarGrid'; +import { XAxis } from './Recharts/XAxis'; +import { YAxis } from './Recharts/YAxis'; +import { ZAxis } from './Recharts/ZAxis'; +import { PolarRadiusAxis } from './Recharts/PolarRadiusAxis'; +import { PolarAngleAxis } from './Recharts/PolarAngleAxis'; +import { ValueLabel } from './Recharts/ValueLabel'; +import { DefAreaValueColor } from './Recharts/DefAreaValueColor'; +import { PieValueLabel } from './Recharts/PieValueLabel'; +import { Tooltip } from './Recharts/Tooltip'; +import { Legend } from './Recharts/Legend'; + +export { + CartesianGrid, + PolarGrid, + DefAreaValueColor, + ValueLabel, + Legend, + XAxis, + YAxis, + ZAxis, + PolarRadiusAxis, + PolarAngleAxis, + PieValueLabel, + Tooltip +}; + +export { + Area, + AreaChart, + Bar, + BarChart, + CartesianAxis, + Cell, + ComposedChart, + Cross, + Curve, + Dot, + ErrorBar, + Label, + LabelList, + Line, + LineChart, + Pie, + PieChart, + Polygon, + Radar, + RadarChart, + RadialBar, + RadialBarChart, + Rectangle, + ReferenceArea, + ReferenceDot, + ReferenceLine, + ResponsiveContainer, + Scatter, + ScatterChart, + Sector, + Text, + Treemap +} from 'recharts'; \ No newline at end of file diff --git a/app/images/avatars/1.jpg b/app/images/avatars/1.jpg new file mode 100755 index 0000000..2af0c8a Binary files /dev/null and b/app/images/avatars/1.jpg differ diff --git a/app/images/avatars/10.jpg b/app/images/avatars/10.jpg new file mode 100755 index 0000000..8f6ea96 Binary files /dev/null and b/app/images/avatars/10.jpg differ diff --git a/app/images/avatars/11.jpg b/app/images/avatars/11.jpg new file mode 100755 index 0000000..4f010dd Binary files /dev/null and b/app/images/avatars/11.jpg differ diff --git a/app/images/avatars/12.jpg b/app/images/avatars/12.jpg new file mode 100755 index 0000000..785b32a Binary files /dev/null and b/app/images/avatars/12.jpg differ diff --git a/app/images/avatars/13.jpg b/app/images/avatars/13.jpg new file mode 100755 index 0000000..8867cc1 Binary files /dev/null and b/app/images/avatars/13.jpg differ diff --git a/app/images/avatars/14.jpg b/app/images/avatars/14.jpg new file mode 100755 index 0000000..500e736 Binary files /dev/null and b/app/images/avatars/14.jpg differ diff --git a/app/images/avatars/15.jpg b/app/images/avatars/15.jpg new file mode 100755 index 0000000..cfc552e Binary files /dev/null and b/app/images/avatars/15.jpg differ diff --git a/app/images/avatars/16.jpg b/app/images/avatars/16.jpg new file mode 100755 index 0000000..1dfec7e Binary files /dev/null and b/app/images/avatars/16.jpg differ diff --git a/app/images/avatars/17.jpg b/app/images/avatars/17.jpg new file mode 100755 index 0000000..ba9217b Binary files /dev/null and b/app/images/avatars/17.jpg differ diff --git a/app/images/avatars/18.jpg b/app/images/avatars/18.jpg new file mode 100755 index 0000000..9013a79 Binary files /dev/null and b/app/images/avatars/18.jpg differ diff --git a/app/images/avatars/19.jpg b/app/images/avatars/19.jpg new file mode 100755 index 0000000..4491e12 Binary files /dev/null and b/app/images/avatars/19.jpg differ diff --git a/app/images/avatars/2.jpg b/app/images/avatars/2.jpg new file mode 100755 index 0000000..9477998 Binary files /dev/null and b/app/images/avatars/2.jpg differ diff --git a/app/images/avatars/20.jpg b/app/images/avatars/20.jpg new file mode 100755 index 0000000..f2f8e48 Binary files /dev/null and b/app/images/avatars/20.jpg differ diff --git a/app/images/avatars/21.jpg b/app/images/avatars/21.jpg new file mode 100755 index 0000000..c995584 Binary files /dev/null and b/app/images/avatars/21.jpg differ diff --git a/app/images/avatars/22.jpg b/app/images/avatars/22.jpg new file mode 100755 index 0000000..ce5c9ed Binary files /dev/null and b/app/images/avatars/22.jpg differ diff --git a/app/images/avatars/23.jpg b/app/images/avatars/23.jpg new file mode 100755 index 0000000..8607a6a Binary files /dev/null and b/app/images/avatars/23.jpg differ diff --git a/app/images/avatars/24.jpg b/app/images/avatars/24.jpg new file mode 100755 index 0000000..42e7c9d Binary files /dev/null and b/app/images/avatars/24.jpg differ diff --git a/app/images/avatars/25.jpg b/app/images/avatars/25.jpg new file mode 100755 index 0000000..e17022e Binary files /dev/null and b/app/images/avatars/25.jpg differ diff --git a/app/images/avatars/26.jpg b/app/images/avatars/26.jpg new file mode 100755 index 0000000..50df008 Binary files /dev/null and b/app/images/avatars/26.jpg differ diff --git a/app/images/avatars/27.jpg b/app/images/avatars/27.jpg new file mode 100755 index 0000000..3c32679 Binary files /dev/null and b/app/images/avatars/27.jpg differ diff --git a/app/images/avatars/28.jpg b/app/images/avatars/28.jpg new file mode 100755 index 0000000..3268094 Binary files /dev/null and b/app/images/avatars/28.jpg differ diff --git a/app/images/avatars/29.jpg b/app/images/avatars/29.jpg new file mode 100755 index 0000000..a0b5809 Binary files /dev/null and b/app/images/avatars/29.jpg differ diff --git a/app/images/avatars/3.jpg b/app/images/avatars/3.jpg new file mode 100755 index 0000000..12675e7 Binary files /dev/null and b/app/images/avatars/3.jpg differ diff --git a/app/images/avatars/30.jpg b/app/images/avatars/30.jpg new file mode 100755 index 0000000..2d3418d Binary files /dev/null and b/app/images/avatars/30.jpg differ diff --git a/app/images/avatars/31.jpg b/app/images/avatars/31.jpg new file mode 100755 index 0000000..ef96a78 Binary files /dev/null and b/app/images/avatars/31.jpg differ diff --git a/app/images/avatars/32.jpg b/app/images/avatars/32.jpg new file mode 100755 index 0000000..ba67170 Binary files /dev/null and b/app/images/avatars/32.jpg differ diff --git a/app/images/avatars/33.jpg b/app/images/avatars/33.jpg new file mode 100755 index 0000000..6627de3 Binary files /dev/null and b/app/images/avatars/33.jpg differ diff --git a/app/images/avatars/34.jpg b/app/images/avatars/34.jpg new file mode 100755 index 0000000..e9119bc Binary files /dev/null and b/app/images/avatars/34.jpg differ diff --git a/app/images/avatars/35.jpg b/app/images/avatars/35.jpg new file mode 100755 index 0000000..5a2c9a5 Binary files /dev/null and b/app/images/avatars/35.jpg differ diff --git a/app/images/avatars/36.jpg b/app/images/avatars/36.jpg new file mode 100755 index 0000000..f503f1c Binary files /dev/null and b/app/images/avatars/36.jpg differ diff --git a/app/images/avatars/37.jpg b/app/images/avatars/37.jpg new file mode 100755 index 0000000..e4353f3 Binary files /dev/null and b/app/images/avatars/37.jpg differ diff --git a/app/images/avatars/38.jpg b/app/images/avatars/38.jpg new file mode 100755 index 0000000..2edfb51 Binary files /dev/null and b/app/images/avatars/38.jpg differ diff --git a/app/images/avatars/39.jpg b/app/images/avatars/39.jpg new file mode 100755 index 0000000..ad10569 Binary files /dev/null and b/app/images/avatars/39.jpg differ diff --git a/app/images/avatars/4.jpg b/app/images/avatars/4.jpg new file mode 100755 index 0000000..69b326e Binary files /dev/null and b/app/images/avatars/4.jpg differ diff --git a/app/images/avatars/40.jpg b/app/images/avatars/40.jpg new file mode 100755 index 0000000..463d06b Binary files /dev/null and b/app/images/avatars/40.jpg differ diff --git a/app/images/avatars/41.jpg b/app/images/avatars/41.jpg new file mode 100755 index 0000000..65019a4 Binary files /dev/null and b/app/images/avatars/41.jpg differ diff --git a/app/images/avatars/42.jpg b/app/images/avatars/42.jpg new file mode 100755 index 0000000..b5fa123 Binary files /dev/null and b/app/images/avatars/42.jpg differ diff --git a/app/images/avatars/43.jpg b/app/images/avatars/43.jpg new file mode 100755 index 0000000..40da075 Binary files /dev/null and b/app/images/avatars/43.jpg differ diff --git a/app/images/avatars/44.jpg b/app/images/avatars/44.jpg new file mode 100755 index 0000000..302a08f Binary files /dev/null and b/app/images/avatars/44.jpg differ diff --git a/app/images/avatars/45.jpg b/app/images/avatars/45.jpg new file mode 100755 index 0000000..cc01693 Binary files /dev/null and b/app/images/avatars/45.jpg differ diff --git a/app/images/avatars/46.jpg b/app/images/avatars/46.jpg new file mode 100755 index 0000000..13c73ec Binary files /dev/null and b/app/images/avatars/46.jpg differ diff --git a/app/images/avatars/47.jpg b/app/images/avatars/47.jpg new file mode 100755 index 0000000..984d70a Binary files /dev/null and b/app/images/avatars/47.jpg differ diff --git a/app/images/avatars/48.jpg b/app/images/avatars/48.jpg new file mode 100755 index 0000000..6f3362f Binary files /dev/null and b/app/images/avatars/48.jpg differ diff --git a/app/images/avatars/49.jpg b/app/images/avatars/49.jpg new file mode 100755 index 0000000..5ad4827 Binary files /dev/null and b/app/images/avatars/49.jpg differ diff --git a/app/images/avatars/5.jpg b/app/images/avatars/5.jpg new file mode 100755 index 0000000..dc6f7a2 Binary files /dev/null and b/app/images/avatars/5.jpg differ diff --git a/app/images/avatars/50.jpg b/app/images/avatars/50.jpg new file mode 100755 index 0000000..6423c17 Binary files /dev/null and b/app/images/avatars/50.jpg differ diff --git a/app/images/avatars/6.jpg b/app/images/avatars/6.jpg new file mode 100755 index 0000000..fd4abfc Binary files /dev/null and b/app/images/avatars/6.jpg differ diff --git a/app/images/avatars/7.jpg b/app/images/avatars/7.jpg new file mode 100755 index 0000000..8419692 Binary files /dev/null and b/app/images/avatars/7.jpg differ diff --git a/app/images/avatars/8.jpg b/app/images/avatars/8.jpg new file mode 100755 index 0000000..647744a Binary files /dev/null and b/app/images/avatars/8.jpg differ diff --git a/app/images/avatars/9.jpg b/app/images/avatars/9.jpg new file mode 100755 index 0000000..59e77ca Binary files /dev/null and b/app/images/avatars/9.jpg differ diff --git a/app/images/avatars/avatar-1.jpg b/app/images/avatars/avatar-1.jpg new file mode 100755 index 0000000..9477998 Binary files /dev/null and b/app/images/avatars/avatar-1.jpg differ diff --git a/app/images/favicons/apple-touch-icon.png b/app/images/favicons/apple-touch-icon.png new file mode 100755 index 0000000..17db593 Binary files /dev/null and b/app/images/favicons/apple-touch-icon.png differ diff --git a/app/images/favicons/favicon-16x16.png b/app/images/favicons/favicon-16x16.png new file mode 100755 index 0000000..ec8fafb Binary files /dev/null and b/app/images/favicons/favicon-16x16.png differ diff --git a/app/images/favicons/favicon-32x32.png b/app/images/favicons/favicon-32x32.png new file mode 100755 index 0000000..5117f03 Binary files /dev/null and b/app/images/favicons/favicon-32x32.png differ diff --git a/app/images/favicons/favicon.ico b/app/images/favicons/favicon.ico new file mode 100755 index 0000000..32e3507 Binary files /dev/null and b/app/images/favicons/favicon.ico differ diff --git a/app/images/logos/logo-danger.svg b/app/images/logos/logo-danger.svg new file mode 100755 index 0000000..44a33f1 --- /dev/null +++ b/app/images/logos/logo-danger.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/images/logos/logo-indigo.svg b/app/images/logos/logo-indigo.svg new file mode 100755 index 0000000..6d13d46 --- /dev/null +++ b/app/images/logos/logo-indigo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/images/logos/logo-info.svg b/app/images/logos/logo-info.svg new file mode 100755 index 0000000..047948a --- /dev/null +++ b/app/images/logos/logo-info.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/images/logos/logo-pink.svg b/app/images/logos/logo-pink.svg new file mode 100755 index 0000000..b562146 --- /dev/null +++ b/app/images/logos/logo-pink.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/images/logos/logo-primary.svg b/app/images/logos/logo-primary.svg new file mode 100755 index 0000000..36b70b1 --- /dev/null +++ b/app/images/logos/logo-primary.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/images/logos/logo-purple.svg b/app/images/logos/logo-purple.svg new file mode 100755 index 0000000..b548600 --- /dev/null +++ b/app/images/logos/logo-purple.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/images/logos/logo-success.svg b/app/images/logos/logo-success.svg new file mode 100755 index 0000000..fc1c4f4 --- /dev/null +++ b/app/images/logos/logo-success.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/images/logos/logo-warning.svg b/app/images/logos/logo-warning.svg new file mode 100755 index 0000000..863da69 --- /dev/null +++ b/app/images/logos/logo-warning.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/images/logos/logo-white.svg b/app/images/logos/logo-white.svg new file mode 100755 index 0000000..5375385 --- /dev/null +++ b/app/images/logos/logo-white.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/images/logos/logo-yellow.svg b/app/images/logos/logo-yellow.svg new file mode 100755 index 0000000..a95c6e4 --- /dev/null +++ b/app/images/logos/logo-yellow.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/index.html b/app/index.html new file mode 100755 index 0000000..932ccc8 --- /dev/null +++ b/app/index.html @@ -0,0 +1,151 @@ + +<% var config = htmlWebpackPlugin || SSRData %> + + + + + manifest="<%= config.files.manifest %>"<% } %>> + + + <%= config.options.title || 'React Dashboard'%> + + <% if (config.files.favicon) { %> + + <% } %> + + + <% for (var css in config.files.css) { %> + + + <% } %> + + <% if (config.options.chunks) { %> + <%= config.options.chunks.css %> + <% } %> + + + + + + +
    +
    +
    + + + + + + + + + + + + + +
    +
    + Please Wait. Loading... +
    +
    +
    + + + + +
    <%= config.innerHtml || '' %>
    + + <% for (var chunk in config.files.chunks) { %> + + <% } %> + + <% if (config.options.devServer) { %> + + <% } %> + + \ No newline at end of file diff --git a/app/index.js b/app/index.js new file mode 100755 index 0000000..2704836 --- /dev/null +++ b/app/index.js @@ -0,0 +1,11 @@ +import '@babel/polyfill'; + +import React from 'react'; +import { render } from 'react-dom'; + +import App from './components/App'; + +render( + , + document.querySelector('#root') +); \ No newline at end of file diff --git a/app/layout/components/DefaultNavbar.js b/app/layout/components/DefaultNavbar.js new file mode 100755 index 0000000..ffdd676 --- /dev/null +++ b/app/layout/components/DefaultNavbar.js @@ -0,0 +1,53 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Navbar, + Nav, + NavItem, + SidebarTrigger +} from './../../components'; + +import { NavbarActivityFeed } from './NavbarActivityFeed'; +import { NavbarMessages } from './NavbarMessages'; +import { NavbarUser } from './NavbarUser'; +import { LogoThemed } from './../../routes/components/LogoThemed/LogoThemed'; + +export const DefaultNavbar = () => ( + + + + +); diff --git a/app/layout/components/DefaultSidebar.js b/app/layout/components/DefaultSidebar.js new file mode 100755 index 0000000..dd6d676 --- /dev/null +++ b/app/layout/components/DefaultSidebar.js @@ -0,0 +1,48 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Sidebar, + SidebarTrigger, +} from './../../components'; + +import { SidebarMiddleNav } from './SidebarMiddleNav'; + +import { SidebarTopA } from '../../routes/components/Sidebar/SidebarTopA' +import { SidebarBottomA } from '../../routes/components/Sidebar/SidebarBottomA' +import { LogoThemed } from '../../routes/components/LogoThemed/LogoThemed'; + +export const DefaultSidebar = () => ( + + { /* START SIDEBAR-OVERLAY: Close (x) */ } + + + + + + { /* START SIDEBAR-OVERLAY: Close (x) */ } + + { /* START SIDEBAR: Only for Desktop */ } + + + + + + + + { /* END SIDEBAR: Only for Desktop */ } + + { /* START SIDEBAR: Only for Mobile */ } + + + + + { /* SIDEBAR: Menu */ } + + + + + + { /* END SIDEBAR: Only for Mobile */ } + +); diff --git a/app/layout/components/NavbarActivityFeed.js b/app/layout/components/NavbarActivityFeed.js new file mode 100755 index 0000000..4331da5 --- /dev/null +++ b/app/layout/components/NavbarActivityFeed.js @@ -0,0 +1,93 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import faker from 'faker/locale/en_US'; +import _ from 'lodash'; +import PropTypes from 'prop-types'; + +import { + UncontrolledDropdown, + DropdownToggle, + IconWithBadge, + Badge, + ExtendedDropdown, + ListGroup, + ListGroupItem, + Media +} from './../../components'; + +/*eslint-disable */ +const activityFeedIcons = [ + + + + , + + + + , + + + + , + + + + +]; +/*eslint-enable */ + +const NavbarActivityFeed = (props) => ( + + + 6 } + > + + + + + +
    Activity Feed
    + 4 +     + + + + { + _.times(7, (index) => ( + + + + { activityFeedIcons[index%4] } + + + + { faker.name.firstName() } { faker.name.lastName() } + changed Description to "{ faker.random.words() }" +

    + { faker.lorem.sentence() } +

    +
    + { faker.date.past().toString() } +
    +     +     +     + )) + } +     +     + + + See All Notifications + + +     +     +); +NavbarActivityFeed.propTypes = { + className: PropTypes.string, + style: PropTypes.object +}; + +export { NavbarActivityFeed }; diff --git a/app/layout/components/NavbarMessages.js b/app/layout/components/NavbarMessages.js new file mode 100755 index 0000000..ed131a9 --- /dev/null +++ b/app/layout/components/NavbarMessages.js @@ -0,0 +1,102 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import _ from 'lodash'; +import PropTypes from 'prop-types'; + +import { + Avatar, + UncontrolledDropdown, + DropdownToggle, + IconWithBadge, + Badge, + ExtendedDropdown, + ListGroup, + ListGroupItem, + Media, + InputGroup, + Input, + InputGroupAddon, + Button +} from './../../components'; + +const messagesColors = [ + "text-success", + "text-danger", + "text-warning" +]; + +const NavbarMessages = (props) => ( + + + 6 } + > + + + + + +
    Messages
    + + + +     + + + + + + + + + + + + { + _.times(3, (index) => ( + + + + + + + + + + { faker.name.firstName() } { faker.name.lastName() } + + + (23) + Now + +

    + { faker.lorem.sentences() } +

    +     +     +     + )) + } +     +     + + + View All + + +     +     +); +NavbarMessages.propTypes = { + className: PropTypes.string, + style: PropTypes.object +}; + +export { NavbarMessages }; diff --git a/app/layout/components/NavbarUser.js b/app/layout/components/NavbarUser.js new file mode 100755 index 0000000..11db23a --- /dev/null +++ b/app/layout/components/NavbarUser.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import PropTypes from 'prop-types'; + +import { + NavItem, + NavLink +} from './../../components'; + +const NavbarUser = (props) => ( + + + + + +); +NavbarUser.propTypes = { + className: PropTypes.string, + style: PropTypes.object +}; + +export { NavbarUser }; diff --git a/app/layout/components/SidebarANavbar.js b/app/layout/components/SidebarANavbar.js new file mode 100755 index 0000000..9f58061 --- /dev/null +++ b/app/layout/components/SidebarANavbar.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Navbar, + Nav, + NavItem, + SidebarTrigger +} from './../../components'; + +import { NavbarActivityFeed } from './NavbarActivityFeed'; +import { NavbarMessages } from './NavbarMessages'; +import { NavbarUser } from './NavbarUser'; + +export const SidebarANavbar = () => ( + + + + +); diff --git a/app/layout/components/SidebarASidebar.js b/app/layout/components/SidebarASidebar.js new file mode 100755 index 0000000..e1cf745 --- /dev/null +++ b/app/layout/components/SidebarASidebar.js @@ -0,0 +1,42 @@ +import React from 'react'; + +import { + Sidebar, + SidebarTrigger +} from './../../components'; + +import { SidebarMiddleNav } from './SidebarMiddleNav'; + +import { SidebarTopB } from '../../routes/components/Sidebar/SidebarTopB' +import { SidebarBottomB } from '../../routes/components/Sidebar/SidebarBottomB' + +export const SidebarASidebar = () => ( + + { /* START SIDEBAR-OVERLAY: Close (x) */ } + + + + + + { /* END SIDEBAR-OVERLAY: Close (x) */ } + + { /* START SIDEBAR: Fixed Section */ } + + + + { /* END SIDEBAR: Fixed Section */ } + + { /* START SIDEBAR: Mobile Scroll Wrapper */ } + + { /* START SIDEBAR: Everywhere */ } + + { /* SIDEBAR: Menu */ } + + + { /* END SIDEBAR: Everywhere */ } + + + { /* END SIDEBAR: Mobile Scroll Wrapper */ } + + +); diff --git a/app/layout/components/SidebarMiddleNav.js b/app/layout/components/SidebarMiddleNav.js new file mode 100755 index 0000000..f509d4c --- /dev/null +++ b/app/layout/components/SidebarMiddleNav.js @@ -0,0 +1,192 @@ +import React from 'react'; + +import { SidebarMenu } from './../../components'; + +export const SidebarMiddleNav = () => ( + + } + title="Dashboards" + > + + + + + + + + + } + title="Widgets" + to='/widgets' + /> + { /* -------- Cards ---------*/ } + } + title="Cards" + > + + + + { /* -------- Layouts ---------*/ } + } + title="Layouts" + > + + + + + + + { /* -------- Interface ---------*/ } + } + title="Interface" + > + + + + + + + + + + + + + + + + + + + + + + + + { /* -------- Graphs ---------*/ } +     } + title="Graphs" + > + + + { /* -------- Forms ---------*/ } +     } + title="Forms" + > + + + + + + + + + + + + + { /* -------- Tables ---------*/ } +     } + title="Tables" + > + + + + + { /* -------- Apps ---------*/ } + } + title="Apps" + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { /* -------- Pages ---------*/ } + } + title="Pages" + > + + + + + + + + + + + + } + title="Icons" + to='/icons' + /> + } + title="Docs" + href='https://webkom.gitbook.io/spin/v/airframe/airframe-react/documentation-react' + /> + { /* -------- Versions ---------*/ } + } + title="Versions" + > + + + + + + + + +); diff --git a/app/layout/components/SidebarWithNavbarNavbar.js b/app/layout/components/SidebarWithNavbarNavbar.js new file mode 100755 index 0000000..f138f57 --- /dev/null +++ b/app/layout/components/SidebarWithNavbarNavbar.js @@ -0,0 +1,109 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Navbar, + Nav, + NavItem, + NavLink, + NavbarToggler, + UncontrolledCollapse, + SidebarTrigger, + ThemeConsumer +} from './../../components'; + +import { NavbarActivityFeed } from './NavbarActivityFeed'; +import { NavbarMessages } from './NavbarMessages'; +import { NavbarUser } from './NavbarUser'; +import { LogoThemed } from './../../routes/components/LogoThemed/LogoThemed'; + +export const SidebarWithNavbarNavbar = () => ( + + { + ({ color }) => ( + + { /* First Navbar */} + + + +

    + Sidebar with Navbar +

    + + +     + { /* Second Navbar */} + +

    + Sidebar with Navbar +

    + + + + + + +     +     + ) + } +     +); diff --git a/app/layout/default.js b/app/layout/default.js new file mode 100755 index 0000000..4fc32c0 --- /dev/null +++ b/app/layout/default.js @@ -0,0 +1,69 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { + Layout, + ThemeSelector, + ThemeProvider, + PageConfigConsumer, +} from './../components'; + +import './../styles/bootstrap.scss'; +import './../styles/main.scss'; +import './../styles/plugins/plugins.scss'; +import './../styles/plugins/plugins.css'; + +import { + RoutedNavbars, + RoutedSidebars, +} from './../routes'; + +const favIcons = [ + { rel: 'icon', type: 'image/x-icon', href: require('./../images/favicons/favicon.ico') }, + + { rel: 'apple-touch-icon', sizes: '180x180', href: require('./../images/favicons/apple-touch-icon.png') }, + + { rel: 'icon', type: 'image/png', sizes: '32x32', href: require('./../images/favicons/favicon-32x32.png') }, + { rel: 'icon', type: 'image/png', sizes: '16x16', href: require('./../images/favicons/favicon-16x16.png') } +]; + +class AppLayout extends React.Component { + static propTypes = { + children: PropTypes.node.isRequired + } + + render() { + const { children } = this.props; + + return ( + + + { /* --------- Navbar ----------- */ } + + + + { /* -------- Sidebar ------------*/ } + + + + + { /* -------- Content ------------*/ } + + { children } + + + { /* -- Theme Selector (DEMO) ----*/ } + + { + ({ sidebarHidden, navbarHidden }) => ( + + ) + } + + + + ); + } +} + +export default AppLayout; diff --git a/app/routes/Apps/AccountEdit/AccountEdit.js b/app/routes/Apps/AccountEdit/AccountEdit.js new file mode 100755 index 0000000..6e0fc26 --- /dev/null +++ b/app/routes/Apps/AccountEdit/AccountEdit.js @@ -0,0 +1,156 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Input, + Card, + Button, + CardBody, + CardFooter, + CardTitle, + Label, + FormGroup, + Form +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { ProfileLeftNav } from "../../components/Profile/ProfileLeftNav"; +import { ProfileHeader } from "../../components/Profile/ProfileHeader"; + +const AccountEdit = () => ( + + + + { /* START Content */} + + + + + + + + + + +
    + + Account Edit + + + Fields mark as * is required. + +
    +
    + { /* START Input */} + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + { /* END Input */} +
    + { /* END Form */} +     + + + If you have trouble with the configuration, you can contact us. We Can Help + +     + + + + Change Username + +

    + Changing the username is not recommended. In this connection, + I can appear many problems. +

    + +     +     + + + + Delete Account + +

    + Once you delete your account, there is no going back. Please be certain. +

    + +     + + + Are you sure you don’t want to just downgrade your account to a Free Account? We won’t charge your PayPal account anymore. + +     + +     + { /* END Content */} + +     +     +); + +export default AccountEdit; \ No newline at end of file diff --git a/app/routes/Apps/AccountEdit/index.js b/app/routes/Apps/AccountEdit/index.js new file mode 100755 index 0000000..fd94470 --- /dev/null +++ b/app/routes/Apps/AccountEdit/index.js @@ -0,0 +1,3 @@ +import AccountEdit from './AccountEdit'; + +export default AccountEdit; \ No newline at end of file diff --git a/app/routes/Apps/BillingEdit/BillingEdit.js b/app/routes/Apps/BillingEdit/BillingEdit.js new file mode 100755 index 0000000..552743b --- /dev/null +++ b/app/routes/Apps/BillingEdit/BillingEdit.js @@ -0,0 +1,157 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Table, + Card, + Button, + CardBody, + CardFooter, + CardTitle, + Progress +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { ProfileLeftNav } from "./../../components/Profile/ProfileLeftNav"; +import { ProfileHeader } from "./../../components/Profile/ProfileHeader"; +import { TrTableBorderless } from "./../../Tables/Tables/components/TrTableBorderless"; + +const BillingEdit = () => ( + + + + { /* START Content */} + + + + + + + + + + +
    + + Billing Edit + + + Fields mark as * is required. + +
    + + + Your Plan + + +
    + + Premium + - You use 37% of the available space. +
    + + + + + +
    +
    Amount Space
    +
    214,8 GB / 1,03 TB
    +
    Regular Files
    +
    + + 177,8 GB +
    +
    Shared Files
    +
    + + 37 GB +
    +
    Available Files
    +
    + + 177,8 GB +
    +
    Action
    +
    + +
    +
    + +     +
    + Payment +
    + + + Payment Method + + +
    + + + PayPal + - Account: Tyshawn_Lakin56@gmail.com +
    +
    +
    Next Payment Due
    +
    2016-05-21
    +
    Amount
    +
    $ 13.00
    +
    Action
    +
    + +
    +
    + +     +     + + + If you want to personalize the notification settings, go here + +     + + + + Billing History + + + { /* START Table */} + + + + + + + + + + + + + + + +
    #IDDateAmountDescriptionPayment Method + Receipt +
    + { /* END Table */} +     + +     + { /* END Content */} +     +     +); + +export default BillingEdit; \ No newline at end of file diff --git a/app/routes/Apps/BillingEdit/index.js b/app/routes/Apps/BillingEdit/index.js new file mode 100755 index 0000000..e181f45 --- /dev/null +++ b/app/routes/Apps/BillingEdit/index.js @@ -0,0 +1,3 @@ +import BillingEdit from './BillingEdit'; + +export default BillingEdit; \ No newline at end of file diff --git a/app/routes/Apps/Chat/Chat.js b/app/routes/Apps/Chat/Chat.js new file mode 100755 index 0000000..326f36c --- /dev/null +++ b/app/routes/Apps/Chat/Chat.js @@ -0,0 +1,60 @@ +import React from 'react'; + +import { + Container, + Row, + CardBody, + Col, + CardHeader, + Card, + CardFooter +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { ChatLeft } from "../../components/Chat/ChatLeft"; +import { ChatRight } from "../../components/Chat/ChatRight"; +import { ChatLeftNav } from "../../components/Chat/ChatLeftNav"; +import { ChatCardFooter } from "../../components/Chat/ChatCardFooter"; +import { ChatCardHeader } from "../../components/Chat/ChatCardHeader"; + +const Clients = () => ( + + + + { /* START Content */} + + + + + + + + + + + + + + +
    + Yesterday +
    + + + +     + + + +     + +     + { /* END Content */} + +     +     +); + +export default Clients; \ No newline at end of file diff --git a/app/routes/Apps/Chat/index.js b/app/routes/Apps/Chat/index.js new file mode 100755 index 0000000..da0aa2f --- /dev/null +++ b/app/routes/Apps/Chat/index.js @@ -0,0 +1,3 @@ +import Chat from './Chat'; + +export default Chat; \ No newline at end of file diff --git a/app/routes/Apps/Clients/Clients.js b/app/routes/Apps/Clients/Clients.js new file mode 100755 index 0000000..9d82a45 --- /dev/null +++ b/app/routes/Apps/Clients/Clients.js @@ -0,0 +1,295 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Container, + Row, + Col, + Card, + ButtonToolbar, + Button, + ButtonGroup, + CardBody, + CardFooter, + Table, + TabPane, + Badge, + Nav, + NavItem, + Pagination, + PaginationLink, + PaginationItem, + UncontrolledTooltip, + UncontrolledTabs +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { Profile } from "../../components/Profile"; +import { DlRowContacts } from "../../components/Profile/DlRowContacts"; +import { DlRowAddress } from "../../components/Profile/DlRowAddress"; +import { TrTableClients } from "./components/TrTableClients"; +import { TrTableCompanies } from "./components/TrTableCompanies"; + +const Clients = () => ( + + + + { /* START Content */} + + + + + +
    + + + + + + + + + + + Add New + + + Settings + +
    +     + + + + { /* START Table */} + + + + + + + + + + + + + + + + + + + + + + +
    NameEmailPhoneLabel
    + { /* END Table */} +     + + { /* START Table */} + + + + + + + + + + + + + + + + + + + + + + + + + +
    NamePMPhoneLabel
    + { /* END Table */} +     +     +     + + + + Showing 1 to 10 of 57 entries + + + + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + + + + + +     + + + + + +
    +
      +
    • +

      23

      + Contracts +
      • +
    • +

      13

      + Tasks +
      • +
    • +

      5

      + Relases +
      • +
    +
    + + + + + + + + +
    + + Profile + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Dicta sapiente earum, necessitatibus commodi eius pariatur + repudiandae cum sunt officiis ex! +

    +
    + + Labels + +
    +
    + + { faker.commerce.department() } + + + { faker.commerce.department() } + + + { faker.commerce.department() } + +
    +
    + Contact +
    + +
    + Address +
    + +     +     + +     + { /* END Content */} + +     +     +); + +export default Clients; \ No newline at end of file diff --git a/app/routes/Apps/Clients/components/TrTableClients.js b/app/routes/Apps/Clients/components/TrTableClients.js new file mode 100755 index 0000000..0f3c5b9 --- /dev/null +++ b/app/routes/Apps/Clients/components/TrTableClients.js @@ -0,0 +1,94 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import PropTypes from 'prop-types'; + +import { + Badge, + Avatar, + CustomInput, + UncontrolledTooltip, + AvatarAddOn, + Media +} from './../../../../components'; + +import { randomArray } from './../../../../utilities'; + +const status = [ + "secondary", + "success", + "warning", + "danger" +]; + +const tag = [ + "secondary", + "primary", + "info" +]; + +const TrTableClients = (props) => ( + + + + + + + + + + + Add To Favorites + + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + + + { faker.name.jobTitle() } + + + + + + { faker.internet.email() } + + + { faker.phone.phoneNumberFormat() } + + + + { faker.commerce.department() } + + + + +) +TrTableClients.propTypes = { + id: PropTypes.node +}; +TrTableClients.defaultProps = { + id: "1" +}; + +export { TrTableClients }; diff --git a/app/routes/Apps/Clients/components/TrTableCompanies.js b/app/routes/Apps/Clients/components/TrTableCompanies.js new file mode 100755 index 0000000..917e6e8 --- /dev/null +++ b/app/routes/Apps/Clients/components/TrTableCompanies.js @@ -0,0 +1,287 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import PropTypes from 'prop-types'; + +import { + Avatar, + CustomInput, + UncontrolledTooltip, + AvatarAddOn, + Media +} from './../../../../components'; +import { randomArray } from './../../../../utilities'; + +const status = [ + "success", + "danger", + "warning", + "secondary" +]; + +const brand = [ + + + + + + + + +
    + Facebook +
    + + { faker.address.country() } + +     +     , + + + + + + + + +
    + Twitter +
    + + { faker.address.country() } + +     +     , + + + + + + + + +
    + Linkedin +
    + + { faker.address.country() } + +     +     , + + + + + + + + +
    + Foursquare +
    + + { faker.address.country() } + +     +     , + + + + + + + + +
    + LastFM +
    + + { faker.address.country() } + +     +     , + + + + + + + + +
    + PayPal +
    + + { faker.address.country() } + +     +     , + + + + + + + + +
    + Amazon +
    + + { faker.address.country() } + +     +     , + + + + + + + + +
    + Skype +
    + + { faker.address.country() } + +     +     , + + + + + + + + +
    + Spotify +
    + + { faker.address.country() } + +     +     , + + + + + + + + +
    + Pinterest +
    + + { faker.address.country() } + +     +     , + + + + + + + + +
    + Windows +
    + + { faker.address.country() } + +     +     , + + + + + + + + +
    + Android +
    + + { faker.address.country() } + +     +     , + + + + + + + + +
    + Medium +
    + + { faker.address.country() } + +     +     , +]; + +const TrTableCompanies = (props) => ( + + + + + + + + + + + Add To Favorites + + + + { randomArray(brand) } + + + , + + ]} + /> + + + { faker.phone.phoneNumberFormat() }
    + { faker.internet.email() } + + + { faker.address.streetAddress() }
    + { faker.address.city() } + + +     +) + +TrTableCompanies.propTypes = { + id: PropTypes.node +}; +TrTableCompanies.defaultProps = { + id: "1" +}; + +export { TrTableCompanies }; diff --git a/app/routes/Apps/Clients/index.js b/app/routes/Apps/Clients/index.js new file mode 100755 index 0000000..7bfdac9 --- /dev/null +++ b/app/routes/Apps/Clients/index.js @@ -0,0 +1,3 @@ +import Clients from './Clients'; + +export default Clients; \ No newline at end of file diff --git a/app/routes/Apps/EmailDetails/EmailDetails.js b/app/routes/Apps/EmailDetails/EmailDetails.js new file mode 100755 index 0000000..0030ab2 --- /dev/null +++ b/app/routes/Apps/EmailDetails/EmailDetails.js @@ -0,0 +1,239 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import { Link } from 'react-router-dom'; + +import { + Container, + Row, + Col, + Card, + Button, + ButtonGroup, + CardBody, + CardFooter, + ButtonToolbar, + Badge, + Media, + Avatar, + AvatarAddOn, + UncontrolledTooltip +} from './../../../components'; +import { randomAvatar } from './../../../utilities'; +import { HeaderMain } from "../../components/HeaderMain"; +import { MailboxLeftNav } from "../../components/Mailbox/MailboxLeftNav"; +import { Attachment } from "../../components/Attachment"; + +const EmailDetails = () => ( + + + + { /* START Content */} + + + + + + + + { /* START Header */} +
    +
    + +
    + + + + + Prev Message + + + + Next Message + + + + + + Forward + + + + Add to Favorites + + + + Print + + + + Delete + + + + + + Reply + + + +
    + { /* END Header */} + { /* START Message */} +
    +
    + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + + + { faker.internet.email() } + + + +
    + 18-Jun-2012
    + 08:43 PM +
    +
    +
    +
    +
    + Secured Asynchronous Capacity +
    + + Work + +
    +

    + { faker.lorem.sentences() } +

    +

    + { faker.lorem.paragraphs() } +

    +
    + { /* END Message */} + { /* START Attachments */} +
    +
    + + Attachments + + 3 +
    + + + +
    +     + + + + + + Prev Message + + + + Next Message + + + + + + + Forward + + + + Add to Favorites + + + + Print + + + + Delete + + + + + + Reply + + + + + +     + +     + { /* END Content */} +     +     +); + +export default EmailDetails; \ No newline at end of file diff --git a/app/routes/Apps/EmailDetails/index.js b/app/routes/Apps/EmailDetails/index.js new file mode 100755 index 0000000..e3bcb5e --- /dev/null +++ b/app/routes/Apps/EmailDetails/index.js @@ -0,0 +1,3 @@ +import EmailDetails from './EmailDetails'; + +export default EmailDetails; \ No newline at end of file diff --git a/app/routes/Apps/Files/Files.js b/app/routes/Apps/Files/Files.js new file mode 100755 index 0000000..fce4506 --- /dev/null +++ b/app/routes/Apps/Files/Files.js @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { + Container, + Row, + Col +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; + +import FilesList from './FilesList'; +import FilesGrid from './FilesGrid'; +import { FilesLeftNav } from "../../components/Files/FilesLeftNav"; +import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader"; + +const Files = (props) => ( + + + + + + + + + + + { + props.match.params.type === "list" ? + : + + } + + + + +); +Files.propTypes = { + match: PropTypes.object.isRequired +}; + + +export default Files; \ No newline at end of file diff --git a/app/routes/Apps/Files/FilesGrid.js b/app/routes/Apps/Files/FilesGrid.js new file mode 100755 index 0000000..772f812 --- /dev/null +++ b/app/routes/Apps/Files/FilesGrid.js @@ -0,0 +1,26 @@ +import React from 'react'; + +import { CardColumns } from './../../../components'; +import { FilesCardGrid } from "../../components/Files/FilesCardGrid"; +import { Paginations } from "../../components/Paginations"; + +const FilesGrid = () => ( + + + + + + + + + + + + +
    + +
    +     +); + +export default FilesGrid; \ No newline at end of file diff --git a/app/routes/Apps/Files/FilesList.js b/app/routes/Apps/Files/FilesList.js new file mode 100755 index 0000000..ca746fd --- /dev/null +++ b/app/routes/Apps/Files/FilesList.js @@ -0,0 +1,50 @@ +import React from 'react'; + +import { + Card, + CardFooter, + Table +} from './../../../components'; + +import { Paginations } from "../../components/Paginations"; +import { TrTableFilesList } from "./components/TrTableFilesList"; + +const FilesList = () => ( + + { /* START Table */} +
    + + + + + + + + + + + + + + + + + + + + + + +
    DirectoryLast ChangeShareTags + Actions +
    +
    + { /* END Table */} + + + +     + +); + +export default FilesList; \ No newline at end of file diff --git a/app/routes/Apps/Files/components/TrTableFilesList.js b/app/routes/Apps/Files/components/TrTableFilesList.js new file mode 100755 index 0000000..2241c68 --- /dev/null +++ b/app/routes/Apps/Files/components/TrTableFilesList.js @@ -0,0 +1,113 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Badge, + Avatar, + UncontrolledButtonDropdown, + DropdownToggle, + DropdownMenu, + AvatarAddOn, + Media, + DropdownItem +} from './../../../../components'; + +import { randomArray, randomAvatar } from './../../../../utilities'; + +const badges = [ + "secondary" +]; + +const status = [ + "success", + "danger", + "warning", + "secondary" +]; + +const TrTableFilesList = () => ( + + + + + + + + +
    + { faker.commerce.department() } +
    + + { faker.finance.amount() } Mb + +     +     + + + { faker.date.weekday() }, 12 { faker.date.month() }, 2018
    + 12:23 PM + + + , + + ]} + /> + + + + { faker.commerce.department() } + + + { faker.commerce.department() } + + + { faker.commerce.department() } + + + + + + + + + + + Share + + + + Download + + + + Delete + + + + Edit + + + + + Copy + + + + + +     +) + +export { TrTableFilesList }; diff --git a/app/routes/Apps/Files/index.js b/app/routes/Apps/Files/index.js new file mode 100755 index 0000000..582ffa7 --- /dev/null +++ b/app/routes/Apps/Files/index.js @@ -0,0 +1,3 @@ +import Files from './Files'; + +export default Files; \ No newline at end of file diff --git a/app/routes/Apps/GalleryGrid/GalleryGrid.js b/app/routes/Apps/GalleryGrid/GalleryGrid.js new file mode 100755 index 0000000..c8faa22 --- /dev/null +++ b/app/routes/Apps/GalleryGrid/GalleryGrid.js @@ -0,0 +1,64 @@ +import React from 'react'; + +import { + Container, + Row, + CardColumns, + Col +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader"; +import { GalleryCard } from "../../components/Gallery/GalleryCard"; +import { Paginations } from "../../components/Paginations"; + +const GalleryGrid = () => ( + + + { /* START Content */} + + + + + + + + + + + + + + +
    + +
    + +     + { /* END Content */} +     +); + +export default GalleryGrid; \ No newline at end of file diff --git a/app/routes/Apps/GalleryGrid/index.js b/app/routes/Apps/GalleryGrid/index.js new file mode 100755 index 0000000..8bf7fcc --- /dev/null +++ b/app/routes/Apps/GalleryGrid/index.js @@ -0,0 +1,3 @@ +import GalleryGrid from './GalleryGrid'; + +export default GalleryGrid; \ No newline at end of file diff --git a/app/routes/Apps/GalleryTable/GalleryTable.js b/app/routes/Apps/GalleryTable/GalleryTable.js new file mode 100755 index 0000000..8f47550 --- /dev/null +++ b/app/routes/Apps/GalleryTable/GalleryTable.js @@ -0,0 +1,85 @@ +import React from 'react'; + +import { + Container, + Row, + Table, + CardFooter, + Card, + Col +} from './../../../components'; + + +import { HeaderMain } from "../../components/HeaderMain"; +import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader"; +import { Paginations } from "../../components/Paginations"; + +import { TrTableGalleryList } from "./components/TrTableGalleryList"; + +const GalleryTable = () => ( + + + + { /* START Content */} + + + + + { /* START Table */} + + + + + + + + + + + + + + + + + + + + + + +
    ThumbTitleAuthorDateInfoAction
    + { /* END Table */} + + + +     + +     + { /* END Content */} +     +     +); + +export default GalleryTable; \ No newline at end of file diff --git a/app/routes/Apps/GalleryTable/components/TrTableGalleryList.js b/app/routes/Apps/GalleryTable/components/TrTableGalleryList.js new file mode 100755 index 0000000..4f36592 --- /dev/null +++ b/app/routes/Apps/GalleryTable/components/TrTableGalleryList.js @@ -0,0 +1,122 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import PropTypes from 'prop-types'; + +import { + Badge, + CustomInput, + Avatar, + HolderProvider, + CardImg, + Media, + AvatarAddOn, + Button, + UncontrolledTooltip +} from './../../../../components'; + +import { randomArray, randomAvatar } from './../../../../utilities'; + +const status = [ + "secondary", + "danger", + "success", + "warning" +]; +const badges = [ + "secondary" +]; + +const TrTableGalleryList = (props) => ( + + + + + + + + + + + + + + { faker.commerce.productName() } + +
    + + { faker.system.fileName() } + +
    + + { faker.commerce.department() } + + + { faker.commerce.department() } + + + { faker.commerce.department() } + +     + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + + + { faker.address.state() }, { faker.address.stateAbbr() } + + + + + + 22-Jul-2012 + + + Size: { faker.random.number() } Kb
    + Format: .png + + + + + Download + + + +     +) + +TrTableGalleryList.propTypes = { + id: PropTypes.node +}; +TrTableGalleryList.defaultProps = { + id: "1" +}; + +export { TrTableGalleryList }; diff --git a/app/routes/Apps/GalleryTable/index.js b/app/routes/Apps/GalleryTable/index.js new file mode 100755 index 0000000..46eba75 --- /dev/null +++ b/app/routes/Apps/GalleryTable/index.js @@ -0,0 +1,3 @@ +import GalleryTable from './GalleryTable'; + +export default GalleryTable; \ No newline at end of file diff --git a/app/routes/Apps/ImagesResults/ImagesResults.js b/app/routes/Apps/ImagesResults/ImagesResults.js new file mode 100755 index 0000000..52bb155 --- /dev/null +++ b/app/routes/Apps/ImagesResults/ImagesResults.js @@ -0,0 +1,50 @@ +import React from 'react'; + +import { + Container, + Row, + CardColumns, + Col +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { SearchResultsLeftNav } from "../../components/SearchResults/SearchResultsLeftNav"; +import { SearchResultsHeader } from "../../components/SearchResults/SearchResultsHeader"; +import { ImagesResultsCard } from "../../components/SearchResults/ImagesResultsCard"; +import { Paginations } from "../../components/Paginations"; + +const ImagesResults = () => ( + + + + { /* START Content */} + + + + + + + + + + + + + + + + + +
    + +
    + +     + { /* END Content */} +     +     +); + +export default ImagesResults; \ No newline at end of file diff --git a/app/routes/Apps/ImagesResults/index.js b/app/routes/Apps/ImagesResults/index.js new file mode 100755 index 0000000..7c549fe --- /dev/null +++ b/app/routes/Apps/ImagesResults/index.js @@ -0,0 +1,3 @@ +import ImagesResults from './ImagesResults'; + +export default ImagesResults; \ No newline at end of file diff --git a/app/routes/Apps/Inbox/Inbox.js b/app/routes/Apps/Inbox/Inbox.js new file mode 100755 index 0000000..766eb6e --- /dev/null +++ b/app/routes/Apps/Inbox/Inbox.js @@ -0,0 +1,138 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import { Link } from 'react-router-dom'; +import _ from 'lodash'; + +import { + Container, + Row, + Col, + ButtonToolbar, + Avatar, + AvatarAddOn, + Card, + Button, + ButtonGroup, + CardBody, + CardFooter, + CustomInput, + Table, + Badge, + InputGroup, + InputGroupAddon, + Input, + UncontrolledTooltip +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { MailboxLeftNav } from "../../components/Mailbox/MailboxLeftNav"; +import { Paginations } from "../../components/Paginations"; +import { TrTableInbox } from "./components/TrTableInbox"; + +const Inbox = () => ( + + + + { /* START Content */} + + + + + + + +
    +
    + + + + + + +
    + + + + + Refresh + + + + Add to Favorites + + + + Tag + + + + Ban this User + + + + Delete + + + + + + Add New + + + +
    +     + { /* START Table */} + + + + + + + + + + + + { + _.times(11, (index) => ( + + )) + } + +
    FromSubject + Date +
    + { /* END Table */} + + + +     + +     + { /* END Content */} +     +     +); + +export default Inbox; \ No newline at end of file diff --git a/app/routes/Apps/Inbox/components/TrTableInbox.js b/app/routes/Apps/Inbox/components/TrTableInbox.js new file mode 100755 index 0000000..6a64048 --- /dev/null +++ b/app/routes/Apps/Inbox/components/TrTableInbox.js @@ -0,0 +1,114 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import PropTypes from 'prop-types'; +import { Link } from 'react-router-dom'; + +import { + Badge, + Avatar, + UncontrolledTooltip, + CustomInput, + AvatarAddOn, + Media +} from './../../../../components'; + +import { randomArray, randomAvatar } from './../../../../utilities'; + +const status = [ + "warning", + "danger", + "success", + "secondary" +]; + + +const tag = [ + "primary", + "secondary", + "info" +]; + + +const TrTableInbox = (props) => ( + + + + { + (Math.round(Math.random())) ? ( + + + + New Message + + + ) : ( + + ) + } + + + + + + + +
    + + + + + Add To Favorites + +
    + , + + ]} + /> +     + + + { faker.name.firstName() } { faker.name.lastName() } + + + { faker.address.state() } + + +     + + + + { faker.company.catchPhrase() } + +
    + { faker.lorem.sentence() } +
    + + { faker.commerce.department() } + + + + 30-Jun-2014
    + 01:54 PM + + + +     +) + +TrTableInbox.propTypes = { + id: PropTypes.string +}; + +export { TrTableInbox }; diff --git a/app/routes/Apps/Inbox/index.js b/app/routes/Apps/Inbox/index.js new file mode 100755 index 0000000..d51848e --- /dev/null +++ b/app/routes/Apps/Inbox/index.js @@ -0,0 +1,3 @@ +import Inbox from './Inbox'; + +export default Inbox; \ No newline at end of file diff --git a/app/routes/Apps/NewEmail/NewEmail.js b/app/routes/Apps/NewEmail/NewEmail.js new file mode 100755 index 0000000..0e9ac22 --- /dev/null +++ b/app/routes/Apps/NewEmail/NewEmail.js @@ -0,0 +1,143 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Container, + Row, + Col, + Card, + Button, + ButtonGroup, + CardBody, + CardFooter, + Badge, + ButtonToolbar, + InputGroup, + InputGroupAddon, + Input, + UncontrolledTooltip +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { MailboxLeftNav } from "../../components/Mailbox/MailboxLeftNav"; +import { Attachment } from "../../components/Attachment"; + +const NewEmail = () => ( + + + + { /* START Content */} + + + + + + + + { /* START Header */} +
    +
    + +
    + + + + + + + + Send Now + + + +
    + { /* END Header */} + { /* START Forms */} +
    + + + To: + + + + + + + + + + + CC: + + + + + + + + BCC: + + + + + + + + Subject: + + + + +
    + { /* END Forms */} + { /* START Attachments */} +
    +
    + + Attachments + + 3 +
    + + + +
    + +     + + + +     + +     + { /* END Content */} +     +     +); + +export default NewEmail; \ No newline at end of file diff --git a/app/routes/Apps/NewEmail/index.js b/app/routes/Apps/NewEmail/index.js new file mode 100755 index 0000000..e6a760a --- /dev/null +++ b/app/routes/Apps/NewEmail/index.js @@ -0,0 +1,3 @@ +import NewEmail from './NewEmail'; + +export default NewEmail; \ No newline at end of file diff --git a/app/routes/Apps/ProfileDetails/ProfileDetails.js b/app/routes/Apps/ProfileDetails/ProfileDetails.js new file mode 100755 index 0000000..83f77dd --- /dev/null +++ b/app/routes/Apps/ProfileDetails/ProfileDetails.js @@ -0,0 +1,357 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import { Link } from 'react-router-dom'; + +import { + Container, + Row, + Col, + CardHeader, + DropdownToggle, + DropdownItem, + DropdownMenu, + UncontrolledButtonDropdown, + Card, + ButtonGroup, + Button, + CardBody, + CardFooter, + CardGroup, + Table, + TabPane, + Badge, + Nav, + NavItem, + UncontrolledTabs +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; + +import { Profile } from "../../components/Profile"; +import { ProfileOverviewCard } from "../../components/Profile/ProfileOverviewCard"; +import { DlRowContacts } from "../../components/Profile/DlRowContacts"; +import { DlRowAddress } from "../../components/Profile/DlRowAddress"; +import { ChatLeft } from "../../components/Chat/ChatLeft"; +import { ChatRight } from "../../components/Chat/ChatRight"; +import { ChatCardFooter } from "../../components/Chat/ChatCardFooter"; +import { TrTableMessages } from "./components/TrTableMessages"; +import { TimelineDefault } from "../../components/Timeline/TimelineDefault"; + + +const ProfileDetails = () => ( + + + + { /* START Content */} + + + + + +
    +
      +
    • +

      23

      + Contracts +
      • +
    • +

      13

      + Tasks +
      • +
    • +

      5

      + Relases +
      • +
    +
    + + + + + + + + +
    + + Profile + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Dicta sapiente earum, necessitatibus commodi eius pariatur + repudiandae cum sunt officiis ex! +

    +
    + + Labels + +
    +
    + + { faker.commerce.department() } + + + { faker.commerce.department() } + + + { faker.commerce.department() } + +
    +
    + Contact +
    + +
    + Address +
    + +     +     + + + + { /* START Pills Nav */} + + { /* END Pills Nav */} + + + + + + + + + + + + + + + + + + + + + + +
    + Contact +
    + +
    + Address +
    + +     +     + + + +
    + Chat with Romaine Weber +
    + + + + + + + + Private Message + + + + Search this Thread + + + + + Block this User + + + +     + + + + +
    + + Yesterday + +
    + +     + + + +     +     + + + + + + + + + Showing 1 to 10 of 57 entries + + + { /* START Table */} + + + + + + + + + + + + + + + + + + + +
    FromSubject + Date +
    + { /* END Table */} + + + + + + + Showing 1 to 10 of 57 entries + + +     +     +     +     + +     + { /* END Content */} + +     +     +); + +export default ProfileDetails; \ No newline at end of file diff --git a/app/routes/Apps/ProfileDetails/components/TrTableMessages.js b/app/routes/Apps/ProfileDetails/components/TrTableMessages.js new file mode 100755 index 0000000..6754065 --- /dev/null +++ b/app/routes/Apps/ProfileDetails/components/TrTableMessages.js @@ -0,0 +1,81 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import { Link } from 'react-router-dom'; + +import { + Badge, + Avatar, + AvatarAddOn, + Media +} from './../../../../components'; + +import { randomArray } from './../../../../utilities'; + +const status = [ + "warning", + "danger", + "success", + "secondary" +]; + +const tag = [ + "primary", + "secondary", + "info" +]; + + +const TrTableMessages = () => ( + + + + + + , + + ]} + /> + + +
    + { faker.name.firstName() } { faker.name.lastName() } +
    + + { faker.address.state() } + +     +     + + + + { faker.company.catchPhrase() } + +
    +
    + { faker.lorem.sentence() } +
    + + { faker.commerce.department() } + + + + 30-Jun-2014
    + 01:54 PM + + +     +) + +export { TrTableMessages }; diff --git a/app/routes/Apps/ProfileDetails/index.js b/app/routes/Apps/ProfileDetails/index.js new file mode 100755 index 0000000..2ed4800 --- /dev/null +++ b/app/routes/Apps/ProfileDetails/index.js @@ -0,0 +1,3 @@ +import ProfileDetails from './ProfileDetails'; + +export default ProfileDetails; \ No newline at end of file diff --git a/app/routes/Apps/ProfileEdit/ProfileEdit.js b/app/routes/Apps/ProfileEdit/ProfileEdit.js new file mode 100755 index 0000000..6bac85a --- /dev/null +++ b/app/routes/Apps/ProfileEdit/ProfileEdit.js @@ -0,0 +1,207 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Input, + Card, + Button, + CardBody, + CardFooter, + FormText, + CardTitle, + CustomInput, + Label, + FormGroup, + Form +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { ProfileLeftNav } from "../../components/Profile/ProfileLeftNav"; +import { ProfileHeader } from "../../components/Profile/ProfileHeader"; + +const ProfileEdit = () => ( + + + + { /* START Content */} + + + + + + + + + + +
    + + Profile Edit + + + Fields mark as * is required. + +
    +
    +
    + Required +
    + { /* START File Select */} + + + + + + JPG, GIF, PNG, MOV and AVI. Please choose a files under 2GB to upload. File sizes are 400 x 300px. + + + + { /* END File Select */} + { /* START Input */} + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + { /* END Input */} + { /* START Select */} + + + + + + + + + + + + + + { /* END Select */} +
    + Availability +
    + { /* START Radios */} + + + + + + + + + +
    + Fill Profile +
    + { /* END Radios */} + { /* START Textarea */} + + + + + + + { /* END Textarea */} + { /* START Input */} + + + + + + + { /* END Input */} +
    + { /* END Form */} +     + + + +     + +     + { /* END Content */} + +     +     +); + +export default ProfileEdit; \ No newline at end of file diff --git a/app/routes/Apps/ProfileEdit/index.js b/app/routes/Apps/ProfileEdit/index.js new file mode 100755 index 0000000..0152505 --- /dev/null +++ b/app/routes/Apps/ProfileEdit/index.js @@ -0,0 +1,3 @@ +import ProfileEdit from './ProfileEdit'; + +export default ProfileEdit; \ No newline at end of file diff --git a/app/routes/Apps/Projects/Projects.js b/app/routes/Apps/Projects/Projects.js new file mode 100755 index 0000000..28a5795 --- /dev/null +++ b/app/routes/Apps/Projects/Projects.js @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { + Container, + Row, + Col +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; + +import ProjectsList from './ProjectsList'; +import ProjectsGrid from './ProjectsGrid'; +import { ProjectsLeftNav } from "../../components/Projects/ProjectsLeftNav"; +import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader"; + +const Projects = (props) => ( + + + + + + + + + + + { + props.match.params.type === "list" ? + : + + } + + + + +); +Projects.propTypes = { + match: PropTypes.object.isRequired +}; + +export default Projects; \ No newline at end of file diff --git a/app/routes/Apps/Projects/ProjectsGrid.js b/app/routes/Apps/Projects/ProjectsGrid.js new file mode 100755 index 0000000..d0921f4 --- /dev/null +++ b/app/routes/Apps/Projects/ProjectsGrid.js @@ -0,0 +1,23 @@ +import React from 'react'; +import _ from 'lodash'; + +import { CardColumns } from './../../../components'; +import { ProjectsCardGrid } from "../../components/Projects/ProjectsCardGrid"; +import { Paginations } from "../../components/Paginations"; + +const ProjectsGrid = () => ( + + + { + _.times(12, (index) => ( + + )) + } + +
    + +
    +     +); + +export default ProjectsGrid; \ No newline at end of file diff --git a/app/routes/Apps/Projects/ProjectsList.js b/app/routes/Apps/Projects/ProjectsList.js new file mode 100755 index 0000000..f42cdc6 --- /dev/null +++ b/app/routes/Apps/Projects/ProjectsList.js @@ -0,0 +1,71 @@ +import React from 'react'; + +import { + Pagination, + PaginationItem, + PaginationLink, + Card, + CardFooter, + Table +} from './../../../components'; + +import { + TrTableProjectsList +} from "./components/TrTableProjectsList"; + +const ProjectsList = () => ( + + { /* START Table */} +
    + + + + + + + + + + + + + + +
    StarProjectStatusTasks CompletedPeople + Actions +
    +
    + { /* END Table */} + + + + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + + + + + +     +); + +export default ProjectsList; diff --git a/app/routes/Apps/Projects/components/TrTableProjectsList.js b/app/routes/Apps/Projects/components/TrTableProjectsList.js new file mode 100755 index 0000000..025e285 --- /dev/null +++ b/app/routes/Apps/Projects/components/TrTableProjectsList.js @@ -0,0 +1,115 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import _ from 'lodash'; +import { Link } from 'react-router-dom'; + +import { + Badge, + Progress, + Avatar, + UncontrolledButtonDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem +} from './../../../../components'; +import { randomAvatar } from './../../../../utilities'; + +/*eslint-disable */ +const status = [ + + Active + , + + Suspended + , + + Waiting + , + + Paused + +]; +/*eslint-enable */ +/*eslint-disable */ +const tasksCompleted = [ + "25", + "50", + "70", + "90" +]; +/*eslint-enable */ + +const TrTableProjectsList = () => ( + + { + _.times(12, (index) => ( + + +
    + + + +
    + + +
    + + { faker.company.catchPhrase() } + +
    + + Last Edited by: { faker.name.firstName() } { faker.name.lastName() }
    + { faker.date.weekday() }, 12 { faker.date.month() }, 2018 +     + + + { status[index%4] } + + + +
    + Tasks Completed: + + 36/94 + +
    + + + + + + + + + + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + + + )) + } +     +) + +export { TrTableProjectsList }; diff --git a/app/routes/Apps/Projects/index.js b/app/routes/Apps/Projects/index.js new file mode 100755 index 0000000..1aa35a6 --- /dev/null +++ b/app/routes/Apps/Projects/index.js @@ -0,0 +1,3 @@ +import Projects from './Projects'; + +export default Projects; \ No newline at end of file diff --git a/app/routes/Apps/SearchResults/SearchResults.js b/app/routes/Apps/SearchResults/SearchResults.js new file mode 100755 index 0000000..1cffd6b --- /dev/null +++ b/app/routes/Apps/SearchResults/SearchResults.js @@ -0,0 +1,48 @@ +import React from 'react'; + +import { + Container, + Row, + Col +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { SearchResultsLeftNav } from + "../../components/SearchResults/SearchResultsLeftNav"; +import { SearchResultsHeader } from + "../../components/SearchResults/SearchResultsHeader"; +import { SearchResultsCard } from + "../../components/SearchResults/SearchResultsCard"; +import { Paginations } from "../../components/Paginations"; + +const SearchResults = () => ( + + + + { /* START Content */} + + + + + + + + + + + + + +
    + +
    + +     + { /* END Content */} +     +     +); + +export default SearchResults; diff --git a/app/routes/Apps/SearchResults/index.js b/app/routes/Apps/SearchResults/index.js new file mode 100755 index 0000000..c6cc719 --- /dev/null +++ b/app/routes/Apps/SearchResults/index.js @@ -0,0 +1,3 @@ +import SearchResults from './SearchResults'; + +export default SearchResults; \ No newline at end of file diff --git a/app/routes/Apps/SessionsEdit/SessionsEdit.js b/app/routes/Apps/SessionsEdit/SessionsEdit.js new file mode 100755 index 0000000..8086023 --- /dev/null +++ b/app/routes/Apps/SessionsEdit/SessionsEdit.js @@ -0,0 +1,66 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Table, + Card, + CardBody, + CardTitle +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { ProfileLeftNav } from "../../components/Profile/ProfileLeftNav"; +import { ProfileHeader } from "../../components/Profile/ProfileHeader"; +import { TrTableResponsive } from "./../../Tables/Tables/components/TrTableResponsive"; + +const BillingEdit = () => ( + + + + { /* START Content */} + + + + + + + + + + + + Billing History + + + { /* START Table */} + + + + + + + + + + + + + + +
    #Browser & OSIPLocationSigned In + Action +
    + { /* END Table */} +     + +     + { /* END Content */} +     +     +); + +export default BillingEdit; diff --git a/app/routes/Apps/SessionsEdit/index.js b/app/routes/Apps/SessionsEdit/index.js new file mode 100755 index 0000000..c0eab17 --- /dev/null +++ b/app/routes/Apps/SessionsEdit/index.js @@ -0,0 +1,3 @@ +import SessionsEdit from './SessionsEdit'; + +export default SessionsEdit; \ No newline at end of file diff --git a/app/routes/Apps/SettingsEdit/SettingsEdit.js b/app/routes/Apps/SettingsEdit/SettingsEdit.js new file mode 100755 index 0000000..25a4adb --- /dev/null +++ b/app/routes/Apps/SettingsEdit/SettingsEdit.js @@ -0,0 +1,114 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Input, + Card, + Button, + CardBody, + CardFooter, + FormText, + CardTitle, + CustomInput, + Label, + FormGroup, + Form +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { ProfileLeftNav } from "../../components/Profile/ProfileLeftNav"; +import { ProfileHeader } from "../../components/Profile/ProfileHeader"; + +const SettingsEdit = () => ( + + + + { /* START Content */} + + + + + + + + + + + + Settings Edit + +
    + { /* START Input */} + + +

    + Do you want receive our monthly newsletter about + new products and offers? +

    + +     + { /* END Input */} + { /* START Input */} + + +

    + Do you want notify you by email whenever contacts send you a message? +

    + + +     + { /* END Input */} + { /* START Input */} + + +

    + Control the emails that publications send to you. +

    + +     + { /* END Input */} + { /* START Input */} + + +

    + Notify me via email when... +

    + + + +     + { /* END Input */} + + +
    + { /* END Form */} +     + + + If you have trouble with the configuration, you can contact us. We Can Help + +     + +     + { /* END Content */} + +     +     +); + +export default SettingsEdit; \ No newline at end of file diff --git a/app/routes/Apps/SettingsEdit/index.js b/app/routes/Apps/SettingsEdit/index.js new file mode 100755 index 0000000..6a18228 --- /dev/null +++ b/app/routes/Apps/SettingsEdit/index.js @@ -0,0 +1,3 @@ +import SettingsEdit from './SettingsEdit'; + +export default SettingsEdit; \ No newline at end of file diff --git a/app/routes/Apps/Tasks/Tasks.js b/app/routes/Apps/Tasks/Tasks.js new file mode 100755 index 0000000..19ece1f --- /dev/null +++ b/app/routes/Apps/Tasks/Tasks.js @@ -0,0 +1,52 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { + Container, + Row, + Col +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; + +import TasksList from './TasksList'; +import TasksGrid from './TasksGrid'; +import { ProjectsLeftNav } from "../../components/Projects/ProjectsLeftNav"; +import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader"; + +const Tasks = (props) => ( + + + + + + + + + + + { + props.match.params.type === "list" ? + : + + } + + + + +); +Tasks.propTypes = { + match: PropTypes.object.isRequired +}; + +export default Tasks; \ No newline at end of file diff --git a/app/routes/Apps/Tasks/TasksGrid.js b/app/routes/Apps/Tasks/TasksGrid.js new file mode 100755 index 0000000..d3bf8c0 --- /dev/null +++ b/app/routes/Apps/Tasks/TasksGrid.js @@ -0,0 +1,42 @@ +import React from 'react'; + +import { CardColumns } from './../../../components'; +import { Paginations } from "../../components/Paginations"; +import { TasksCardGrid } from "../../components/Tasks/TasksCardGrid"; + +const TasksGrid = () => ( + + + + + + + + + + + + +
    + +
    +     +); + +export default TasksGrid; \ No newline at end of file diff --git a/app/routes/Apps/Tasks/TasksList.js b/app/routes/Apps/Tasks/TasksList.js new file mode 100755 index 0000000..45cb36d --- /dev/null +++ b/app/routes/Apps/Tasks/TasksList.js @@ -0,0 +1,97 @@ +import React from 'react'; + +import { + Pagination, + PaginationItem, + PaginationLink, + Card, + CardFooter, + Table +} from './../../../components'; + +import { TrTableTasksList } from "./components/TrTableTasksList"; + +const TasksList = () => ( + + { /* START Table */} +
    + + + + + + + + + + + + + + + + + + + + + + + +
    #PriorityTitle & DescriptionPeopleUpdate + Actions +
    +
    + { /* END Table */} + + + + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + + + + + +     + +); + +export default TasksList; diff --git a/app/routes/Apps/Tasks/components/TrTableTasksList.js b/app/routes/Apps/Tasks/components/TrTableTasksList.js new file mode 100755 index 0000000..b36ed23 --- /dev/null +++ b/app/routes/Apps/Tasks/components/TrTableTasksList.js @@ -0,0 +1,159 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import PropTypes from 'prop-types'; +import { Link } from 'react-router-dom'; + +import { + Badge, + Avatar, + CustomInput, + UncontrolledButtonDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + AvatarAddOn +} from './../../../../components'; + +import { randomArray, randomAvatar } from './../../../../utilities'; + +const badges = [ + "secondary" +]; + +const avatarStatus = [ + "secondary", + "warning", + "danger", + "success" +]; + +const prioStatus = [ + + + Small + , + + + Normal + , + + + High + , + + + Big + +]; + +const TrTableTasksList = (props) => ( + + + + + + + + + { randomArray(prioStatus) } + + + Select Priority + + + Big + + + + High + + + + Normal + + + + Small + + + + + +
    + #{ faker.random.number() } + + { faker.hacker.phrase() } + +
    +

    + + { faker.lorem.sentence() } + + + { faker.commerce.department() } + + + { faker.commerce.department() } + +

    + + + , + + ]} + /> + + + 16-Jul-2016 + + + + + + + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + + +     +) + +TrTableTasksList.propTypes = { + id: PropTypes.node +}; +TrTableTasksList.defaultProps = { + id: "1" +}; + +export { TrTableTasksList }; diff --git a/app/routes/Apps/Tasks/index.js b/app/routes/Apps/Tasks/index.js new file mode 100755 index 0000000..d17a5f9 --- /dev/null +++ b/app/routes/Apps/Tasks/index.js @@ -0,0 +1,3 @@ +import Tasks from './Tasks'; + +export default Tasks; \ No newline at end of file diff --git a/app/routes/Apps/TasksDetails/TasksDetails.js b/app/routes/Apps/TasksDetails/TasksDetails.js new file mode 100755 index 0000000..10d5b1e --- /dev/null +++ b/app/routes/Apps/TasksDetails/TasksDetails.js @@ -0,0 +1,323 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Container, + Row, + Col, + Nav, + NavItem, + NavLink, + Table, + Button, + Card, + CardBody, + CardFooter, + UncontrolledButtonDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + Media, + Input, + InputGroup, + CustomInput, + InputGroupAddon, + Badge, + Avatar +} from './../../../components'; +import { randomAvatar } from './../../../utilities'; +import { HeaderMain } from "../../components/HeaderMain"; +import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader"; +import { Attachment } from "../../components/Attachment"; +import { Comment } from "../../components/Comment"; + +const TasksDetails = () => ( + + + + { /* START Header 1 */} + + + { /* START Left Nav */} +
    +
    + Task Details +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Project + Analytics Redo +
    Assigned by + + { faker.name.firstName() } { faker.name.lastName() } + +
    Start Date + Thu 12 May 2016 +
    End Date + Wed 18 May 2016 +
    Priority + + + + Small + + + Select Priority + + + Big + + + + High + + + + Normal + + + + Small + + + +
    Progress + 30% +
    Task ID + # 6726746 +
    Date Assigned + Wed, 16 Dec 2015, 12:17 PM +
    +
    + { /* END Left Nav */} + { /* START Left Nav */} +
    +
    + Assigned to +
    + +
    + { /* END Left Nav */} + + + + { /* START Right Content */} + + + + + + + +
    +
    + + #{ faker.random.number() } + + { faker.hacker.phrase() } +
    + + { faker.commerce.department() } + + + { faker.commerce.department() } + + + { faker.commerce.department() } + +
    +     +     +

    + Animi ea magni voluptates accusamus laboriosam. Unde repellat hic id et aliquam ut qui dignissimos. +

    +

    + { faker.lorem.paragraphs() } +

    + { /* START Atachemnts */} +
    +
    + + Attachments + + + 3 + +
    +
    + +
    +
    + +
    +
    + +
    + +
    + { /* END Atachemnts */} +
    + + Comments + + + 3 + +
    + + + { /* END Comment Media */} +     + + + + + + + + + + + +     + { /* END Right Content */} + +     + { /* END Header 1 */} + +     +     +); + +export default TasksDetails; \ No newline at end of file diff --git a/app/routes/Apps/TasksDetails/index.js b/app/routes/Apps/TasksDetails/index.js new file mode 100755 index 0000000..58465c7 --- /dev/null +++ b/app/routes/Apps/TasksDetails/index.js @@ -0,0 +1,3 @@ +import TasksDetails from './TasksDetails'; + +export default TasksDetails; \ No newline at end of file diff --git a/app/routes/Apps/TasksKanban/TasksKanban.js b/app/routes/Apps/TasksKanban/TasksKanban.js new file mode 100755 index 0000000..a1dfd5e --- /dev/null +++ b/app/routes/Apps/TasksKanban/TasksKanban.js @@ -0,0 +1,216 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Card, + CardTitle, + CardBody, + CardFooter, + CardColumns, + Badge, + UncontrolledTooltip +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; + +import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader"; +import { TasksCardGrid } from "../../components/Tasks/TasksCardGrid"; + +const TasksKanban = () => ( + + + + { /* START Header 1 */} + + + + + { /* START Card */} + + + { /* START Card Header */} +
    + + To-Do + + 3 + + + + 16 Jun 2016 - 23 Aug 2016 + + + + + + + + + + + + Settings + + + Collapse + + + Add New + + + +
    + { /* END CardHeader */} + + + +     + { /* START Card Footer */} + + + + Add Task + + + { /* END Card Footer */} +     + { /* END Card */} + { /* START Card */} + + + { /* START Card Header */} +
    + + Doing + + 2 + + + + 16 Jun 2016 - 23 Aug 2016 + + + + + + + + + + + + Settings + + + Collapse + + + Add New + + + +
    + { /* END CardHeader */} + + +     + { /* START Card Footer */} + + + + Add Task + + + { /* END Card Footer */} +     + { /* END Card */} + { /* START Card */} + + + { /* START Card Header */} +
    + + Done + + 1 + + + + 16 Jun 2016 - 23 Aug 2016 + + + + + + + + + + + + Settings + + + Collapse + + + Add New + + + +
    + { /* END CardHeader */} + +     + { /* START Card Footer */} + + + + Add Task + + + { /* END Card Footer */} +     + { /* END Card */} + { /* START Card */} + + + + + Add New Column + + + + { /* END Card */} +     + +     + { /* END Header 1 */} + +     +     +); + +export default TasksKanban; \ No newline at end of file diff --git a/app/routes/Apps/TasksKanban/index.js b/app/routes/Apps/TasksKanban/index.js new file mode 100755 index 0000000..a56f2ad --- /dev/null +++ b/app/routes/Apps/TasksKanban/index.js @@ -0,0 +1,3 @@ +import TasksKanban from './TasksKanban'; + +export default TasksKanban; \ No newline at end of file diff --git a/app/routes/Apps/Users/Users.js b/app/routes/Apps/Users/Users.js new file mode 100755 index 0000000..33c7da6 --- /dev/null +++ b/app/routes/Apps/Users/Users.js @@ -0,0 +1,48 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { + Container, + Row, + Col +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import UsersList from './UsersList'; +import UsersGrid from './UsersGrid'; +import { UsersLeftNav } from "../../components/Users/UsersLeftNav"; +import { ProjectsSmHeader } from "../../components/Projects/ProjectsSmHeader"; + +const Users = (props) => ( + + + + + + + + + + + { + props.match.params.type === "list" ? + : + + } + + + + +); +Users.propTypes = { + match: PropTypes.object.isRequired +}; + + +export default Users; \ No newline at end of file diff --git a/app/routes/Apps/Users/UsersGrid.js b/app/routes/Apps/Users/UsersGrid.js new file mode 100755 index 0000000..1a0f579 --- /dev/null +++ b/app/routes/Apps/Users/UsersGrid.js @@ -0,0 +1,51 @@ +import React from 'react'; + +import { CardColumns } from './../../../components'; +import { UsersCardGrid } from "../../components/Users/UsersCardGrid"; +import { Paginations } from "../../components/Paginations"; + +const UsersGrid = () => ( + + + + + + + + + + + + + + + +
    + +
    +     +); + +export default UsersGrid; \ No newline at end of file diff --git a/app/routes/Apps/Users/UsersList.js b/app/routes/Apps/Users/UsersList.js new file mode 100755 index 0000000..42dc6a8 --- /dev/null +++ b/app/routes/Apps/Users/UsersList.js @@ -0,0 +1,71 @@ +import React from 'react'; + +import { + Card, + CardFooter, + Table, +} from './../../../components'; + +import { + TrTableUsersList +} from "./components/TrTableUsersList"; + +import { + Paginations +} from "../../components/Paginations"; + +const UsersList = () => ( + + { /* START Table */} +
    + + + + + + + + + + + + + + + + + + + + + + +
    NameEmailPhone + Actions +
    +
    + { /* END Table */} + + + +     + +); + +export default UsersList; \ No newline at end of file diff --git a/app/routes/Apps/Users/components/TrTableUsersList.js b/app/routes/Apps/Users/components/TrTableUsersList.js new file mode 100755 index 0000000..0242115 --- /dev/null +++ b/app/routes/Apps/Users/components/TrTableUsersList.js @@ -0,0 +1,176 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import PropTypes from 'prop-types'; + +import { + Media, + Avatar, + AvatarAddOn, + CustomInput, + UncontrolledButtonDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem +} from './../../../../components'; + +import { randomArray, randomAvatar } from './../../../../utilities'; + +const TrTableUsersList = (props) => { + + const avatar = [ + [ + , + + ], + [ + , + + ], + [ + , + + ], + [ + , + + ], + [ + , + + ], + ]; + return ( + + + + + + + + + + + + + + , + ...randomArray(avatar) + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + + + { faker.name.jobTitle() } + + + + + + { faker.internet.email() } + + + { faker.phone.phoneNumberFormat() } + + + + + + + + + + Call + + + + Chat + + + + Video + + + + Profile + + + + Edit + + + + + Delete + + + + + + + ) +} +TrTableUsersList.propTypes = { + id: PropTypes.node +}; +TrTableUsersList.defaultProps = { + id: "1" +}; + +export { TrTableUsersList }; diff --git a/app/routes/Apps/Users/index.js b/app/routes/Apps/Users/index.js new file mode 100755 index 0000000..5b89f36 --- /dev/null +++ b/app/routes/Apps/Users/index.js @@ -0,0 +1,3 @@ +import Users from './Users'; + +export default Users; \ No newline at end of file diff --git a/app/routes/Apps/UsersResults/UsersResults.js b/app/routes/Apps/UsersResults/UsersResults.js new file mode 100755 index 0000000..3f9c5e4 --- /dev/null +++ b/app/routes/Apps/UsersResults/UsersResults.js @@ -0,0 +1,50 @@ +import React from 'react'; + +import { + Container, + Row, + CardColumns, + Col +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { SearchResultsLeftNav } from "../../components/SearchResults/SearchResultsLeftNav"; +import { SearchResultsHeader } from "../../components/SearchResults/SearchResultsHeader"; +import { UsersResultsCard } from "../../components/SearchResults/UsersResultsCard"; +import { Paginations } from "../../components/Paginations"; + +const UsersResults = () => ( + + + + { /* START Content */} + + + + + + + + + + + + + + + + + +
    + +
    + +     + { /* END Content */} +     +     +); + +export default UsersResults; \ No newline at end of file diff --git a/app/routes/Apps/UsersResults/index.js b/app/routes/Apps/UsersResults/index.js new file mode 100755 index 0000000..1717610 --- /dev/null +++ b/app/routes/Apps/UsersResults/index.js @@ -0,0 +1,3 @@ +import UsersResults from './UsersResults'; + +export default UsersResults; \ No newline at end of file diff --git a/app/routes/Apps/VideosResults/VideosResults.js b/app/routes/Apps/VideosResults/VideosResults.js new file mode 100755 index 0000000..d8b3a3f --- /dev/null +++ b/app/routes/Apps/VideosResults/VideosResults.js @@ -0,0 +1,45 @@ +import React from 'react'; + +import { + Container, + Row, + Col +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { SearchResultsLeftNav } from "../../components/SearchResults/SearchResultsLeftNav"; +import { SearchResultsHeader } from "../../components/SearchResults/SearchResultsHeader"; +import { VideosResultsCard } from "../../components/SearchResults/VideosResultsCard"; +import { Paginations } from "../../components/Paginations"; + +const VideosResults = () => ( + + + + { /* START Content */} + + + + + + + + + + + + +
    + +
    + +     + { /* END Content */} +     +     +); + +export default VideosResults; diff --git a/app/routes/Apps/VideosResults/index.js b/app/routes/Apps/VideosResults/index.js new file mode 100755 index 0000000..5663697 --- /dev/null +++ b/app/routes/Apps/VideosResults/index.js @@ -0,0 +1,3 @@ +import VideosResults from './VideosResults'; + +export default VideosResults; \ No newline at end of file diff --git a/app/routes/Cards/Cards/Cards.js b/app/routes/Cards/Cards/Cards.js new file mode 100755 index 0000000..b186200 --- /dev/null +++ b/app/routes/Cards/Cards/Cards.js @@ -0,0 +1,601 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Card, + CardHeader, + CardBody, + CardTitle, + CardText +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; + +import { + HeaderDemo +} from "../../components/HeaderDemo"; + +const cardText = ({ cardNo }) => ( + + + #{ cardNo } + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nisl elit, porta a sapien eget, fringilla sagittis ex. + +); + +const cardContent = (title = 'Some Card Title') => ( + + + { title } + + { cardText } + +); + +const Cards = () => ( + + + + { /* START Header 1 */} + + + + + + { /* END Header 1 */} + { /* START Section 1 */} + + + + + Default Card + + + { cardText({ cardNo: "1.01" }) } + + + + + White Card + + + { cardText({ cardNo: "1.02" }) } + + + + + Primary Card + + + { cardText({ cardNo: "1.03" }) } + + + + + Secondary Card + + + { cardText({ cardNo: "1.04" }) } + + + + + Info Card + + + { cardText({ cardNo: "1.05" }) } + + + + + Success Card + + + { cardText({ cardNo: "1.06" }) } + + + + + + + Warning Card + + + { cardText({ cardNo: "1.07" }) } + + + + + Danger Card + + + { cardText({ cardNo: "1.08" }) } + + + + + Dark Card + + + { cardText({ cardNo: "1.09" }) } + + + + + Facebook Card + + + { cardText({ cardNo: "1.10" }) } + + + + + + Without Header + + Optional + + + { cardText({ cardNo: "1.11" }) } + + + + + { /* END Section 1 */} + + { /* START Header 2 */} + + + + + + { /* END Header 2 */} + { /* START Section 2 */} + + + + + + Dark Border Card + + { cardText({ cardNo: "2.01" }) } + + + + + + Primary Border Card + + { cardText({ cardNo: "2.02" }) } + + + + + + Secondary Border Card + + { cardText({ cardNo: "2.03" }) } + + + + + + Info Border Card + + { cardText({ cardNo: "2.04" }) } + + + + + + + + Success Border Card + + { cardText({ cardNo: "2.05" }) } + + + + + + Warning Border Card + + { cardText({ cardNo: "2.01" }) } + + + + + + Danger Border Card + + { cardText({ cardNo: "2.01" }) } + + + + + + Facebook Border Card + + { cardText({ cardNo: "2.01" }) } + + + + + { /* END Section 2 */} + + { /* START Header 3 */} + + + + + + { /* END Header 3 */} + { /* START Section 3 */} + + + + + + Left Dark Border + + { cardText({ cardNo: "3.01" }) } + + + + + + Left Primary Border + + { cardText({ cardNo: "3.02" }) } + + + + + + Left Secondary Border + + { cardText({ cardNo: "3.03" }) } + + + + + + Left Info Border + + { cardText({ cardNo: "3.04" }) } + + + + + + + + Left Success Border + + { cardText({ cardNo: "3.05" }) } + + + + + + Left Warning Border + + { cardText({ cardNo: "3.06" }) } + + + + + + Left Danger Border + + { cardText({ cardNo: "3.07" }) } + + + + + + Left Facebook Border + + { cardText({ cardNo: "3.08" }) } + + + + + { /* END Section 3 */} + + { /* START Header 4 */} + + + + + + { /* END Header 4 */} + { /* START Section 4 */} + + + + + Bottom Dark Border + + + { cardText({ cardNo: "4.01" }) } + + + + + Bottom Primary Border + + + { cardText({ cardNo: "4.02" }) } + + + + + Bottom Secondary Border + + + { cardText({ cardNo: "4.03" }) } + + + + + Bottom Success Border + + + { cardText({ cardNo: "4.04" }) } + + + + + Bottom Info Border + + + { cardText({ cardNo: "4.05" }) } + + + + + + + Bottom Warning Border + + + { cardText({ cardNo: "4.06" }) } + + + + + Bottom Danger Border + + + { cardText({ cardNo: "4.07" }) } + + + + + Bottom Dark Border + + + { cardText({ cardNo: "4.08" }) } + + + + + Bottom Facebook Border + + + { cardText({ cardNo: "4.09" }) } + + + + + { /* END Section 4 */} + + { /* START Header 5 */} + + + + + + { /* END Header 5 */} + { /* START Section 5 */} + + + + + + White Background + + { cardText({ cardNo: "5.01" }) } + + + + + + Primary Background + + { cardText({ cardNo: "5.02" }) } + + + + + + Secondary Background + + { cardText({ cardNo: "5.03" }) } + + + + + + Success Background + + { cardText({ cardNo: "5.04" }) } + + + + + + Warning Background + + { cardText({ cardNo: "5.05" }) } + + + + + + + + Info Background + + { cardText({ cardNo: "5.06" }) } + + + + + + Danger Background + + { cardText({ cardNo: "5.07" }) } + + + + + + Dark Background + + { cardText({ cardNo: "5.04" }) } + + + + + + Facebook Background + + { cardText({ cardNo: "5.05" }) } + + + + + { /* END Section 5 */} + + { /* START Header 6 */} + + + + + + { /* END Header 6 */} + { /* START Section 6 */} + + + + + + Without Background + + { cardText({ cardNo: "6.01" }) } + + + + + + Dashed Border Card + + { cardText({ cardNo: "6.02" }) } + + + + + + Shadow Custom + + { cardText({ cardNo: "6.03" }) } + + + + + + + + Dotted Border Card + + { cardText({ cardNo: "6.04" }) } + + + + + + Without Border & Background Card + + { cardText({ cardNo: "6.05" }) } + + + + + { /* END Section 6 */} + + +); + +export default Cards; diff --git a/app/routes/Cards/Cards/index.js b/app/routes/Cards/Cards/index.js new file mode 100755 index 0000000..2899dc5 --- /dev/null +++ b/app/routes/Cards/Cards/index.js @@ -0,0 +1,3 @@ +import Cards from './Cards'; + +export default Cards; \ No newline at end of file diff --git a/app/routes/Cards/CardsHeaders/CardsHeaders.js b/app/routes/Cards/CardsHeaders/CardsHeaders.js new file mode 100755 index 0000000..1934f0a --- /dev/null +++ b/app/routes/Cards/CardsHeaders/CardsHeaders.js @@ -0,0 +1,1386 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Card, + Badge, + ButtonGroup, + Progress, + Button, + ButtonToolbar, + Nav, + CustomInput, + NavItem, + Input, + Form, + InputGroup, + InputGroupAddon, + FormGroup, + Pagination, + PaginationItem, + PaginationLink, + TabPane, + UncontrolledTabs, + UncontrolledButtonDropdown, + DropdownMenu, + DropdownItem, + DropdownToggle, + CardHeader, + CardBody, + CardTitle +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { + HeaderDemo +} from "../../components/HeaderDemo"; +import { + CardTextDemo +} from "../../components/CardTextDemo"; + + +const Cards = () => ( + + + + { /* START Header 1 */} + + + + + + { /* END Header 1 */} + { /* START Section 1 */} + + + { /* START Card */} + + + + Default Header + + + + + { /* END Card */} + { /* START Card */} + + + + Header Above Small Text
    + + Small Text + +     + +     +     + { /* END Card */} + { /* START Card */} + + + + Default Small Text + + 3 + + + + + + { /* END Card */} + { /* START Card */} + + + + Default Small Text + + Updated + + + + + + { /* END Card */} + { /* START Card */} + + + + Header Left Icon + + + + + { /* END Card */} + + + { /* START Card */} + + + + Header Right Icon + + + + + + { /* END Card */} + { /* START Card */} + + + + Header Right Icon + + + + + + { /* END Card */} + { /* START Card */} + + + + Header Center + + + + + { /* END Card */} + { /* START Card */} + + + + + Small Text + +
    + Header Above Small Text +     + +     +     + { /* END Card */} + { /* START Card */} + + + + Header Right Side Pill + + New + + + + + + { /* END Card */} + { /* START Card */} + + + + Header Left Pill + + 4 + + + + + + { /* END Card */} + +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + + + { /* END Header 2 */} + { /* START Section 2 */} + + + { /* START Card */} + + + + + + + + + + + + + + + + + + { /* END Card */} + { /* START Card */} + + + + + + + + + + + + + + + + + + { /* END Card */} + { /* START Card */} + + + + + + + + + + + + + + + + + + { /* END Card */} + { /* START Card */} + + + + + + + + + + + + + + + + { /* END Card */} + + + { /* START Card */} + + + + + + + + + + + + + + + + { /* END Card */} + { /* START Card */} + + + + + + + + + + + + + + + + { /* END Card */} + + + { /* END Section 2 */} + + { /* START Header 3 */} + + + + + + { /* END Header 3 */} + { /* START Section 3 */} + + + { /* START Card */} + + +
    + + Pagination + + + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + + + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Buttons Group + + + + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Buttons Left + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Buttons Right + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Buttons Right + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Link Right Icon + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Vertical Button Group + + + + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Buttons Checkbox + + + + + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Buttons Radio + + + + + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Buttons Nesting + + + + + + + More + + + Jump to: + First + End + + Custom... + + + +
    + +     +     + { /* END Card */} + + + { /* START Card */} + + +
    + + Button Right Icon-Left + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Button Right Icon-Right + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Button Right Toolbar + + + + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Button Right Toolbar Icons Only + + + + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Button Icon-Left + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Button Left Icon-Left + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Button Dropdown + + + + Menu + + + Menu + + + Profile + + + + Settings + + + + + Log Out + + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Button Dropdown Icon + + + + + + + Menu + + + Profile + + + + Settings + + + + + Log Out + + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Button Toolbar + + + + + + + + + + + + +
    + +     +     + { /* END Card */} + +     + { /* END Section 3 */} + + { /* START Header 4 */} + + + + + + { /* END Header 4 */} + { /* START Section 4 */} + + + { /* START Card */} + + +
    + + Right Checkbox + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Right Checkbox Inline + +
    + + +
    +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Right Checkbox Empty + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Right Radio + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + + +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Right Radio Inline + +
    + + +
    +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Right Custom Select + +
    + + + + + + + + +
    +
    + +     +     + { /* END Card */} + + + { /* START Card */} + + +
    + + Right Input + +
    + + + +
    +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Right Input Addon + +
    + + + $ + + + +
    +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Right Input Addon + +
    + + + + + + + + +
    +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Right Input Addon + +
    + + + + + Email + + + + +
    +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Right Radio Addon + +
    + + + + + + + + +
    +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Right Checkbox Addon + +
    + + + + + + + + +
    +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Right Input Button + +
    + + + + + + + + +
    +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Right Input Button + +
    + + + + + + + + +
    +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Right Input Button + +
    + + + + { /* START Button Dropdown */} + + + + + + { /* START Dropdown Content */} + Select Folder: + + + Content + + + + My Movies + + + + My Documents + + + + My Pictures + + + + My Music + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + +
    +
    + +     +     + { /* END Card */} + { /* START Card */} + + +
    + + Right Addon & Button + +
    + + + + $ + + + + + + + +
    +
    + +     +     + { /* END Card */} + +     + { /* END Section 4 */} + { /* START Header 5 */} + + + + + + { /* END Header 5 */} + { /* START Section 5 */} + + + { /* START Card */} + + + + + + Right Progressbar + + + + 25% + + + + + + { /* END Card */} + + + + + + { /* END Section 4 */} +     +     +); + +export default Cards; diff --git a/app/routes/Cards/CardsHeaders/index.js b/app/routes/Cards/CardsHeaders/index.js new file mode 100755 index 0000000..d6449de --- /dev/null +++ b/app/routes/Cards/CardsHeaders/index.js @@ -0,0 +1,3 @@ +import CardsHeaders from './CardsHeaders'; + +export default CardsHeaders; \ No newline at end of file diff --git a/app/routes/Dashboards/Analytics/Analytics.js b/app/routes/Dashboards/Analytics/Analytics.js new file mode 100755 index 0000000..99fe880 --- /dev/null +++ b/app/routes/Dashboards/Analytics/Analytics.js @@ -0,0 +1,599 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import faker from 'faker/locale/en_US'; +import _ from 'lodash'; +import { + Container, + ButtonToolbar, + ButtonGroup, + UncontrolledButtonDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + FloatGrid as Grid, + Card, + Media, + CardBody, + ListGroup, + ListGroupItem, + Progress, + Table, + CardFooter, + Button, + CardHeader +} from './../../../components'; +import { applyColumn } from './../../../components/FloatGrid'; + +import { HeaderMain } from "../../components/HeaderMain"; + +import { + MetricVsTarget +} from "../../components/Analytics/MetricVsTarget"; +import { + WebsitePerformance +} from "../../components/Analytics/WebsitePerformance"; +import { + AudienceMetricsChart +} from "./components/AudienceMetricsChart"; +import { + TinyAreaChart +} from "../../components/Analytics/TinyAreaChart"; +import { + SimpleLineChart +} from "./../../Graphs/ReCharts/components/SimpleLineChart"; + +import classes from './Analytics.scss'; + +const LAYOUT = { + 'metric-v-target-users': { h: 6, md: 4 }, + 'metric-v-target-sessions': { h: 6, md: 4 }, + 'metric-v-target-pageviews': { h: 6, md: 4 }, + 'analytics-audience-metrics': { h: 9, minH: 7 }, + 'traffic-channels': { md: 6, h: 6 }, + 'sessions': { md: 6, h: 6, maxH: 9, minW: 3 }, + 'spend': { md: 6, h: 7 }, + 'website-performance': { md: 6, h: 11 }, + 'organic-traffic': { md: 6, h: 10 } +} + +const SessionByDevice = (props) => ( +
    +
    + { props.title } +
    +
    +
    + { props.valuePercent }% +
    +
    + { props.value } +
    +
    +
    +); +SessionByDevice.propTypes = { + title: PropTypes.node, + color: PropTypes.string, + valuePercent: PropTypes.string, + value: PropTypes.string +} + +export class Analytics extends React.Component { + state = { + layouts: _.clone(LAYOUT) + } + + _resetLayout = () => { + this.setState({ + layouts: _.clone(LAYOUT) + }) + } + + render() { + const { layouts } = this.state; + + return ( + + +
    + + + + + + + www.webkom.co + +
    + Last 30 Days vs Previous Period +
    + + + Select Site: + + + www.webkom.co + + + www.spin.webkom.co + + + + + Add New + + +     +     + + + + + Last Month + +
    + Jan 01, 2017 to Jan 31, 2017 +
    + + + Select Period: + + + Last Month + + + Last 3 Months + + + Last 6 Months + + + Last Year + + + + Custom... + + +     +     + + + + + Previous Period + +
    + Jan 01, 2017 to Jan 31, 2017 +
    + + + Select Period: + + + Previous Period + + + Last 3 Months + + + Last 6 Months + + + Last Year + + + + Custom... + + +     +     + + + + + + +     +
    +     + + + this.setState({ layouts }) } + columnSizes={ this.state.layouts } + rowHeight={ 55 } + > + + + + Users + + + + + + + + + + + How do your users (visitors), sessions (visits) and pageviews + metrics for www.webkom.com compare to your targets over the last 30 days? + + + + + + + + + Sessions + + + + + + + + + + + How do your users (visitors), sessions (visits) and pageviews + metrics for www.webkom.com compare to your targets over the last 30 days? + + + + + + + + + Pageviews + + + + + + + + + + + How do your users (visitors), sessions (visits) and pageviews + metrics for www.webkom.com compare to your targets over the last 30 days? + + + + + + + + + Analytics Audience Metrics + + + + + + + + + + + + + How do your users (visitors), sessions (visits) and pageviews + metrics for www.webkom.com compare to your targets over the last 30 days? + + + + + + + + + Traffic Channels + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    ChannelSessionsPrev PeriodChangeTrend
    + Organic Search + + { faker.finance.amount() } + + 949.00 + + -75,0% + + + +
    + Direct + + { faker.finance.amount() } + + 157.11 + + 82,1% + + + +
    + Social Media + + { faker.finance.amount() } + + 949.00 + + -75,0% + + + +
    + + + + + + + How do your users (visitors), sessions (visits) and pageviews + metrics for www.webkom.com compare to your targets over the last 30 days? + + + +     +     + + + + Sessions by Device Type + + +
    + + + +
    + + + + + +     + + + + + + + How do your users (visitors), sessions (visits) and pageviews + metrics for www.webkom.com compare to your targets over the last 30 days? + + + +     +     + + + + + Spend + + + Dec 22, 2016 to
    + Dec 31, 2016 (prev.) +     +     + +
    +

    + $2,890.12 +

    +
    + + 23.34% +
    +
    + vs { faker.finance .amount() } (prev.) +
    +
    +     + + + + + + + + + + How do your users (visitors), sessions (visits) and pageviews + metrics for www.webkom.com compare to your targets over the last 30 days? + + + +     +     + + + + Website Performance + + + + + + + + + + + + + + + + + + + + + + How do your users (visitors), sessions (visits) and pageviews + metrics for www.webkom.com compare to your targets over the last 30 days? + + + + + + + + + + + + + + + How did my organic traffic perform? + +
    + + Dec 22, 2016 to Dec 31, 2016 (prev.) + +     +     +     + +
    +
    Organics Sessons
    +

    + 46,982 +

    +
    + + 23.34% vs { faker.finance .amount() } (prev.) + +
    +
    + + + +     + + + + + + + How do your users (visitors), sessions (visits) and pageviews + metrics for www.webkom.com compare to your targets over the last 30 days? + + + +     +     +     +     +     + ); + } +} diff --git a/app/routes/Dashboards/Analytics/Analytics.scss b/app/routes/Dashboards/Analytics/Analytics.scss new file mode 100755 index 0000000..5a325e3 --- /dev/null +++ b/app/routes/Dashboards/Analytics/Analytics.scss @@ -0,0 +1,60 @@ +@import "./../../../styles/variables.scss"; + +.sessions { + display: flex; + width: 100%; + margin-bottom: 1rem; +} + +.sessions-progress { + margin-bottom: 2rem; +} + +.session { + flex: 1 1 auto; + + &__percentage { + font-size: 2.5rem; + } +} + +:global(.float-column--size-xs), +:global(.float-column--size-sm) { + .sessions { + flex-direction: column; + } + + .session { + display: flex; + align-items: center; + padding: 0.5rem 0; + + &__values { + margin-left: auto; + } + + &__percentage { + font-size: 1.2rem; + font-weight: bold; + line-height: 1; + } + + &__value { + line-height: 1; + } + + + .session { + border-top: 1px solid $gray-400; + } + } +} + +:global(.float-column--size-xs) { + .sessions-progress { + margin-top: 2rem; + } + + .sessions-info { + display: none; + } +} \ No newline at end of file diff --git a/app/routes/Dashboards/Analytics/components/AudienceMetricsChart.js b/app/routes/Dashboards/Analytics/components/AudienceMetricsChart.js new file mode 100755 index 0000000..e67eb2b --- /dev/null +++ b/app/routes/Dashboards/Analytics/components/AudienceMetricsChart.js @@ -0,0 +1,77 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import moment from 'moment'; + +import { + ResponsiveContainer, + ComposedChart, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + Legend, + Area, + Bar, + Dot +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const CHART_LENGTH = 30; +const CHART_START_DATE = moment().subtract(CHART_LENGTH, 'months'); + +const dataGenerator = (index) => { + const referenceValue = _.random(1500, 1800); + const halfedRefVal = referenceValue / 2; + + return { + key: index, + month: moment(CHART_START_DATE).add(index, 'months').format('MMM YY'), + "Tokyo": referenceValue, + "New York": _.random(1200, 2200), + "Berlin": referenceValue - _.random(halfedRefVal, halfedRefVal * 1.1), + }; +} + +const data = _.times(CHART_LENGTH, dataGenerator); + +// eslint-disable-next-line react/prop-types +const generateDot = ({stroke, ...other}) => ( + +); + +export const AudienceMetricsChart = ({height, className}) => ( + + + + + + + + + + + + +); +AudienceMetricsChart.propTypes = { + height: PropTypes.string, + className: PropTypes.string +} diff --git a/app/routes/Dashboards/Analytics/index.js b/app/routes/Dashboards/Analytics/index.js new file mode 100755 index 0000000..42fc699 --- /dev/null +++ b/app/routes/Dashboards/Analytics/index.js @@ -0,0 +1,3 @@ +import { Analytics } from './Analytics'; + +export default Analytics; \ No newline at end of file diff --git a/app/routes/Dashboards/Financial/Financial.js b/app/routes/Dashboards/Financial/Financial.js new file mode 100755 index 0000000..a9b28e2 --- /dev/null +++ b/app/routes/Dashboards/Financial/Financial.js @@ -0,0 +1,262 @@ +import React from 'react'; +import { + Container, + Row, + Card, + CardBody, + CustomInput, + CardDeck, + Table, + UncontrolledDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + CardTitle, + ListGroup, + ListGroupItem, + Button, + Col +} from './../../../components'; +import { setupPage } from './../../../components/Layout/setupPage'; + +import { HeaderMain } from "../../components/HeaderMain"; + +import { + TrTableInvoices +} from "../../components/Financial/TrTableInvoices" +import { + TinyDonutChartBig +} from "../../components/Financial/TinyDonutChartBig" +import { + StackedAreaChart +} from "../../components/Financial/StackedAreaChart" +import { + TrTableRecentFundings +} from "../../components/Financial/TrTableRecentFundings" + +/*eslint-disable */ +const progressCompletion = [ + "25", + "50", + "75", + "97" +]; +/*eslint-enable */ + +const Financial = () => ( + + + + + + + + + +
    + Your Cash +
    + + + + + + Main Fundings + +
    +
    +

    $ 188.00

    +
    +
    + $464.00 +
    +
    +     +     + + + + + + Invoices + +
    +
    +

    $ 553.00

    +
    +
    + $994.00 +
    +
    +     +     + + + + + + Accounts Receivable + +
    +
    +

    $ 451.00

    +
    +
    + $938.00 +
    +
    +     +     + + + + + + Accounts Receivable + +
    +
    +

    $ 194.00

    +
    +
    + $519.00 +
    +
    +     +     + + + + + + +
    Money Map
    + + + Last Month + + + Select Date + Last Month + Last 12 Months + + Custom... + + +     +
    + +
    +     +     + + + +
    Recent Fundings
    + +     +     + + + + + + + + + + + + +
    CompanyAmountDateAction
    +     +     + + + +
    Invoices
    + +     +     + + + + + + + + + + + + + + +
    CompanyAmountDateContactEmailAction
    +     + + + + + +
    Account Performance
    +     +
    + +
    +     +     + + + + + +
    Settings
    +     +     + + + My Cash + + + + My Cap + + + + Client List + + + + Recent Fundings + + + + Invoice Creator + + + + Sales Lead + + + + Q&A + + + +     + +     +     +); + +export default setupPage({ + pageTitle: 'Financial' +})(Financial); \ No newline at end of file diff --git a/app/routes/Dashboards/Financial/index.js b/app/routes/Dashboards/Financial/index.js new file mode 100755 index 0000000..de40cb6 --- /dev/null +++ b/app/routes/Dashboards/Financial/index.js @@ -0,0 +1,3 @@ +import Financial from './Financial'; + +export default Financial; \ No newline at end of file diff --git a/app/routes/Dashboards/Monitor/Monitor.js b/app/routes/Dashboards/Monitor/Monitor.js new file mode 100755 index 0000000..783aa42 --- /dev/null +++ b/app/routes/Dashboards/Monitor/Monitor.js @@ -0,0 +1,348 @@ +import React from 'react'; +import { + Container, + Row, + Card, + CardBody, + Badge, + Table, + CardTitle, + Progress, + Col +} from './../../../components'; +import { setupPage } from './../../../components/Layout/setupPage'; + +import { HeaderMain } from "../../components/HeaderMain"; + +import { + TinyDonutChart +} from "../../components/Monitor/TinyDonutChart" +import { + TinyDonutChartBig +} from "../../components/Monitor/TinyDonutChartBig" +import { + TrTableMonitor +} from "../../components/Monitor/TrTableMonitor" +import { + TinyAreaChart +} from "../../components/Monitor/TinyAreaChart" + +/*eslint-disable */ +const progressCompletion = [ + "25", + "50", + "75", + "97" +]; +/*eslint-enable */ + +const Monitor = () => ( + + + + + + + + + + + + + System Monitoring + +
    +
    +
    CPU
    +

    Intel Celeron G1610 @2.60Ghz

    +
    +
    + Core 0 + + 86% +
    +
    + Core 1 + + 40% +
    +
    +
    +
    +
    Memory (Ram)
    +

    GSkill 2 x 8 GB DDR3 @1333 Mhz

    +
    +
    + +
    +

    52 GB

    + Total Memory +
    +
    +
    +
    +
    + Allocated +
    +
    48,7 MB
    + 79% +
    +
    +
    + In Cache +
    +
    26,9 MB
    + 65% +
    +
    +
    + Available +
    +
    2,7 MB
    + 34% +
    +
    +
    +
    +
    +
    Interface Traffic (re0)
    +

    Intel Celeron G1610 @2.60Ghz

    +
    +
    +     +     + + + + Network Monitoring + +
    +
    +
    Interface Traffic (re0)
    +

    Intel Celeron G1610 @2.60Ghz

    +
    +
    + +     +     + + + + Hardware Temperature + +
    +
    +
    CPU (idle)
    +
    +
    +
    + Min: 19ºC +
    +
    + Min: 26ºC +
    +
    + Min: 32ºC +
    +
    + +
    +
    +
    +
    HDD1 WD30EZRX (ada0)
    +
    +
    +
    + Min: 19ºC +
    +
    + Min: 26ºC +
    +
    + Min: 32ºC +
    +
    + +
    +
    +
    +
    HDD1 WD30EZRX (ada1)
    +
    +
    +
    + Min: 19ºC +
    +
    + Min: 26ºC +
    +
    + Min: 32ºC +
    +
    + +
    +     +     + + +

    + Nesciunt odit eius nihil molestiae tenetur earum enim quidem. Aperiam non sapiente voluptatum in doloremque rerum magnam quae sed. + Quisquam eos non voluptate sapiente qui temporibus harum in illo. Aliquid at dolor labore. Qui error modi. +

    +
    + Volume Status +
    + + +
    +
    +
    Path
    + /mtn/volume1 +
    +
    +

    2.24 TiB

    + Volume Size +
    + +
    +
    +
    + Used Space +
    +
    483,7 MB
    + 79% +
    +
    +
    + Free Space +
    +
    269,3 MB
    + 65% +
    +
    +
    + + +
    +
    +
    Path
    + /mtn/volume1 +
    +
    +

    5.07 TiB

    + Volume Size +
    + +
    +
    +
    + Used Space +
    +
    48,7 MB
    + 79% +
    +
    +
    + Free Space +
    +
    26,9 MB
    + 65% +
    +
    +
    + + +
    +
    +
    Path
    + /mtn/volume1 +
    +
    +

    3.16 TiB

    + Volume Size +
    + +
    +
    +
    + Used Space +
    +
    483,3 MB
    + 79% +
    +
    +
    + Free Space +
    +
    262,9 MB
    + 65% +
    +
    +
    + + +
    +
    +
    Path
    + /mtn/volume1 +
    +
    +

    9.27 TiB

    + Volume Size +
    + +
    +
    +
    + Used Space +
    +
    482,7 MB
    + 79% +
    +
    +
    + Free Space +
    +
    26,9 MB
    + 65% +
    +
    +
    + +     +
    + Mounted Devices +
    + + + + + + + + + + + + + +
    DescriptionRAIDCapacityUsageStatus
    + +     +     +); + +export default setupPage({ + pageTitle: 'Monitor' +})(Monitor); \ No newline at end of file diff --git a/app/routes/Dashboards/Monitor/index.js b/app/routes/Dashboards/Monitor/index.js new file mode 100755 index 0000000..554fe82 --- /dev/null +++ b/app/routes/Dashboards/Monitor/index.js @@ -0,0 +1,3 @@ +import Monitor from './Monitor'; + +export default Monitor; \ No newline at end of file diff --git a/app/routes/Dashboards/Projects/DraggableProjects.js b/app/routes/Dashboards/Projects/DraggableProjects.js new file mode 100755 index 0000000..d0d6450 --- /dev/null +++ b/app/routes/Dashboards/Projects/DraggableProjects.js @@ -0,0 +1,120 @@ +import React from 'react'; +import uid from 'uuid/v4'; +import faker from 'faker/locale/en_US'; +import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; +import _ from 'lodash'; + +import { + ProjectsList +} from "../../components/ProjectsDashboards/ProjectsList"; + +const reorder = (list, startIndex, endIndex) => { + const result = Array.from(list); + const [removed] = result.splice(startIndex, 1); + result.splice(endIndex, 0, removed); + + return result; +}; + +export class DraggableProjects extends React.Component { + constructor(props) { + super(props); + + this.state = { + projects: [ + { + id: uid(), + title: faker.commerce.productName(), + badgeColor: "success", + badgeTitle: "Active", + progressValue: "76", + completeValue: "13", + myTasksValue: "35", + daysDueValue: "6" + }, { + id: uid(), + title: faker.commerce.productName(), + badgeColor: "danger", + badgeTitle: "Suspended", + progressValue: "23", + completeValue: "6", + myTasksValue: "87", + daysDueValue: "15" + }, { + id: uid(), + title: faker.commerce.productName(), + badgeColor: "secondary", + badgeTitle: "Archived", + progressValue: "4", + completeValue: "98", + myTasksValue: "21", + daysDueValue: "7" + }, { + id: uid(), + title: faker.commerce.productName(), + badgeColor: "warning", + badgeTitle: "Paused", + progressValue: "63", + completeValue: "98", + myTasksValue: "21", + daysDueValue: "7" + } + ] + }; + + this.onDragEnd = this.onDragEnd.bind(this); + } + + onDragEnd(result) { + if (!result.destination) { + return; + } + + const projects = reorder( + this.state.projects, + result.source.index, + result.destination.index + ); + + this.setState({ + projects, + }); + } + + render() { + return ( + + + {(provided, snapshot) => ( +
    + {_.map(this.state.projects, ({id, ...project}, index) => ( + + {(provided, snapshot) => ( +
    + +
    + )} +     + ))} +
    + )} +     +     + ); + } +} \ No newline at end of file diff --git a/app/routes/Dashboards/Projects/ProjectsDashboard.js b/app/routes/Dashboards/Projects/ProjectsDashboard.js new file mode 100755 index 0000000..e4b946f --- /dev/null +++ b/app/routes/Dashboards/Projects/ProjectsDashboard.js @@ -0,0 +1,304 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import { Link } from 'react-router-dom'; +import { + Container, + Row, + Card, + CardBody, + Badge, + Table, + CardTitle, + Button, + InputGroup, + InputGroupAddon, + Input, + ListGroup, + ListGroupItem, + Media, + Col +} from './../../../components'; +import { setupPage } from './../../../components/Layout/setupPage'; + +import { HeaderMain } from "../../components/HeaderMain"; + +import { + TasksMedia +} from "../../components/ProjectsDashboards/TasksMedia"; +import { + TinyDonutChart +} from "../../components/ProjectsDashboards/TinyDonutChart" +import { + TinyDonutChartAllProjects +} from "../../components/ProjectsDashboards/TinyDonutChartAllProjects" +import { + TimelineMini +} from "../../components/Timeline/TimelineMini" +import { DraggableProjects } from './DraggableProjects'; + +const ProjectsDashboard = () => ( + + + + +

    + { faker.lorem.paragraph() } +

    + + +
    + Payments +
    + + +

    + + Today +

    +

    + $3,267 +

    + + +

    + + This Month +

    +

    + $8,091 +

    + +     +
    + Invoices +
    + + +

    + + Due +

    +

    + $4,007 +

    + + +

    + + Overdue +

    +

    + $11,091 +

    + +     + + +
    + All Tasks +
    + + + + + +
    + + 23 Pending +
    +
    + + 3 Behind +
    +
    + + 34 Completed +
    +     +     + + +
    + All Projects +
    + + + + + +
    + + 14 Pending +
    +
    + + 24 Behind +
    +
    + + 2 Completed +
    +     +     + + +
    + My Stats +
    + + + + + + + + + + + + + + + + + + + +
    Active Projects + 6 +
    Open Tasks + 4 +
    Support Tickets + 15 +
    Active Timers + 0 +
    + +     + + + + + + Tasks + + + + + + + + + + + + + + + + + + + + + + + View All Tasks + + + + + + + + + + Timeline Mini + + + + + + + + + + + Timeline Details + + + + + + + + + + Projects + + + + + + + + + + + + +     +); + +export default setupPage({ + pageTitle: 'Projects Dashboard' +})(ProjectsDashboard); \ No newline at end of file diff --git a/app/routes/Dashboards/Projects/index.js b/app/routes/Dashboards/Projects/index.js new file mode 100755 index 0000000..b87cac5 --- /dev/null +++ b/app/routes/Dashboards/Projects/index.js @@ -0,0 +1,3 @@ +import ProjectsDashboard from './ProjectsDashboard'; + +export default ProjectsDashboard; \ No newline at end of file diff --git a/app/routes/Dashboards/Reports/Reports.js b/app/routes/Dashboards/Reports/Reports.js new file mode 100755 index 0000000..4d2836c --- /dev/null +++ b/app/routes/Dashboards/Reports/Reports.js @@ -0,0 +1,936 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import { + Container, + Row, + Card, + CardBody, + UncontrolledTooltip, + Progress, + Table, + Nav, + NavItem, + NavLink, + CardTitle, + ListGroup, + ListGroupItem, + UncontrolledCollapse, + Col +} from './../../../components'; +import { setupPage } from './../../../components/Layout/setupPage'; + +import { HeaderMain } from "../../components/HeaderMain"; + +import { + TinyLineChart +} from "./components/TinyLineChart"; +import { + TinyAreaChart +} from "./components/TinyAreaChart"; +import { + TinyArcChart +} from "./components/TinyArcChart"; + + +/*eslint-disable */ +const progressCompletion = [ + "25", + "50", + "75", + "97" +]; +/*eslint-enable */ + +const Reports = () => ( + + + + + + + + + + + Temperatures + + + + + + + + + + Settings + + + Add + + + + + + Processor + + + + Show/Hide Section + + + + + +

    39º

    + + 102º F
    + +     +     +
    + Core 0 + + 86º +
    +
    + Core 1 + + 40º +
    +
    + Core 2 + + 86º +
    +
    + Core 3 + + 40º +
    +     +     + + + Graphics + + + + Show/Hide Section + + + + + +

    68º

    + + 102º F
    + +     +     +
    + Core + + 86º +
    +     +     + + + Storage + + + + Show/Hide Section + + + + +
    + +
    +
    + + + Samsung 850 PRO + + + 512GB + + +
    + SSD 0 + + 31º +
    +
    +
    + + + WD Black + + + 1TB + + +
    + HDD 1 + + 81º +
    +
    +
    + + + Quantum PCI + + + 2TB + + +
    + SSD 3 + + 21º +
    +
    +     +     +     + + + + + + + Usage + + + + + + + + + + Settings + + + Add + + + + + + Processor + + + + Show/Hide Section + + + + +
    +
    CPU
    +
    Intel Core i7
    +
    Base (Turbo)
    +
    4 GHz (4.4 GHz)
    +
    Cores (Threads)
    +
    4 (8)
    +
    + + + + +     +     + + + Usage (Load) + + + + Show/Hide Section + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +

    78%

    +     		+

    + + + + + +

    +     		+

    + + + + + +

    +     		+

    + + + + + +

    +
    Cores123
    Usage %277813
    Tendency + + + + + +
    +     +     +     + + + Graphics + + + + Show/Hide Section + + + +
    +
    GPU Name
    +
    NVIDIA GTX 980
    +
    Bus Width
    +
    4 GHz (4.4 GHz)
    +
    Memory
    +
    4096 GDDR5
    +
    +     +     +     + + + Usage (Load) + + + + Show/Hide Section + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +

    85%

    +     		+ +
    Current Core Clock390Mhz
    Current Memory Clock160MHz
    Memory Usage (%)306MB (7%)
    Tendency + +
    +     +     +     +     + + + + + + + + + Allocation + + + + + + + + + + Settings + + + Add + + + + + + RAM + + + + Show/Hide Section + + + + +
    +
    Installed
    +
    16GB DDR3
    +
    DRAM Freq
    +
    4 GHz (4.4 GHz)
    +
    Cores (Threads)
    +
    4 (8)
    +
    + + + + + + + + + + + + + + + + + + + +
    + + In Use + + 796MB +
    + + In Cache + + 180MB +
    + + Available + + 1672MB +
    +
    + +
    +     +     +     + + + + + + + Cooling + + + + + + + + + + Settings + + + Add + + + + + + Fans + + + + Show/Hide Section + + + + +
    + + + Left Fontal Fan + + + 120mm + + + + + + + + + 250RPM + + +
    +
    + + + Right Fontal Fan + + + 120mm + + + + + + + + + 250RPM + + +
    + +     +     +     + + + + + + + Activity + + + + + + + + + + Settings + + + Add + + + + + + + +
    +
    + Operating System +
    +
    + Windows 10 x64 +
    +
    + Build +
    +
    + 9876 +
    +
    + + +
    +
    + Admin +
    +
    + John Malkovich +
    +
    + Network +
    +
    + Wireless Network +
    +
    + +     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Process + + Read + + Threads + + CPU + + GPU + + Memory + + Tend +
    + + + Chrome + + + 30MB/s + + 20 + + 24% + + 56% + + 7.9GB + + + + + + + + Show Details + +
    + { faker.internet.ip() } +
    + + + Photoshop + + + 40MB/s + + 60 + + 25% + + 10% + + 1.1GB + + + + + + + + Show Details + +
    + { faker.internet.ip() } +
    + + + Chrome + + + 60MB/s + + 60 + + 19% + + 56% + + 2.4GB + + + + + + + + Show Details + +
    + { faker.internet.ip() } +
    + + + Safari + + + 10MB/s + + 40 + + 19% + + 56% + + 1.1GB + + + + + + + + Show Details + +
    + { faker.internet.ip() } +
    + + + Chrome + + + 30MB/s + + 10 + + 27% + + 27% + + 9.1GB + + + + + + + + Show Details + +
    + { faker.internet.ip() } +
    + + + System + + + 70MB/s + + 30 + + 10% + + 19% + + 8.8GB + + + + + + + + Show Details + +
    + { faker.internet.ip() } +
    +     +     + +     + +     +     +); + +export default setupPage({ + pageTitle: 'Reports' +})(Reports); \ No newline at end of file diff --git a/app/routes/Dashboards/Reports/components/TinyArcChart.js b/app/routes/Dashboards/Reports/components/TinyArcChart.js new file mode 100755 index 0000000..42a025d --- /dev/null +++ b/app/routes/Dashboards/Reports/components/TinyArcChart.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { + PieChart, + Pie, + Cell +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Free', value: 40 }, + {name: 'Used', value: 60 }, +]; + +const COLORS = [ colors['light'], colors['primary'] ]; +const SIZE = 70; + +const TinyArcChart = () => ( + + + { + data.map((entry, index) => ) + } + + +); + +export { TinyArcChart }; diff --git a/app/routes/Dashboards/Reports/components/TinyAreaChart.js b/app/routes/Dashboards/Reports/components/TinyAreaChart.js new file mode 100755 index 0000000..5a43d18 --- /dev/null +++ b/app/routes/Dashboards/Reports/components/TinyAreaChart.js @@ -0,0 +1,21 @@ +import React from 'react'; +import _ from 'lodash'; +import { + ResponsiveContainer, + AreaChart, + Area +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = _.times(20, () => ({ pv: Math.random() * 100 })); + +const TinyAreaChart = () => ( + + + + + +); + +export { TinyAreaChart }; diff --git a/app/routes/Dashboards/Reports/components/TinyLineChart.js b/app/routes/Dashboards/Reports/components/TinyLineChart.js new file mode 100755 index 0000000..f9bfd9f --- /dev/null +++ b/app/routes/Dashboards/Reports/components/TinyLineChart.js @@ -0,0 +1,30 @@ +import React from 'react'; +import _ from 'lodash'; +import { + ResponsiveContainer, + LineChart, + Line, + Dot +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = _.times(20, () => ({ pv: Math.random() * 100 })); + +const generateDot = ({stroke, ...other}) => ( + +); + +const TinyLineChart = () => ( + + + + + +); + +export { TinyLineChart }; diff --git a/app/routes/Dashboards/Reports/index.js b/app/routes/Dashboards/Reports/index.js new file mode 100755 index 0000000..bac89d7 --- /dev/null +++ b/app/routes/Dashboards/Reports/index.js @@ -0,0 +1,3 @@ +import Reports from './Reports'; + +export default Reports; \ No newline at end of file diff --git a/app/routes/Dashboards/Stock/Stock.js b/app/routes/Dashboards/Stock/Stock.js new file mode 100755 index 0000000..57a5e18 --- /dev/null +++ b/app/routes/Dashboards/Stock/Stock.js @@ -0,0 +1,244 @@ +import React from 'react'; +import { + Container, + Row, + Card, + CardBody, + Table, + Badge, + CardTitle, + Nav, + NavLink, + NavItem, + Col +} from './../../../components'; +import { setupPage } from './../../../components/Layout/setupPage'; + +import { HeaderMain } from "../../components/HeaderMain"; + +import { + SimpleLineChart +} from "../../components/Stock/SimpleLineChart" + +import { + TrTableSummary +} from "../../components/Stock/TrTableSummary" + +import { + TrTableStock +} from "../../components/Stock/TrTableStock" + +import { + TrTableFavStock +} from "../../components/Stock/TrTableFavStock" + +/*eslint-disable */ +const progressCompletion = [ + "25", + "50", + "75", + "97" +]; +/*eslint-enable */ + +const Stock = () => ( + + + + + + + + + + + + + + + + + + + + + + + +
    +

    + Your 5 +

    + Favourites Stocks +     		+

    + AAPL +

    + + 22.38 + / 5.9% +     		+

    + MSFT +

    + + 34.18 + / 0.56% +     		+

    + CAT +

    + + 22.38 + / 12.2% +     		+

    + TSLA +

    + + 31.03 + / 3.2% +     		+

    + KN +

    + + 34.18 + / 0.56% +     		+

    + QZA +

    + + 4.02 + / 4.21% +
    + + + + + + +
    Nokia Corp. + + + 22.38 + / 5.9% + +
    +     + Score: 7.24 +     +
    + +
    +
    +
    Open
    +
    $834.00
    +
    High
    +
    $198.00
    +
    Low
    +
    $575.00
    +
    +
    +
    Market Cap
    +
    876.00B
    +
    P/E ratio (ttm)
    +
    62.00
    +
    Divided Yield
    +
    94.7%
    +
    +
    +
    +     +     + + + + + + + + + + + + + + + + + + +
    Name20132014TTM
    +     + + + + + +
    + Cheap Stock +
    +     +     + + + + + + + + + + + + + + +
    PriceScoreQVG
    +     + + + + + +
    + Expensive Stock +
    +     +     + + + + + + + + + + + + + + +
    PriceScoreQVG
    +     + +     +     +); + +export default setupPage({ + pageTitle: 'Stock' +})(Stock); \ No newline at end of file diff --git a/app/routes/Dashboards/Stock/index.js b/app/routes/Dashboards/Stock/index.js new file mode 100755 index 0000000..f8cf076 --- /dev/null +++ b/app/routes/Dashboards/Stock/index.js @@ -0,0 +1,3 @@ +import Stock from './Stock'; + +export default Stock; \ No newline at end of file diff --git a/app/routes/Dashboards/System/System.js b/app/routes/Dashboards/System/System.js new file mode 100755 index 0000000..acb43e9 --- /dev/null +++ b/app/routes/Dashboards/System/System.js @@ -0,0 +1,114 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import { + Container, + Row, + Table, + Col +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { + CardSystem +} from "./components/CardSystem" +import { + TrSystem +} from "./components/trSystem" + +const TrColors = [ + { + fill: "primary-02", + stroke: "primary" + }, + { + fill: "purple-02", + stroke: "purple" + }, + { + fill: "success-02", + stroke: "success" + }, + { + fill: "yellow-02", + stroke: "yellow" + } + ] + +const System = () => ( + + + + + + + + + + + + + + + + + + +
    Processes
    +

    + { faker.lorem.paragraphs() } +

    + + + + + + + + + + + + + + + + + +
    NameMemoryCPUTrafficDisk I/O
    + +     +     +); + +export default System; \ No newline at end of file diff --git a/app/routes/Dashboards/System/components/CardSystem.js b/app/routes/Dashboards/System/components/CardSystem.js new file mode 100755 index 0000000..538300e --- /dev/null +++ b/app/routes/Dashboards/System/components/CardSystem.js @@ -0,0 +1,78 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { + Card, + CardBody, + Badge +} from './../../../../components'; + +import { + TinyDonutChart +} from "./TinyDonutChart" +import { + TinyBarChart +} from "./TinyBarChart" + +import { randomArray } from './../../../../utilities'; + +const percents = [ + "15", + "25", + "30", + "35", + "40", + "45", + "55", + "60", + "75", + "80", + "95" +]; + +const caret = [ + "down", + "up" +]; + +const CardSystem = (props) => ( + + +
    + + + + { randomArray(percents) }% + +
    + { props.title } +
    +

    + { randomArray(percents) } { props.unit } +

    +     + + + +
    + +     +     +); + +CardSystem.propTypes = { + title: PropTypes.node, + badgeColor: PropTypes.string, + unit: PropTypes.node, + pieColor: PropTypes.string +}; +CardSystem.defaultProps = { + title: "Waiting...", + badgeColor: "secondary", + unit: "%", + pieColor: "500" +}; + +export { CardSystem }; diff --git a/app/routes/Dashboards/System/components/TinyAreaChart.js b/app/routes/Dashboards/System/components/TinyAreaChart.js new file mode 100755 index 0000000..84467f3 --- /dev/null +++ b/app/routes/Dashboards/System/components/TinyAreaChart.js @@ -0,0 +1,32 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import { + ResponsiveContainer, + AreaChart, + Area +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const TinyAreaChart = (props) => { + const data = _.times(20, () => ({ pv: Math.random() * 100 })); + return ( + + + + + + ) +}; + +TinyAreaChart.propTypes = { + strokeColor: PropTypes.string, + fillColor: PropTypes.string +}; +TinyAreaChart.defaultProps = { + strokeColor: "600", + fillColor: "200", +}; + +export { TinyAreaChart }; diff --git a/app/routes/Dashboards/System/components/TinyBarChart.js b/app/routes/Dashboards/System/components/TinyBarChart.js new file mode 100755 index 0000000..0a13f92 --- /dev/null +++ b/app/routes/Dashboards/System/components/TinyBarChart.js @@ -0,0 +1,31 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import _ from 'lodash'; +import { + ResponsiveContainer, + BarChart, + Bar +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const TinyBarChart = (props) => { + const data = _.times(40, () => ({ pv: 20+Math.random() * 100 })); + return ( + + + + + + ) +}; + +TinyBarChart.propTypes = { + barColor: PropTypes.string +}; +TinyBarChart.defaultProps = { + barColor: "200" +}; + +export { TinyBarChart }; diff --git a/app/routes/Dashboards/System/components/TinyDonutChart.js b/app/routes/Dashboards/System/components/TinyDonutChart.js new file mode 100755 index 0000000..1e51bd0 --- /dev/null +++ b/app/routes/Dashboards/System/components/TinyDonutChart.js @@ -0,0 +1,43 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + PieChart, + Pie, + Cell +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const TinyDonutChart = (props) => { + const data = [ + {name: 'Group A', value: 40+Math.random()*100}, + {name: 'Group B', value: Math.random()*100} + ]; + return ( + + + + + + ) +}; + +TinyDonutChart.propTypes = { + pieColor: PropTypes.string, + strokeColor: PropTypes.string, + pieBg: PropTypes.string +}; +TinyDonutChart.defaultProps = { + pieColor: "primary", + strokeColor: "white", + pieBg: "200" +}; + +export { TinyDonutChart }; diff --git a/app/routes/Dashboards/System/components/trSystem.js b/app/routes/Dashboards/System/components/trSystem.js new file mode 100755 index 0000000..1a4d041 --- /dev/null +++ b/app/routes/Dashboards/System/components/trSystem.js @@ -0,0 +1,132 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import { + Progress, + Badge +} from './../../../../components'; + +import { + TinyAreaChart +} from "./TinyAreaChart" + +import { randomArray } from './../../../../utilities'; + +const percents = [ + "15", + "25", + "30", + "35", + "40", + "45", + "55", + "60", + "75", + "80", + "95" +]; + +const versions = [ + "1.10", + "1.34", + "2.35", + "0.23", + "2.90", + "9.05" +]; + +const name = [ + "Apache", + "Postfix", + "Ruby R1", + "MySQL", + "Ruby R2" +]; + +const gbLeft = [ + "2,234", + "6,738", + "982", + "9,001", + "1,329" +]; + +const tdValue = [ + "783", + "45", + "4", + "190", + "65" +]; + +const tdUnits = [ + "", + "Mb", + "%", + "Kb/s" +]; + +const TrSystem = (props) => ( + + + +
    + { randomArray(name) } +
    + + v. { randomArray(versions) } + +     + + + + { randomArray(percents) }% + + + { randomArray(gbLeft) } GB Left + + + + { + _.map(props.colors, (color,index)=>( + +
    + { randomArray(tdValue) } {tdUnits[index]} +
    + + + )) + } + +); + +TrSystem.propTypes = { + title: PropTypes.node, + + colors: PropTypes.array +}; +TrSystem.defaultProps = { + colors: [ + { + fill: "400", + stroke: "primary" + }, + { + fill: "yellow", + stroke: "400" + }, + { + fill: "purple", + stroke: "info" + }, + { + fill: "success", + stroke: "500" + } + ] +}; + +export { TrSystem }; diff --git a/app/routes/Dashboards/System/index.js b/app/routes/Dashboards/System/index.js new file mode 100755 index 0000000..7773a56 --- /dev/null +++ b/app/routes/Dashboards/System/index.js @@ -0,0 +1,3 @@ +import System from './System'; + +export default System; \ No newline at end of file diff --git a/app/routes/Dashboards/components/TinyLineChart.js b/app/routes/Dashboards/components/TinyLineChart.js new file mode 100755 index 0000000..58e854c --- /dev/null +++ b/app/routes/Dashboards/components/TinyLineChart.js @@ -0,0 +1,31 @@ +import React from 'react'; +import _ from 'lodash'; +import { + ResponsiveContainer, + LineChart, + Line, + Dot +} from './../../../components/recharts'; + +import colors from './../../../colors'; + +const data = _.times(20, () => ({ pv: Math.random() * 100 })); + +// eslint-disable-next-line react/prop-types +const generateDot = ({stroke, ...other}) => ( + +); + +const TinyLineChart = () => ( + + + + + +); + +export { TinyLineChart }; diff --git a/app/routes/Forms/DatePicker/DatePickerExamples.js b/app/routes/Forms/DatePicker/DatePickerExamples.js new file mode 100755 index 0000000..2fa2407 --- /dev/null +++ b/app/routes/Forms/DatePicker/DatePickerExamples.js @@ -0,0 +1,154 @@ +import React from 'react'; +import DatePicker, { setDefaultLocale } from 'react-datepicker'; +import moment from 'moment'; + +import { + Container, + Row, + Card, + Col, + CardBody +} from './../../../components'; +import { Example, ButtonInput, AddonInput } from './components'; + +import { HeaderMain } from "../../components/HeaderMain"; + +setDefaultLocale('en'); + +export class DatePickerExamples extends React.Component { + state = { + startDate: moment().toDate(), + endDate: moment().add(5, 'days').toDate() + } + + render() { + return ( + + +

    + You’ll need to install React, PropTypes, and Moment.js separately since those dependencies + aren’t included in the package. Below is a simple example of how to use the Datepicker in a React view. + You will also need to require the CSS file from this package (or provide your own). + The example below shows how to include the CSS from this package if your build system supports + requiring CSS files (Webpack is one that does). +

    + + + { /* START Card */} + + + } + selected={this.state.startDate} + onChange={this._handleChangeStart} + /> + )} + > + { + '' + } + + + + { /* END Card */} + { /* START Card */} + + + + )} + > + { + '' + } + + + + { /* END Card */} + + + { /* START Card */} + + + + } + selected={this.state.startDate} + selectsStart + startDate={this.state.startDate} + endDate={this.state.endDate} + onChange={this._handleChangeStart} + /> + + } + selected={this.state.endDate} + selectsEnd + startDate={this.state.startDate} + endDate={this.state.endDate} + onChange={this._handleChangeEnd} + /> + + )} + > + { + '\n' + + '\n' + + '\n' + } + + + + { /* END Card */} + + +     + ) + } + + _handleChangeStart = (startDate) => ( + this.setState({ startDate }) + ) + + _handleChangeEnd = (endDate) => ( + this.setState({ endDate }) + ) +} diff --git a/app/routes/Forms/DatePicker/components/AddonInput.js b/app/routes/Forms/DatePicker/components/AddonInput.js new file mode 100755 index 0000000..3c233ee --- /dev/null +++ b/app/routes/Forms/DatePicker/components/AddonInput.js @@ -0,0 +1,31 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { + InputGroup, + InputGroupAddon, + Input +} from './../../../../components'; + +// eslint-disable-next-line react/display-name +const AddonInputFR = React.forwardRef((props, ref) => ( + + + + + + +)); +AddonInputFR.propTypes = { + onClick: PropTypes.func, + onChange: PropTypes.func, + value: PropTypes.string, + className: PropTypes.string +} + +export { AddonInputFR as AddonInput }; diff --git a/app/routes/Forms/DatePicker/components/ButtonInput.js b/app/routes/Forms/DatePicker/components/ButtonInput.js new file mode 100755 index 0000000..6e63832 --- /dev/null +++ b/app/routes/Forms/DatePicker/components/ButtonInput.js @@ -0,0 +1,23 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { + Button +} from './../../../../components'; + +// eslint-disable-next-line react/display-name +const ButtonInputFR = React.forwardRef((props, ref) => ( + +)); +ButtonInputFR.propTypes = { + onClick: PropTypes.func, + value: PropTypes.string +} + +export { ButtonInputFR as ButtonInput }; diff --git a/app/routes/Forms/DatePicker/components/Example.js b/app/routes/Forms/DatePicker/components/Example.js new file mode 100755 index 0000000..0c55b98 --- /dev/null +++ b/app/routes/Forms/DatePicker/components/Example.js @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + Row, + Col, + FormGroup, + Label +} from './../../../../components'; + +export const Example = ({ title, exampleInput, children, no }) => ( + + +
    + { title } + + #{ no } + +
    + + + + +
    + { exampleInput } +
    +     + + + + + 
    +                    
+                        { children }
+                    
+
    +     + +     +); + +Example.propTypes = { + exampleInput: PropTypes.node.isRequired, + children: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + no: PropTypes.node.isRequired +} \ No newline at end of file diff --git a/app/routes/Forms/DatePicker/components/index.js b/app/routes/Forms/DatePicker/components/index.js new file mode 100755 index 0000000..1253f3f --- /dev/null +++ b/app/routes/Forms/DatePicker/components/index.js @@ -0,0 +1,3 @@ +export * from './Example'; +export * from './ButtonInput'; +export * from './AddonInput'; diff --git a/app/routes/Forms/DatePicker/index.js b/app/routes/Forms/DatePicker/index.js new file mode 100755 index 0000000..a93d306 --- /dev/null +++ b/app/routes/Forms/DatePicker/index.js @@ -0,0 +1,3 @@ +import { DatePickerExamples } from './DatePickerExamples'; + +export default DatePickerExamples; diff --git a/app/routes/Forms/Dropzone/Dropzone.js b/app/routes/Forms/Dropzone/Dropzone.js new file mode 100755 index 0000000..60700cc --- /dev/null +++ b/app/routes/Forms/Dropzone/Dropzone.js @@ -0,0 +1,134 @@ +import React from 'react'; +import classNames from 'classnames'; +import FileDrop from 'react-dropzone'; +import _ from 'lodash'; + +import { + Container, + Divider, + Badge, + Button, + ButtonGroup +} from './../../../components'; +import { + FilesGrid, + FilesList +} from './components'; + +import { HeaderMain } from "../../components/HeaderMain"; + +export class Dropzone extends React.Component { + state = { + isOver: false, + files: [], + listStyle: 'grid' + } + + render() { + const { isOver, files, listStyle } = this.state; + const dropzoneClass = classNames({ + 'dropzone--active': isOver + }, 'dropzone'); + + return ( + + + { /* DropZone */ } +
    +

    + Simple HTML5-compliant drag'n'drop zone for files built with React.js. +

    + { this.setState({isOver: true}) }} + onDragLeave={() => { this.setState({isOver: false}) }} + onDrop={this._filesDropped} + > + { + ({ getRootProps, getInputProps }) => ( +
    + +
    + Upload Your files +
    +

    + Drag a file here or browse for a file to upload. +

    +

    + JPG, GIF, PNG, MOV, and AVI. Please choose files under 2GB for upload. File sizes are 400x300px. +

    + +
    + ) + } + +     +
    + { /* Files List */} + { + files.length > 0 && ( +
    +
    + +
    + Attachments + + + { files.length } + +
    +     + + + + +
    + { + listStyle === 'grid' ? + : + + } +
    + ) + } +     + ); + } + + _filesDropped = (files) => { + this.setState({ + files: [...this.state.files, ...files], + isOver: false + }) + } + + _removeFile = (file) => { + this.setState({ + files: _.reject(this.state.files, file) + }) + } +} \ No newline at end of file diff --git a/app/routes/Forms/Dropzone/components/FilesGrid.js b/app/routes/Forms/Dropzone/components/FilesGrid.js new file mode 100755 index 0000000..d3a02fe --- /dev/null +++ b/app/routes/Forms/Dropzone/components/FilesGrid.js @@ -0,0 +1,64 @@ +import React from 'react'; +import _ from 'lodash'; +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import numeral from 'numeral'; +import moment from 'moment'; + +import { + Col, + Row, + Card, + CardBody, + Button, + UncontrolledTooltip +} from './../../../../components'; +import classes from './common.scss'; +import { + getFileIcon +} from './../utilities'; + +export const FilesGrid = ({ files, onFileRemove }) => ( + + { + _.map(files, (file, index) => ( + + +
    + +
    + +
    +
    + { file.name } +
    + + + Delete File + +
    +
    + by You · {`${numeral(file.size).format('0.00a')}B`} +
    +
    + { moment(file.modifiedDate).format('DD-MMM-YYYY, HH:mm') } +
    +     +     + + )) + } +     +); + +FilesGrid.propTypes = { + files: PropTypes.array, + onFileRemove: PropTypes.func +} \ No newline at end of file diff --git a/app/routes/Forms/Dropzone/components/FilesList.js b/app/routes/Forms/Dropzone/components/FilesList.js new file mode 100755 index 0000000..324c0d2 --- /dev/null +++ b/app/routes/Forms/Dropzone/components/FilesList.js @@ -0,0 +1,73 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import numeral from 'numeral'; +import moment from 'moment'; + +import { + Table, + Button, + UncontrolledTooltip +} from './../../../../components'; +import classes from './common.scss'; +import { + getFileIcon +} from './../utilities'; + +export const FilesList = ({ files, onFileRemove }) => ( + + + + + + + + + + + + + { + _.map(files, (file, index) => ( + + + + + + + + + )) + } + +
    File NameSizeOwnerModified DateActions
    +
    + +
    +     		+ { file.name } + + { numeral(file.size).format('0.00a') }B + + You + + { moment(file.modifiedDate).format('DD-MMM-YYYY, HH:mm') } + + + + Delete File + +
    +); + +FilesList.propTypes = { + files: PropTypes.array, + onFileRemove: PropTypes.func +} \ No newline at end of file diff --git a/app/routes/Forms/Dropzone/components/common.scss b/app/routes/Forms/Dropzone/components/common.scss new file mode 100755 index 0000000..5bf95a3 --- /dev/null +++ b/app/routes/Forms/Dropzone/components/common.scss @@ -0,0 +1,25 @@ +@import "./../../../../styles/variables.scss"; + +.ph--large { + display: flex; + align-items: center; + justify-content: center; + min-height: 200px; + background-color: $gray-400; + margin-bottom: 5px; + + > i { + color: #fff; + } +} + +.ph--small { + display: inline-block; + background-color: $gray-400; + padding: 7px 5px; + border-radius: 7px; + + > i { + color: #fff; + } +} diff --git a/app/routes/Forms/Dropzone/components/index.js b/app/routes/Forms/Dropzone/components/index.js new file mode 100755 index 0000000..763dbd2 --- /dev/null +++ b/app/routes/Forms/Dropzone/components/index.js @@ -0,0 +1,2 @@ +export * from './FilesGrid'; +export * from './FilesList'; diff --git a/app/routes/Forms/Dropzone/index.js b/app/routes/Forms/Dropzone/index.js new file mode 100755 index 0000000..9b5e1de --- /dev/null +++ b/app/routes/Forms/Dropzone/index.js @@ -0,0 +1,3 @@ +import { Dropzone } from './Dropzone'; + +export default Dropzone; diff --git a/app/routes/Forms/Dropzone/utilities.js b/app/routes/Forms/Dropzone/utilities.js new file mode 100755 index 0000000..446133f --- /dev/null +++ b/app/routes/Forms/Dropzone/utilities.js @@ -0,0 +1,32 @@ +export const typeToIcon = type => { + const map = { + ['application/msword']: 'fa-file-word-o', + ['application/excel']: 'fa-file-excel-o', + ['application/vnd.oasis.opendocument.spreadsheet']: 'fa-file-excel-o', + ['application/vnd.oasis.opendocument.presentation']: 'fa-file-powerpoint-o', + ['application/mspowerpoint']: 'fa-file-powerpoint-o', + ['application/x-zip-compressed']: 'fa-file-archive-o', + ['image/jpeg']: 'fa-file-image-o', + ['image/png']: 'fa-file-image-o', + ['audio/mp3']: 'fa-file-audio-o', + ['text/plain']: 'fa-file-text-o' + } + return map[type] || null; +} + +export const extToIcon = filename => { + const map = { + ['doc']: 'fa-file-word-o', + ['docx']: 'fa-file-word-o', + ['xls']: 'fa-file-excel-o', + ['xlsx']: 'fa-file-excel-o', + ['ppt']: 'fa-file-powerpoint-o', + ['pdf']: 'fa-file-pdf-o' + } + + return map[filename.split('.').pop()] || null; +} + +export const getFileIcon = file => { + return typeToIcon(file.type) || extToIcon(file.name) || 'fa-file-o'; +} \ No newline at end of file diff --git a/app/routes/Forms/Editor/Editor.js b/app/routes/Forms/Editor/Editor.js new file mode 100755 index 0000000..62b31e6 --- /dev/null +++ b/app/routes/Forms/Editor/Editor.js @@ -0,0 +1,66 @@ +import React from 'react'; +import ReactQuill from 'react-quill'; +import faker from 'faker/locale/en_US'; + +import { + Container, + Card +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; + +export class Editor extends React.Component { + state = { + text: ` +

    ${ faker.lorem.paragraph() }

    +
    +

    ${ faker.lorem.paragraph() }

    +
    +

    ${ faker.lorem.paragraph() }

    + ` + } + + modules = { + toolbar: [ + [{ 'header': [1, 2, false] }], + ['bold', 'italic', 'underline','strike', 'blockquote'], + [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}], + ['clean'] + ], + } + + formats = [ + 'header', + 'bold', 'italic', 'underline', 'strike', 'blockquote', + 'list', 'bullet', 'indent' + ] + + render() { + return ( + + +

    + Quill is a modern rich text editor built for compatibility and extensibility. +

    + + + +     + ); + } + + _handleChange = (text) => { + this.setState({ text }) + } +} diff --git a/app/routes/Forms/Editor/index.js b/app/routes/Forms/Editor/index.js new file mode 100755 index 0000000..4554de0 --- /dev/null +++ b/app/routes/Forms/Editor/index.js @@ -0,0 +1,3 @@ +import { Editor } from './Editor'; + +export default Editor; diff --git a/app/routes/Forms/Forms/Forms.js b/app/routes/Forms/Forms/Forms.js new file mode 100755 index 0000000..ba3f419 --- /dev/null +++ b/app/routes/Forms/Forms/Forms.js @@ -0,0 +1,1137 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Card, + CardTitle, + CardBody, + FormFeedback, + Badge, + CustomInput, + Form, + FormGroup, + Label, + Input, + FormText +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const Forms = () => ( + + + + { /* START Header 1 */} + + + + Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + + + + + Forms: Inputs + + #1.01 + + + { /* START Form */} +
    + { /* START Input */} + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + { /* END Input */} + { /* START Select */} + + + + + + + + + + + + { /* END Select */} + { /* START Select */} + + + + + + + + + + + + { /* END Select */} + { /* START Input */} + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + { /* END Input */} +
    + { /* END Form */} + + + Forms: Selects + + #1.02 + + + { /* START Form */} +
    + { /* START Select */} + + + + + + + + + + + + { /* END Select */} + { /* START Select */} + + + + + + + + + + + + { /* END Select */} +
    + { /* END Form */} + + + Forms: File Inputs + + #1.03 + + + { /* START Form */} +
    + { /* START Select */} + + + + + + This is some placeholder block-level help text for the above input. + Its a bit lighter and easily wraps to a new line. + + + + { /* END Select */} + { /* START Select */} + + + + + + This is some placeholder block-level help text for the above input. + It's a bit lighter and easily wraps to a new line. + + + + { /* END Select */} + { /* START Select */} + + + + + + This is some placeholder block-level help text for the above input. + It's a bit lighter and easily wraps to a new line. + + + + { /* END Select */} + { /* START Select */} + + + + + + This is some placeholder block-level help text for the above input. + It's a bit lighter and easily wraps to a new line. + + + + { /* END Select */} +
    + { /* END Form */} + + + Forms: Text Helpers + + #1.04 + + + { /* START Form */} +
    + { /* START Inputs */} + + + + + + + + Left Text Helper + + + + + + Center Text Helper + + + + + + Right Text Helper + + + + + + { /* END Inputs */} + { /* START Inputs */} + + + + + + + + + We'll never share your email. + + + + + + + We'll never share your email. + + + + + + + We'll never share your email. + + + + + + { /* END Inputs */} + { /* START Inputs */} + + + + + + + + + Left Badge Helper + + + + + + + + Center Badge Helper + + + + + + + + Right Badge Helper + + + + + + + { /* END Inputs */} + { /* START Input Inline */} + + + + + + + + + Must be 8-20 characters long. + + + + + { /* END Input Inline */} + { /* START Input Inline */} + + + + + + + + + Must be 8-20 characters long. + + + + + { /* END Input Inline */} +
    + { /* END Form */} + + + Forms: Validations + + #1.05 + + + { /* START Form */} +
    + { /* START Input */} + + + + + You will not be able to see this + Example help text that remains unchanged. + + + { /* END Input */} + { /* START Input */} + + + + + Looks good! + Example help text that remains unchanged. + + + { /* END Input */} + { /* START Input */} + + + + + Oh noes! that name is already taken + Example help text that remains unchanged. + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + Example invalid custom select feedback + Example help text that remains unchanged. + + + { /* END Input */} + { /* START File Input */} + + + + + Example invalid custom file feedback + Example help text that remains unchanged. + + + { /* END File Input */} + { /* START Inputs */} + + + + + + + + Sweet! that name is available + + + Example help text that remains unchanged. + + + + + + Oh noes! that name is already taken + + + Example help text that remains unchanged. + + + + + + { /* END Inputs */} +
    + { /* END Form */} + + + Forms: Sizes + + #1.06 + + + { /* START Form */} +
    + { /* START Inputs */} + + + + + + + + + + + + + + + + + + + + + + + + + + + { /* END Inputs */} + { /* START Inputs */} + + + + + + + + + + + + + + + + + + + + + + + + + + + { /* END Inputs */} + { /* START Inputs */} + + + + + + + + + + + + + + + + + + + + + + + + + + + { /* END Inputs */} +
    + { /* END Form */} +     +     + +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + + + + + + { /* START Checkboxes */} +
    + + Forms: Checkboxes Stacked + + #2.01 + + +
    + + + + + + + + + + + +
    +
    + { /* END Checkboxes */} + { /* START Checkboxes */} +
    + + Forms: Checkboxes Inline + + #2.02 + + +
    + + + + + + + + + + + +
    +
    + { /* END Checkboxes */} + + + { /* START Checkboxes */} +
    + + Forms: Checkboxes Stacked Custom + + #2.03 + + +
    + + + + + +
    +
    + { /* END Checkboxes */} + { /* START Checkboxes */} +
    + + Forms: Checkboxes Inline + + #2.02 + + +
    + + + + + +
    +
    + { /* END Checkboxes */} + +     +     +     + +     + { /* END Section 2 */} + + { /* START Header 3 */} + + + + Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. + + )} + /> + + + { /* END Header 3 */} + { /* START Section 3 */} + + + + + + + { /* START Radios */} +
    + + Forms: Radio Stacked + + #3.01 + + +
    + + + + + + + + + + + +
    +
    + { /* END Radios */} + { /* START Radios */} +
    + + Forms: Radio Inline + + #3.02 + + +
    + + + + + + + + + + + +
    +
    + { /* END Radios */} + + + { /* START Radios */} +
    + + Forms: Radio Stacked Custom + + #3.03 + + +
    + + + + + +
    +
    + { /* END Radios */} + { /* START Radios */} +
    + + Forms: Radio Inline + + #3.02 + + +
    + + + + + +
    +
    + { /* END Radios */} + +     +     +     + +     + { /* END Section 2 */} + + +); + +export default Forms; \ No newline at end of file diff --git a/app/routes/Forms/Forms/index.js b/app/routes/Forms/Forms/index.js new file mode 100755 index 0000000..1257477 --- /dev/null +++ b/app/routes/Forms/Forms/index.js @@ -0,0 +1,3 @@ +import Forms from './Forms'; + +export default Forms; \ No newline at end of file diff --git a/app/routes/Forms/FormsLayouts/FormsLayouts.js b/app/routes/Forms/FormsLayouts/FormsLayouts.js new file mode 100755 index 0000000..9a21e45 --- /dev/null +++ b/app/routes/Forms/FormsLayouts/FormsLayouts.js @@ -0,0 +1,484 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Card, + CardTitle, + CardBody, + Button, + InputGroup, + InputGroupAddon, + CustomInput, + Form, + FormGroup, + Label, + Input, + FormText +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const FormsLayouts = () => ( + + + + { /* START Header 1 */} + + + + Create horizontal forms with the grid by adding the + .row class to form groups and using the .col-*-* classes + to specify the width of your labels and controls. + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + + + + + Forms Horizontal: Basic Example + + #1.01 + + + { /* START Form */} +
    + { /* START Input */} + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + { /* END Input */} + { /* START Radios */} + + + + + + + + + { /* END Radios */} + { /* START Select */} + + + + + + + + + + + + + + { /* END Select */} + { /* START File Select */} + + + + + + Accepted formats: pdf, doc, txt. Max file size 7Mb + + + + { /* END File Select */} + { /* START Textarea */} + + + + + + + + + { /* END Textarea */} +
    + { /* END Form */} +     +     + + + + Forms Without Labels: Preview Example #1.03 + + #1.03 + + + { /* START Form */} +
    + { /* START Input */} + + + + { /* END Input */} + { /* START Input */} + + + + { /* END Input */} + { /* START Radios */} + + + + + + { /* END Radios */} + { /* START Select */} + + + + + + + + + + + { /* END Select */} + { /* START File Select */} + + + + Accepted formats: pdf, doc, txt. Max file size 7Mb + + + { /* END File Select */} + { /* START Textarea */} + + + + + + { /* END Textarea */} +
    + { /* END Form */} +     +     + + + + + + Forms Vertical: Preview Example + + #1.02 + + + { /* START Form */} +
    + { /* START Input */} + + + + + { /* END Input */} + { /* START Input */} + + + + + { /* END Input */} + { /* START Radios */} + + +
    + + + +
    +     + { /* END Radios */} + { /* START Select */} + + + + + + + + + + + + { /* END Select */} + { /* START File Select */} + + + + + Accepted formats: pdf, doc, txt. Max file size 7Mb + + + { /* END File Select */} + { /* START Textarea */} + + + + + + + { /* END Textarea */} +
    + { /* END Form */} +     +     + +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + Form controls within inline forms vary slightly from their default states. + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + + + + + Forms Inline: Preview Example + + #2.01 + + + { /* START Form */} +
    + + + + + + + + + + + + + + + Country + + + + + + + + + + + + + + + + + { /* END Form */} +
    +     + +     + { /* END Section 2 */} + + +); + +export default FormsLayouts; \ No newline at end of file diff --git a/app/routes/Forms/FormsLayouts/index.js b/app/routes/Forms/FormsLayouts/index.js new file mode 100755 index 0000000..7d40910 --- /dev/null +++ b/app/routes/Forms/FormsLayouts/index.js @@ -0,0 +1,3 @@ +import FormsLayouts from './FormsLayouts'; + +export default FormsLayouts; \ No newline at end of file diff --git a/app/routes/Forms/InputGroups/InputGroups.js b/app/routes/Forms/InputGroups/InputGroups.js new file mode 100755 index 0000000..5fc3bc2 --- /dev/null +++ b/app/routes/Forms/InputGroups/InputGroups.js @@ -0,0 +1,1702 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Card, + CardTitle, + CardBody, + Button, + InputGroup, + InputGroupAddon, + CustomInput, + Form, + FormGroup, + Label, + UncontrolledButtonDropdown, + DropdownMenu, + DropdownToggle, + DropdownItem, + Input +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const InputGroups = () => ( + + + + { /* START Header 1 */} + + + + Easily extend form controls by adding text, buttons, + or button groups on either side of textual inputs, custom selects, and custom file inputs. + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + + + + + Input Groups: Text + + #1.01 + + + { /* START Form */} +
    + { /* START Input */} + + + + + @ + + + + + { /* END Input */} + { /* START Input */} + + + + + + % + + + + { /* END Input */} + { /* START Input */} + + + + + $ + + .00 + + + + { /* END Input */} + { /* START Input */} + + + + + wwww.webkom.co/users/ + + + + + { /* END Input */} + { /* START Input */} + + + + + Left Addon + + + + + { /* END Input */} + { /* START Input */} + + + + + + Right Addon + + + + { /* END Input */} + { /* START Input */} + + + + + Left Addon + + Right Addon + + + + { /* END Input */} +
    + { /* END Form */} + + + Input Groups: Icons + + #1.02 + + + { /* START Form */} +
    + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + .00 + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + + + + { /* END Input */} +
    + { /* END Form */} + + + Input Groups: Icons + + #1.03 + + + { /* START Form */} +
    + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} +
    + { /* END Form */} + + + Input Groups: Multiple + + #1.04 + + + { /* START Form */} +
    + { /* START Input */} + + + + + + First and last name + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + $ + + + 0.00 + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + $ + + + 0.00 + + + + + { /* END Input */} +
    + { /* END Form */} +     +     + +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + + + + + Input Groups: Buttons + + #2.01 + + + { /* START Form */} +
    + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + + + + { /* END Input */} +
    + { /* END Form */} + + + Input Groups: Buttons Dropdowns + + #2.02 + + + { /* START Form */} +
    + { /* START Input */} + + + + + { /* START Button Dropdown */} + + + Select + + + { /* START Dropdown Content */} + Select Folder: + + + Content + + + + My Movies + + + + My Documents + + + + My Pictures + + + + My Music + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + + + + { /* END Input */} + { /* START Input */} + + + + + + { /* START Button Dropdown */} + + + Select + + + { /* START Dropdown Content */} + Select Folder: + + + Content + + + + My Movies + + + + My Documents + + + + My Pictures + + + + My Music + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + + + { /* END Input */} + { /* START Input */} + + + + + { /* START Button Dropdown */} + + + Users + + + { /* START Dropdown Content */} + + Select Priveleges: + + + + Administrator + + + + User + + + + All + + + + + Add New User + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + { /* START Button Dropdown */} + + + Select + + + { /* START Dropdown Content */} + Select Folder: + + + Content + + + + My Movies + + + + My Documents + + + + My Pictures + + + + My Music + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + + + { /* END Input */} + { /* START Input */} + + + + + { /* START Button Dropdown */} + + + + + + { /* START Dropdown Content */} + Select Folder: + + + Content + + + + My Movies + + + + My Documents + + + + My Pictures + + + + My Music + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + + + + { /* END Input */} + { /* START Input */} + + + + + + { /* START Button Dropdown */} + + + + + + { /* START Dropdown Content */} + Select Folder: + + + Content + + + + My Movies + + + + My Documents + + + + My Pictures + + + + My Music + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + + + { /* END Input */} + { /* START Input */} + + + + + { /* START Button Dropdown */} + + + Users + + + { /* START Dropdown Content */} + + Select Priveleges: + + + + Administrator + + + + User + + + + All + + + + + Add New User + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + { /* START Button Dropdown */} + + + + + + { /* START Dropdown Content */} + Select Folder: + + + Content + + + + My Movies + + + + My Documents + + + + My Pictures + + + + My Music + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + + + { /* END Input */} +
    + { /* END Form */} + + + Input Groups: Segmented + + #2.03 + + + { /* START Form */} +
    + { /* START Input */} + + + + + + { /* START Button Dropdown */} + + { /* END Button Dropdown */} + + { /* START Button Dropdown */} + + + + + + { /* START Dropdown Content */} + Select Folder: + + + Content + + + + My Movies + + + + My Documents + + + + My Pictures + + + + My Music + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + { /* START Button Dropdown */} + + + + + + { /* START Dropdown Content */} + Select Folder: + + + Content + + + + My Movies + + + + My Documents + + + + My Pictures + + + + My Music + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + + + { /* END Input */} + { /* START Input */} + + + + + + + + { /* START Button Dropdown */} + + + + + + { /* START Dropdown Content */} + + Select Priveleges: + + + + Administrator + + + + User + + + + All + + + + + Add New User + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + + + + { /* START Button Dropdown */} + + + + + + { /* START Dropdown Content */} + Select Folder: + + + Content + + + + My Movies + + + + My Documents + + + + My Pictures + + + + My Music + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + + + { /* END Input */} + { /* START Input */} + + + + + { /* START Button Dropdown */} + + + + + + { /* START Dropdown Content */} + Select Folder: + + + Content + + + + My Movies + + + + My Documents + + + + My Pictures + + + + My Music + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + { /* START Button Dropdown */} + + + + + + { /* START Dropdown Content */} + Select Folder: + + + Content + + + + My Movies + + + + My Documents + + + + My Pictures + + + + My Music + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + + + { /* END Input */} + { /* START Input */} + + + + + + + + { /* START Button Dropdown */} + + + Users + + + { /* START Dropdown Content */} + + Select Priveleges: + + + + Administrator + + + + User + + + + All + + + + + Add New User + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + + + + { /* START Button Dropdown */} + + + + + + { /* START Dropdown Content */} + Select Folder: + + + Content + + + + My Movies + + + + My Documents + + + + My Pictures + + + + My Music + + { /* END Dropdown Content */} + + + { /* END Button Dropdown */} + + + + { /* END Input */} +
    + { /* END Form */} +     +     + +     + { /* END Section 2 */} + + { /* START Header 3 */} + + + + Easily extend form controls by adding text, buttons, + or button groups on either side of textual inputs, custom selects, and custom file inputs. + + )} + /> + + + { /* END Header 3 */} + { /* START Section 3 */} + + + + + + Input Groups: Sizes + + #3.01 + + + { /* START Form */} +
    + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} +
    + { /* END Form */} + + + Input Groups: Checkboxes and Radios + + #3.02 + + + { /* START Form */} +
    + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + { /* END Input */} +
    + { /* END Form */} + + + Input Groups: Custom Selects + + #3.03 + + + { /* START Form */} +
    + { /* START Input */} + + + + + + Language: + + + + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + + + + + Selected + + + + + { /* END Input */} + { /* START Input */} + + + + + + {' '} + + + + + + + + + + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + + + + + + {' '} + + + + + { /* END Input */} +
    + { /* END Form */} + + + Input Groups: Custom File Inputs + + #3.03 + + + { /* START Form */} +
    + { /* START Input */} + + + + + + + + All Images Accepted + + + + + { /* END Input */} + { /* START Input */} + + + + + + + Only PDF Accepted + + + + + + { /* END Input */} + { /* START Input */} + + + + + + + + + + + All Images Accepted + + + + + { /* END Input */} + { /* START Input */} + + + + + + + Only PDF Accepted + + + + + + + + + { /* END Input */} +
    + { /* END Form */} +     +     + +     + { /* END Section 3 */} + + +); + +export default InputGroups; \ No newline at end of file diff --git a/app/routes/Forms/InputGroups/index.js b/app/routes/Forms/InputGroups/index.js new file mode 100755 index 0000000..26656be --- /dev/null +++ b/app/routes/Forms/InputGroups/index.js @@ -0,0 +1,3 @@ +import InputGroups from './InputGroups'; + +export default InputGroups; \ No newline at end of file diff --git a/app/routes/Forms/Sliders/Sliders.js b/app/routes/Forms/Sliders/Sliders.js new file mode 100755 index 0000000..12e7e97 --- /dev/null +++ b/app/routes/Forms/Sliders/Sliders.js @@ -0,0 +1,500 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Slider, { Range } from 'rc-slider'; + +import colors from './../../../colors'; +import { + Form, + FormGroup, + Card, + CardBody, + CardTitle, + Label, + Input, + Button, + Row, + Col, + Container +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +import classes from './Sliders.scss'; + +const marks = { + '-10': '-10°C', + 0: 0°C, + 26: '26°C', + 37: '37°C', + 50: '50°C', + 100: { + style: { + color: colors['danger'], + }, + label: 100°C, + }, +} + +class CustomizedRange extends React.Component { + constructor(props) { + super(props); + + this.state = { + lowerBound: 20, + upperBound: 40, + value: [20, 40] + }; + } + onLowerBoundChange(e) { + this.setState({ lowerBound: +e.target.value }); + } + onUpperBoundChange(e) { + this.setState({ upperBound: +e.target.value }); + } + onSliderChange(value) { + this.setState({ + value, + }); + } + handleApply() { + const { lowerBound, upperBound } = this.state; + this.setState({ value: [lowerBound, upperBound] }); + } + render() { + return ( +
    +
    +
    + + + + + + + + + +
    + + + + +
    + +
    + +
    +
    + ); + } +} + +class DynamicBounds extends React.Component { + static propTypes = { + children: PropTypes.node.isRequired + } + + constructor(props) { + super(props); + + this.state = { + min: 0, + max: 100, + }; + } + onMinChange(e) { + this.setState({ + min: +e.target.value || 0, + }); + } + onMaxChange(e) { + this.setState({ + max: +e.target.value || 100, + }); + } + render() { + const { children } = this.props; + const updatedChild = React.cloneElement(React.Children.only(children), { + min: this.state.min, + max: this.state.max + }); + + return ( +
    +
    + + + + + + + + + +
    +
    + { updatedChild } +
    +
    + ); + } +} + +class ControlledRange extends React.Component { + constructor(props) { + super(props); + this.state = { + value: [20, 40, 60, 80], + }; + } + handleChange = (value) => { + this.setState({ + value, + }); + } + render() { + return ( + + ); + } +} + +class CustomizedSlider extends React.Component { + constructor() { + super(); + + this.state = { + value: 50 + } + } + + onSliderChange(value) { + this.setState({ + value + }); + } + + render() { + return( + + ) + } +} + +export class Sliders extends React.Component { + render() { + return ( + + + + + { /* START Header 1 */} + + See 6 examples below: + + )} + /> + { /* END Header 1 */} + { /* START Card Example */} + + + + +

    Slider with marks, step=null

    +
    + +
    + + +

    Slider with marks, included=false

    +
    + +
    + + + +

    Slider with marks and steps

    +
    + +
    + + +

    Slider with marks and steps, included=false

    +
    + +
    + + + +

    Range with marks

    +
    + +
    + + +

    Range with marks and steps

    +
    + +
    + +     +     +     + { /* END Card Example */} + + { /* START Header 2 */} + + See 8 examples below: + + )} + /> + { /* END Header 2 */} + { /* START Card Example */} + + + + +

    Basic Range，allowCross=false

    +
    + +
    + + +

    Basic Range，disabled

    +
    + +
    + + + +

    Basic Range，step=20

    +
    + +
    + + +

    Basic Range，step=20, dots

    +
    + +
    + + + +

    Controlled Range

    +
    + +
    + + +

    Multi Range

    +
    + +
    + + + +

    Customized Range

    +
    + +
    + + +

    Range with dynamic max min

    +
    + + + +
    + +     +     +     + { /* END Card Example */} + + { /* START Header 3 */} + + See 7 examples below: + + )} + /> + { /* END Header 3 */} + { /* START Card Example */} + + + + +

    Basic Slider

    +
    + +
    + + +

    Basic Slider, disabled

    +
    + +
    + + + +

    Basic Slider，step=20

    +
    + +
    + + + +

    Basic Slider，step=20, dots

    +
    + +
    + + + +

    Controlled Slider

    +
    + +
    + + +

    Customized Slider

    +
    + +
    + + + +

    Slider with dynamic min, max

    +
    + + + +
    + +     +     +     + + { /* START Header 4 */} + + See 6 examples below: + + )} + /> + { /* END Header 4 */} + { /* START Card Example */} + + + + +

    Slider with marks, step=null

    +
    + +
    + + +

    Slider with marks and steps

    +
    + +
    + + + +

    Slider with marks, included=false

    +
    + +
    + + +

    Slider with marks and steps, included=false

    +
    + +
    + + + +

    Range with marks

    +
    + +
    + + +

    Range with marks and steps

    +
    + +
    + +     +     +     + { /* END Card Example */} + +     +     + ); + } +} diff --git a/app/routes/Forms/Sliders/Sliders.scss b/app/routes/Forms/Sliders/Sliders.scss new file mode 100755 index 0000000..12dd8ef --- /dev/null +++ b/app/routes/Forms/Sliders/Sliders.scss @@ -0,0 +1,21 @@ +.markedSliderWrap { + padding: 0px 20px 50px; +} + +.rangeSliderWrap { + padding: 0 0 20px 0; +} + +.markedSliderVerticalWrap { + width: 100%; + height: 400px; + display: flex; + align-items: center; + justify-content: center; + padding: 20px 20px 30px 20px; +} + +.inlineInput { + max-width: 70px; + margin-left: 0.5rem; +} diff --git a/app/routes/Forms/Sliders/index.js b/app/routes/Forms/Sliders/index.js new file mode 100755 index 0000000..eb3f7cc --- /dev/null +++ b/app/routes/Forms/Sliders/index.js @@ -0,0 +1,3 @@ +import { Sliders } from './Sliders'; + +export default Sliders; diff --git a/app/routes/Forms/TextMask/TextMask.js b/app/routes/Forms/TextMask/TextMask.js new file mode 100755 index 0000000..2e223d3 --- /dev/null +++ b/app/routes/Forms/TextMask/TextMask.js @@ -0,0 +1,216 @@ +import React from 'react'; +import MaskedInput from 'react-text-mask' +import { + createAutoCorrectedDatePipe, + createNumberMask, + emailMask +} from 'text-mask-addons'; + +import { + Row, + Card, + CardBody, + Container, + Col, + FormGroup, + Label, + Input +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; + +const autoCorrectedDatePipe = createAutoCorrectedDatePipe('mm/dd/yyyy'); +const dolarsMask = createNumberMask({ prefix: '$' }); +const dolarsMaskDecimal = createNumberMask({ prefix: '$', allowDecimal: true }); +const percentageMask = createNumberMask({ prefix: '', suffix: '%', integerLimit: 3 }); +const upperCasePipe = conformedValue => conformedValue.toUpperCase(); + +export const TextMask = () => ( + + +

    + Text Mask is an input mask library. + It can create input masks for phone, + date, currency, zip code, percentage, email, and literally anything! +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +     +); diff --git a/app/routes/Forms/TextMask/index.js b/app/routes/Forms/TextMask/index.js new file mode 100755 index 0000000..d6ff9e9 --- /dev/null +++ b/app/routes/Forms/TextMask/index.js @@ -0,0 +1,3 @@ +import { TextMask } from './TextMask'; + +export default TextMask; diff --git a/app/routes/Forms/Toggles/Toggles.js b/app/routes/Forms/Toggles/Toggles.js new file mode 100755 index 0000000..a4205f4 --- /dev/null +++ b/app/routes/Forms/Toggles/Toggles.js @@ -0,0 +1,201 @@ +import React from 'react'; + +import { + Row, + Col, + Table, + Container, + CustomInput +} from './../../../components'; +import Toggle from 'react-toggle'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +import classes from './Toggles.scss'; + +export class Toggles extends React.Component { + state = { + baconIsReady: true, + cheeseIsReady: false, + biscuitIsReady: false, + eggsAreReady: false, + milkIsReady: false, + toastIsReady: false, + soupIsReady: true, + tofuIsReady: false + } + + render() { + return ( + + +

    An elegant, accessible toggle component for React. Also a glorified checkbox.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Switch Name + + Switch Example +
    + { this.setState({ milkIsReady: !this.state.milkIsReady }) } } + label="Controlled Component" + /> + + { this.setState({ milkIsReady: !this.state.milkIsReady }) } }/> +
    + { this.setState({ toastIsReady: !this.state.toastIsReady }) } } + label="Controlled Component without onChange" + /> + + +
    + Diabled, Unchecked + + +
    + Disabled, Checked + + +
    + Custom className + + +
    + Custom Icons + + , + unchecked: null, + }} + onChange={ () => { this.setState({ soupIsReady: !this.state.soupIsReady }) } } /> +
    + No Icons + + { this.setState({ tofuIsReady: !this.state.tofuIsReady }) }} /> +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + Switch Example +
    + +
    + { this.setState({cheeseIsReady: !this.state.cheeseIsReady}) } } /> + +
    + { this.setState({biscuitIsReady: !this.state.biscuitIsReady}) } } /> + Adjacent label, but not standard tag +
    + { this.setState({eggsAreReady: !this.state.eggsAreReady}) } } /> + No label tag +
    + +     +     + ); + } +} diff --git a/app/routes/Forms/Toggles/Toggles.scss b/app/routes/Forms/Toggles/Toggles.scss new file mode 100755 index 0000000..c32e457 --- /dev/null +++ b/app/routes/Forms/Toggles/Toggles.scss @@ -0,0 +1,3 @@ +.switchCustomClass > :first-child { + background-color: #ab199f; +} diff --git a/app/routes/Forms/Toggles/index.js b/app/routes/Forms/Toggles/index.js new file mode 100755 index 0000000..e7dd923 --- /dev/null +++ b/app/routes/Forms/Toggles/index.js @@ -0,0 +1,3 @@ +import { Toggles } from './Toggles'; + +export default Toggles; \ No newline at end of file diff --git a/app/routes/Forms/Typeahead/Typeahead.js b/app/routes/Forms/Typeahead/Typeahead.js new file mode 100755 index 0000000..22ac39b --- /dev/null +++ b/app/routes/Forms/Typeahead/Typeahead.js @@ -0,0 +1,451 @@ +import React from 'react'; + +import { + Container, + Row, + Card, + CardBody, + CardTitle, + Col +} from './../../../components'; +import { + BasicExample, + BasicBehaviors, + ControllingSelections, + InputSize, + MenuAlignment, + FormExample, + PaginationExample, + BodyContainer, + RenderingExample, + LabelKey, + FilteringExample, + CustomFilteringExample, + CustomSelections, + AsyncSearch, + AsyncPagination, + PublicMethods +} from './components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +export const Typeahead = () => ( + + + + + { /* START Header Example */} + + The typeahead allows single-selection by default. + Setting the multiple prop turns the component into a tokenizer, + allowing multiple selections. + + )} + /> + { /* END Header Example */} + { /* START Card Example */} + + + + Basic Example + + #1.01 + + + + + + { /* END Card Example */} + + + { /* START Header Example */} + + The typeahead has several basic configurable behaviors. + You can disable it as you would any input. + You can position the menu above the input with dropup or aoutomatically re-position it when it hits the viewport bounds. + Use minLength to require a minimum user input before displaying results, + or hide the menu when there are no results by passing an empty + string to emptyLabel. + + )} + /> + { /* END Header Example */} + + + { /* START Card Example */} + + + + Behaviors + + #2.01 + + + + + + { /* END Card Example */} + + + + + { /* START Card Example */} + + + + Controlling Selections + + #2.02 + + +

    + You can pre-populate the the typeahead by passing in an array of selections. + Setting the clearButton prop displays a button allowing users to clear the input. +

    + +     +     + { /* END Card Example */} + +     + + + { /* START Card Example */} + + + + Input Size + + #2.03 + + +

    + Besides the default input size, you can specify either a + small or large size using the bsSize prop. +

    + +     +     + { /* END Card Example */} + +     + + + { /* START Card Example */} + + + + Menu Alignment + + #2.04 + + +

    + Specify alignment of the menu via the align prop. + Valid values are justify, left, or right. +

    + +     +     + { /* END Card Example */} + +     + + + { /* START Card Example */} + + + + Input Groups and Validation States + + #2.05 + + +

    + The typeahead works with Bootstrap input groups and add-ons; it also handles validation states. +

    + +     +     + { /* END Card Example */} + +     + + + { /* START Card Example */} + + + + Pagination + + #2.06 + + +

    + To improve browser performance, the typeahead paginates large data sets by default. + You can set the number of results to be displayed using maxResults, + or override pagination completely using paginate. The onPaginate + hook allows you to respond to the pagination event. +

    + +     +     + { /* END Card Example */} + +     + + + + Body Container + + #2.07 + + +

    + Setting the bodyContainer prop will attach the menu + to document.body instead of the typeahead. + Compare the behaviors in the srolling container below. +

    + + +     + { /* START Header Example */} + + You can customize how the typeahead looks and behaves by using the provided rendering hooks. + + )} + /> + { /* END Header Example */} + + + { /* START Card Example */} + + + + Rendering + + #3.01 + + +

    + You can customize how the typeahead looks and behaves + by using the provided rendering hooks. +

    + +     +     + { /* END Card Example */} + +     + + + { /* START Card Example */} + + + + LabelKey + + #3.02 + + +

    + The labelKey prop accepts a callback allowing you to transform + your data and return a compound string rather than just a single data field. +

    + +     +     + { /* END Card Example */} + +     + { /* START Header Example */} + + By default, the typeahead is not case-sensitive and ignores diacritical marks when filtering. + You can change these behaviors using the caseSensitive and + ignoreDiacritics props. + + )} + /> + { /* END Header Example */} + + + { /* START Card Example */} + + + + Filtering + + #4.01 + + +

    + By default, the typeahead is not case-sensitive and ignores diacritical marks when filtering. + You can change these behaviors using the caseSensitive and + ignoreDiacritics props. +

    + +     +     + { /* END Card Example */} + +     + + + { /* START Card Example */} + + + + Custom Filtering + + #4.02 + + +

    + Using the filterBy prop, you can either specify your own + callback or an array of fields on your data object by which to filter. +

    + +     +     + { /* END Card Example */} + +     + { /* START Header Example */} + + Setting the allowNew prop provides the ability to create new options for the data set. + You can change the label displayed before the custom option in the menu by using the + newSelectionPrefix prop. + + )} + /> + { /* END Header Example */} + + + { /* START Card Example */} + + + + Custom Selections + + #5.01 + + +

    + Setting the allowNew prop provides the ability to create new options for the data set. + You can change the label displayed before the custom option in the menu by using the + newSelectionPrefix prop. +

    + +     +     + { /* END Card Example */} + +     + { /* START Header Example */} + + You can use the AsyncTypeahead component for asynchronous searches. + It debounces user input and includes an optional query cache to avoid making the same + request more than once in basic cases. + + )} + /> + { /* END Header Example */} + + + { /* START Card Example */} + + + + Asynchronous Searching + + #6.01 + + +

    + You can use the AsyncTypeahead component for asynchronous searches. + It debounces user input and includes an optional query cache to avoid making the same + request more than once in basic cases. +

    + +     +     + { /* END Card Example */} + +     + + + { /* START Card Example */} + + + + Pagination + + #6.02 + + +

    + A more advanced case involves paginating async results. + Additional results are fetched using onPaginate while a + custom query cache tracks the incremental results and page number for each query. +

    + +     +     + { /* END Card Example */} + +     + + + { /* START Card Example */} + + + + Public Methods + + #6.03 + + +

    + The clear, focus, and blur + methods are exposed for programmatic control of the typeahead. +

    + +     +     + { /* END Card Example */} + +     +     +); \ No newline at end of file diff --git a/app/routes/Forms/Typeahead/components/AsynchronousPagination.js b/app/routes/Forms/Typeahead/components/AsynchronousPagination.js new file mode 100755 index 0000000..74d3e18 --- /dev/null +++ b/app/routes/Forms/Typeahead/components/AsynchronousPagination.js @@ -0,0 +1,87 @@ +import React from 'react'; +import { AsyncTypeahead } from 'react-bootstrap-typeahead'; + +import { GithubMenuItem } from './GithubMenuItem'; +import { makeAndHandleRequest } from './utils'; + +const PER_PAGE = 20; + +export class AsyncPagination extends React.Component { + state = { + isLoading: false, + options: [], + query: '', + }; + + _cache = {}; + + render() { + return ( + ( + + )} + useCache={false} + /> + ); + } + + _handleInputChange = (query) => { + this.setState({query}); + } + + _handlePagination = (e, shownResults) => { + const {query} = this.state; + const cachedQuery = this._cache[query]; + + // Don't make another request if: + // - the cached results exceed the shown results + // - we've already fetched all possible results + if ( + cachedQuery.options.length > shownResults || + cachedQuery.options.length === cachedQuery.total_count + ) { + return; + } + + this.setState({isLoading: true}); + + const page = cachedQuery.page + 1; + + makeAndHandleRequest(query, page) + .then((resp) => { + const options = cachedQuery.options.concat(resp.options); + this._cache[query] = {...cachedQuery, options, page}; + this.setState({ + isLoading: false, + options, + }); + }); + } + + _handleSearch = (query) => { + if (this._cache[query]) { + this.setState({options: this._cache[query].options}); + return; + } + + this.setState({isLoading: true}); + makeAndHandleRequest(query) + .then((resp) => { + this._cache[query] = {...resp, page: 1}; + this.setState({ + isLoading: false, + options: resp.options, + }); + }); + } +} diff --git a/app/routes/Forms/Typeahead/components/AsynchronousSearching.js b/app/routes/Forms/Typeahead/components/AsynchronousSearching.js new file mode 100755 index 0000000..8ab35f9 --- /dev/null +++ b/app/routes/Forms/Typeahead/components/AsynchronousSearching.js @@ -0,0 +1,74 @@ +import React from 'react'; +import { AsyncTypeahead } from 'react-bootstrap-typeahead'; + +import { + CustomInput, + FormGroup +} from './../../../../components'; +import { GithubMenuItem } from './GithubMenuItem'; +import { makeAndHandleRequest } from './utils'; + +export class AsyncSearch extends React.Component { + state = { + allowNew: false, + isLoading: false, + multiple: false, + options: [], + }; + + render() { + return ( + + ( + + )} + /> + + {this._renderCheckboxes()} + + + ); + } + + _renderCheckboxes() { + const checkboxes = [ + {label: 'Multi-Select', name: 'multiple'}, + {label: 'Allow custom selections', name: 'allowNew'}, + ]; + + return checkboxes.map(({label, name}) => ( + + )); + } + + _handleChange = (e) => { + const {checked, name} = e.target; + this.setState({[name]: checked}); + } + + _handleSearch = (query) => { + this.setState({isLoading: true}); + + makeAndHandleRequest(query) + .then(({options}) => { + this.setState({ + isLoading: false, + options, + }); + }); + } +} diff --git a/app/routes/Forms/Typeahead/components/BasicBehaviors.js b/app/routes/Forms/Typeahead/components/BasicBehaviors.js new file mode 100755 index 0000000..84abc49 --- /dev/null +++ b/app/routes/Forms/Typeahead/components/BasicBehaviors.js @@ -0,0 +1,81 @@ +import React from 'react'; +import { Typeahead } from 'react-bootstrap-typeahead'; +import _ from 'lodash'; + +import { + CustomInput, + FormGroup +} from './../../../../components'; +import options from './exampleData'; + +export class BasicBehaviors extends React.Component { + state = { + disabled: false, + dropup: false, + flip: false, + highlightOnlyResult: false, + minLength: 0, + selectHintOnEnter: false + }; + + render() { + const { + disabled, + dropup, + emptyLabel, + flip, + highlightOnlyResult, + minLength, + selectHintOnEnter, + } = this.state; + + const checkboxes = [ + /* eslint-disable max-len */ + {checked: disabled, label: 'Disable the input', name: 'disabled'}, + {checked: dropup, label: 'Dropup menu', name: 'dropup'}, + {checked: flip, label: 'Flip the menu position when it reaches the viewport bounds', name: 'flip'}, + {checked: !!minLength, label: 'Require minimum input before showing results (2 chars)', name: 'minLength'}, + {checked: emptyLabel, label: 'Hide the menu when there are no results', name: 'emptyLabel'}, + {checked: selectHintOnEnter, label: 'Select the hinted result by pressing enter', name: 'selectHintOnEnter'}, + {checked: highlightOnlyResult, label: 'Highlight the only result', name: 'highlightOnlyResult'}, + /* eslint-enable max-len */ + ]; + + return ( + + + + { + _.map(checkboxes, checkbox => ( + + )) + } + + + + ); + } + + _handleChange = (e) => { + const {checked, name} = e.target; + const newState = {[name]: checked}; + + if (name === 'minLength') { + newState.minLength = checked ? 2 : 0; + } + + this.setState(newState); + } +} diff --git a/app/routes/Forms/Typeahead/components/BasicExample.js b/app/routes/Forms/Typeahead/components/BasicExample.js new file mode 100755 index 0000000..92c335d --- /dev/null +++ b/app/routes/Forms/Typeahead/components/BasicExample.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { Typeahead } from 'react-bootstrap-typeahead'; + +import { + CustomInput, + FormGroup +} from './../../../../components'; +import options from './exampleData'; + +export class BasicExample extends React.Component { + state = { + multiple: false, + }; + + render() { + const {multiple} = this.state; + + return ( + + + + this.setState({multiple: e.target.checked})} + type="checkbox" + id="basic-example-multiselect" + label="Multi-Select" + /> + + + ); + } +} diff --git a/app/routes/Forms/Typeahead/components/BodyContainer.js b/app/routes/Forms/Typeahead/components/BodyContainer.js new file mode 100755 index 0000000..0ff11d8 --- /dev/null +++ b/app/routes/Forms/Typeahead/components/BodyContainer.js @@ -0,0 +1,64 @@ +import React from 'react'; +import { Typeahead } from 'react-bootstrap-typeahead'; + +import { + CustomInput, + Card, + FormGroup +} from './../../../../components'; +import options from './exampleData'; + +export class BodyContainer extends React.Component { + state = { + bodyContainer: true, + dropup: false + }; + + render() { + const {bodyContainer, dropup} = this.state; + + return ( + + +
    + +
    +     + + + + +     + ); + } + + _handleChange = (e) => { + const {checked, name} = e.target; + this.setState({[name]: checked}); + } +} diff --git a/app/routes/Forms/Typeahead/components/ControllingSelections.js b/app/routes/Forms/Typeahead/components/ControllingSelections.js new file mode 100755 index 0000000..c4f9879 --- /dev/null +++ b/app/routes/Forms/Typeahead/components/ControllingSelections.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { Typeahead } from 'react-bootstrap-typeahead'; + +import options from './exampleData'; + +export const ControllingSelections = () => ( + +) diff --git a/app/routes/Forms/Typeahead/components/CustomFiltering.js b/app/routes/Forms/Typeahead/components/CustomFiltering.js new file mode 100755 index 0000000..be084e3 --- /dev/null +++ b/app/routes/Forms/Typeahead/components/CustomFiltering.js @@ -0,0 +1,65 @@ +import React from 'react'; +import { Typeahead } from 'react-bootstrap-typeahead'; + +import { + CustomInput, + FormGroup +} from './../../../../components'; +import options from './exampleData'; + +export class CustomFilteringExample extends React.Component { + state = { + filterBy: 'callback', + }; + + render() { + const {filterBy} = this.state; + const radios = [ + {label: 'Use callback', value: 'callback'}, + {label: 'Use data fields', value: 'fields'}, + ]; + + const filterByCallback = (option, props) => { + return ( + option.capital.toLowerCase().indexOf(props.text.toLowerCase()) !== -1 || + option.name.toLowerCase().indexOf(props.text.toLowerCase()) !== -1 + ); + }; + + const filterByFields = ['capital', 'name']; + + return ( + + ( +
    + {option.name} +
    + Capital: {option.capital} +
    +
    + )} + /> + + { + radios.map(({label, value}) => ( + this.setState({filterBy: value})} + type="radio" + value={value} + id={`capital-option-${value}`} + label={label} + /> + )) + } + +     + ); + } +} \ No newline at end of file diff --git a/app/routes/Forms/Typeahead/components/CustomSelections.js b/app/routes/Forms/Typeahead/components/CustomSelections.js new file mode 100755 index 0000000..6d75b73 --- /dev/null +++ b/app/routes/Forms/Typeahead/components/CustomSelections.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { Typeahead } from 'react-bootstrap-typeahead'; + +export const CustomSelections = () => ( + +); diff --git a/app/routes/Forms/Typeahead/components/Filtering.js b/app/routes/Forms/Typeahead/components/Filtering.js new file mode 100755 index 0000000..34214c7 --- /dev/null +++ b/app/routes/Forms/Typeahead/components/Filtering.js @@ -0,0 +1,69 @@ +import React from 'react'; +import { Typeahead } from 'react-bootstrap-typeahead'; + +import { FormGroup, CustomInput } from './../../../../components'; + +export class FilteringExample extends React.Component { + state = { + caseSensitive: false, + ignoreDiacritics: true, + }; + + render() { + const {caseSensitive, ignoreDiacritics} = this.state; + + return ( + + + + this.setState({caseSensitive: e.target.checked})} + type="checkbox" + id="case-sensitive-enabled" + label="Case-sensitive filtering" + /> + { + this.setState({ignoreDiacritics: !e.target.checked}); + }} + type="checkbox" + id="ignore-diactrical-enabled" + label="Don't ignore diacritical marks" + /> + + + ); + } + } \ No newline at end of file diff --git a/app/routes/Forms/Typeahead/components/FormExample.js b/app/routes/Forms/Typeahead/components/FormExample.js new file mode 100755 index 0000000..823a30b --- /dev/null +++ b/app/routes/Forms/Typeahead/components/FormExample.js @@ -0,0 +1,67 @@ +import React from 'react'; +import _ from 'lodash'; +import { Typeahead } from 'react-bootstrap-typeahead'; + +import { + InputGroup, + InputGroupAddon, + FormGroup, + Button +} from './../../../../components'; +import options from './exampleData'; + +const getInitialState = () => ({ + index: Math.floor(Math.random() * options.length), + selected: [], +}); + +export class FormExample extends React.Component { + state = getInitialState(); + + render() { + const {index, selected} = this.state; + const state = options[index]; + + let isInvalid; + let isValid; + + if (selected.length) { + const isMatch = selected[0].name === state.name; + + // BS4 validation + isInvalid = !isMatch; + isValid = isMatch; + } + + return ( + + + + + + The capital of {state.name} is + + + this.setState({selected})} + options={_.sortBy(options, 'capital')} + placeholder="Select a capital..." + selected={selected} + /> + + + + + + + ); + } +} diff --git a/app/routes/Forms/Typeahead/components/GithubMenuItem.js b/app/routes/Forms/Typeahead/components/GithubMenuItem.js new file mode 100755 index 0000000..4352781 --- /dev/null +++ b/app/routes/Forms/Typeahead/components/GithubMenuItem.js @@ -0,0 +1,24 @@ +import PropTypes from 'prop-types'; +import React from 'react'; + +export const GithubMenuItem = ({user}) => ( +
    + {user.login} + {user.login} +
    +); + +GithubMenuItem.propTypes = { + user: PropTypes.shape({ + avatar_url: PropTypes.string.isRequired, + login: PropTypes.string.isRequired, + }).isRequired, +}; \ No newline at end of file diff --git a/app/routes/Forms/Typeahead/components/InputSize.js b/app/routes/Forms/Typeahead/components/InputSize.js new file mode 100755 index 0000000..26a016c --- /dev/null +++ b/app/routes/Forms/Typeahead/components/InputSize.js @@ -0,0 +1,50 @@ +import React from 'react'; +import _ from 'lodash'; +import { Typeahead } from 'react-bootstrap-typeahead'; + +import { + CustomInput, + FormGroup +} from './../../../../components'; +import options from './exampleData'; + +export class InputSize extends React.Component { + state = { + bsSize: undefined + }; + + render() { + const {bsSize} = this.state; + const radios = [ + {label: 'Small', value: 'small'}, + {label: 'Default', value: undefined}, + {label: 'Large', value: 'large'}, + ]; + + return ( + + + + { + _.map(radios, ({ label, value }) => ( + this.setState({bsSize: value})} + type="radio" + value={value} + id={`input-size-${label}`} + label={ label } + /> + )) + } + + + ); + } +} diff --git a/app/routes/Forms/Typeahead/components/LabelKey.js b/app/routes/Forms/Typeahead/components/LabelKey.js new file mode 100755 index 0000000..342185d --- /dev/null +++ b/app/routes/Forms/Typeahead/components/LabelKey.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { Typeahead } from 'react-bootstrap-typeahead'; + +export const LabelKey = () => ( + `${option.firstName} ${option.lastName}`} + options={[ + {firstName: 'Art', lastName: 'Blakey'}, + {firstName: 'John', lastName: 'Coltrane'}, + {firstName: 'Miles', lastName: 'Davis'}, + {firstName: 'Herbie', lastName: 'Hancock'}, + {firstName: 'Charlie', lastName: 'Parker'}, + {firstName: 'Tony', lastName: 'Williams'}, + ]} + placeholder="Who's the coolest cat?" + /> +); diff --git a/app/routes/Forms/Typeahead/components/MenuAlignment.js b/app/routes/Forms/Typeahead/components/MenuAlignment.js new file mode 100755 index 0000000..cccfdbd --- /dev/null +++ b/app/routes/Forms/Typeahead/components/MenuAlignment.js @@ -0,0 +1,50 @@ +import React from 'react'; +import _ from 'lodash'; +import { Typeahead } from 'react-bootstrap-typeahead'; + +import { + CustomInput, + FormGroup +} from './../../../../components'; +import options from './exampleData'; + +export class MenuAlignment extends React.Component { + state = { + align: 'justify', + }; + + render() { + const {align} = this.state; + const radios = [ + {label: 'Justify (default)', value: 'justify'}, + {label: 'Align left', value: 'left'}, + {label: 'Align right', value: 'right'}, + ]; + + return ( + + + + { + _.map(radios, ({ label, value }) => ( + this.setState({align: value})} + type="radio" + value={value} + id={`input-align-${value}`} + label={ label } + /> + )) + } + + + ); + } +} diff --git a/app/routes/Forms/Typeahead/components/PaginationExample.js b/app/routes/Forms/Typeahead/components/PaginationExample.js new file mode 100755 index 0000000..bb37e4d --- /dev/null +++ b/app/routes/Forms/Typeahead/components/PaginationExample.js @@ -0,0 +1,38 @@ +import React from 'react'; +import _ from 'lodash'; +import { Typeahead } from 'react-bootstrap-typeahead'; + +import { + CustomInput, + FormGroup +} from './../../../../components'; + +export class PaginationExample extends React.Component { + state = { + paginate: true, + }; + + render() { + const {paginate} = this.state; + + return ( + + console.log('Results paginated')} + options={_.range(0, 1000).map((o) => o.toString())} + paginate={paginate} + placeholder="Pick a number..." + /> + + this.setState({paginate: !!e.target.checked})} + type="checkbox" + id="enable-pagination" + label="Paginate results" + /> + + + ); + } +} diff --git a/app/routes/Forms/Typeahead/components/PublicMethods.js b/app/routes/Forms/Typeahead/components/PublicMethods.js new file mode 100755 index 0000000..3756458 --- /dev/null +++ b/app/routes/Forms/Typeahead/components/PublicMethods.js @@ -0,0 +1,57 @@ +import React from 'react'; +import { Typeahead } from 'react-bootstrap-typeahead'; + +import { + ButtonToolbar, + Button +} from './../../../../components'; +import data from './exampleData'; + +export class PublicMethods extends React.Component { + _typeahead = React.createRef(); + + render() { + return ( + + + + + + + + + ); + } +} diff --git a/app/routes/Forms/Typeahead/components/RenderingExample.js b/app/routes/Forms/Typeahead/components/RenderingExample.js new file mode 100755 index 0000000..67ed768 --- /dev/null +++ b/app/routes/Forms/Typeahead/components/RenderingExample.js @@ -0,0 +1,111 @@ +import React from 'react'; +import _ from 'lodash'; +import { Highlighter, Menu, MenuItem, Token, Typeahead } from 'react-bootstrap-typeahead'; + +import { + CustomInput, + FormGroup +} from './../../../../components'; +import options from './exampleData'; + +export class RenderingExample extends React.Component { + state = { + selectedOption: 'renderMenu', + }; + + render() { + const {selectedOption} = this.state; + const props = {}; + const radios = [ + {label: 'Custom menu', value: 'renderMenu'}, + {label: 'Custom menu item contents', value: 'renderMenuItemChildren'}, + {label: 'Custom token', value: 'renderToken'}, + ]; + + switch (selectedOption) { + case radios[0].value: + props.renderMenu = this._renderMenu; + break; + case radios[1].value: + props.renderMenuItemChildren = this._renderMenuItemChildren; + break; + case radios[2].value: + props.multiple = true; + props.renderToken = this._renderToken; + break; + } + + return ( + + + + {radios.map(({label, value}) => ( + this.setState({selectedOption: value})} + type="radio" + value={value} + id={`rendering-type-${value}`} + label={label} + /> + ))} + + + ); + } + + _renderMenu(results, menuProps) { + let idx = 0; + const grouped = _.groupBy(results, (r) => r.region); + const items = Object.keys(grouped).sort().map((region) => { + return [ + !!idx && , + + {region} + , + _.map(grouped[region], (state) => { + const item = + + + {state.name} + + ; + + idx++; + return item; + }), + ]; + }); + + return {items}; + } + + _renderMenuItemChildren(option, props) { + return [ + + {option.name} + , +
    + + Population: {option.population.toLocaleString()} + +
    , + ]; + } + + _renderToken(option, props, index) { + return ( + + {`${option.name} (Pop: ${option.population.toLocaleString()})`} + + ); + } +} diff --git a/app/routes/Forms/Typeahead/components/exampleData.js b/app/routes/Forms/Typeahead/components/exampleData.js new file mode 100755 index 0000000..bbf4292 --- /dev/null +++ b/app/routes/Forms/Typeahead/components/exampleData.js @@ -0,0 +1,52 @@ +export default [ + { name: 'Alabama', population: 4780127, capital: 'Montgomery', region: 'South' }, + { name: 'Alaska', population: 710249, capital: 'Juneau', region: 'West' }, + { name: 'Arizona', population: 6392307, capital: 'Phoenix', region: 'West' }, + { name: 'Arkansas', population: 2915958, capital: 'Little Rock', region: 'South' }, + { name: 'California', population: 37254503, capital: 'Sacramento', region: 'West' }, + { name: 'Colorado', population: 5029324, capital: 'Denver', region: 'West' }, + { name: 'Connecticut', population: 3574118, capital: 'Hartford', region: 'Northeast' }, + { name: 'Delaware', population: 897936, capital: 'Dover', region: 'South' }, + { name: 'Florida', population: 18804623, capital: 'Tallahassee', region: 'South' }, + { name: 'Georgia', population: 9688681, capital: 'Atlanta', region: 'South' }, + { name: 'Hawaii', population: 1360301, capital: 'Honolulu', region: 'West' }, + { name: 'Idaho', population: 1567652, capital: 'Boise', region: 'West' }, + { name: 'Illinois', population: 12831549, capital: 'Springfield', region: 'Midwest' }, + { name: 'Indiana', population: 6484229, capital: 'Indianapolis', region: 'Midwest' }, + { name: 'Iowa', population: 3046869, capital: 'Des Moines', region: 'Midwest' }, + { name: 'Kansas', population: 2853132, capital: 'Topeka', region: 'Midwest' }, + { name: 'Kentucky', population: 4339349, capital: 'Frankfort', region: 'South' }, + { name: 'Louisiana', population: 4533479, capital: 'Baton Rouge', region: 'South' }, + { name: 'Maine', population: 1328361, capital: 'Augusta', region: 'Northeast' }, + { name: 'Maryland', population: 5773785, capital: 'Annapolis', region: 'South' }, + { name: 'Massachusetts', population: 6547817, capital: 'Boston', region: 'Northeast' }, + { name: 'Michigan', population: 9884129, capital: 'Lansing', region: 'Midwest' }, + { name: 'Minnesota', population: 5303925, capital: 'Saint Paul', region: 'Midwest' }, + { name: 'Mississippi', population: 2968103, capital: 'Jackson', region: 'South' }, + { name: 'Missouri', population: 5988927, capital: 'Jefferson City', region: 'Midwest' }, + { name: 'Montana', population: 989417, capital: 'Alberta', region: 'West' }, + { name: 'Nebraska', population: 1826341, capital: 'Lincoln', region: 'Midwest' }, + { name: 'Nevada', population: 2700691, capital: 'Carson City', region: 'West' }, + { name: 'New Hampshire', population: 1316466, capital: 'Concord', region: 'Northeast' }, + { name: 'New Jersey', population: 8791936, capital: 'Trenton', region: 'Northeast' }, + { name: 'New Mexico', population: 2059192, capital: 'Santa Fe', region: 'West' }, + { name: 'New York', population: 19378087, capital: 'Albany', region: 'Northeast' }, + { name: 'North Carolina', population: 9535692, capital: 'Raleigh', region: 'South' }, + { name: 'North Dakota', population: 672591, capital: 'Bismarck', region: 'Midwest' }, + { name: 'Ohio', population: 11536725, capital: 'Columbus', region: 'Midwest' }, + { name: 'Oklahoma', population: 3751616, capital: 'Oklahoma City', region: 'South' }, + { name: 'Oregon', population: 3831073, capital: 'Salem', region: 'West' }, + { name: 'Pennsylvania', population: 12702887, capital: 'Harrisburg', region: 'Northeast' }, + { name: 'Rhode Island', population: 1052931, capital: 'Providence', region: 'Northeast' }, + { name: 'South Carolina', population: 4625401, capital: 'Columbia', region: 'South' }, + { name: 'South Dakota', population: 814191, capital: 'Pierre', region: 'Midwest' }, + { name: 'Tennessee', population: 6346275, capital: 'Nashville', region: 'South' }, + { name: 'Texas', population: 25146105, capital: 'Austin', region: 'South' }, + { name: 'Utah', population: 2763888, capital: 'Salt Lake City', region: 'West' }, + { name: 'Vermont', population: 625745, capital: 'Montpelier', region: 'Northeast' }, + { name: 'Virginia', population: 8001045, capital: 'Richmond', region: 'South' }, + { name: 'Washington', population: 6724543, capital: 'Olympia', region: 'West' }, + { name: 'West Virginia', population: 1853011, capital: 'Charleston', region: 'South' }, + { name: 'Wisconsin', population: 5687289, capital: 'Madison', region: 'West' }, + { name: 'Wyoming', population: 563767, capital: 'Cheyenne', region: 'West' }, +]; \ No newline at end of file diff --git a/app/routes/Forms/Typeahead/components/index.js b/app/routes/Forms/Typeahead/components/index.js new file mode 100755 index 0000000..87aac80 --- /dev/null +++ b/app/routes/Forms/Typeahead/components/index.js @@ -0,0 +1,16 @@ +export * from './BasicExample'; +export * from './BasicBehaviors'; +export * from './ControllingSelections'; +export * from './InputSize'; +export * from './MenuAlignment'; +export * from './FormExample'; +export * from './PaginationExample'; +export * from './BodyContainer'; +export * from './RenderingExample'; +export * from './LabelKey'; +export * from './Filtering'; +export * from './CustomFiltering'; +export * from './CustomSelections'; +export * from './AsynchronousSearching'; +export * from './AsynchronousPagination'; +export * from './PublicMethods'; diff --git a/app/routes/Forms/Typeahead/components/utils.js b/app/routes/Forms/Typeahead/components/utils.js new file mode 100755 index 0000000..01c69b5 --- /dev/null +++ b/app/routes/Forms/Typeahead/components/utils.js @@ -0,0 +1,16 @@ +import fetch from 'isomorphic-fetch'; + +const SEARCH_URI = 'https://api.github.com/search/users'; + +export function makeAndHandleRequest(query, page = 1) { + return fetch(`${SEARCH_URI}?q=${query}+in:login&page=${page}&per_page=50`) + .then((resp) => resp.json()) + .then(({items, total_count}) => { + const options = items.map((i) => ({ + avatar_url: i.avatar_url, + id: i.id, + login: i.login, + })); + return {options, total_count}; + }); +} \ No newline at end of file diff --git a/app/routes/Forms/Typeahead/index.js b/app/routes/Forms/Typeahead/index.js new file mode 100755 index 0000000..a0bae78 --- /dev/null +++ b/app/routes/Forms/Typeahead/index.js @@ -0,0 +1,3 @@ +import { Typeahead } from './Typeahead'; + +export default Typeahead; diff --git a/app/routes/Forms/Wizard/Wizard.js b/app/routes/Forms/Wizard/Wizard.js new file mode 100755 index 0000000..9f38844 --- /dev/null +++ b/app/routes/Forms/Wizard/Wizard.js @@ -0,0 +1,619 @@ +import React from 'react'; +import _ from 'lodash'; + +import { + Container, + Wizard, + Card, + Nav, + NavItem, + NavLink, + CardFooter, + CardBody, + Button, + Row, + Col, + Table, + Form, + FormGroup, + Input, + InputGroup, + InputGroupAddon, + Label, + DropdownToggle, + DropdownMenu, + DropdownItem, + UncontrolledDropdown +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; + +const sequence = ['your-cart', 'shipping', 'payment', 'summary']; + +const items = [ + { + name: 'Incredible Metal Keyboard', + quantity: 22, + price: '$578.00' + }, + { + name: 'Incredible Soft Cheese', + quantity: 3, + price: '$278.00' + }, + { + name: 'Handcrafted Granite Sausages', + quantity: 29, + price: '$465.00' + }, + { + name: 'Awesome Metal Gloves', + quantity: 15, + price: '$501.00' + } +]; + +const WizardStep1 = () => ( + + +
    +

    + Your Bags are Ready to Check Out! +

    +

    + Discover goods you'll love from brands that inspire. + The easiest way to open your own online store. + Discover amazing stuff or open your own store for free! +

    + + Below is a sample page for your cart, + Created using pages design UI Elementes + +
    + + + + + + + + + + + + + { + _.map(items, (item, index) => ( + + + + + + + )) + } + + + + + +
    #DescriptionQtyTotal
    + + + { item.name } + + { item.quantity } + + { item.price } +
    + +
    Sub-Total
    +
    $114.00
    + +
    VAT
    +
    $876.78
    + +
    Total
    +
    $986.78
    +     +
    + +     +); +const WizardStep2 = () => ( + + +
    +

    + Your Information is Safe with Us! +

    +

    + We respect your privacy and protect it with strong encryption, plus strict policies. + Two-step verification, which we encourage all our customers to use. +

    + + Fields marked as * are Required! + +
    + + +
    +
    + Name and Email Address +
    + + + + + + + + + + + + + + + + + + + + + +
    + Billing Address +
    + + + + + + + + + + + + + PL (+48) + + + PL (+48) + UK (+44) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + PL (+48) + + + PL (+48) + UK (+44) + + + + + + + +
    + +     +); +const WizardStep3 = () => ( + + +
    +

    + We Secured Your Line +

    +

    + Below is a sample page for your cart , Created using pages design UI Elementes. +

    + + + + + + + + + + + { + _.map(items, (item, index) => ( + + + + + + + )) + } + + + + +
    #DescriptionQtyTotal
    + + + { item.name } + + { item.quantity } + + { item.price } +
    + $986.78 +
    + + Invoice are issued on the date of despatch. + Payment terms: Pre-orders: within 10 days of invoice date with 4% discount, + from the 11th to the 30th day net. Re-orders: non-reduced stock items are payable net after 20 days. + +
    + + + + + + +
    +
    Credit Card
    +
    + + + +
    +
    +
    + + + + + + + + + +
    + + +
    + + + Jun (06) + + + Jun (06) + Jul (07)) + Aug (08) + + +   + + + 2018 + + + 2018 + 2019 + 2020 + + +
    +     + + + + +
    +
    +     +     + +     +); +const WizardStep4 = () => ( + + +
    +

    + Summary +

    +

    + Below is a sample page for your cart , Created using pages design UI Elementes. +

    + + + + + + + + + + + { + _.map(items, (item, index) => ( + + + + + + + )) + } + + + + +
    #DescriptionQtyTotal
    + + + { item.name } + + { item.quantity } + + { item.price } +
    + $986.78 +
    + Invoice are issued on the date of despatch. Payment terms: Pre-orders: within 10 days of invoice date with 4% discount, from the 11th to the 30th day net. Re-orders: non-reduced stock items are payable net after 20 days. + +
    + + +
    Name and Email Address
    + + +
    First Name
    +
    John
    + +
    Last Name
    +
    Novoselic
    + +
    Email
    +
    john@novoselic.com
    + +
    +
    + +
    +     +
    Billing Address
    + +
    Address
    +
    65575 Wintheiser Skyway Einar Pike
    + +
    Country
    +
    United Kingdom
    + +
    City
    +
    London
    + +
    State/Province
    +
    Greater London
    + +
    ZIP Code
    +
    151
    + +
    Phone
    +
    +48 383-747-234
    + +
    +
    + +
    +     +
    Credit Card
    + +
    Card Name
    +
    Visa
    + +
    Card Number
    +
    **** **** **** 6765
    + +
    +
    + +
    +     + +     +); + +export class WizardExample extends React.Component { + state = { + currentStep: _.first(sequence) + } + + render() { + const { currentStep } = this.state; + + return ( + + + + + +     } + complete={ this._isComplete(sequence[0]) } + > + Your Cart + +     } + complete={ this._isComplete(sequence[1]) } + > + Shipping + +     } + complete={ this._isComplete(sequence[2]) } + > + Payment + +     } + complete={ this._isComplete(sequence[3]) } + > + Summary + + + + + + { + (() => { + switch(this.state.currentStep) { + case sequence[0]: + return + case sequence[1]: + return + case sequence[2]: + return + case sequence[3]: + return + } + })() + } + + + +
    + { + currentStep !== sequence[0] && ( + + ) + } + { + currentStep !== sequence[sequence.length - 1] && ( + + ) + } +
    +     + + + ); + } + + _changeStep = (stepId) => { + this.setState({ + currentStep: stepId + }); + } + + _prevStep = () => { + const index = sequence.indexOf(this.state.currentStep); + this.setState({ + currentStep: sequence[index - 1] + }); + } + + _nextStep = () => { + const index = sequence.indexOf(this.state.currentStep); + this.setState({ + currentStep: sequence[index + 1] + }); + } + + _isComplete = (stepId) => + sequence.indexOf(stepId) < sequence.indexOf(this.state.currentStep) +} diff --git a/app/routes/Forms/Wizard/index.js b/app/routes/Forms/Wizard/index.js new file mode 100755 index 0000000..e5b7647 --- /dev/null +++ b/app/routes/Forms/Wizard/index.js @@ -0,0 +1,3 @@ +import { WizardExample } from './Wizard'; + +export default WizardExample; diff --git a/app/routes/Graphs/ReCharts/ReCharts.js b/app/routes/Graphs/ReCharts/ReCharts.js new file mode 100755 index 0000000..701bd94 --- /dev/null +++ b/app/routes/Graphs/ReCharts/ReCharts.js @@ -0,0 +1,847 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Card, + CardBody, + CardDeck, + Button +} from './../../../components' +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +import { SimpleBarChart } from "./components/SimpleBarChart"; +import { StackedBarChart } from "./components/StackedBarChart"; +import { MixBarChart } from "./components/MixBarChart"; +import { PositiveAndNegativeBarChart } from "./components/PositiveAndNegativeBarChart"; +import { BarChartStackedBySign } from "./components/BarChartStackedBySign"; +import { BarChartHasBackground } from "./components/BarChartHasBackground"; +import { SimpleLineChart } from "./components/SimpleLineChart"; +import { DashedLineChart } from "./components/DashedLineChart"; +import { VerticalLineChart } from "./components/VerticalLineChart"; +import { CustomizedLabelLineChart } from './components/CustomizedLabelLineChart'; +import { SimpleAreaChart } from "./components/SimpleAreaChart"; +import { StackedAreaChart } from "./components/StackedAreaChart"; +import { PercentAreaChart } from "./components/PercentAreaChart"; +import { AreaChartFillByValue } from "./components/AreaChartFillByValue"; +import { TwoLevelPieChart } from "./components/TwoLevelPieChart"; +import { StraightAnglePieChart } from "./components/StraightAnglePieChart"; +import { PieChartWithCustomizedLabel } from "./components/PieChartWithCustomizedLabel"; +import { PieChartWithPaddingAngle } from "./components/PieChartWithPaddingAngle"; +import { PieChartWithPaddingAngleHalf } from "./components/PieChartWithPaddingAngleHalf"; +import { SpecifiedDomainRadarChart } from "./components/SpecifiedDomainRadarChart"; +import { SimpleRadialBarChart } from './components/SimpleRadialBarChart'; +import { LineBarAreaComposedChart } from "./components/LineBarAreaComposedChart"; +import { TinyLineChart } from "./components/TinyLineChart"; +import { TinyAreaChart } from "./components/TinyAreaChart"; +import { TinyBarChart } from './components/TinyBarChart'; +import { TinyPieChart } from './components/TinyPieChart'; +import { TinyDonutChart } from './components/TinyDonutChart'; +import { VerticalComposedChart } from './components/VerticalComposedChart'; + +export const ReCharts = () => ( + + +

    + Recharts is a Redefined chart library built with React and D3. + The main purpose of this library is to help you to write charts in React applications without any pain. + Main principles of Recharts are: +

    +
      +
    • Simply deploy with React components
      • +
    • Native SVG support, lightweight depending only on some D3 submodules
      • +
    • Declarative components, components of charts are purely presentational
      • +
    + + { /* START Header 1 */} + + + + Quickly build your charts with decoupled, reusable React components. + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + { /* START Card Graph */} + + +
    +
    +
    + SimpleBarChart + + #1.01 + +
    +

    Bar Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} + { /* START Card Graph */} + + +
    +
    +
    + StackedBarChart + + #1.02 + +
    +

    Bar Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} +     + + { /* START Card Graph */} + + +
    +
    +
    + MixBarChart + + #1.03 + +
    +

    Bar Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} + { /* START Card Graph */} + + +
    +
    +
    + PositiveAndNegativeBarChart + + #1.04 + +
    +

    Bar Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} +     + + { /* START Card Graph */} + + +
    +
    +
    + BarChartStackedBySign + + #1.05 + +
    +

    Bar Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} + { /* START Card Graph */} + + +
    +
    +
    + BarChartHasBackground + + #1.06 + +
    +

    Bar Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} +     + { /* START Section 1 */} + + { /* START Header 2 */} + + + + Quickly build your charts with decoupled, reusable React components. + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + { /* START Card Graph */} + + +
    +
    +
    + SimpleLineChart + + #2.01 + +
    +

    Line Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} + { /* START Card Graph */} + + +
    +
    +
    + DashedLineChart + + #2.02 + +
    +

    Line Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} +     + + { /* START Card Graph */} + + +
    +
    +
    + VerticalLineChart + + #2.03 + +
    +

    Line Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} + { /* START Card Graph */} + + +
    +
    +
    + CustomizedLabelLineChart + + #2.04 + +
    +

    Line Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} +     + { /* START Section 2 */} + + { /* START Header 3 */} + + + + Quickly build your charts with decoupled, reusable React components. + + )} + /> + + + { /* END Header 3 */} + { /* START Section 3 */} + + { /* START Card Graph */} + + +
    +
    +
    + SimpleAreaChart + + #3.01 + +
    +

    Area Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} + { /* START Card Graph */} + + +
    +
    +
    + StackedAreaChart + + #3.02 + +
    +

    Area Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} +     + + { /* START Card Graph */} + + +
    +
    +
    + PercentAreaChart + + #3.03 + +
    +

    Area Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} + { /* START Card Graph */} + + +
    +
    +
    + AreaChartFillByValue + + #3.04 + +
    +

    Area Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} +     + { /* START Section 3 */} + + { /* START Header 4 */} + + + + Quickly build your charts with decoupled, reusable React components. + + )} + /> + + + { /* END Header 4 */} + { /* START Section 4 */} + + { /* START Card Graph */} + + +
    +
    +
    + TwoLevelPieChart + + #4.01 + +
    +

    Pie Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} + { /* START Card Graph */} + + +
    +
    +
    + StraightAnglePieChart + + #4.02 + +
    +

    Pie Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} +     + + { /* START Card Graph */} + + +
    +
    + PieChartWithPaddingAngle + + #4.03 + +
    + + + +
    + +     +     + { /* START Card Graph */} + { /* START Card Graph */} + + +
    +
    + PieChartWithPaddingAngleHalf + + #4.04 + +
    + + + +
    + +     +     + { /* START Card Graph */} +     + + { /* START Card Graph */} + + +
    +
    +
    + PieChartWithCustomizedLabel + + #4.05 + +
    +

    Pie Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} +     + { /* START Section 4 */} + + { /* START Header 5 */} + + + + Quickly build your charts with decoupled, reusable React components. + + )} + /> + + + { /* END Header 5 */} + { /* START Section 5 */} + + { /* START Card Graph */} + + +
    +
    +
    + SpecifiedDomainRadarChart + + #5.01 + +
    +

    Radar Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} + { /* START Card Graph */} + + +
    +
    +
    + SimpleRadialBarChart + + #5.02 + +
    +

    Radar Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} +     + { /* START Section 5 */} + + { /* START Header 6 */} + + + + Quickly build your charts with decoupled, reusable React components. + + )} + /> + + + { /* END Header 6 */} + { /* START Section 6 */} + + { /* START Card Graph */} + + +
    +
    + LineBarAreaComposedChart + + #6.01 + +
    + + + +
    + +     +     + { /* START Card Graph */} + { /* START Card Graph */} + + +
    +
    +
    + VerticalComposedChart + + #6.02 + +
    +

    Composed Charts

    +
    + + + +
    + +     +     + { /* START Card Graph */} +     + { /* START Section 6 */} + + { /* START Header 7 */} + + + + Quickly build your charts with decoupled, reusable React components. + + )} + /> + + + { /* END Header 7 */} + { /* START Section 7 */} + + { /* START Card Graph */} + + +
    +
    + TinyLineChart + + #7.01 + +
    + + + +
    + +     +     + { /* START Card Graph */} + { /* START Card Graph */} + + +
    +
    + TinyAreaChart + + #7.02 + +
    + + + +
    + +     +     + { /* START Card Graph */} + { /* START Card Graph */} + + +
    +
    + TinyBarChart + + #7.03 + +
    + + + +
    + +     +     + { /* START Card Graph */} +     + + + { /* START Card Graph */} + + +
    +
    + TinyDonutChart + + #7.05 + +
    + + + +
    + +     +     + { /* START Card Graph */} + + + { /* START Card Graph */} + + +
    +
    + TinyPieChart + + #7.06 + +
    + + + +
    + +     +     + { /* START Card Graph */} + +     + { /* START Section 7 */} +     +); + +export default ReCharts; diff --git a/app/routes/Graphs/ReCharts/components/AreaChartFillByValue.js b/app/routes/Graphs/ReCharts/components/AreaChartFillByValue.js new file mode 100755 index 0000000..5c8b0dc --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/AreaChartFillByValue.js @@ -0,0 +1,47 @@ +import React from 'react'; +import { + AreaChart, + CartesianGrid, + DefAreaValueColor, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Area +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, + {name: 'Page C', uv: -1000, pv: 9800, amt: 2290}, + {name: 'Page D', uv: 500, pv: 3908, amt: 2000}, + {name: 'Page E', uv: -2000, pv: 4800, amt: 2181}, + {name: 'Page F', uv: -250, pv: 3800, amt: 2500}, + {name: 'Page G', uv: 3490, pv: 4300, amt: 2100} +]; + +export const AreaChartFillByValue = () => ( + + + + + + + + + + + + + +); diff --git a/app/routes/Graphs/ReCharts/components/BarChartHasBackground.js b/app/routes/Graphs/ReCharts/components/BarChartHasBackground.js new file mode 100755 index 0000000..797e28a --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/BarChartHasBackground.js @@ -0,0 +1,41 @@ +import React from 'react'; +import { + BarChart, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Legend, + Bar +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, + {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, + {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, + {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, + {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, + {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, +]; + +const BarChartHasBackground = () => ( + + + + + + + + + + + + +) + +export { BarChartHasBackground }; diff --git a/app/routes/Graphs/ReCharts/components/BarChartStackedBySign.js b/app/routes/Graphs/ReCharts/components/BarChartStackedBySign.js new file mode 100755 index 0000000..747e0f9 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/BarChartStackedBySign.js @@ -0,0 +1,43 @@ +import React from 'react'; +import { + BarChart, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + ReferenceLine, + Legend, + Bar +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Page B', uv: -3000, pv: 1398, amt: 2210}, + {name: 'Page C', uv: -2000, pv: -9800, amt: 2290}, + {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, + {name: 'Page E', uv: -1890, pv: 4800, amt: 2181}, + {name: 'Page F', uv: 2390, pv: -3800, amt: 2500}, + {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, +]; + +const BarChartStackedBySign = () => ( + + + + + + + + + + + + + +) + +export { BarChartStackedBySign }; diff --git a/app/routes/Graphs/ReCharts/components/CustomizedLabelLineChart.js b/app/routes/Graphs/ReCharts/components/CustomizedLabelLineChart.js new file mode 100755 index 0000000..091891c --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/CustomizedLabelLineChart.js @@ -0,0 +1,51 @@ +import React from 'react'; + +import { + Line, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Legend, + LineChart, + ValueLabel, + Dot +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, + {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, + {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, + {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, + {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, + {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, +]; + +const generateDot = ({stroke, ...other}) => ( + +); + +export const CustomizedLabelLineChart = () => ( + + + + + + + + } activeDot={{r: 5}} dot={generateDot} /> + + + +); \ No newline at end of file diff --git a/app/routes/Graphs/ReCharts/components/DashedLineChart.js b/app/routes/Graphs/ReCharts/components/DashedLineChart.js new file mode 100755 index 0000000..7bdc460 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/DashedLineChart.js @@ -0,0 +1,53 @@ +import React from 'react'; +import { + Line, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Legend, + LineChart, + Dot +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, + {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, + {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, + {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, + {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, + {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, +]; + +const generateDot = ({stroke, ...other}) => ( + +); + +const DashedLineChart = () => ( + + + + + + + + + + + + +) + +export { DashedLineChart }; diff --git a/app/routes/Graphs/ReCharts/components/LineBarAreaComposedChart.js b/app/routes/Graphs/ReCharts/components/LineBarAreaComposedChart.js new file mode 100755 index 0000000..f738800 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/LineBarAreaComposedChart.js @@ -0,0 +1,68 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; + +import { + ResponsiveContainer, + ComposedChart, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + Legend, + Area, + Bar, + Line, + Dot +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [{name: 'Page A', uv: 590, pv: 800, amt: 1400}, + {name: 'Page B', uv: 868, pv: 967, amt: 1506}, + {name: 'Page C', uv: 1397, pv: 1098, amt: 989}, + {name: 'Page D', uv: 1480, pv: 1200, amt: 1228}, + {name: 'Page E', uv: 1520, pv: 1108, amt: 1100}, + {name: 'Page F', uv: 1400, pv: 680, amt: 1700}]; + +// eslint-disable-next-line react/prop-types +const generateDot = ({stroke, ...other}) => ( + +); + +const LineBarAreaComposedChart = ({height, className}) => ( + + + + + + + + + + + + +); +LineBarAreaComposedChart.propTypes = { + height: PropTypes.string, + className: PropTypes.string +} + +export { LineBarAreaComposedChart }; diff --git a/app/routes/Graphs/ReCharts/components/MixBarChart.js b/app/routes/Graphs/ReCharts/components/MixBarChart.js new file mode 100755 index 0000000..b8d99dd --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/MixBarChart.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { + BarChart, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Legend, + Bar +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Page A', uv: 4000, female: 2400, male: 2400}, + {name: 'Page B', uv: 3000, female: 1398, male: 2210}, + {name: 'Page C', uv: 2000, female: 9800, male: 2290}, + {name: 'Page D', uv: 2780, female: 3908, male: 2000}, + {name: 'Page E', uv: 1890, female: 4800, male: 2181}, + {name: 'Page F', uv: 2390, female: 3800, male: 2500}, + {name: 'Page G', uv: 3490, female: 4300, male: 2100}, +]; + +const MixBarChart = () => ( + + + + + + + + + + + + + +) + +export { MixBarChart }; diff --git a/app/routes/Graphs/ReCharts/components/PercentAreaChart.js b/app/routes/Graphs/ReCharts/components/PercentAreaChart.js new file mode 100755 index 0000000..987b02b --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/PercentAreaChart.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { + AreaChart, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Area +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, + {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, + {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, + {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, + {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, + {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, +]; + +const PercentAreaChart = () => ( + + + + + + + + + + + + +) + +export { PercentAreaChart }; diff --git a/app/routes/Graphs/ReCharts/components/PieChartWithCustomizedLabel.js b/app/routes/Graphs/ReCharts/components/PieChartWithCustomizedLabel.js new file mode 100755 index 0000000..1b7b845 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/PieChartWithCustomizedLabel.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { + Pie, + ResponsiveContainer, + Cell, + PieChart, + PieValueLabel +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Group A', value: 400}, + {name: 'Group B', value: 300}, + {name: 'Group C', value: 300}, + {name: 'Group D', value: 200} +]; +const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']]; + +export const PieChartWithCustomizedLabel = () => ( + + + } + outerRadius={80} + fill="#8884d8" + > + { + data.map((entry, index) => ) + } + + + +); diff --git a/app/routes/Graphs/ReCharts/components/PieChartWithPaddingAngle.js b/app/routes/Graphs/ReCharts/components/PieChartWithPaddingAngle.js new file mode 100755 index 0000000..45b20b5 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/PieChartWithPaddingAngle.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { + PieChart, + Pie, + Cell, + ResponsiveContainer +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Group A', value: 400}, + {name: 'Group B', value: 300}, + {name: 'Group C', value: 300}, + {name: 'Group D', value: 200} +]; + +const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']]; + +export const PieChartWithPaddingAngle = () => ( + + + + { + data.map((entry, index) => ) + } + + + +); diff --git a/app/routes/Graphs/ReCharts/components/PieChartWithPaddingAngleHalf.js b/app/routes/Graphs/ReCharts/components/PieChartWithPaddingAngleHalf.js new file mode 100755 index 0000000..67e8e79 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/PieChartWithPaddingAngleHalf.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { + PieChart, + Pie, + Cell, + ResponsiveContainer +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Group A', value: 400}, + {name: 'Group B', value: 300}, + {name: 'Group C', value: 300}, + {name: 'Group D', value: 200} +]; + +const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']]; + +export const PieChartWithPaddingAngleHalf = () => ( + + + + { + data.map((entry, index) => ) + } + + + +); \ No newline at end of file diff --git a/app/routes/Graphs/ReCharts/components/PositiveAndNegativeBarChart.js b/app/routes/Graphs/ReCharts/components/PositiveAndNegativeBarChart.js new file mode 100755 index 0000000..1aa36f6 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/PositiveAndNegativeBarChart.js @@ -0,0 +1,43 @@ +import React from 'react'; +import { + BarChart, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + ReferenceLine, + Legend, + Bar +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Page B', uv: -3000, pv: 1398, amt: 2210}, + {name: 'Page C', uv: -2000, pv: -9800, amt: 2290}, + {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, + {name: 'Page E', uv: -1890, pv: 4800, amt: 2181}, + {name: 'Page F', uv: 2390, pv: -3800, amt: 2500}, + {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, +]; + +const PositiveAndNegativeBarChart = () => ( + + + + + + + + + + + + + +) + +export { PositiveAndNegativeBarChart }; diff --git a/app/routes/Graphs/ReCharts/components/SimpleAreaChart.js b/app/routes/Graphs/ReCharts/components/SimpleAreaChart.js new file mode 100755 index 0000000..e6b1c1e --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/SimpleAreaChart.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { + AreaChart, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Area +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, + {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, + {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, + {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, + {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, + {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, +]; + +const SimpleAreaChart = () => ( + + + + + + + + + + +) + +export { SimpleAreaChart }; diff --git a/app/routes/Graphs/ReCharts/components/SimpleBarChart.js b/app/routes/Graphs/ReCharts/components/SimpleBarChart.js new file mode 100755 index 0000000..de10268 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/SimpleBarChart.js @@ -0,0 +1,49 @@ +import React from 'react'; +import { + BarChart, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Legend, + Bar +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, + {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, + {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, + {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, + {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, + {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, +]; + +const SimpleBarChart = () => ( + + + + + + + + + + + + +) + +export { SimpleBarChart }; diff --git a/app/routes/Graphs/ReCharts/components/SimpleLineChart.js b/app/routes/Graphs/ReCharts/components/SimpleLineChart.js new file mode 100755 index 0000000..c2e5065 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/SimpleLineChart.js @@ -0,0 +1,74 @@ +import React from 'react'; +import _ from 'lodash'; +import PropTypes from 'prop-types'; +import { + Line, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Legend, + LineChart, + Dot +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, + {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, + {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, + {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, + {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, + {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, +]; + +// eslint-disable-next-line react/prop-types +const generateDot = ({stroke, ...other}) => ( + +); + +const generateActiveDot = (props) => ( + +); + +const SimpleLineChart = ({height, className}) => ( + + + + + + + + + + + +); +SimpleLineChart.propTypes = { + height: PropTypes.string, + className: PropTypes.string +} + +export { SimpleLineChart }; diff --git a/app/routes/Graphs/ReCharts/components/SimpleRadialBarChart.js b/app/routes/Graphs/ReCharts/components/SimpleRadialBarChart.js new file mode 100755 index 0000000..5e94133 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/SimpleRadialBarChart.js @@ -0,0 +1,43 @@ +import React from 'react'; +import { + ResponsiveContainer, + RadialBarChart, + RadialBar, + Legend +} from 'recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: '18-24', uv: 31.47, pv: 2400, fill: colors['primary']}, + {name: '25-29', uv: 26.69, pv: 4567, fill: colors['purple']}, + {name: '30-34', uv: 15.69, pv: 1398, fill: colors['success']}, + {name: '35-39', uv: 8.22, pv: 9800, fill: colors['yellow']}, + {name: '40-49', uv: 8.63, pv: 3908, fill: colors['danger']}, + {name: '50+', uv: 2.63, pv: 4800, fill: colors['info']}, + {name: 'unk.', uv: 6.67, pv: 4800, fill: colors['warning']} + ]; + + const style = { + top: 0, + left: 350, + lineHeight: '24px' + }; + +const SimpleRadialBarChart = () => ( + + + + + + + +) + +export { SimpleRadialBarChart }; diff --git a/app/routes/Graphs/ReCharts/components/SpecifiedDomainRadarChart.js b/app/routes/Graphs/ReCharts/components/SpecifiedDomainRadarChart.js new file mode 100755 index 0000000..a967c51 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/SpecifiedDomainRadarChart.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { + ResponsiveContainer, + Radar, + RadarChart, + PolarGrid, + Legend, + PolarAngleAxis, + PolarRadiusAxis +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + { subject: 'Math', A: 120, B: 110, fullMark: 150 }, + { subject: 'Chinese', A: 98, B: 130, fullMark: 150 }, + { subject: 'English', A: 86, B: 130, fullMark: 150 }, + { subject: 'Geography', A: 99, B: 100, fullMark: 150 }, + { subject: 'Physics', A: 85, B: 90, fullMark: 150 }, + { subject: 'History', A: 65, B: 85, fullMark: 150 }, +]; + +const SpecifiedDomainRadarChart = () => ( + + + + + + + + + + +); + +export { SpecifiedDomainRadarChart }; diff --git a/app/routes/Graphs/ReCharts/components/StackedAreaChart.js b/app/routes/Graphs/ReCharts/components/StackedAreaChart.js new file mode 100755 index 0000000..4b679d7 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/StackedAreaChart.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { + AreaChart, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Area +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, + {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, + {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, + {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, + {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, + {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, +]; + +const StackedAreaChart = () => ( + + + + + + + + + + + + +) + +export { StackedAreaChart }; diff --git a/app/routes/Graphs/ReCharts/components/StackedBarChart.js b/app/routes/Graphs/ReCharts/components/StackedBarChart.js new file mode 100755 index 0000000..e5c1686 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/StackedBarChart.js @@ -0,0 +1,41 @@ +import React from 'react'; +import { + BarChart, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Legend, + Bar +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, + {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, + {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, + {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, + {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, + {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, +]; + +const StackedBarChart = () => ( + + + + + + + + + + + + +) + +export { StackedBarChart }; diff --git a/app/routes/Graphs/ReCharts/components/StraightAnglePieChart.js b/app/routes/Graphs/ReCharts/components/StraightAnglePieChart.js new file mode 100755 index 0000000..4ffe117 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/StraightAnglePieChart.js @@ -0,0 +1,37 @@ +import React from 'react'; +import { + Pie, + ResponsiveContainer, + PieChart +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + { name: 'Group A', value: 400 }, + { name: 'Group B', value: 300 }, + { name: 'Group C', value: 300 }, + { name: 'Group D', value: 200 }, + { name: 'Group E', value: 278 }, + { name: 'Group F', value: 189 } +]; + +const StraightAnglePieChart = () => ( + + + + + + +) + +export { StraightAnglePieChart }; diff --git a/app/routes/Graphs/ReCharts/components/TinyAreaChart.js b/app/routes/Graphs/ReCharts/components/TinyAreaChart.js new file mode 100755 index 0000000..0d921e2 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/TinyAreaChart.js @@ -0,0 +1,22 @@ +import React from 'react'; +import _ from 'lodash'; +import { + ResponsiveContainer, + AreaChart, + Area +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = _.times(20, () => ({ pv: Math.random() * 100 })); + +/* 99% - some wierd HACK that makes the container resize properly */ +const TinyAreaChart = () => ( + + + + + +); + +export { TinyAreaChart }; diff --git a/app/routes/Graphs/ReCharts/components/TinyBarChart.js b/app/routes/Graphs/ReCharts/components/TinyBarChart.js new file mode 100755 index 0000000..c4623a3 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/TinyBarChart.js @@ -0,0 +1,21 @@ +import React from 'react'; +import _ from 'lodash'; +import { + ResponsiveContainer, + BarChart, + Bar +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = _.times(40, () => ({ pv: Math.random() * 100 })); + +const TinyBarChart = () => ( + + + + + +); + +export { TinyBarChart }; diff --git a/app/routes/Graphs/ReCharts/components/TinyDonutChart.js b/app/routes/Graphs/ReCharts/components/TinyDonutChart.js new file mode 100755 index 0000000..def3493 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/TinyDonutChart.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { + PieChart, + Pie, + Cell +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Group A', value: 400}, + {name: 'Group B', value: 300}, + {name: 'Group C', value: 300}, + {name: 'Group D', value: 200} +]; + +const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']]; + +const TinyDonutChart = () => ( + + + { + data.map((entry, index) => ) + } + + +); + +export { TinyDonutChart }; diff --git a/app/routes/Graphs/ReCharts/components/TinyLineChart.js b/app/routes/Graphs/ReCharts/components/TinyLineChart.js new file mode 100755 index 0000000..5ca3a7c --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/TinyLineChart.js @@ -0,0 +1,32 @@ +import React from 'react'; +import _ from 'lodash'; +import { + ResponsiveContainer, + LineChart, + Line, + Dot +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = _.times(20, () => ({ pv: Math.random() * 100 })); + +const generateDot = ({stroke, ...other}) => ( + +); + +const TinyLineChart = () => ( + + + + + +); + +export { TinyLineChart }; diff --git a/app/routes/Graphs/ReCharts/components/TinyPieChart.js b/app/routes/Graphs/ReCharts/components/TinyPieChart.js new file mode 100755 index 0000000..d7abb49 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/TinyPieChart.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { + PieChart, + Pie, + Cell +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Group A', value: 400}, + {name: 'Group B', value: 300}, + {name: 'Group C', value: 300}, + {name: 'Group D', value: 200} +]; + +const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']]; + +const TinyPieChart = () => ( + + + { + data.map((entry, index) => ) + } + + +); + +export { TinyPieChart }; diff --git a/app/routes/Graphs/ReCharts/components/TwoLevelPieChart.js b/app/routes/Graphs/ReCharts/components/TwoLevelPieChart.js new file mode 100755 index 0000000..6616062 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/TwoLevelPieChart.js @@ -0,0 +1,55 @@ +import React from 'react'; +import { + Pie, + ResponsiveContainer, + PieChart +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data01 = [ + { name: 'Group A', value: 400 }, + { name: 'Group B', value: 300 }, + { name: 'Group C', value: 300 }, + { name: 'Group D', value: 200 } +]; + +const data02 = [ + { name: 'A1', value: 100 }, + { name: 'A2', value: 300 }, + { name: 'B1', value: 100 }, + { name: 'B2', value: 80 }, + { name: 'B3', value: 40 }, + { name: 'B4', value: 30 }, + { name: 'B5', value: 50 }, + { name: 'C1', value: 100 }, + { name: 'C2', value: 200 }, + { name: 'D1', value: 150 }, + { name: 'D2', value: 50 } +]; + +const TwoLevelPieChart = () => ( + + + + + + + +) + +export { TwoLevelPieChart }; diff --git a/app/routes/Graphs/ReCharts/components/VerticalComposedChart.js b/app/routes/Graphs/ReCharts/components/VerticalComposedChart.js new file mode 100755 index 0000000..4a10a91 --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/VerticalComposedChart.js @@ -0,0 +1,53 @@ +import React from 'react'; +import { + Area, + Line, + Bar, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Legend, + ComposedChart, + Dot +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, + {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, + {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, + {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, + {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, + {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, +]; + +// eslint-disable-next-line react/prop-types +const generateDot = ({stroke, ...other}) => ( + +); + +export const VerticalComposedChart = () => ( + + + + + + + + + + + + +); diff --git a/app/routes/Graphs/ReCharts/components/VerticalLineChart.js b/app/routes/Graphs/ReCharts/components/VerticalLineChart.js new file mode 100755 index 0000000..a424d6e --- /dev/null +++ b/app/routes/Graphs/ReCharts/components/VerticalLineChart.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { + Line, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Legend, + LineChart, + Dot +} from './../../../../components/recharts'; + +import colors from './../../../../colors'; + +const data = [ + {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, + {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, + {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, + {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, + {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, + {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, +]; + +const generateDot = ({stroke, ...other}) => ( + +); + +const VerticalLineChart = () => ( + + + + + + + + + + + +); + +export { VerticalLineChart }; diff --git a/app/routes/Graphs/ReCharts/index.js b/app/routes/Graphs/ReCharts/index.js new file mode 100755 index 0000000..8ed2bf9 --- /dev/null +++ b/app/routes/Graphs/ReCharts/index.js @@ -0,0 +1,3 @@ +import ReCharts from './ReCharts'; + +export default ReCharts; diff --git a/app/routes/Icons/Icons.js b/app/routes/Icons/Icons.js new file mode 100755 index 0000000..f89fe9a --- /dev/null +++ b/app/routes/Icons/Icons.js @@ -0,0 +1,1165 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Card, + CardTitle, + CardBody +} from './../../components'; +import { HeaderMain } from "../components/HeaderMain"; +import { + HeaderDemo +} from "../components/HeaderDemo"; + +const Icons = () => ( + + + + { /* START Card */} + + + + 30 New Icons in 4.6 + + #1.01 + + + +
    american-sign-language-interpreting
    +
    asl-interpreting (alias)
    +
    assistive-listening-systems
    +
    audio-description
    +
    blind
    +
    braille
    +
    deaf
    +
    deafness (alias)
    +
    envira
    +
    fa (alias)
    +
    first-order
    +
    font-awesome
    +
    gitlab
    +
    glide
    +
    glide-g
    +
    google-plus-circle (alias)
    +
    google-plus-official
    +
    hard-of-hearing (alias)
    +
    instagram
    +
    low-vision
    +
    pied-piper
    +
    question-circle-o
    +
    sign-language
    +
    signing (alias)
    +
    snapchat
    +
    snapchat-ghost
    +
    snapchat-square
    +
    themeisle
    +
    universal-access
    +
    viadeo
    +
    viadeo-square
    +
    volume-control-phone
    +
    wheelchair-alt
    +
    wpbeginner
    +
    wpforms
    +
    yoast
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + Web Application Icons + + #1.02 + + + +
    adjust
    +
    american-sign-language-interpreting
    +
    anchor
    +
    archive
    +
    area-chart
    +
    arrows
    +
    arrows-h
    +
    arrows-v
    +
    asl-interpreting (alias)
    +
    assistive-listening-systems
    +
    asterisk
    +
    at
    +
    audio-description
    +
    automobile (alias)
    +
    balance-scale
    +
    ban
    +
    bank (alias)
    +
    bar-chart
    +
    bar-chart-o (alias)
    +
    barcode
    +
    bars
    +
    battery-0 (alias)
    +
    battery-1 (alias)
    +
    battery-2 (alias)
    +
    battery-3 (alias)
    +
    battery-4 (alias)
    +
    battery-empty
    +
    battery-full
    +
    battery-half
    +
    battery-quarter
    +
    battery-three-quarters
    +
    bed
    +
    beer
    +
    bell
    +
    bell-o
    +
    bell-slash
    +
    bell-slash-o
    +
    bicycle
    +
    binoculars
    +
    birthday-cake
    +
    blind
    +
    bluetooth
    +
    bluetooth-b
    +
    bolt
    +
    bomb
    +
    book
    +
    bookmark
    +
    bookmark-o
    +
    braille
    +
    briefcase
    +
    bug
    +
    building
    +
    building-o
    +
    bullhorn
    +
    bullseye
    +
    bus
    +
    cab (alias)
    +
    calculator
    +
    calendar
    +
    calendar-check-o
    +
    calendar-minus-o
    +
    calendar-o
    +
    calendar-plus-o
    +
    calendar-times-o
    +
    camera
    +
    camera-retro
    +
    car
    +
    caret-square-o-down
    +
    caret-square-o-left
    +
    caret-square-o-right
    +
    caret-square-o-up
    +
    cart-arrow-down
    +
    cart-plus
    +
    cc
    +
    certificate
    +
    check
    +
    check-circle
    +
    check-circle-o
    +
    check-square
    +
    check-square-o
    +
    child
    +
    circle
    +
    circle-o
    +
    circle-o-notch
    +
    circle-thin
    +
    clock-o
    +
    clone
    +
    close (alias)
    +
    cloud
    +
    cloud-download
    +
    cloud-upload
    +
    code
    +
    code-fork
    +
    coffee
    +
    cog
    +
    cogs
    +
    comment
    +
    comment-o
    +
    commenting
    +
    commenting-o
    +
    comments
    +
    comments-o
    +
    compass
    +
    copyright
    +
    creative-commons
    +
    credit-card
    +
    credit-card-alt
    +
    crop
    +
    crosshairs
    +
    cube
    +
    cubes
    +
    cutlery
    +
    dashboard (alias)
    +
    database
    +
    deaf
    +
    deafness (alias)
    +
    desktop
    +
    diamond
    +
    dot-circle-o
    +
    download
    +
    edit (alias)
    +
    ellipsis-h
    +
    ellipsis-v
    +
    envelope
    +
    envelope-o
    +
    envelope-square
    +
    eraser
    +
    exchange
    +
    exclamation
    +
    exclamation-circle
    +
    exclamation-triangle
    +
    external-link
    +
    external-link-square
    +
    eye
    +
    eye-slash
    +
    eyedropper
    +
    fax
    +
    feed (alias)
    +
    female
    +
    fighter-jet
    +
    file-archive-o
    +
    file-audio-o
    +
    file-code-o
    +
    file-excel-o
    +
    file-image-o
    +
    file-movie-o (alias)
    +
    file-pdf-o
    +
    file-photo-o (alias)
    +
    file-picture-o (alias)
    +
    file-powerpoint-o
    +
    file-sound-o (alias)
    +
    file-video-o
    +
    file-word-o
    +
    file-zip-o (alias)
    +
    film
    +
    filter
    +
    fire
    +
    fire-extinguisher
    +
    flag
    +
    flag-checkered
    +
    flag-o
    +
    flash (alias)
    +
    flask
    +
    folder
    +
    folder-o
    +
    folder-open
    +
    folder-open-o
    +
    frown-o
    +
    futbol-o
    +
    gamepad
    +
    gavel
    +
    gear (alias)
    +
    gears (alias)
    +
    gift
    +
    glass
    +
    globe
    +
    graduation-cap
    +
    group (alias)
    +
    hand-grab-o (alias)
    +
    hand-lizard-o
    +
    hand-paper-o
    +
    hand-peace-o
    +
    hand-pointer-o
    +
    hand-rock-o
    +
    hand-scissors-o
    +
    hand-spock-o
    +
    hand-stop-o (alias)
    +
    hard-of-hearing (alias)
    +
    hashtag
    +
    hdd-o
    +
    headphones
    +
    heart
    +
    heart-o
    +
    heartbeat
    +
    history
    +
    home
    +
    hotel (alias)
    +
    hourglass
    +
    hourglass-1 (alias)
    +
    hourglass-2 (alias)
    +
    hourglass-3 (alias)
    +
    hourglass-end
    +
    hourglass-half
    +
    hourglass-o
    +
    hourglass-start
    +
    i-cursor
    +
    image (alias)
    +
    inbox
    +
    industry
    +
    info
    +
    info-circle
    +
    institution (alias)
    +
    key
    +
    keyboard-o
    +
    language
    +
    laptop
    +
    leaf
    +
    legal (alias)
    +
    lemon-o
    +
    level-down
    +
    level-up
    +
    life-bouy (alias)
    +
    life-buoy (alias)
    +
    life-ring
    +
    life-saver (alias)
    +
    lightbulb-o
    +
    line-chart
    +
    location-arrow
    +
    lock
    +
    low-vision
    +
    magic
    +
    magnet
    +
    mail-forward (alias)
    +
    mail-reply (alias)
    +
    mail-reply-all (alias)
    +
    male
    +
    map
    +
    map-marker
    +
    map-o
    +
    map-pin
    +
    map-signs
    +
    meh-o
    +
    microphone
    +
    microphone-slash
    +
    minus
    +
    minus-circle
    +
    minus-square
    +
    minus-square-o
    +
    mobile
    +
    mobile-phone (alias)
    +
    money
    +
    moon-o
    +
    mortar-board (alias)
    +
    motorcycle
    +
    mouse-pointer
    +
    music
    +
    navicon (alias)
    +
    newspaper-o
    +
    object-group
    +
    object-ungroup
    +
    paint-brush
    +
    paper-plane
    +
    paper-plane-o
    +
    paw
    +
    pencil
    +
    pencil-square
    +
    pencil-square-o
    +
    percent
    +
    phone
    +
    phone-square
    +
    photo (alias)
    +
    picture-o
    +
    pie-chart
    +
    plane
    +
    plug
    +
    plus
    +
    plus-circle
    +
    plus-square
    +
    plus-square-o
    +
    power-off
    +
    print
    +
    puzzle-piece
    +
    qrcode
    +
    question
    +
    question-circle
    +
    question-circle-o
    +
    quote-left
    +
    quote-right
    +
    random
    +
    recycle
    +
    refresh
    +
    registered
    +
    remove (alias)
    +
    reorder (alias)
    +
    reply
    +
    reply-all
    +
    retweet
    +
    road
    +
    rocket
    +
    rss
    +
    rss-square
    +
    search
    +
    search-minus
    +
    search-plus
    +
    send (alias)
    +
    send-o (alias)
    +
    server
    +
    share
    +
    share-alt
    +
    share-alt-square
    +
    share-square
    +
    share-square-o
    +
    shield
    +
    ship
    +
    shopping-bag
    +
    shopping-basket
    +
    shopping-cart
    +
    sign-in
    +
    sign-language
    +
    sign-out
    +
    signal
    +
    signing (alias)
    +
    sitemap
    +
    sliders
    +
    smile-o
    +
    soccer-ball-o (alias)
    +
    sort
    +
    sort-alpha-asc
    +
    sort-alpha-desc
    +
    sort-amount-asc
    +
    sort-amount-desc
    +
    sort-asc
    +
    sort-desc
    +
    sort-down (alias)
    +
    sort-numeric-asc
    +
    sort-numeric-desc
    +
    sort-up (alias)
    +
    space-shuttle
    +
    spinner
    +
    spoon
    +
    square
    +
    square-o
    +
    star
    +
    star-half
    +
    star-half-empty (alias)
    +
    star-half-full (alias)
    +
    star-half-o
    +
    star-o
    +
    sticky-note
    +
    sticky-note-o
    +
    street-view
    +
    suitcase
    +
    sun-o
    +
    support (alias)
    +
    tablet
    +
    tachometer
    +
    tag
    +
    tags
    +
    tasks
    +
    taxi
    +
    television
    +
    terminal
    +
    thumb-tack
    +
    thumbs-down
    +
    thumbs-o-down
    +
    thumbs-o-up
    +
    thumbs-up
    +
    ticket
    +
    times
    +
    times-circle
    +
    times-circle-o
    +
    tint
    +
    toggle-down (alias)
    +
    toggle-left (alias)
    +
    toggle-off
    +
    toggle-on
    +
    toggle-right (alias)
    +
    toggle-up (alias)
    +
    trademark
    +
    trash
    +
    trash-o
    +
    tree
    +
    trophy
    +
    truck
    +
    tty
    +
    tv (alias)
    +
    umbrella
    +
    universal-access
    +
    university
    +
    unlock
    +
    unlock-alt
    +
    unsorted (alias)
    +
    upload
    +
    user
    +
    user-plus
    +
    user-secret
    +
    user-times
    +
    users
    +
    video-camera
    +
    volume-control-phone
    +
    volume-down
    +
    volume-off
    +
    volume-up
    +
    warning (alias)
    +
    wheelchair
    +
    wheelchair-alt
    +
    wifi
    +
    wrench
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + Accessibility Icons + + #1.03 + + + +
    american-sign-language-interpreting
    +
    asl-interpreting (alias)
    +
    assistive-listening-systems
    +
    audio-description
    +
    blind
    +
    braille
    +
    cc
    +
    deaf
    +
    deafness (alias)
    +
    hard-of-hearing (alias)
    +
    low-vision
    +
    question-circle-o
    +
    sign-language
    +
    signing (alias)
    +
    tty
    +
    universal-access
    +
    volume-control-phone
    +
    wheelchair
    +
    wheelchair-alt
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + Hand Icons + + #1.04 + + + +
    hand-grab-o (alias)
    +
    hand-lizard-o
    +
    hand-o-down
    +
    hand-o-left
    +
    hand-o-right
    +
    hand-o-up
    +
    hand-paper-o
    +
    hand-peace-o
    +
    hand-pointer-o
    +
    hand-rock-o
    +
    hand-scissors-o
    +
    hand-spock-o
    +
    hand-stop-o (alias)
    +
    thumbs-down
    +
    thumbs-o-down
    +
    thumbs-o-up
    +
    thumbs-up
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + Transportation Icons + + #1.05 + + + +
    ambulance
    +
    automobile (alias)
    +
    bicycle
    +
    bus
    +
    cab (alias)
    +
    car
    +
    fighter-jet
    +
    motorcycle
    +
    plane
    +
    rocket
    +
    ship
    +
    space-shuttle
    +
    subway
    +
    taxi
    +
    train
    +
    truck
    +
    wheelchair
    +
    wheelchair-alt
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + Gender Icons + + #1.06 + + + +
    genderless
    +
    intersex (alias)
    +
    mars
    +
    mars-double
    +
    mars-stroke
    +
    mars-stroke-h
    +
    mars-stroke-v
    +
    mercury
    +
    neuter
    +
    transgender
    +
    transgender-alt
    +
    venus
    +
    venus-double
    +
    venus-mars
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + File Type Icons + + #1.07 + + + +
    file
    +
    file-archive-o
    +
    file-audio-o
    +
    file-code-o
    +
    file-excel-o
    +
    file-image-o
    +
    file-movie-o (alias)
    +
    file-o
    +
    file-pdf-o
    +
    file-photo-o (alias)
    +
    file-picture-o (alias)
    +
    file-powerpoint-o
    +
    file-sound-o (alias)
    +
    file-text
    +
    file-text-o
    +
    file-video-o
    +
    file-word-o
    +
    file-zip-o (alias)
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + Spinner Icons + + #1.08 + + + +
    circle-o-notch
    +
    cog
    +
    gear (alias)
    +
    refresh
    +
    spinner
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + Form Control Icons + + #1.09 + + + +
    check-square
    +
    check-square-o
    +
    circle
    +
    circle-o
    +
    dot-circle-o
    +
    minus-square
    +
    minus-square-o
    +
    plus-square
    +
    plus-square-o
    +
    square
    +
    square-o
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + Payment Icons + + #1.10 + + + +
    cc-amex
    +
    cc-diners-club
    +
    cc-discover
    +
    cc-jcb
    +
    cc-mastercard
    +
    cc-paypal
    +
    cc-stripe
    +
    cc-visa
    +
    credit-card
    +
    credit-card-alt
    +
    google-wallet
    +
    paypal
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + Chart Icons + + #1.11 + + + +
    area-chart
    +
    bar-chart
    +
    bar-chart-o (alias)
    +
    line-chart
    +
    pie-chart
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + Currency Icons + + #1.12 + + + +
    bitcoin (alias)
    +
    btc
    +
    cny (alias)
    +
    dollar (alias)
    +
    eur
    +
    euro (alias)
    +
    gbp
    +
    gg
    +
    gg-circle
    +
    ils
    +
    inr
    +
    jpy
    +
    krw
    +
    money
    +
    rmb (alias)
    +
    rouble (alias)
    +
    rub
    +
    ruble (alias)
    +
    rupee (alias)
    +
    shekel (alias)
    +
    sheqel (alias)
    +
    try
    +
    turkish-lira (alias)
    +
    usd
    +
    won (alias)
    +
    yen (alias)
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + Text Editor Icons + + #1.13 + + + +
    align-center
    +
    align-justify
    +
    align-left
    +
    align-right
    +
    bold
    +
    chain (alias)
    +
    chain-broken
    +
    clipboard
    +
    columns
    +
    copy (alias)
    +
    cut (alias)
    +
    dedent (alias)
    +
    eraser
    +
    file
    +
    file-o
    +
    file-text
    +
    file-text-o
    +
    files-o
    +
    floppy-o
    +
    font
    +
    header
    +
    indent
    +
    italic
    +
    link
    +
    list
    +
    list-alt
    +
    list-ol
    +
    list-ul
    +
    outdent
    +
    paperclip
    +
    paragraph
    +
    paste (alias)
    +
    repeat
    +
    rotate-left (alias)
    +
    rotate-right (alias)
    +
    save (alias)
    +
    scissors
    +
    strikethrough
    +
    subscript
    +
    superscript
    +
    table
    +
    text-height
    +
    text-width
    +
    th
    +
    th-large
    +
    th-list
    +
    underline
    +
    undo
    +
    unlink (alias)
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + Directional Icons + + #1.14 + + + +
    angle-double-down
    +
    angle-double-left
    +
    angle-double-right
    +
    angle-double-up
    +
    angle-down
    +
    angle-left
    +
    angle-right
    +
    angle-up
    +
    arrow-circle-down
    +
    arrow-circle-left
    +
    arrow-circle-o-down
    +
    arrow-circle-o-left
    +
    arrow-circle-o-right
    +
    arrow-circle-o-up
    +
    arrow-circle-right
    +
    arrow-circle-up
    +
    arrow-down
    +
    arrow-left
    +
    arrow-right
    +
    arrow-up
    +
    arrows
    +
    arrows-alt
    +
    arrows-h
    +
    arrows-v
    +
    caret-down
    +
    caret-left
    +
    caret-right
    +
    caret-square-o-down
    +
    caret-square-o-left
    +
    caret-square-o-right
    +
    caret-square-o-up
    +
    caret-up
    +
    chevron-circle-down
    +
    chevron-circle-left
    +
    chevron-circle-right
    +
    chevron-circle-up
    +
    chevron-down
    +
    chevron-left
    +
    chevron-right
    +
    chevron-up
    +
    exchange
    +
    hand-o-down
    +
    hand-o-left
    +
    hand-o-right
    +
    hand-o-up
    +
    long-arrow-down
    +
    long-arrow-left
    +
    long-arrow-right
    +
    long-arrow-up
    +
    toggle-down (alias)
    +
    toggle-left (alias)
    +
    toggle-right (alias)
    +
    toggle-up (alias)
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + Video Player Icons + + #1.15 + + + +
    arrows-alt
    +
    backward
    +
    compress
    +
    eject
    +
    expand
    +
    fast-backward
    +
    fast-forward
    +
    forward
    +
    pause
    +
    pause-circle
    +
    pause-circle-o
    +
    play
    +
    play-circle
    +
    play-circle-o
    +
    random
    +
    step-backward
    +
    step-forward
    +
    stop
    +
    stop-circle
    +
    stop-circle-o
    +
    youtube-play
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + Brand Icons + + #1.16 + + + +
    500px
    +
    adn
    +
    amazon
    +
    android
    +
    angellist
    +
    apple
    +
    behance
    +
    behance-square
    +
    bitbucket
    +
    bitbucket-square
    +
    bitcoin (alias)
    +
    black-tie
    +
    bluetooth
    +
    bluetooth-b
    +
    btc
    +
    buysellads
    +
    cc-amex
    +
    cc-diners-club
    +
    cc-discover
    +
    cc-jcb
    +
    cc-mastercard
    +
    cc-paypal
    +
    cc-stripe
    +
    cc-visa
    +
    chrome
    +
    codepen
    +
    codiepie
    +
    connectdevelop
    +
    contao
    +
    css3
    +
    dashcube
    +
    delicious
    +
    deviantart
    +
    digg
    +
    dribbble
    +
    dropbox
    +
    drupal
    +
    edge
    +
    empire
    +
    envira
    +
    expeditedssl
    +
    fa (alias)
    +
    facebook
    +
    facebook-f (alias)
    +
    facebook-official
    +
    facebook-square
    +
    firefox
    +
    first-order
    +
    flickr
    +
    font-awesome
    +
    fonticons
    +
    fort-awesome
    +
    forumbee
    +
    foursquare
    +
    ge (alias)
    +
    get-pocket
    +
    gg
    +
    gg-circle
    +
    git
    +
    git-square
    +
    github
    +
    github-alt
    +
    github-square
    +
    gitlab
    +
    gittip (alias)
    +
    glide
    +
    glide-g
    +
    google
    +
    google-plus
    +
    google-plus-circle (alias)
    +
    google-plus-official
    +
    google-plus-square
    +
    google-wallet
    +
    gratipay
    +
    hacker-news
    +
    houzz
    +
    html5
    +
    instagram
    +
    internet-explorer
    +
    ioxhost
    +
    joomla
    +
    jsfiddle
    +
    lastfm
    +
    lastfm-square
    +
    leanpub
    +
    linkedin
    +
    linkedin-square
    +
    linux
    +
    maxcdn
    +
    meanpath
    +
    medium
    +
    mixcloud
    +
    modx
    +
    odnoklassniki
    +
    odnoklassniki-square
    +
    opencart
    +
    openid
    +
    opera
    +
    optin-monster
    +
    pagelines
    +
    paypal
    +
    pied-piper
    +
    pied-piper-alt
    +
    pied-piper-pp
    +
    pinterest
    +
    pinterest-p
    +
    pinterest-square
    +
    product-hunt
    +
    qq
    +
    ra (alias)
    +
    rebel
    +
    reddit
    +
    reddit-alien
    +
    reddit-square
    +
    renren
    +
    resistance (alias)
    +
    safari
    +
    scribd
    +
    sellsy
    +
    share-alt
    +
    share-alt-square
    +
    shirtsinbulk
    +
    simplybuilt
    +
    skyatlas
    +
    skype
    +
    slack
    +
    slideshare
    +
    snapchat
    +
    snapchat-ghost
    +
    snapchat-square
    +
    soundcloud
    +
    spotify
    +
    stack-exchange
    +
    stack-overflow
    +
    steam
    +
    steam-square
    +
    stumbleupon
    +
    stumbleupon-circle
    +
    tencent-weibo
    +
    themeisle
    +
    trello
    +
    tripadvisor
    +
    tumblr
    +
    tumblr-square
    +
    twitch
    +
    twitter
    +
    twitter-square
    +
    usb
    +
    viacoin
    +
    viadeo
    +
    viadeo-square
    +
    vimeo
    +
    vimeo-square
    +
    vine
    +
    vk
    +
    wechat (alias)
    +
    weibo
    +
    weixin
    +
    whatsapp
    +
    wikipedia-w
    +
    windows
    +
    wordpress
    +
    wpbeginner
    +
    wpforms
    +
    xing
    +
    xing-square
    +
    y-combinator
    +
    y-combinator-square (alias)
    +
    yahoo
    +
    yc (alias)
    +
    yc-square (alias)
    +
    yelp
    +
    yoast
    +
    youtube
    +
    youtube-play
    +
    youtube-square
    +     +     +     + { /* END Card */} + { /* START Card */} + + + + Medical Icons + + #1.17 + + + +
    Example of ambulance
    +
    h-square
    +
    heart
    +
    heart-o
    +
    heartbeat
    +
    hospital-o
    +
    medkit
    +
    plus-square
    +
    stethoscope
    +
    user-md
    +
    wheelchair
    +
    wheelchair-alt
    +     +     +     + { /* END Card */} +     +     +); + +export default Icons; \ No newline at end of file diff --git a/app/routes/Icons/index.js b/app/routes/Icons/index.js new file mode 100755 index 0000000..6353c95 --- /dev/null +++ b/app/routes/Icons/index.js @@ -0,0 +1,3 @@ +import Icons from './Icons'; + +export default Icons; \ No newline at end of file diff --git a/app/routes/Interface/Accordions/Accordions.js b/app/routes/Interface/Accordions/Accordions.js new file mode 100755 index 0000000..090be69 --- /dev/null +++ b/app/routes/Interface/Accordions/Accordions.js @@ -0,0 +1,457 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Accordion, + Container, + Row, + Col, + CardText, +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const Accordions = () => ( + + + + { /* START Header 1 */} + + + + + + { /* END Header 1 */} + { /* START Section 1 */} + + { /* START Col6 1 */} + + { /* START Example */} +
    +
    + Accordion: Card with Links + + #1.01 + +
    +

    + Below is an example of default accordion based on Card, h6, + and UncontrolledCollapse. +

    + + + Accordion Card #1 + + + + { faker.lorem.paragraph() } + + + + + + + Accordion Card #1 + + + + { faker.lorem.paragraph() } + + + + + + + Accordion Card #1 + + + + { faker.lorem.paragraph() } + + + +
    + { /* END Example */} + { /* START Example */} +
    +
    + Accordion: Normal Text + + #1.04 + +
    +

    + Below is an example of default accordion based on Card, h6, + and UncontrolledCollapse. +

    + + + Accordion Card #1 + + + + { faker.lorem.paragraph() } + + + + + + + Accordion Card #1 + + + + { faker.lorem.paragraph() } + + + + + + + Accordion Card #1 + + + + { faker.lorem.paragraph() } + + + +
    + { /* END Example */} + + { /* END Col6 1 */} + { /* START Col6 2 */} + + { /* START Example */} +
    +
    + Accordion: Card Left Icon + + #1.02 + +
    +

    + Below is an example of default accordion based on Card, h6, <i className="fa fa-fw fa-plus" /> + and UncontrolledCollapse. +

    + + + + Accordion Card #1 + + + + { faker.lorem.paragraph() } + + + + + + + + Accordion Card #2 + + + + { faker.lorem.paragraph() } + + + + + + + + Accordion Card #3 + + + + { faker.lorem.paragraph() } + + + +
    + { /* END Example */} + { /* START Example */} +
    +
    + Accordion: Card Right Icon + + #1.03 + +
    +

    + Below is an example of default accordion based on Card, h6, + and UncontrolledCollapse. +

    + + + + Accordion Card #1 + + + + + { faker.lorem.paragraph() } + + + + + + + Accordion Card #1 + + + + + { faker.lorem.paragraph() } + + + + + + + Accordion Card #1 + + + + + { faker.lorem.paragraph() } + + + +
    + { /* END Example */} + { /* START Example */} +
    +
    + Accordion: Card Right & Left Icon + + #1.05 + +
    +

    + Below is an example of default accordion based on Card, h6, + and UncontrolledCollapse. +

    + + + + + Accordion Card #1 + + + + + + { faker.lorem.paragraph() } + + + + + + + + + Accordion Card #2 + + + + + + { faker.lorem.paragraph() } + + + + + + + + + Accordion Card #3 + + + + + + { faker.lorem.paragraph() } + + + +
    + { /* END Example */} + + { /* END Col6 2 */} +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + + + { /* END Header 2 */} + { /* START Section 2 */} + + + { /* START Example */} +
    +
    + Accordion: Card Colors Borders + + #2.01 + +
    +

    + Below is an example of default accordion based on Card, h6, + and UncontrolledCollapse. +

    + + + + Primary Card #1 + + + + { faker.lorem.paragraph() } + + + + + + + Success Card #2 + + + + { faker.lorem.paragraph() } + + + + + + + Danger Card #3 + + + + { faker.lorem.paragraph() } + + + +
    + { /* END Example */} + { /* START Example */} +
    +
    + Accordion: Card Colors Backgrounds + + #2.02 + +
    +

    + Below is an example of default accordion based on Card, h6, + and UncontrolledCollapse. +

    + + + Primary Card #1 + + + + { faker.lorem.paragraph() } + + + + + + + Success Card #2 + + + + { faker.lorem.paragraph() } + + + + + + + Danger Card #3 + + + + { faker.lorem.paragraph() } + + + +
    + { /* END Example */} + + + { /* START Example */} +
    +
    + Accordion: Card White Background + + #2.03 + +
    +

    + Below is an example of default accordion based on Card, h6, + and UncontrolledCollapse. +

    + + + Accordion Card #1 + + + + { faker.lorem.paragraph() } + + + + + + + Accordion Card #1 + + + + { faker.lorem.paragraph() } + + + + + + + Accordion Card #1 + + + + { faker.lorem.paragraph() } + + + +
    + { /* END Example */} + +     + { /* END Section 2 */} +     +     +); + +export default Accordions; diff --git a/app/routes/Interface/Accordions/index.js b/app/routes/Interface/Accordions/index.js new file mode 100755 index 0000000..bef1cec --- /dev/null +++ b/app/routes/Interface/Accordions/index.js @@ -0,0 +1,3 @@ +import Accordions from './Accordions'; + +export default Accordions; \ No newline at end of file diff --git a/app/routes/Interface/Alerts/Alerts.js b/app/routes/Interface/Alerts/Alerts.js new file mode 100755 index 0000000..e96b6e7 --- /dev/null +++ b/app/routes/Interface/Alerts/Alerts.js @@ -0,0 +1,758 @@ +import React from 'react'; + +import { + Container, + Row, + Alert, + Col, + Button, + Media, +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const Alerts = () => ( + + + + { /* START Header 1 */} + + + + + + { /* END Header 1 */} + { /* START Section 1 */} + + { /* START Col6 1 */} + + { /* START Example */} +
    +
    + Alert: Primary + + #1.01 + +
    + +
    + Morning! +
    + Were glad to see you again and wish you a nice day. +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Alert: Danger + + #1.02 + +
    + +
    + Oh Snap! +
    + Change a few things up and try submitting again. +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Alert: Info + + #1.03 + +
    + +
    + Heads Up! +
    + This alert needs your attention, but its not super important. +     +
    + { /* END Example */} + + { /* END Col6 1 */} + { /* START Col6 2 */} + + { /* START Example */} +
    +
    + Alert: Warning + + #1.04 + +
    + +
    + Warning! +
    + Better check yourself, youre not looking too good. +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Alert: Success + + #1.05 + +
    + +
    + Well Done! +
    + You successfully read this important alert message. +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Alert: Dark + + #1.06 + +
    + +
    + Attention +
    + This alert needs your attention, but its not important. +     +
    + { /* END Example */} + + { /* END Col6 2 */} +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + + + { /* END Header 2 */} + { /* START Section 2 */} + + { /* START Col6 1 */} + + { /* START Example */} +
    +
    + Dismissing: Primary + + #2.01 + +
    + +
    + Morning! +
    + Were glad to see you again and wish you a nice day. +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Dismissing: Danger + + #2.02 + +
    + +
    + Oh Snap! +
    + Change a few things up and try submitting again. +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Dismissing: Info + + #2.03 + +
    + +
    + Heads Up! +
    + This alert needs your attention, but its not super important. +     +
    + { /* END Example */} + + { /* END Col6 1 */} + { /* START Col6 2 */} + + { /* START Example */} +
    +
    + Dismissing: Warning + + #2.04 + +
    + +
    + Warning! +
    + Better check yourself, youre not looking too good. +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Dismissing: Success + + #2.05 + +
    + +
    + Well Done! +
    + You successfully read this important alert message. +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Dismissing: Dark + + #2.06 + +
    + +
    + Attention +
    + This alert needs your attention, but its not important. +     +
    + { /* END Example */} + + { /* END Col6 2 */} +     + { /* END Section 2 */} + + { /* START Header 3 */} + + + + + + { /* END Header 3 */} + { /* START Section 3 */} + + { /* START Col6 1 */} + + { /* START Example */} +
    +
    + Icon Small: Primary + + #3.01 + +
    + + + + Welcome! We're glad to see you again and wish you a nice day. + + +
    + { /* END Example */} + { /* START Example */} +
    +
    + Icon Small: Danger + + #3.02 + +
    + + + + Danger! Change a few things up and try submitting again. + + +
    + { /* END Example */} + { /* START Example */} +
    +
    + Icon Small: Info + + #3.03 + +
    + + + + Information! This alert needs your attention, but it's not important. + + +
    + { /* END Example */} + + { /* END Col6 1 */} + { /* START Col6 2 */} + + { /* START Example */} +
    +
    + Icon Small: Warning + + #3.04 + +
    + + + + Warning! Better check yourself, you're not looking too good. + + +
    + { /* END Example */} + { /* START Example */} +
    +
    + Icon Small: Success + + #3.05 + +
    + + + + Success! You successfully read this important alert message. + + +
    + { /* END Example */} + { /* START Example */} +
    +
    + Icon Small: Dark + + #3.06 + +
    + + + + Attention! This alert needs your attention, but it's not important. + + +
    + { /* END Example */} + + { /* END Col6 2 */} +     + { /* END Section 3 */} + + { /* START Header 4 */} + + + + + + { /* END Header 4 */} + { /* START Section 4 */} + + { /* START Col6 1 */} + + { /* START Example */} +
    +
    + Dismissing: Primary + + #2.01 + +
    + + + + + + +
    + Welcome! +
    + We're glad to see you again and wish you a nice day. +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Icon Big: Danger + + #2.02 + +
    + + + + + + +
    + Danger! +
    + Change a few things up and try submitting. +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Icon Big: Info + + #2.03 + +
    + + + + + + +
    + Information! +
    + This alert needs your attention, but it's not important. +     +     +     +
    + { /* END Example */} + + { /* END Col6 1 */} + { /* START Col6 2 */} + + { /* START Example */} +
    +
    + Icon Big: Warning + + #2.04 + +
    + + + + + + +
    + Warning! +
    + Better check yourself, you're not looking too good. +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Icon Big: Success + + #2.05 + +
    + + + + + + +
    + Success! +
    + You successfully read this important alert message. +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Icon Big: Dark + + #2.06 + +
    + + + + + + +
    + Attention! +
    + This alert needs your attention, but it's not important. +     +     +     +
    + { /* END Example */} + + { /* END Col6 2 */} +     + { /* END Section 4 */} + + { /* START Header 5 */} + + + + + + { /* END Header 5 */} + { /* START Section 4 */} + + { /* START Col6 1 */} + + { /* START Example */} +
    +
    + Dismissing: Primary + + #5.01 + +
    + + + + + + + + + +
    + Welcome! +
    + We're glad to see you again and wish you a nice day. +
    + {' '} + {' '} +
    +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Icon Big: Danger + + #5.02 + +
    + + + + + + + + + +
    + Danger! +
    + Change a few things up and try submitting. +
    + {' '} + {' '} +
    +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Icon Big: Info + + #5.03 + +
    + + + + + + + + + +
    + Information! +
    + This alert needs your attention, but it's not important. +
    + {' '} + {' '} +
    +     +     +     +
    + { /* END Example */} + + { /* END Col6 1 */} + { /* START Col6 2 */} + + { /* START Example */} +
    +
    + Icon Big: Warning + + #5.04 + +
    + + + + + + + + + +
    + Warning! +
    + Better check yourself, you're not looking too good. +
    + {' '} + {' '} +
    +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Icon Big: Success + + #5.05 + +
    + + + + + + + + + +
    + Success! +
    + You successfully read this important alert message. +
    + {' '} + {' '} +
    +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + Icon Big: Dark + + #5.06 + +
    + + + + + + + + + +
    + Attention! +
    + This alert needs your attention, but it's not important. +
    + {' '} + {' '} +
    +     +     +     +
    + { /* END Example */} + + { /* END Col6 2 */} +     + { /* END Section 4 */} +     +     +); + +export default Alerts; \ No newline at end of file diff --git a/app/routes/Interface/Alerts/index.js b/app/routes/Interface/Alerts/index.js new file mode 100755 index 0000000..65df961 --- /dev/null +++ b/app/routes/Interface/Alerts/index.js @@ -0,0 +1,3 @@ +import Alerts from './Alerts'; + +export default Alerts; \ No newline at end of file diff --git a/app/routes/Interface/Avatars/Avatars.js b/app/routes/Interface/Avatars/Avatars.js new file mode 100755 index 0000000..38b5413 --- /dev/null +++ b/app/routes/Interface/Avatars/Avatars.js @@ -0,0 +1,1662 @@ +import React from 'react'; + +import { + Avatar, + AvatarAddOn, + Row, + Container, + Col, + Card, + CardBody, + CardTitle, +} from './../../../components'; +import { randomAvatar } from './../../../utilities'; +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const Home = () => ( + + + + { /* START Header 1 */} + + + + There are versions available default, + that is avatar: large: avatar avatar-lg & small: + avatar avatar-sm. + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + + + + + Sizes: Large + + #1.01 + + +

    + Large size avatar example +

    + + + +     +     + + + + + + Sizes: Default + + #1.02 + + +

    + Large size avatar example +

    + + + +     +     + + + + + + Sizes: Small + + #1.03 + + +

    + Large size avatar example +

    + + + +     +     + +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + There are versions available default, + that is avatar: large: avatar avatar-lg & small: + avatar avatar-sm. + + )} + className="mt-5" + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + + + + + Avatars: Photos + + #2.01 + + +

    + Large size avatar example +

    + + + +     +     + + + + + + Avatars: Text + + #2.02 + + +

    + Large size avatar example +

    + + VN + + + FS + + + +4 + +     +     + + + + + + Avatars: Icons + + #2.03 + + +

    + Large size avatar example +

    + + + + + + + + + +     +     + +     + { /* END Section 2 */} + + { /* START Header 3 */} + + + + There are versions available default, + that is avatar: large: avatar avatar-lg & small: + avatar avatar-sm. + + )} + className="mt-5" + /> + + + { /* END Header 3 */} + { /* START Section 3 */} + + + + + + Avatar: Status Large + + #3.01 + + +

    + Large size avatar example +

    + , + + ]} + /> + , + + ]} + /> + , + + ]} + /> + , + + ]} + /> +     +     + + + + + + Avatar: Status Default + + #3.02 + + +

    + Large size avatar example +

    + , + + ]} + /> + , + + ]} + /> + , + + ]} + /> + , + + ]} + /> +     +     + + + + + + Avatar: Status Small + + #3.03 + + +

    + Large size avatar example +

    + , + + ]} + /> + , + + ]} + /> + , + + ]} + /> + , + + ]} + /> +     +     + +     + { /* END Section 3 */} + + { /* START Header 4 */} + + + + There are versions available default, + that is avatar: large: avatar avatar-lg & small: + avatar avatar-sm. + + )} + className="mt-5" + /> + + + { /* END Header 4 */} + { /* START Section 4 */} + + + + + + Avatar: Badges Pills Small + + #4.01 + + +

    + Avatars with badges +

    + + 4 + + ]} + /> + + 12 + + ]} + /> + + 4 + + ]} + /> + + 7 + + ]} + /> +     +     + + + + + + Avatar: Badges Pills Default + + #4.02 + + +

    + Avatars with badges +

    + + 4 + + ]} + /> + + 12 + + ]} + /> + + 4 + + ]} + /> + + 7 + + ]} + /> +     +     + + + + + + Avatar: Badges Pills Small + + #4.03 + + +

    + Avatars with badges +

    + + 4 + + ]} + /> + + 12 + + ]} + /> + + 4 + + ]} + /> + + 7 + + ]} + /> +     +     + +     + { /* END Section 4 */} + + { /* START Header 5 */} + + + + There are versions available default, + that is avatar: large: avatar avatar-lg & small: + avatar avatar-sm. + + )} + className="mt-5" + /> + + + { /* END Header 5 */} + { /* START Section 5 */} + + + + + + Avatar: Badges Small + + #5.01 + + +

    + Avatars with badges +

    + + 4 + + ]} + /> + + 12 + + ]} + /> + + 4 + + ]} + /> + + 7 + + ]} + /> +     +     + + + + + + Avatar: Badges Default + + #5.02 + + +

    + Avatars with badges +

    + + 4 + + ]} + /> + + 12 + + ]} + /> + + 4 + + ]} + /> + + 7 + + ]} + /> +     +     + + + + + + Avatar: Badges Small + + #5.03 + + +

    + Avatars with badges +

    + + 4 + + ]} + /> + + 12 + + ]} + /> + + 4 + + ]} + /> + + 7 + + ]} + /> +     +     + +     + { /* END Section 5 */} + + { /* START Header 6 */} + + + + There are versions available default, + that is avatar: large: avatar avatar-lg & small: + avatar avatar-sm. + + )} + className="mt-5" + /> + + + { /* END Header 6 */} + { /* START Section 6 */} + + + + + + Avatar: Custom Icons Large + + #6.01 + + +

    + Avatars with badges +

    + , + , + + ]} + /> + , + , + + ]} + /> + , + , + + ]} + /> + , + , + + ]} + /> + , + , + + ]} + /> +     +     + + + + + + Avatar: Custom Icons Default + + #6.02 + + +

    + Avatars with badges +

    + , + , + + ]} + /> + , + , + + ]} + /> + , + , + + ]} + /> + , + , + + ]} + /> + , + , + + ]} + /> +     +     + + + + + + Avatar: Custom Icons Small + + #6.03 + + +

    + Avatars with badges +

    + , + , + + ]} + /> + , + , + + ]} + /> + , + , + + ]} + /> + , + , + + ]} + /> + , + , + + ]} + /> +     +     + +     + { /* END Section 6 */} + + { /* START Header 7 */} + + + + There are versions available default, + that is avatar: large: avatar avatar-lg & small: + avatar avatar-sm. + + )} + className="mt-5" + /> + + + { /* END Header 7 */} + { /* START Section 7 */} + + + + + + Avatars: Colors Default + + #7.01 + + +

    + Large size avatar example +

    + + PR + + + IN + + + SU + + + WA + + + DA + + + SE + + + DA + + + LI + + + WH + + +     +     + + + + + + Avatars: Gray Colors + + #7.02 + + +

    + Large size avatar example +

    + + 100 + + + 200 + + + 300 + + + 400 + + + 500 + + + 600 + + + 700 + + + 800 + + + 900 + +     +     + + + + + + Avatars: Other Colors + + #7.03 + + +

    + Large size avatar example +

    + + IN + + + PU + + + PI + + + TE + + + CY + +     +     + + + + + + Avatars: Colors Social + + #7.04 + + +

    + Large size avatar example +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +     +     + +     + { /* END Section 7 */} + + +); + +export default Home; diff --git a/app/routes/Interface/Avatars/index.js b/app/routes/Interface/Avatars/index.js new file mode 100755 index 0000000..da065bd --- /dev/null +++ b/app/routes/Interface/Avatars/index.js @@ -0,0 +1,3 @@ +import Avatars from './Avatars'; + +export default Avatars; \ No newline at end of file diff --git a/app/routes/Interface/BadgesLabels/BadgesLabels.js b/app/routes/Interface/BadgesLabels/BadgesLabels.js new file mode 100755 index 0000000..166f018 --- /dev/null +++ b/app/routes/Interface/BadgesLabels/BadgesLabels.js @@ -0,0 +1,600 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Card, + CardTitle, + CardBody, + Badge, +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const BadgesLabels = () => ( + + + + { /* START Header 1 */} + + + + Basic button layout options. + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + + + + + Badge: Primary + + #1.01 + + +

    + Default label styling. To use, + add .label-default to the base .label class. +

    + Primary +     +     + + + + Badge: Secondary + + #1.02 + + +

    + Default label styling. To use, + add .label-secondary to the base .label class. +

    + Secondary +     +     + + + + Badge: Success + + #1.03 + + +

    + Default label styling. To use, + add .label-success to the base .label class. +

    + Success +     +     + + + + + + Badge: Danger + + #1.04 + + +

    + Default label styling. To use, + add .label-danger to the base .label class. +

    + Danger +     +     + + + + Badge: Warning + + #1.05 + + +

    + Default label styling. To use, + add .label-warning to the base .label class. +

    + Warning +     +     + + + + Badge: Info + + #1.06 + + +

    + Default label styling. To use, + add .label-info to the base .label class. +

    + Info +     +     + + + + + + Badge: Light + + #1.07 + + +

    + Default label styling. To use, + add .label-light to the base .label class. +

    + Light +     +     + + + + Badge: Dark + + #1.08 + + +

    + Default label styling. To use, + add .label-dark to the base .label class. +

    + Dark +     +     + +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + Basic button layout options. + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + + + + + Badge: Pill + + #2.01 + + +

    + Default label styling. To use, + add .label-default to the base .label class. +

    + Badge Pill +     +     + + + + Badge: Without Rounded + + #2.02 + + +

    + Default label styling. To use, + add .label-secondary to the base .label class. +

    + Without Rounds +     +     + + + + Badge: Dropdown + + #2.03 + + +

    + Default label styling. To use, + add .label-success to the base .label class. +

    + Badge Dropdown +     +     + + + + + + Badge: Only Icon + + #2.04 + + +

    + Default label styling. To use, + add .label-danger to the base .label class. +

    + + + +     +     + + + + Badge: Only Icon Link + + #2.05 + + +

    + Default label styling. To use, + add .label-warning to the base .label class. +

    + + + +     +     + + + + Badge: Only Icon Rounded + + #2.06 + + +

    + Default label styling. To use, + add .label-info to the base .label class. +

    + + + +     +     + + + + + + Badge: Only Icon Rounded Link + + #2.07 + + +

    + Default label styling. To use, + add .label-light to the base .label class. +

    + + + +     +     + +     + { /* END Section 2 */} + + { /* START Header 3 */} + + + + Basic button layout options. + + )} + /> + + + { /* END Header 3 */} + { /* START Section 3 */} + + + + + + Badge Border: Primary + + #3.01 + + +

    + Default label styling. To use, + add .label-default to the base .label class. +

    + Primary +     +     + + + + Badge Border: Secondary + + #3.02 + + +

    + Default label styling. To use, + add .label-secondary to the base .label class. +

    + Secondary +     +     + + + + Badge Border: Success + + #3.03 + + +

    + Default label styling. To use, + add .label-success to the base .label class. +

    + Success +     +     + + + + + + Badge Border: Danger + + #3.04 + + +

    + Default label styling. To use, + add .label-danger to the base .label class. +

    + Danger +     +     + + + + Badge Border: Warning + + #3.05 + + +

    + Default label styling. To use, + add .label-warning to the base .label class. +

    + Warning +     +     + + + + Badge Border: Info + + #3.06 + + +

    + Default label styling. To use, + add .label-info to the base .label class. +

    + Info +     +     + + + + + + Badge Border: Light + + #3.07 + + +

    + Default label styling. To use, + add .label-light to the base .label class. +

    + Light +     +     + + + + Badge Border: Dark + + #3.08 + + +

    + Default label styling. To use, + add .label-dark to the base .label class. +

    + Dark +     +     + +     + { /* END Section 3 */} + + { /* START Header 2 */} + + + + Basic button layout options. + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + + + + + Badge Border: Pill + + #4.01 + + +

    + Default label styling. To use, + add .label-default to the base .label class. +

    + Badge Pill +     +     + + + + Badge Border: Without Rounded + + #4.02 + + +

    + Default label styling. To use, + add .label-secondary to the base .label class. +

    + Without Rounds +     +     + + + + Badge Border: Dropdown + + #4.03 + + +

    + Default label styling. To use, + add .label-success to the base .label class. +

    + Badge Dropdown +     +     + + + + + + Badge Border: Only Icon + + #4.04 + + +

    + Default label styling. To use, + add .label-danger to the base .label class. +

    + + + +     +     + + + + Badge Border: Only Icon Link + + #4.05 + + +

    + Default label styling. To use, + add .label-warning to the base .label class. +

    + + + +     +     + + + + Badge Border: Only Icon Rounded + + #4.06 + + +

    + Default label styling. To use, + add .label-info to the base .label class. +

    + + + +     +     + + + + + + Badge Border: Only Icon Rounded Link + + #4.07 + + +

    + Default label styling. To use, + add .label-light to the base .label class. +

    + + + +     +     + +     + { /* END Section 2 */} + + + + +); + +export default BadgesLabels; \ No newline at end of file diff --git a/app/routes/Interface/BadgesLabels/index.js b/app/routes/Interface/BadgesLabels/index.js new file mode 100755 index 0000000..6d9bef4 --- /dev/null +++ b/app/routes/Interface/BadgesLabels/index.js @@ -0,0 +1,3 @@ +import BadgesLabels from './BadgesLabels'; + +export default BadgesLabels; \ No newline at end of file diff --git a/app/routes/Interface/Breadcrumbs/Breadcrumbs.js b/app/routes/Interface/Breadcrumbs/Breadcrumbs.js new file mode 100755 index 0000000..fe44c7e --- /dev/null +++ b/app/routes/Interface/Breadcrumbs/Breadcrumbs.js @@ -0,0 +1,119 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Card, + CardBody, + Breadcrumb, + BreadcrumbItem, + CardTitle, +} from './../../../components' +import { HeaderMain } from "../../components/HeaderMain"; +import { + HeaderDemo +} from "../../components/HeaderDemo"; + +export const Breadcrumbs = () => ( + + + { /* START Header 1 */} + + + + Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + { /* START Col6 1 */} + + { /* START Card Breadcrumb */} + + + + Breadcrumb: Default + + #1.01 + + + + + Home + + + + + { /* START Card Breadcrumb */} + + { /* END Col6 1 */} + { /* START Col6 1 */} + + { /* START Card Breadcrumb */} + + + + Breadcrumb: Default + + #1.02 + + + + + Home + + + Library + + + + + { /* START Card Breadcrumb */} + + { /* END Col6 1 */} + { /* START Col6 1 */} + + { /* START Card Breadcrumb */} + + + + Breadcrumb: Default + + #1.03 + + + + + Home + + + Library + + + Data + + + + + { /* START Card Breadcrumb */} + + { /* END Col6 1 */} + + { /* START Section 1 */} + + +); + +export default Breadcrumbs; \ No newline at end of file diff --git a/app/routes/Interface/Breadcrumbs/index.js b/app/routes/Interface/Breadcrumbs/index.js new file mode 100755 index 0000000..1690c4e --- /dev/null +++ b/app/routes/Interface/Breadcrumbs/index.js @@ -0,0 +1,3 @@ +import Breadcrumbs from './Breadcrumbs'; + +export default Breadcrumbs; diff --git a/app/routes/Interface/Buttons/Buttons.js b/app/routes/Interface/Buttons/Buttons.js new file mode 100755 index 0000000..9782518 --- /dev/null +++ b/app/routes/Interface/Buttons/Buttons.js @@ -0,0 +1,1986 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Button, + ButtonGroup, + ButtonToolbar, + Card, + CardBody, + CardTitle, + UncontrolledButtonDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + CardText +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const cardText = ({ cardNo }) => ( + + + #{ cardNo } + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nisl elit, porta a sapien eget, fringilla sagittis ex. + +); + +const cardContent = (title = 'Some Card Title') => ( + + + { title } + + { cardText } + +); + +const Buttons = () => ( + + + + { /* START Header 1 */} + + + + + + { /* END Header 1 */} + { /* START Section 1 */} + + + + + + Button: Primary + + #1.01 + + +

    + Default button, example: + + <Button color="primary">Primary</Button>{' '} + +

    + {' '} +     +     + + + + Button: Secondary + + #1.02 + + +

    + Custom color button, example: + + <Button color="secondary">Secondary</Button>{' '} + +

    + {' '} +     +     + + + + Button: Success + + #1.03 + + +

    + Custom color button, example: + + <Button color="success">Success</Button>{' '} + +

    + {' '} +     +     + + + + + + Button: Warning + + #1.04 + + +

    + Custom color button, example: + + <Button color="warning">Warning</Button>{' '} + +

    + {' '} +     +     + + + + Button: Danger + + #1.05 + + +

    + Custom color button, example: + + <Button color="danger">Danger</Button>{' '} + +

    + {' '} +     +     + + + + Button: Info + + #1.06 + + +

    + Custom color button, example: + + <Button color="info">Info</Button>{' '} + +

    + {' '} +     +     + + + + + + Button: Light + + #1.07 + + +

    + Custom color button, example: + + <Button color="light">Light</Button>{' '} + +

    + {' '} +     +     + + + + Button: Dark + + #1.08 + + +

    + Custom color button, example: + + <Button color="dark">Dark</Button>{' '} + +

    + {' '} +     +     + + + + Button: Custom (Purple) + + #1.09 + + +

    + Custom color button, example: + + <Button color="purple">Purple</Button>{' '} + +

    + {' '} +     +     + +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + + + { /* END Header 2 */} + { /* START Section 2 */} + + + + + + Button: Facebook + + #2.01 + + +

    + Default button, example: + + <Button color="facebook">...</Button>{' '} + +

    + {' '} +     +     + + + + Button: Twitter + + #2.02 + + +

    + Default button, example: + + <Button color="twitter">...</Button>{' '} + +

    + {' '} +     +     + + + + Button: LastFM + + #2.03 + + +

    + Default button, example: + + <Button color="lastfm">...</Button>{' '} + +

    + {' '} +     +     + + + + Button: Pinterest + + #2.04 + + +

    + Default button, example: + + <Button color="pinterest">...</Button>{' '} + +

    + {' '} +     +     + + + + Button: Linkedin + + #2.05 + + +

    + Default button, example: + + <Button color="linkedin">...</Button>{' '} + +

    + {' '} +     +     + + + + + + Button: Medium + + #2.06 + + +

    + Default button, example: + + <Button color="medium">...</Button>{' '} + +

    + {' '} +     +     + + + + Button: Android + + #2.07 + + +

    + Default button, example: + + <Button color="android">...</Button>{' '} + +

    + {' '} +     +     + + + + Button: Spotify + + #2.08 + + +

    + Default button, example: + + <Button color="spotify">...</Button>{' '} + +

    + {' '} +     +     + + + + Button: Foursquare + + #2.09 + + +

    + Default button, example: + + <Button color="foursquare">...</Button>{' '} + +

    + {' '} +     +     + + + + Button: Skype + + #2.10 + + +

    + Default button, example: + + <Button color="skype">...</Button>{' '} + +

    + {' '} +     +     + + + + + + Button: Youtube + + #2.11 + + +

    + Default button, example: + + <Button color="youtube">...</Button>{' '} + +

    + {' '} +     +     + + + + Button: Windows + + #2.12 + + +

    + Default button, example: + + <Button color="windows">...</Button>{' '} + +

    + {' '} +     +     + + + + Button: Amazon + + #2.13 + + +

    + Default button, example: + + <Button color="amazon">...</Button>{' '} + +

    + {' '} +     +     + +     + { /* END Section 2 */} + + { /* START Header 3 */} + + + + + + { /* END Header 3 */} + { /* START Section 3 */} + + + + + + Button: Outline + + #3.01 + + +

    + Outline button, example: + + <Button outline color="secondary">...</Button>{' '} + +

    + {' '} +     +     + + + + Button: Outline Left Icon + + #3.02 + + +

    + Available in both directions, example: + <Button outline color="secondary"><i className="fa fa-home mr-2" /></Button>{' '} + +

    + {' '} +     +     + + + + Button: Dropdown + + #3.03 + + +

    + Below example: +

    + { /* START Button Dropdown */} + + + Default Button + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + { /* END Button Dropdown */} +     +     + + + + Button: Default + + #3.04 + + +

    + Button with Contextual Colors +

    + {' '} +     +     + + + + Button: Left Icon + + #3.05 + + +

    + Button with Contextual Colors +

    + {' '} +     +     + + + + Button: Dropdown + + #3.06 + + +

    + Colored button with dropdown +

    + { /* START Button Dropdown */} + + + Dropdown + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + { /* END Button Dropdown */} +     +     + + + + Button: Rounded + + #3.07 + + +

    + Works with all button types +

    + {' '} +     +     + + + + + + Button: Rounded Left Icon + + #3.08 + + +

    + Available in both directions +

    + {' '} +     +     + + + + Button: Outline Rounded Drodpown + + #3.09 + + +

    + Rounded button with dropdown +

    + {' '} +     +     + + + + Button: Link + + #3.10 + + +

    + Button as Link + + <Button outline color="link">...</Button>{' '} + +

    + {' '} +     +     + + + + Button: Link Left Icon + + #3.11 + + +

    + Button as Link with Icon +

    + {' '} +     +     + + + + Button: Link Dropdown + + #3.12 + + +

    + Colored button with dropdown +

    + { /* START Button Dropdown */} + + + Dropdown + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + { /* END Button Dropdown */} +     +     + + + + Button: Outline Icon Alone + + #3.13 + + +

    + Button with a single icon only +

    + {' '} +     +     + + + + Button: Rounded Outline Icon Alone + + #3.14 + + +

    + Button with a single icon only +

    + {' '} +     +     + + + + + + Button: Outline Icon Alone Dropdown + + #3.15 + + +

    + Icon button with dropdown +

    + { /* START Button Dropdown */} + + + + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + { /* END Button Dropdown */} +     +     + + + + Button: Icon Alone + + #3.13 + + +

    + Button with a single icon only +

    + {' '} +     +     + + + + Button: Rounded Icon Alone Dropdown + + #3.17 + + +

    + Works with all button types +

    + {' '} +     +     + + + + Button: Icon Alone Dropdown + + #3.18 + + +

    + Icon button with dropdown +

    + { /* START Button Dropdown */} + + + + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + { /* END Button Dropdown */} +     +     + + + + Button: Icons Only Small & Default + + #3.19 + + +

    + Floating action button example +

    +
    + + + +
    +     +     + + + + Button: Icons Above Text + + #3.20 + + +

    + Float buttons with text and icons +

    +
    + + + +
    +     +     + +     + { /* END Section 3 */} + + { /* START Header 4 */} + + + + + + { /* END Header 4 */} + { /* START Section 4 */} + + + + + + Buttons: Large, Default and Small + + #4.01 + + +

    + Button with a single icon only +

    + {' '} +
    + {' '} +
    + {' '} +     +     + + + + + + Buttons: Rounded + + #4.01 + + +

    + Available styling of .r-30 button +

    + {' '} +
    + {' '} +
    + {' '} +     +     + + +     + { /* END Section 4 */} + + { /* START Header 5 */} + + + + + + { /* END Header 5 */} + { /* START Section 5 */} + + + + + + Button: Default State + + #5.01 + + +

    + Default button, example: +

    + {' '} +     +     + + + + + + Button: Default State + + #5.02 + + +

    + Active button, just add: active to + <Button />. +

    + {' '} +     +     + + + + + + Button: Disabled State + + #5.03 + + +

    + Active button, just add: disabled to + <Button />. +

    + {' '} +     +     + + +     + { /* END Section 5 */} + + { /* START Header 6 */} + + + + + + { /* END Header 6 */} + { /* START Section 6 */} + + + + + + Button: Left Icon + + #6.01 + + +

    + Display icon on the left side +

    + {' '} +     +     + + + + Button: Right Icon + + #6.02 + + +

    + Display icon on the right side +

    + {' '} +     +     + + + + + + Button: Right Icon Dropdown + + #6.03 + + +

    + Additional option for right icon +

    + { /* START Button Dropdown */} + + + Dropdown + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + { /* END Button Dropdown */} +     +     + + + + + + Button: Left Icon Dropdown + + #6.04 + + +

    + Additional option for left icon +

    + { /* START Button Dropdown */} + + + Dropdown + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + { /* END Button Dropdown */} +     +     + + +     + { /* END Section 6 */} + + { /* START Header 7 */} + + + + + + { /* END Header 7 */} + { /* START Section 7 */} + + + + + + Button: Dropup + + #7.01 + + +

    + Basic button dropup example +

    + { /* START Button Dropdown */} + + + Dropup + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + { /* END Button Dropdown */} +     +     + + + + Button: Left Icon Dropdown + + #7.02 + + +

    + Dropdown button with icon +

    + { /* START Button Dropdown */} + + + + Dropdown + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + { /* END Button Dropdown */} +     +     + + + + Button: Group Dropdown + + #7.03 + + +

    + Segmented button dropdown +

    + { /* START Button Group Dropdown */} + + + + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + + { /* END Button Group Dropdown */} +     +     + + + + Button: Rounded Dropup + + #7.03 + + +

    + Dropup attached to .r-30 button +

    + { /* START Button Dropdown */} + + + Dropup + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + { /* END Button Dropdown */} +     +     + + + + + + Button: Rounded Dropdown + + #7.05 + + +

    + Rouned button menu with icon +

    + { /* START Button Dropdown */} + + + Dropdown + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + { /* END Button Dropdown */} +     +     + + + + Button: Rounded Group Dropdown + + #7.06 + + +

    + Rounded button with segments +

    + { /* START Button Group Dropdown */} + + + + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + + { /* END Button Group Dropdown */} +     +     + + + + Button: Icon Alone Dropup + + #7.07 + + +

    + Dropup attached to icon button +

    + { /* START Button Dropdown */} + + + + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + { /* END Button Dropdown */} +     +     + + + + Button: Group Icon Alone Dropup + + #7.08 + + +

    + Segmented button dropdown +

    + { /* START Button Group Dropdown */} + + + + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + + { /* END Button Group Dropdown */} +     +     + + + + + + Button: Group Icon Alone Dropdown + + #7.09 + + +

    + Dropdown in segmented icon button +

    + { /* START Button Group Dropdown */} + + + + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + + { /* END Button Group Dropdown */} +     +     + + + + Button: Dropright + + #7.10 + + +

    + Basic button dropright example +

    + { /* START Button Dropdown */} + + + Dropright + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + { /* END Button Dropdown */} +     +     + + + + Button: Dropleft + + #7.11 + + +

    + Basic button dropright example +

    + { /* START Button Dropdown */} + + + Dropleft + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + { /* END Button Dropdown */} +     +     + + + + Button: Dropdown Menu Right + + #7.12 + + +

    + Basic button dropleft example +

    + { /* START Button Dropdown */} + + + Dropdown Menu Right + + + + Your Options + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + { /* END Button Dropdown */} +     +     + +     + { /* END Section 7 */} + + { /* START Header 8 */} + + + + + + { /* END Header 8 */} + { /* START Section 8 */} + + + + + + Button: Outline + + #8.01 + + +

    + Default Button Group, example: + + <ButtonGroup><Button outline color="secondary">...</Button></ButtonGroup> + +

    + + + + + +     +     + + + + Button: Toolbar + + #8.02 + + +

    + Example: + + <ButtonToolbar><ButtonGroup><Button outline color="secondary">...</Button></ButtonGroup></ButtonToolbar> + +

    + + + + + + + + + + + + + + +     +     + + + + + + Button: Checkboxes + + #8.03 + + +

    + Bootstrap checkbox button group +

    + TO-DO... +     +     + + + + Button: Radios + + #8.04 + + +

    + Bootstrap radio button group +

    + TO-DO... +     +     + + + + Button: Toogle States + + #8.05 + + +

    + Using data-toggle="button" +

    + TO-DO... +     +     + + + + + + Button: Block + + #8.06 + + +

    + Just add block. +

    + {' '} +     +     + + + + Button: Nesting + + #8.07 + + +

    + Below example +

    + TO-DO... +     +     + + + + Button: Checked Single + + #8.08 + + +

    + Below example +

    + TO-DO... +     +     + +     + { /* END Section 8 */} +     +     +); + +export default Buttons; \ No newline at end of file diff --git a/app/routes/Interface/Buttons/index.js b/app/routes/Interface/Buttons/index.js new file mode 100755 index 0000000..6b79607 --- /dev/null +++ b/app/routes/Interface/Buttons/index.js @@ -0,0 +1,3 @@ +import Buttons from './Buttons'; + +export default Buttons; \ No newline at end of file diff --git a/app/routes/Interface/Calendar/Calendar.js b/app/routes/Interface/Calendar/Calendar.js new file mode 100755 index 0000000..4b3d56d --- /dev/null +++ b/app/routes/Interface/Calendar/Calendar.js @@ -0,0 +1,112 @@ +import React from 'react'; +import { Calendar as BigCalendar, momentLocalizer } from 'react-big-calendar'; +import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop' +import moment from 'moment'; + +import { + Container +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import events from './events'; + +const DragAndDropCalendar = withDragAndDrop(BigCalendar) +const localizer = momentLocalizer(moment) + + +export class Calendar extends React.Component { + constructor(props) { + super(props) + this.state = { + events: events, + } + + this.moveEvent = this.moveEvent.bind(this) + this.newEvent = this.newEvent.bind(this) + } + + moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) { + const { events } = this.state + + const idx = events.indexOf(event) + let allDay = event.allDay + + if (!event.allDay && droppedOnAllDaySlot) { + allDay = true + } else if (event.allDay && !droppedOnAllDaySlot) { + allDay = false + } + + const updatedEvent = { ...event, start, end, allDay } + + const nextEvents = [...events] + nextEvents.splice(idx, 1, updatedEvent) + + this.setState({ + events: nextEvents, + }) + } + + resizeEvent = ({ event, start, end }) => { + const { events } = this.state + + const nextEvents = events.map(existingEvent => { + return existingEvent.id == event.id + ? { ...existingEvent, start, end } + : existingEvent + }) + + this.setState({ + events: nextEvents, + }) + } + + newEvent(event) { + const title = window.prompt('New Event name'); + if (!title) { + return; + } + + let idList = this.state.events.map(a => a.id) + let newId = Math.max(...idList) + 1 + let hour = { + id: newId, + title, + allDay: event.slots.length == 1, + start: event.start, + end: event.end, + } + this.setState({ + events: this.state.events.concat([hour]), + }) + } + + render() { + return ( + + +

    + An events calendar component built for React and made for modern browsers (read: IE10+) and uses flexbox over the classic tables-ception approach. + See Demo and Docs +

    + +     + ); + } +} diff --git a/app/routes/Interface/Calendar/events.js b/app/routes/Interface/Calendar/events.js new file mode 100755 index 0000000..6e32ce1 --- /dev/null +++ b/app/routes/Interface/Calendar/events.js @@ -0,0 +1,111 @@ +import moment from 'moment'; + +const currentYear = moment().year(); +const currentMonth = moment().month(); + +export default [ + { + id: 0, + title: 'All Day Event very long title', + allDay: true, + start: new Date(currentYear, currentMonth, 0), + end: new Date(currentYear, currentMonth, 1), + }, + { + id: 1, + title: 'Long Event', + start: new Date(currentYear, currentMonth, 7), + end: new Date(currentYear, currentMonth, 10), + }, + + { + id: 2, + title: 'DTS STARTS', + start: new Date(2016, 2, 13, 0, 0, 0), + end: new Date(2016, 2, 20, 0, 0, 0), + }, + + { + id: 3, + title: 'DTS ENDS', + start: new Date(2016, 10, 6, 0, 0, 0), + end: new Date(2016, 10, 13, 0, 0, 0), + }, + + { + id: 4, + title: 'Some Event', + start: new Date(currentYear, currentMonth, 9, 0, 0, 0), + end: new Date(currentYear, currentMonth, 10, 0, 0, 0), + }, + { + id: 5, + title: 'Conference', + start: new Date(currentYear, currentMonth, 11), + end: new Date(currentYear, currentMonth, 13), + desc: 'Big conference for important people', + }, + { + id: 6, + title: 'Meeting', + start: new Date(currentYear, currentMonth, 12, 10, 30, 0, 0), + end: new Date(currentYear, currentMonth, 12, 12, 30, 0, 0), + desc: 'Pre-meeting meeting, to prepare for the meeting', + }, + { + id: 7, + title: 'Lunch', + start: new Date(currentYear, currentMonth, 12, 12, 0, 0, 0), + end: new Date(currentYear, currentMonth, 12, 13, 0, 0, 0), + desc: 'Power lunch', + }, + { + id: 8, + title: 'Meeting', + start: new Date(currentYear, currentMonth, 12, 14, 0, 0, 0), + end: new Date(currentYear, currentMonth, 12, 15, 0, 0, 0), + }, + { + id: 9, + title: 'Happy Hour', + start: new Date(currentYear, currentMonth, 12, 17, 0, 0, 0), + end: new Date(currentYear, currentMonth, 12, 17, 30, 0, 0), + desc: 'Most important meal of the day', + }, + { + id: 10, + title: 'Dinner', + start: new Date(currentYear, currentMonth, 12, 20, 0, 0, 0), + end: new Date(currentYear, currentMonth, 12, 21, 0, 0, 0), + }, + { + id: 11, + title: 'Birthday Party', + start: new Date(currentYear, currentMonth, 13, 7, 0, 0), + end: new Date(currentYear, currentMonth, 13, 10, 30, 0), + }, + { + id: 12, + title: 'Late Night Event', + start: new Date(currentYear, currentMonth, 17, 19, 30, 0), + end: new Date(currentYear, currentMonth, 18, 2, 0, 0), + }, + { + id: 12.5, + title: 'Late Same Night Event', + start: new Date(currentYear, currentMonth, 17, 19, 30, 0), + end: new Date(currentYear, currentMonth, 17, 23, 30, 0), + }, + { + id: 13, + title: 'Multi-day Event', + start: new Date(currentYear, currentMonth, 20, 19, 30, 0), + end: new Date(currentYear, currentMonth, 22, 2, 0, 0), + }, + { + id: 14, + title: 'Today', + start: new Date(new Date().setHours(new Date().getHours() - 3)), + end: new Date(new Date().setHours(new Date().getHours() + 3)), + }, +]; \ No newline at end of file diff --git a/app/routes/Interface/Calendar/index.js b/app/routes/Interface/Calendar/index.js new file mode 100755 index 0000000..ce88c92 --- /dev/null +++ b/app/routes/Interface/Calendar/index.js @@ -0,0 +1,3 @@ +import { Calendar } from './Calendar'; + +export default Calendar; diff --git a/app/routes/Interface/Colors/Colors.js b/app/routes/Interface/Colors/Colors.js new file mode 100755 index 0000000..e814cdc --- /dev/null +++ b/app/routes/Interface/Colors/Colors.js @@ -0,0 +1,508 @@ +import React from 'react'; + +import { + Container, + Row, + Col +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; + +import { HeaderDemo } from "../../components/HeaderDemo"; +import { CardRgbaColor } from "../../components/Colors/CardRgbaColor"; +import { CardColor } from "../../components/Colors/CardColor"; + +const Colors = () => ( + + + + { /* START Header 1 */} + + + + + + { /* END Header 1 */} + { /* START Section 1 */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* END Section 1 */} + + { /* START Header 2 */} + + + + All colors available in Bootstrap 4, available as Sass variables and a Sass map in our scss/_variables.scss file. + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* END Section 2 */} + + { /* START Header 3 */} + + + + Main Colors with Opacity from 0.1 to 0.9 for example .text-primary-100, cod.bg-primary-200 or .b-primary-300 + + )} + /> + + + { /* END Header 3 */} + { /* START Section 3 */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { /* END Section 3 */} + + { /* START Header 4 */} + + + + All colors available in Bootstrap 4, available as Sass variables and a Sass map in our scss/_variables.scss file. + + )} + /> + + + { /* END Header 4 */} + { /* START Section 4 */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* START Card Color */} + + { /* END Card Color */} + + + { /* END Section 4 */} + + { /* START Header 5 */} + + + + Very helpful colors useful in the design of + elements on bright backgrounds. + + )} + /> + + + { /* END Header 5 */} + { /* START Section 5 */} + + + + + + + + + { /* END Section 5 */} + + +); + +export default Colors; \ No newline at end of file diff --git a/app/routes/Interface/Colors/index.js b/app/routes/Interface/Colors/index.js new file mode 100755 index 0000000..3771a33 --- /dev/null +++ b/app/routes/Interface/Colors/index.js @@ -0,0 +1,3 @@ +import Colors from './Colors'; + +export default Colors; \ No newline at end of file diff --git a/app/routes/Interface/CropImage/CropImage.js b/app/routes/Interface/CropImage/CropImage.js new file mode 100755 index 0000000..183f896 --- /dev/null +++ b/app/routes/Interface/CropImage/CropImage.js @@ -0,0 +1,63 @@ +import React from 'react'; + +import { + Container +} from './../../../components'; +import { + ExampleProvider +} from './components/ExampleProvider'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +import image1 from './images/image-1.jpg' +import image2 from './images/image-2.jpg'; + + +export const CropImage = () => ( + + +
    + + +
    +
    + + You can limit the crop size by providing crop + percentage using minWidth, maxWidth, + minHeight and minHeight props. + + )} + /> + +
    +     +); diff --git a/app/routes/Interface/CropImage/components/ExampleProvider.js b/app/routes/Interface/CropImage/components/ExampleProvider.js new file mode 100755 index 0000000..418da4a --- /dev/null +++ b/app/routes/Interface/CropImage/components/ExampleProvider.js @@ -0,0 +1,147 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import ReactCrop from 'react-image-crop' + +import { + Row, + Col, + Button +} from './../../../../components'; + +const _document = typeof document !== 'undefined' ? document : null; +const _window = typeof window !== 'undefined' ? window : null; + +const initialPosition = { + x: 10, + y: 10, + width: 80, + height: 80, +} + +function getCroppedImg(image, pixelCrop, scale, fileName) { + const canvas = _document.createElement('canvas'); + canvas.width = pixelCrop.width; + canvas.height = pixelCrop.height; + const ctx = canvas.getContext('2d'); + ctx.drawImage( + image, + pixelCrop.x * scale.x, + pixelCrop.y * scale.y, + pixelCrop.width * scale.x, + pixelCrop.height * scale.y, + 0, + 0, + pixelCrop.width, + pixelCrop.height + ); + + return new Promise((resolve) => { + canvas.toBlob(file => { + file.name = fileName; + resolve(file); + }, 'image/jpeg'); + }); + } + +export class ExampleProvider extends React.Component { + static propTypes = { + cropProps: PropTypes.object, + src: PropTypes.node.isRequired, + initialPosition: PropTypes.object + } + + static defaultProps = { + cropProps: { } + } + + state = { + position: _.clone(this.props.initialPosition || initialPosition), + croppedPosition: _.clone(this.props.initialPosition || initialPosition), + croppedBlob: null + } + + cropRef = React.createRef(); + + render() { + const { croppedBlob, position } = this.state; + const { cropProps, src } = this.props; + const imageUrl = croppedBlob ? _window.URL.createObjectURL(croppedBlob) : null; + + return ( + + + { this.setState({ position }) }} + onComplete={ (croppedPosition) => { this.setState({ croppedPosition }) } } + ref={ this.cropRef } + { ...cropProps } + /> + + + { + (!imageUrl) && ( +
    + + +
    + Select the part of the image on the left and click "Crop" +     +
    + ) + } + { + imageUrl && ( + Result Image + ) + } + + + + + +     + ) + } + + _crop = () => { + const { croppedPosition } = this.state; + this.setState({ croppedBlob: null }); + + if (_document) { + const imageElement = _document.createElement('img'); + const holderElement = this.cropRef.current.componentRef; + imageElement.onload = () => { + const holderSize = holderElement.getBoundingClientRect(); + const scale = { + x: imageElement.naturalWidth / (holderSize.right - holderSize.left), + y: imageElement.naturalHeight / (holderSize.bottom - holderSize.top), + }; + getCroppedImg(imageElement, croppedPosition, scale, 'result.jpg') + .then((croppedBlob) => { + this.setState({croppedBlob}); + }); + } + imageElement.src = this.props.src; + } + } + + _reset = () => { + this.setState({ + position: _.clone(this.props.initialPosition || initialPosition), + croppedPosition: _.clone(this.props.initialPosition || initialPosition), + croppedBlob: null + }) + } +} \ No newline at end of file diff --git a/app/routes/Interface/CropImage/images/image-1.jpg b/app/routes/Interface/CropImage/images/image-1.jpg new file mode 100755 index 0000000..493145c Binary files /dev/null and b/app/routes/Interface/CropImage/images/image-1.jpg differ diff --git a/app/routes/Interface/CropImage/images/image-2.jpg b/app/routes/Interface/CropImage/images/image-2.jpg new file mode 100755 index 0000000..3a106e8 Binary files /dev/null and b/app/routes/Interface/CropImage/images/image-2.jpg differ diff --git a/app/routes/Interface/CropImage/index.js b/app/routes/Interface/CropImage/index.js new file mode 100755 index 0000000..e51eb7d --- /dev/null +++ b/app/routes/Interface/CropImage/index.js @@ -0,0 +1,3 @@ +import { CropImage } from './CropImage'; + +export default CropImage; diff --git a/app/routes/Interface/DragAndDropElements/DragAndDropElements.js b/app/routes/Interface/DragAndDropElements/DragAndDropElements.js new file mode 100755 index 0000000..58721a9 --- /dev/null +++ b/app/routes/Interface/DragAndDropElements/DragAndDropElements.js @@ -0,0 +1,73 @@ +import React from 'react'; + +import { + Container, + Button +} from './../../../components'; +import { + HeaderMain +} from './../../components/HeaderMain'; +import { + HeaderDemo +} from './../../components/HeaderDemo'; + +import { + MultipleVerticalLists, + DraggableTable, + HorizontalLists +} from './components'; + +export class DragAndDropElements extends React.Component { + multipleVerticalListsRef = React.createRef(); + draggableTableRef = React.createRef(); + horizontalLists = React.createRef(); + + onResetState = () => { + this.multipleVerticalListsRef.current.recoverInitialState(); + this.draggableTableRef.current.recoverInitialState(); + this.horizontalLists.current.recoverInitialState(); + } + + render() { + return ( + +
    +
    + +
    + +
    + +
    + + +
    + +
    + + +
    +
    + + +
    +     + ); + } +} diff --git a/app/routes/Interface/DragAndDropElements/components/DraggableTable.js b/app/routes/Interface/DragAndDropElements/components/DraggableTable.js new file mode 100755 index 0000000..d2e3d2a --- /dev/null +++ b/app/routes/Interface/DragAndDropElements/components/DraggableTable.js @@ -0,0 +1,300 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import uid from 'uuid/v4'; +import _ from 'lodash'; +import faker from 'faker/locale/en_US'; +import { + DragDropContext, + Droppable, + Draggable +} from 'react-beautiful-dnd'; +import classNames from 'classnames'; + +import { + Table, + Badge, + Avatar, + AvatarAddOn, + Progress, + Card, + CardHeader, + CardTitle +} from './../../../../components'; +import { randomAvatar, randomArray } from './../../../../utilities'; +import { reorder } from './utilities'; +import classes from './common.scss'; + +const allSkills = ['JavaScript', 'Photoshop', 'Management', 'Bootstrap', + 'PHP', 'Sketch', 'MySQL', 'Mongo', 'Node.js', 'TypeScript']; + +const generateUser = () => ({ + id: uid(), + name: `${faker.name.firstName()} ${faker.name.lastName()}`, + title: faker.name.jobType(), + avatarUrl: randomAvatar(), + status: randomArray(['success', 'warning', 'danger']), + skills: _.uniq(_.times(_.random(2, 5), () => randomArray(allSkills))), + interviewProgress: _.random(40, 90), + portfolio: (Math.round(Math.random())) ? { + url: 'http://webkom.co', + title: 'www.webkom.co' + } : null +}); + +const getTableClass = (isDraggedOver) => + classNames(classes['table'], { + [classes['table--drag-over']]: isDraggedOver + }); + +const getRowClass = (isDragging) => + classNames(classes['row'], { + [classes['row--dragging']]: isDragging + }); + +// Custom Table Cell - keeps cell width when the row +// is detached from the table +// ======================================================== +class TableCell extends React.Component { + static propTypes = { + children: PropTypes.node, + isDragOccurring: PropTypes.bool + }; + + ref = React.createRef(); + + getSnapshotBeforeUpdate(prevProps) { + if (!this.ref) { + return null; + } + const ref = this.ref.current; + + const isDragStarting = + this.props.isDragOccurring && !prevProps.isDragOccurring; + + if (!isDragStarting) { + return null; + } + + const { width, height } = ref.getBoundingClientRect(); + + const snapshot = { width, height }; + + return snapshot; + } + + componentDidUpdate(prevProps, prevState, snapshot) { + if (!this.ref) { + return; + } + const ref = this.ref.current; + + if (snapshot) { + if (ref.style.width === snapshot.width) { + return; + } + ref.style.width = `${snapshot.width}px`; + ref.style.height = `${snapshot.height}px`; + return; + } + + if (this.props.isDragOccurring) { + return; + } + + // inline styles not applied + if (ref.style.width == null) { + return; + } + + // no snapshot and drag is finished - clear the inline styles + ref.style.removeProperty('height'); + ref.style.removeProperty('width'); + } + + render() { + // eslint-disable-next-line no-unused-vars + const { children, isDragOccurring, ...otherProps } = this.props; + return {children}; + } +} + +// Draggable Table Row +// ======================================================== +const DraggableRow = (props) => ( + + {(provided, snapshot) => ( + + + + + + , + + ]} + /> + + + + { props.name } + +

    + { props.title } +

    +     + + {_.map(props.skills, (skill, index) => ( + 0 && 'ml-1'}`} + > + { skill } + + ))} + + + + { props.interviewProgress }% + + + { + !_.isEmpty(props.portfolio) ? ( + + { props.portfolio.title } + + ) : ( + - + ) + } + + + )} +     +); +DraggableRow.propTypes = { + avatarUrl: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + status: PropTypes.string.isRequired, + skills: PropTypes.array.isRequired, + interviewProgress: PropTypes.number.isRequired, + portfolio: PropTypes.object, + index: PropTypes.number.isRequired +} + +// Demo Component +// ======================================================== +const initialState = _.times(5, generateUser); + +export class DraggableTable extends React.Component { + static propTypes = { + className: PropTypes.string, + } + + state = { + users: initialState + } + + constructor(props) { + super(props); + + this.onDragEnd = this.onDragEnd.bind(this); + } + + onDragEnd({ source, destination }) { + if (!destination) { + return; + } + + const users = reorder(this.state.users, + source.index, destination.index); + this.setState({ users }); + } + + recoverInitialState() { + this.setState({ + users: initialState + }); + } + + render() { + return ( + + + + Queue of Candidates + + + + + + + + + + + + + + + + {(provided, snapshot) => ( + + {_.map(this.state.users, (user, index) => ( + + ))} + + )} + +
    PhotoNameSkillsInterview Passed inPortfolio
    +     +     + ); + } +} diff --git a/app/routes/Interface/DragAndDropElements/components/HorizontalLists.js b/app/routes/Interface/DragAndDropElements/components/HorizontalLists.js new file mode 100755 index 0000000..198352c --- /dev/null +++ b/app/routes/Interface/DragAndDropElements/components/HorizontalLists.js @@ -0,0 +1,178 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import classNames from 'classnames'; +import { + DragDropContext, + Droppable, + Draggable +} from 'react-beautiful-dnd'; +import uid from 'uuid/v4'; +import { + Card, + CardHeader, + CardTitle, + Avatar, + AvatarAddOn +} from './../../../../components'; +import { randomAvatar, randomArray } from './../../../../utilities'; +import { reorder, move } from './utilities'; +import classes from './common.scss'; + +const generateItem = () => ({ + id: uid(), + avatarUrl: randomAvatar(), + status: randomArray(['success', 'warning', 'danger']) +}); + +const getListClass = (isDraggedOver) => + classNames(classes['list'], { + [classes['list--drag-over']]: isDraggedOver + }); + +const RowList = (props) => ( + + + + { props.title } + + + + {(provided, snapshot) => ( +
    + {_.map(props.items, (item, index) => ( + + {(provided) => ( +
    + , + + ]} + /> +
    + )} +     + ))} + { provided.placeholder } +
    + )} +     +     +) +RowList.propTypes = { + listId: PropTypes.string.isRequired, + items: PropTypes.array.isRequired, + title: PropTypes.string.isRequired, + className: PropTypes.stirng +} +const initialState = { + listAItems: _.times(_.random(3, 8), generateItem), + listBItems: _.times(_.random(3, 8), generateItem), + listCItems: _.times(_.random(3, 8), generateItem) +}; +export class HorizontalLists extends React.Component { + static propTypes = { + className: PropTypes.string + } + + state = _.clone(initialState); + + constructor (props) { + super(props); + + this.onDragEnd = this.onDragEnd.bind(this); + } + + onDragEnd(result) { + const { source, destination } = result; + + // dropped outside the list + if (!destination) { + return; + } + + // Handle List Items + if (source.droppableId === destination.droppableId) { + const items = reorder( + this.state[`${source.droppableId}Items`], + source.index, + destination.index + ); + + this.setState({ + [`${source.droppableId}Items`]: items + }); + } else { + const result = move( + this.state[`${source.droppableId}Items`], + this.state[`${destination.droppableId}Items`], + source, + destination + ); + + this.setState(_.mapKeys(result, (val, key) => `${key}Items`)); + } + } + + recoverInitialState() { + this.setState(initialState); + } + + render() { + const { className } = this.props; + + return ( +
    + + + + + +
    + ) + } +} \ No newline at end of file diff --git a/app/routes/Interface/DragAndDropElements/components/MultipleVerticalLists.js b/app/routes/Interface/DragAndDropElements/components/MultipleVerticalLists.js new file mode 100755 index 0000000..da31b96 --- /dev/null +++ b/app/routes/Interface/DragAndDropElements/components/MultipleVerticalLists.js @@ -0,0 +1,267 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import { + DragDropContext, + Droppable, + Draggable +} from 'react-beautiful-dnd'; +import uid from 'uuid/v4'; +import faker from 'faker/locale/en_US'; +import classNames from 'classnames'; +import { + Card, + CardHeader, + CardTitle, + Media, + Avatar, + AvatarAddOn +} from './../../../../components'; +import { randomAvatar, randomArray } from './../../../../utilities'; +import { reorder, move } from './utilities'; +import classes from './common.scss'; + +// Utility Functions +//========================================================= +const generateItem = () => ({ + id: uid(), + type: 'single', + name: `${faker.name.firstName()} ${faker.name.lastName()}`, + title: faker.name.jobType(), + avatarUrl: randomAvatar(), + status: randomArray(['success', 'warning', 'danger']) +}); + +const getListClass = (isDraggedOver) => + classNames(classes['list'], { + [classes['list--drag-over']]: isDraggedOver + }); + +const getItemClass = (isDragging) => + classNames(classes['list-group-item'], { + [classes['list-group-item--dragging']]: isDragging + }); + +// Draggable List Component +//========================================================= +const VerticalList = React.memo((props) => { + return ( + + {(provided, snapshot) => ( +
    + {props.items.map((item, index) => ( + + {(provided, draggableSnapshot) => ( +
    + + + + + + , + + ]} + /> + + + + { item.name } + +

    + { item.title } +

    +     +     +
    + )} +     + ))} +
    + )} +     + ); +}); +VerticalList.propTypes = { + items: PropTypes.array, + listId: PropTypes.string, + title: PropTypes.string +} + +// Draggable Column Component +//========================================================= +class Column extends React.Component { + static propTypes = { + children: PropTypes.node, + id: PropTypes.string, + index: PropTypes.number, + title: PropTypes.string + } + + render() { + const { children, id, index, title } = this.props; + + return ( + + {(provided) => ( +
    + + + + + { title } + + + { children } + +
    + )} +     + ) + } +} + +// Demo Component +//========================================================= +const initialState = { + listAItems: _.times(_.random(2, 4), generateItem), + listBItems: _.times(_.random(3, 8), generateItem), + listCItems: _.times(_.random(3, 8), generateItem), + lists: [ + { id: 'listA', title: 'All Candidates' }, + { id: 'listB', title: 'Candidates Interview' }, + { id: 'listC', title: 'Candidates Testing' } + ] +}; +export class MultipleVerticalLists extends React.Component { + static propTypes = { + className: PropTypes.string + } + + state = _.clone(initialState); + + constructor (props) { + super(props); + + this.onDragEnd = this.onDragEnd.bind(this); + } + + onDragEnd(result) { + const { source, destination } = result; + + // Swap column positions + if (source.droppableId === 'board') { + if (destination.droppableId !== 'board') { + return; + } + const lists = reorder( + this.state.lists, + source.index, + destination.index + ); + + this.setState({ lists }); + return; + } + + // dropped outside the list + if (!destination) { + return; + } + + // Handle List Items + if (source.droppableId === destination.droppableId) { + const items = reorder( + this.state[`${source.droppableId}Items`], + source.index, + destination.index + ); + + this.setState({ + [`${source.droppableId}Items`]: items + }); + } else { + const result = move( + this.state[`${source.droppableId}Items`], + this.state[`${destination.droppableId}Items`], + source, + destination + ); + + this.setState(_.mapKeys(result, (val, key) => `${key}Items`)); + } + } + + recoverInitialState() { + this.setState(initialState); + } + + render() { + const { className } = this.props; + const { lists } = this.state; + + return ( +
    + + + {(provided) => ( +
    + {_.map(lists, (list, index) => ( + + + + ))} +
    + )} +     +     +
    + ) + } +} \ No newline at end of file diff --git a/app/routes/Interface/DragAndDropElements/components/common.scss b/app/routes/Interface/DragAndDropElements/components/common.scss new file mode 100755 index 0000000..84b4485 --- /dev/null +++ b/app/routes/Interface/DragAndDropElements/components/common.scss @@ -0,0 +1,43 @@ +@import "./../../../../styles/variables.scss"; + +.list { + transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000); + + &--drag-over { + background-color: lighten($primary, 45%); + } +} + +.list-group-item { + border-left: 1px solid transparent !important; + border-right: 1px solid transparent !important; + transition: border-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000); + + &:first-child { + border-top: 1px solid transparent !important; + } + + &--dragging { + &:first-child { + border-top-color: $primary !important; + } + border-color: $primary !important; + } +} + +.table { + transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000); + + &--drag-over { + background-color: lighten($primary, 45%); + } +} + +.row { + transition: border-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000); + background: $white; + + &--dragging { + border: 1px solid $primary !important; + } +} \ No newline at end of file diff --git a/app/routes/Interface/DragAndDropElements/components/index.js b/app/routes/Interface/DragAndDropElements/components/index.js new file mode 100755 index 0000000..611597b --- /dev/null +++ b/app/routes/Interface/DragAndDropElements/components/index.js @@ -0,0 +1,3 @@ +export * from './MultipleVerticalLists'; +export * from './DraggableTable'; +export * from './HorizontalLists'; \ No newline at end of file diff --git a/app/routes/Interface/DragAndDropElements/components/utilities.js b/app/routes/Interface/DragAndDropElements/components/utilities.js new file mode 100755 index 0000000..3be9662 --- /dev/null +++ b/app/routes/Interface/DragAndDropElements/components/utilities.js @@ -0,0 +1,21 @@ +export const reorder = (list, startIndex, endIndex) => { + const result = Array.from(list); + const [removed] = result.splice(startIndex, 1); + result.splice(endIndex, 0, removed); + + return result; +}; + +export const move = (source, destination, droppableSource, droppableDestination) => { + const sourceClone = Array.from(source); + const destClone = Array.from(destination); + const [removed] = sourceClone.splice(droppableSource.index, 1); + + destClone.splice(droppableDestination.index, 0, removed); + + const result = {}; + result[droppableSource.droppableId] = sourceClone; + result[droppableDestination.droppableId] = destClone; + + return result; +}; \ No newline at end of file diff --git a/app/routes/Interface/DragAndDropElements/index.js b/app/routes/Interface/DragAndDropElements/index.js new file mode 100755 index 0000000..d65282a --- /dev/null +++ b/app/routes/Interface/DragAndDropElements/index.js @@ -0,0 +1,3 @@ +import { DragAndDropElements } from './DragAndDropElements'; + +export default DragAndDropElements; diff --git a/app/routes/Interface/Dropdowns/Dropdowns.js b/app/routes/Interface/Dropdowns/Dropdowns.js new file mode 100755 index 0000000..d166f9a --- /dev/null +++ b/app/routes/Interface/Dropdowns/Dropdowns.js @@ -0,0 +1,968 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Container, + Row, + Col, + Card, + InputGroup, + CardTitle, + CardBody, + Badge, + CustomInput, + InputGroupAddon, + UncontrolledButtonDropdown, + ListGroupItem, + ListGroup, + ExtendedDropdown, + Form, + Button, + FormGroup, + Label, + Input, + ButtonDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; +import { Messages } from "../../components/Dropdowns/Messages"; +import { Activity } from "../../components/Dropdowns/Activity"; + +const Dropdowns = () => ( + + + + { /* START Header 1 */} + + + + Dropdown component states + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + { /* START Col6 1 */} + + + + + Dropdown: Default + + #1.01 + + +

    + Default dropdown menu styling. +

    + + + Dropdown + + + Profile + Settings + + Logout + + +     +     + + { /* END Col6 1 */} + { /* START Col6 1 */} + + + + + Dropdown: Active + + #1.02 + + +

    + Make the link active with active class. +

    + + + Dropdown + + + Profile + Settings + + Logout + + +     +     + + { /* END Col6 1 */} + { /* START Col6 1 */} + + + + + Dropdown: Disabled + + #1.03 + + +

    + Disable the link with disabled class. +

    + + + Dropdown + + + Profile + Settings + + Logout + + +     +     + + { /* END Col6 1 */} +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + Dropdown header with options + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + { /* START Col6 1 */} + + + + + Dropdown: Default Header + + #2.01 + + +

    + Basic header styling of label sections. +

    + + + Dropdown + + + Menu + Profile + Settings + + Logout + + +     +     + + + + Dropdown: Header Left Icon + + #2.02 + + +

    + Display left/right positioned icons. +

    + + + Dropdown + + + + + Menu + + Profile + Settings + + Logout + + +     +     + + { /* END Col6 1 */} + { /* START Col6 2 */} + + + + + Dropdown: Header Right Icon + + #2.03 + + +

    + Basic header styling of label sections. +

    + + + Dropdown + + + + Menu + + + Profile + Settings + + Logout + + +     +     + + + + Dropdown: Header Left & Right Icon + + #2.04 + + +

    + Display left/right positioned icons +

    + + + Dropdown + + + + + Menu + + + Profile + Settings + + Logout + + +     +     + + { /* END Col6 2 */} +     + { /* END Section 2 */} + + { /* START Header 3 */} + + + + Icons, checkboxes, radios, switches etc. + + )} + /> + + + { /* END Header 3 */} + { /* START Section 3 */} + + { /* START Col6 1 */} + + + + + Dropdown: Left Icon + + #3.01 + + +

    + Dropdown icons in left position. +

    + + + Dropdown + + + Menu + + + Profile + + + + Settings + + + + + Logout + + + +     +     + + + + Dropdown: Right Icon + + #3.02 + + +

    + Dropdown icons in right position. +

    + + + Dropdown + + + Menu + + Profile + + + + Settings + + + + + Logout + + + + +     +     + + + + Dropdown: Right Badge + + #3.03 + + +

    + Dropdown menu items with Badge. +

    + + + Dropdown + + + Menu + + Profile + + Done + + + + Settings + + Error + + + + + Logout + + Safe + + + + +     +     + + + + Dropdown: Right Pills + + #3.04 + + +

    + Dropdown menu items with Badge pill. +

    + + + Dropdown + + + Menu + + Profile + + 5 + + + + Settings + + 12 + + + + + Logout + + 34 + + + + +     +     + + + + Dropdown: Left Badge + + #3.05 + + +

    + Dropdown menu items with Badge pill. +

    + + + Dropdown + + + Menu + + + Update + + Profile + + + + Ready + + Settings + + + + + Added + + Logout + + + +     +     + + { /* END Col6 1 */} + { /* START Col6 2 */} + + + + + Dropdown: Left Pills + + #3.06 + + +

    + Dropdown menu items with Badge pill. +

    + + + Dropdown + + + Menu + + + 32 + + Profile + + + + 86 + + Settings + + + + + 11 + + Logout + + + +     +     + + + + Dropdown: Right & Left Icons + + #3.07 + + +

    + Basic header styling of label sections. +

    + + + Dropdown + + + Menu + + + Profile + + + + + Settings + + + + + + Logout + + + + +     +     + + + + Dropdown: Left Radios + + #3.08 + + +

    + Left positioned radio. +

    + + + Dropdown + + + + Select Style + + + + + + + + + + + + + +     +     + + + + Dropdown: Left Checkboxes + + #3.09 + + +

    + Left positioned checkbox. +

    + + + Dropdown + + + + Select Javascript + + + + + + + + + + + + + +     +     + + + + Dropdown: Forms + + #3.10 + + +

    + with Buttons, Inputs and Checkbox. +

    + + + Dropdown + + +
    + + + + + + + + + + + + + {' '} + +
    +     +     +     +     + + { /* END Col6 2 */} +     + { /* END Section 3 */} + + { /* START Header 4 */} + + + + Positions are available for: <Dropdown direction="left" />, + <Dropdown direction="right" /> and <Dropdown direction="up" />. + + )} + /> + + + { /* END Header 4 */} + { /* START Section 4 */} + + { /* START Col6 1 */} + + + + + Dropdown: Dropup + + #4.01 + + +

    + Trigger dropdown menus above elements by adding + <Dropdown direction="up" /> + to the parent element. +

    + + + See Demo + + + Menu + Profile + Settings + + Logout + + +     +     + + { /* END Col6 1 */} + { /* START Col6 1 */} + + + + + Dropdown: Dropleft + + #4.03 + + +

    + Trigger dropdown menus above elements by adding + <Dropdown direction="left" /> + to the parent element. +

    + + + See Demo + + + Menu + Profile + Settings + + Logout + + +     +     + + { /* END Col6 1 */} + { /* START Col6 1 */} + + + + + Dropdown: Dropright + + #4.02 + + +

    + Trigger dropdown menus above elements by adding + <Dropdown direction="right" /> + to the parent element. +

    + + + See Demo + + + Menu + Profile + Settings + + Logout + + +     +     + + { /* END Col6 1 */} +     + { /* END Section 4 */} + + { /* START Header 5 */} + + + + Dropdown as combo with Lists, Buttons, Input and Media... + + )} + /> + + + { /* END Header 5 */} + { /* START Section 5 */} + + { /* START Col6 1 */} + + + + + Dropdown: List Group (as Links) + + #5.01 + + +

    Mainly used components together with "Navbar".

    + + + See Demo + + + +
    Activity Feed
    + 4 +     + + + + + + + + + + + + + + + + + + + See All Notifications + + + +     +     +     +     + + { /* END Col6 1 */} + { /* START Col6 1 */} + + + + + Dropdown: List Group (as Buttons) + + #5.02 + + +

    Mainly used components together with "Navbar".

    + + + See Demo + + + +
    Messages
    + + + +     + + + + + + + + + + + + + + + + + + + + + + + + + + + See All Messages + + + +     +     +     +     + + { /* END Col6 1 */} +     + { /* END Section 5 */} + + +); + +export default Dropdowns; \ No newline at end of file diff --git a/app/routes/Interface/Dropdowns/index.js b/app/routes/Interface/Dropdowns/index.js new file mode 100755 index 0000000..2e94acc --- /dev/null +++ b/app/routes/Interface/Dropdowns/index.js @@ -0,0 +1,3 @@ +import Dropdowns from './Dropdowns'; + +export default Dropdowns; \ No newline at end of file diff --git a/app/routes/Interface/Images/Images.js b/app/routes/Interface/Images/Images.js new file mode 100755 index 0000000..618bf4d --- /dev/null +++ b/app/routes/Interface/Images/Images.js @@ -0,0 +1,878 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Container, + Avatar, + AvatarAddOn, + Media, + Row, + Button, + Col, + Card, + CustomInput, + CardImg, + CardImgOverlay, + CardBody, + CardText, + CardTitle, + CardFooter, + HolderProvider +} from './../../../components'; +import { randomAvatar } from './../../../utilities'; +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const Images = () => ( + + + { /* START Header 1 */} + + + + + + { /* END Header 1 */} + { /* START Section 1 */} + + +
    + Images: Responsive Images + #1.01 +
    + + + + +     + + +
    + Images: Thumbnails + #1.02 +
    + + + + + + + + + + + + + +     + + +
    + Images: Aligning + #1.03 +
    + + + + + + + + + + + + +     + + +
    + Images: Figures + #1.04 +
    +
    + + + +
    + A caption for the above image. +
    +
    +
    + + + +
    + A caption for the above image. +
    +
    + +     + + +
    + Images: Styles + #1.05 +
    +
    + + + +
    + .rounded +
    +
    +
    + + + +
    + .rounded-top +
    +
    +
    + + + +
    + .rounded-right +
    +
    +
    + + + +
    + .rounded-bottom +
    +
    +
    + + + +
    + .rounded-left +
    +
    +
    + + + +
    + .rounded-circle +
    +
    + +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + + + { /* END Header 2 */} + { /* START Section 2 */} + + + + + + + + Default Title + + #2.01 + { faker.lorem.sentences() } + + + + + + + Icon Right Title + + + + + + + + + #2.03 + { faker.lorem.sentences() } + + + + + + + + + + + + + Link Title + + + + #2.02 + { faker.lorem.sentences() } + + + + + + + + + + + + + Icon Left Title + + + #2.03 + { faker.lorem.sentences() } + + + + + + { /* END Section 2 */} + + { /* START Header 3 */} + + + + + + { /* END Header 3 */} + { /* START Section 3 */} + + + + + + Default Title + + + + + + + + #3.01 + { faker.lorem.sentences() } + + + + + + + Icon Right Title + + + + + + + + + #3.04 + { faker.lorem.sentences() } + + + + + + + + + Link Title + + + + + + + + #3.02 + { faker.lorem.sentences() } + + + + + + + + + + + + + + + #3.03 + { faker.lorem.sentences() } + + + + + + + + + + Icon Left Title + + + + + + + + #3.05 + { faker.lorem.sentences() } + + + + + + + Checkbox Right Title + + + + + + + + + #3.06 + { faker.lorem.sentences() } + + + + + + { /* END Section 3 */} + + { /* START Header 4 */} + + + + + + { /* END Header 4 */} + { /* START Section 4 */} + + + + + + + + + { faker.lorem.sentence() } + + + #4.01 + { faker.lorem.paragraph() } + + + +
    + + 9 + + + 37 + +
    + 4 Minutes Ago +     +     + + + + + + + { faker.lorem.sentence() } + + + #4.04 + { faker.lorem.paragraph() } + + + + + Read More + + +
    + +
    +     +     + + + + + + + + + { faker.lorem.sentence() } + + + #4.02 + { faker.lorem.paragraph() } + + + +
    + 9 +
    +
    + 87 +
    +     +     + + + + + + + { faker.lorem.sentence() } + + + #4.05 + { faker.lorem.paragraph() } + + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + 2 Days Ago +

    +     +     +
    + +
    +     +     + + + + + + + + + { faker.lorem.sentence() } + + + #4.03 + { faker.lorem.paragraph() } + + + + {' '} +
    + 16 Min. Ago +
    +     +     + + + + + + + { faker.lorem.sentence() } + + + #4.06 + { faker.lorem.paragraph() } + + + +
    + , + + ]} + /> + , + + ]} + /> + , + + ]} + /> +
    +
    + +
    +     +     + +     + { /* END Section 4 */} + + { /* START Header 5 */} + + + + + + { /* END Header 5 */} + { /* START Section 5 */} + + + + + + + + +

    + + Sport + +

    +
    + + { faker.commerce.productName() } + + #5.01 + + +
    +

    + { faker.lorem.sentence() } +

    +     +
    +
    + + 34 + + + 8 + +
    + + 16 Minutes Ago + +
    +     +     + + + + + + + +

    + + Electronics + +

    + +
    + + { faker.commerce.productName() } + + #5.02 + + +
    +

    + { faker.lorem.sentence() } +

    +     +     + +
    + + 34 + + + 8 + +
    + + 4 Minutes Ago + +     +     + +     + { /* END Section 5 */} +     +); + +export { Images }; diff --git a/app/routes/Interface/Images/index.js b/app/routes/Interface/Images/index.js new file mode 100755 index 0000000..9214f6c --- /dev/null +++ b/app/routes/Interface/Images/index.js @@ -0,0 +1,3 @@ +import { Images } from './Images'; + +export default Images; \ No newline at end of file diff --git a/app/routes/Interface/ListGroups/ListGroups.js b/app/routes/Interface/ListGroups/ListGroups.js new file mode 100755 index 0000000..3da422f --- /dev/null +++ b/app/routes/Interface/ListGroups/ListGroups.js @@ -0,0 +1,1658 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Container, + Row, + Col, + CardBody, + CardTitle, + Badge, + Button, + Media, + Avatar, + AvatarAddOn, + ListGroup, + ListGroupItem, + ListGroupItemHeading, + ListGroupItemText, + CustomInput, + CardText +} from './../../../components'; +import { randomAvatar } from './../../../utilities'; +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const cardText = ({ cardNo }) => ( + + + #{ cardNo } + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nisl elit, porta a sapien eget, fringilla sagittis ex. + +); + +const cardContent = (title = 'Some Card Title') => ( + + + { title } + + { cardText } + +); + +const ListGroups = () => ( + + + + { /* START Header 1 */} + + + + + + { /* END Header 1 */} + { /* START Section 1 */} + + { /* START Col6 1 */} + + { /* START Example */} +
    +
    + List Groups: Basic Example + + #1.01 + +
    +

    + The most basic list group is an unordered list with + list items and the proper classes. Example: + <ListGroupItem> ... </ListGroupItem> + . +

    + + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Disabled Items + + #1.03 + +
    +

    + Add disabled to a ListGroupItem to + make it appear disabled. +

    + + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Links and Buttons (Disabled) + + #1.05 + +
    +

    + Add active to a ListGroupItem to + make it appear active. +

    + + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Contextual Classes + + #1.07 + +
    +

    + From the color palette, add to <ListGroupItem> for example: success, primary etc. +

    + + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Vestibulum at eros + +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: With Badges + + #1.09 + +
    +

    + Add Badge, for example: + <Badge pill className="ml-auto align-self-center">14</Badge>. +

    + + + Cras justo odio + 14 + + + Dapibus ac facilisis in + 2 + + + Morbi leo risus + 1 + + +
    + { /* END Example */} + + { /* END Col6 1 */} + { /* START Col6 2 */} + + { /* START Example */} +
    +
    + List Groups: Active Items (Anchors) + + #1.02 + +
    +

    + The most basic list group is an unordered list with + list items and the proper classes. Example: + <ListGroupItem active tag="a" href="#" action> ... </ListGroupItem> + . +

    + + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Active Items (Buttons) + + #1.04 + +
    +

    + The most basic list group is an unordered list with + list items and the proper classes. Example: + <ListGroupItem active tag="a" href="#" action> ... </ListGroupItem> + . +

    + + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Flush + + #1.06 + +
    +

    + Often used in combination with Cards. Just add to <ListGroup flush>. +

    + + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + Porta ac consectetur ac + Vestibulum at eros + +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Custom Content + + #1.09 + +
    +

    + Here is an example of combination + <ListGroupItemHeading className="h6"> + and <ListGroupItemText> +

    + + + + List group item heading + + + { faker.lorem.sentence() } + + + + + List group item heading + + + { faker.lorem.sentence() } + + + + + List group item heading + + + { faker.lorem.sentence() } + + + +
    + { /* END Example */} + + { /* END Col6 2 */} +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + + + { /* END Header 2 */} + { /* START Section 2 */} + + { /* START Col6 1 */} + + { /* START Example */} +
    +
    + List Groups: Media: Default + + #2.01 + +
    + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Media: Color Header + + #2.02 + +
    + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     +     + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     +     + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Media: Color Text + + #2.04 + +
    + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     +     + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     +     + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Media: Status Icon + + #2.06 + +
    + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Media: Right Button + + #2.08 + +
    + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + {' '} + +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + {' '} + +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + {' '} + +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Media: Left Icons Single + + #2.10 + +
    + + + + + + + + + Document PDF + +

    + { faker.lorem.sentence() } +

    +     +     +     + + + + + + + + Document Word + +

    + { faker.lorem.sentence() } +

    +     +     +     + + + + + + + + Document Excell + +

    + { faker.lorem.sentence() } +

    +     +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Media: Right Radio + + #2.12 + +
    + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + +
    + +
    +     +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + +
    + +
    +     +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + +
    + +
    +     +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Media: Left Radio + + #2.14 + +
    + + + + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     +     + + + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     +     + + + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     +     +     +
    + { /* END Example */} + + { /* END Col6 1 */} + { /* START Col6 2 */} + + { /* START Example */} +
    +
    + List Groups: Media: Left Default + + #2.02 + +
    + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     +     + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     +     + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Media: Right Badge + + #2.03 + +
    + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + Offline + +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + Busy + +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + Online + +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Media: Right Icon + + #2.07 + +
    + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Media: Left Icon + + #2.09 + +
    + + + + + + + + + + + + Success + +

    + { faker.lorem.sentence() } +

    +     +     +     + + + + + + + + + + + Danger + +

    + { faker.lorem.sentence() } +

    +     +     +     + + + + + + + + + + + Warning + +

    + { faker.lorem.sentence() } +

    +     +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Media: Right Button + + #2.08 + +
    + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + +
    + +
    +     +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + +
    + +
    +     +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + +
    + +
    +     +     +     +     +
    + { /* END Example */} + { /* START Example */} +
    +
    + List Groups: Media: Left Checkbox + + #2.13 + +
    + + + + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     +     + + + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     +     + + + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     +     +     +
    + { /* END Example */} + + + { /* END Col6 2 */} +     + { /* END Section 2 */} + + +     +     +); + +export default ListGroups; \ No newline at end of file diff --git a/app/routes/Interface/ListGroups/index.js b/app/routes/Interface/ListGroups/index.js new file mode 100755 index 0000000..8bc9662 --- /dev/null +++ b/app/routes/Interface/ListGroups/index.js @@ -0,0 +1,3 @@ +import ListGroups from './ListGroups'; + +export default ListGroups; \ No newline at end of file diff --git a/app/routes/Interface/MediaObjects/MediaObjects.js b/app/routes/Interface/MediaObjects/MediaObjects.js new file mode 100755 index 0000000..58b8f75 --- /dev/null +++ b/app/routes/Interface/MediaObjects/MediaObjects.js @@ -0,0 +1,2198 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Checkable, + Container, + Row, + Col, + Card, + CardTitle, + CardBody, + Avatar, + AvatarAddOn, + Media, + Button, + ButtonGroup, + ListGroup, + ListGroupItem, + Nav, + NavItem, + NavLink, + CustomInput, + Badge, +} from './../../../components'; +import { randomAvatar } from './../../../utilities'; +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const MediaObjects = () => ( + + + + { /* START Header 1 */} + + + + Media list and media object layouts + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + { /* START Col6 1 */} + + + + + Media: Default + + #1.01 + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     +     +     + + + + Media: Link + + #1.02 + + + + + , + + ]} + /> + + + + + { faker.name.firstName() } { faker.name.lastName() } + + +

    + { faker.lorem.sentence() } +

    +     +     + + + , + + ]} + /> + + + + + { faker.name.firstName() } { faker.name.lastName() } + + +

    + { faker.lorem.sentence() } +

    +     +     + + + , + + ]} + /> + + + + + { faker.name.firstName() } { faker.name.lastName() } + + +

    + { faker.lorem.sentence() } +

    +     +     +     +     + + + + Media: Right Badge + + #1.03 + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + Offline + +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + Busy + +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + Online + +     +     +     + + + + Media: Right Checkbox + + #1.04 + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     +     +     + + + + Media: Right Radio + + #1.05 + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     +     +     + + + + Media: Left Icons + + #1.06 + + + + + + + + + + + + Success + +

    + { faker.lorem.sentence() } +

    +     +     + + + + + + + + + + Danger + +

    + { faker.lorem.sentence() } +

    +     +     + + + + + + + + + + Warning + +

    + { faker.lorem.sentence() } +

    +     +     +     +     + + + + Media: Left Radio + + #1.07 + + + + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     + + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     + + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     +     +     + + + + Media: Left Default + + #1.08 + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     +     +     + + { /* END Col6 1 */} + { /* START Col6 2 */} + + + + + Media: Media: Color Header + + #1.09 + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     +     +     + + + + Media: Color Text + + #1.10 + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + , + + ]} + /> + +     +     +     + + + + Media: Status Icon + + #1.12 + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     +     +     + + + + Media: Right Icon + + #1.13 + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + + +     +     +     + + + + Media: Right Button + + #1.14 + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + {' '} + +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + {' '} + +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     + + {' '} + +     +     +     + + + + Media: Left Icons Single + + #1.15 + + + + + + + + + Document PDF + +

    + { faker.lorem.sentence() } +

    +     +     + + + + + + + Document Word + +

    + { faker.lorem.sentence() } +

    +     +     + + + + + + + Document Excell + +

    + { faker.lorem.sentence() } +

    +     +     +     +     + + + + Media: Left Checkbox + + #1.16 + + + + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     + + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     + + + + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     +     +     + + { /* END Col6 2 */} +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + Media list and media object layouts + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + { /* START Col6 1 */} + + + + + Media: Default + + #2.01 + + + + + , + + ]} + /> + + + + + { faker.name.firstName() } { faker.name.lastName() } + + + •Now + + +

    + { faker.lorem.sentence() } +

    +     +     + + + , + + ]} + /> + + + + + { faker.name.firstName() } { faker.name.lastName() } + + + •Yesterday + + +

    + { faker.lorem.sentence() } +

    +     +     + + + , + + ]} + /> + + + + + { faker.name.firstName() } { faker.name.lastName() } + + + •12:23 PM + + +

    + { faker.lorem.sentence() } +

    +     +     +     +     + + + + Media: Default + + #2.02 + + + + + , + + ]} + /> + + + + + { faker.name.firstName() } { faker.name.lastName() } + + + Now + + +

    + { faker.lorem.sentence() } +

    +     +     + + + , + + ]} + /> + + + + + { faker.name.firstName() } { faker.name.lastName() } + + + Yesterday + + +

    + { faker.lorem.sentence() } +

    +     +     + + + , + + ]} + /> + + + + + { faker.name.firstName() } { faker.name.lastName() } + + + 12:23 PM + + +

    + { faker.lorem.sentence() } +

    +     +     +     +     + + + + Media: Header Small Below Text + + #2.03 + + + + + , + + ]} + /> + + +
    +
    + { faker.name.firstName() } { faker.name.lastName() } +
    + + { faker.name.title() } + +
    +

    + { faker.lorem.sentence() } +

    +     +     + + + , + + ]} + /> + + +
    +
    + { faker.name.firstName() } { faker.name.lastName() } +
    + + { faker.name.title() } + +
    +

    + { faker.lorem.sentence() } +

    +     +     + + + , + + ]} + /> + + +
    +
    + { faker.name.firstName() } { faker.name.lastName() } +
    + + { faker.name.title() } + +
    +

    + { faker.lorem.sentence() } +

    +     +     +     +     + + { /* END Col6 1 */} + { /* START Col6 2 */} + + + + + Media: Small Bottom Text + + #2.04 + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() }
    + + { faker.internet.url() } + +

    +     +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() }
    + + { faker.internet.url() } + +

    +     +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() }
    + + { faker.internet.url() } + +

    +     +     +     +     + + + + Media: Button Group Bottom + + #2.05 + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    + + + + + +     +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    + + + + + +     +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    + + + + + +     +     +     +     + + { /* END Col6 2 */} +     + { /* END Section 2 */} + + { /* START Header 3 */} + + + + Media list and media object layouts + + )} + /> + + + { /* END Header 3 */} + { /* START Section 3 */} + + { /* START Col6 1 */} + + + + + Media: List Group + + #3.01 + + + + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     +     + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.lorem.sentence() } +

    +     +     +     +     +     + + { /* END Col6 1 */} + { /* START Col6 2 */} + + + + + Media: List Group + + #3.01 + + + + + + + { /* END Col6 2 */} +     + { /* END Section 3 */} + + + +); + +export default MediaObjects; \ No newline at end of file diff --git a/app/routes/Interface/MediaObjects/index.js b/app/routes/Interface/MediaObjects/index.js new file mode 100755 index 0000000..ea12d7f --- /dev/null +++ b/app/routes/Interface/MediaObjects/index.js @@ -0,0 +1,3 @@ +import MediaObjects from './MediaObjects'; + +export default MediaObjects; \ No newline at end of file diff --git a/app/routes/Interface/Modals/Modals.js b/app/routes/Interface/Modals/Modals.js new file mode 100755 index 0000000..da6e977 --- /dev/null +++ b/app/routes/Interface/Modals/Modals.js @@ -0,0 +1,784 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Container, + Row, + Col, + Card, + Button, + UncontrolledModal, + ModalHeader, + CardBody, + CardTitle, + CardGroup, + ModalBody, + ModalFooter +} from './../../../components' +import { HeaderMain } from "../../components/HeaderMain"; +import { + HeaderDemo +} from "../../components/HeaderDemo"; + +export const Modals = () => ( + + + { /* START Header 1 */} + + + + Use modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + { /* START Col6 1 */} + + { /* START Card Modal */} + + + + Modal: Default + + #1.01 + + + + { /* START Example Modal */} + + + Modal: Default + + #1.01 + + + + { faker.lorem.paragraph() } + + + + Close + + + Save + + + + { /* END Example Modal */} + + + { /* START Card Modal */} + + { /* END Col6 1 */} + { /* START Col6 1 */} + + { /* START Card Modal */} + + + + Modal: Icons + + #1.02 + + + + { /* START Example Modal */} + + + Modal: Icons + + #1.02 + + + + { faker.lorem.paragraph() } + + + + + Close + + + + Save + + + + { /* END Example Modal */} + + + { /* START Card Modal */} + + { /* END Col6 1 */} + + { /* START Section 1 */} + + { /* START Header 2 */} + + + + There are three sizes of modals in the application. + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + { /* START Card Modal */} + + + + Modal: Small Size + + #2.01 + + + + { /* START Example Modal */} + + + Modal: Small Size + + #2.01 + + + + { faker.lorem.paragraph() } + + + + Close + + + Save + + + + { /* END Example Modal */} + + + { /* START Card Modal */} + { /* START Card Modal */} + + + + Modal: Default Size + + #2.02 + + + + { /* START Example Modal */} + + + Modal: Default Size + + #2.02 + + + + { faker.lorem.paragraph() } + + + + Close + + + Save + + + + { /* END Example Modal */} + + + { /* START Card Modal */} + { /* START Card Modal */} + + + + Modal: Large Size + + #2.03 + + + + { /* START Example Modal */} + + + Modal: Large Size + + #2.03 + + + + { faker.lorem.paragraph() } + + + + Close + + + Save + + + + { /* END Example Modal */} + + + { /* START Card Modal */} + + { /* START Section 2 */} + + { /* START Header 3 */} + + + + You can apply colors to make them easier + to see for users. All colors work from the section + Colors. + + )} + /> + + + { /* END Header 3 */} + { /* START Section 3 */} + + { /* START Col6 1 */} + + { /* START Card Modal */} + + + + + Modal: Primary + + + #3.01 + + + + { /* START Example Modal */} + + + Modal: Primary + + #3.01 + + + + { faker.lorem.paragraph() } + + + + Close + + + Save + + + + { /* END Example Modal */} + + + { /* START Card Modal */} + + { /* END Col6 1 */} + { /* START Col6 1 */} + + { /* START Card Modal */} + + + + Modal: Danger + + #3.02 + + + + { /* START Example Modal */} + + + + Modal: Danger + + + #3.02 + + + + { faker.lorem.paragraph() } + + + + Close + + + Save + + + + { /* END Example Modal */} + + + { /* START Card Modal */} + + { /* END Col6 1 */} + { /* START Col6 1 */} + + { /* START Card Modal */} + + + + Modal: Info + + #3.03 + + + + { /* START Example Modal */} + + + + Modal: Info + + + #3.03 + + + + { faker.lorem.paragraph() } + + + + Close + + + Save + + + + { /* END Example Modal */} + + + { /* START Card Modal */} + + { /* END Col6 1 */} + { /* START Col6 1 */} + + { /* START Card Modal */} + + + + Modal: Warning + + #3.04 + + + + { /* START Example Modal */} + + + + Modal: Warning + + + #3.04 + + + + { faker.lorem.paragraph() } + + + + Close + + + Save + + + + { /* END Example Modal */} + + + { /* START Card Modal */} + + { /* END Col6 1 */} + { /* START Col6 1 */} + + { /* START Card Modal */} + + + + Modal: Success + + #3.05 + + + + { /* START Example Modal */} + + + + Modal: Success + + + #3.04 + + + + { faker.lorem.paragraph() } + + + + Close + + + Save + + + + { /* END Example Modal */} + + + { /* START Card Modal */} + + { /* END Col6 1 */} + { /* START Col6 1 */} + + { /* START Card Modal */} + + + + Modal: Dark + + #3.06 + + + + { /* START Example Modal */} + + + + Modal: Dark + + + #3.06 + + + + { faker.lorem.paragraph() } + + + + Close + + + Save + + + + { /* END Example Modal */} + + + { /* START Card Modal */} + + { /* END Col6 1 */} + + { /* START Section 3 */} + + { /* START Header 4 */} + + + + Six types of alerts below. + + )} + /> + + + { /* END Header 4 */} + { /* START Section 3 */} + + { /* START Col6 1 */} + + { /* START Card Modal */} + + + + Modal Alerts: Primary + + #4.01 + + + + { /* START Example Modal */} + + + + +
    Welcome
    +

    + We're glad to see you again and wish you a nice day. +

    + + Save + + + Close + +     + +     + { /* END Example Modal */} +     +     + { /* START Card Modal */} + + { /* END Col6 1 */} + { /* START Col6 1 */} + + { /* START Card Modal */} + + + + Modal Alerts: Danger + + #4.02 + + + + { /* START Example Modal */} + + + + +
    Danger
    +

    + Change a few things up and try submitting. +

    + + Save + + + Close + +     + +     + { /* END Example Modal */} +     +     + { /* START Card Modal */} + + { /* END Col6 1 */} + { /* START Col6 1 */} + + { /* START Card Modal */} + + + + Modal Alerts: Info + + #4.03 + + + + { /* START Example Modal */} + + + + +
    Information
    +

    + This alert needs your attention, but it's not important. +

    + + Save + + + Close + +     + +     + { /* END Example Modal */} +     +     + { /* START Card Modal */} + + { /* END Col6 1 */} + { /* START Col6 1 */} + + { /* START Card Modal */} + + + + Modal Alerts: Warning + + #4.04 + + + + { /* START Example Modal */} + + + + +
    Warning
    +

    + Better check yourself, you're not looking too good. +

    + + Save + + + Close + +     + +     + { /* END Example Modal */} +     +     + { /* START Card Modal */} + + { /* END Col6 1 */} + { /* START Col6 1 */} + + { /* START Card Modal */} + + + + Modal Alerts: Success + + #4.05 + + + + { /* START Example Modal */} + + + + +
    Success
    +

    + Better check yourself, you're not looking too good. +

    + + Save + + + Close + +     + +     + { /* END Example Modal */} +     +     + { /* START Card Modal */} + + { /* END Col6 1 */} + { /* START Col6 1 */} + + { /* START Card Modal */} + + + + Modal Alerts: Attention + + #4.06 + + + + { /* START Example Modal */} + + + + +
    Attention
    +

    + This alert needs your attention, but it's not important. +

    + + Save + + + Close + +     + +     + { /* END Example Modal */} +     +     + { /* START Card Modal */} + + { /* END Col6 1 */} +     + { /* START Section 3 */} +     +); \ No newline at end of file diff --git a/app/routes/Interface/Modals/index.js b/app/routes/Interface/Modals/index.js new file mode 100755 index 0000000..38679fb --- /dev/null +++ b/app/routes/Interface/Modals/index.js @@ -0,0 +1,3 @@ +import { Modals } from './Modals'; + +export default Modals; diff --git a/app/routes/Interface/Navbars/Navbars.js b/app/routes/Interface/Navbars/Navbars.js new file mode 100755 index 0000000..a4d8c68 --- /dev/null +++ b/app/routes/Interface/Navbars/Navbars.js @@ -0,0 +1,116 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + Container, + Row, + Col +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; +import { NavbarExample } from '../../components/Navbars/NavbarExample'; + +const ExampleWrap = ({ name, children }) => ( + +
    { name }
    + { children } +     +); +ExampleWrap.propTypes = { + name: PropTypes.string, + children: PropTypes.node, +}; + +const Navbars = () => ( + + + + +

    + Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin. +

    + + { /* START Light */} + + + + Theming the navbar has never been easier thanks to Theme Providers. Wrap the Navbar with a NavbarThemeProvider component and set style="light" and color="<desired color>". + + + + + + + + + + + + + + + + { /* END Light */} + + { /* START Dark */} + + + + Theming the navbar has never been easier thanks to Theme Providers. Wrap the Navbar with a NavbarThemeProvider component and set style="dark" and color="<desired color>". + + + + + + + + + + + + + + + + { /* END Dark */} + + { /* START Color */} + + + + Theming the navbar has never been easier thanks to Theme Providers. Wrap the Navbar with a NavbarThemeProvider component and set style="color" and color="<desired color>". + + + + + + + + + + + + + + + + { /* END Color */} +     +     +); + +export default Navbars; \ No newline at end of file diff --git a/app/routes/Interface/Navbars/index.js b/app/routes/Interface/Navbars/index.js new file mode 100755 index 0000000..3243d17 --- /dev/null +++ b/app/routes/Interface/Navbars/index.js @@ -0,0 +1,3 @@ +import Navbars from './Navbars'; + +export default Navbars; \ No newline at end of file diff --git a/app/routes/Interface/Notifications/Notifications.js b/app/routes/Interface/Notifications/Notifications.js new file mode 100755 index 0000000..7969a40 --- /dev/null +++ b/app/routes/Interface/Notifications/Notifications.js @@ -0,0 +1,266 @@ +import React from 'react'; +import { ToastContainer, toast } from 'react-toastify'; +import faker from 'faker/locale/en_US'; +import _ from 'lodash'; + +import { + Container, + Row, + Button, + CardBody, + Col, + CardHeader, + Card, + CardFooter, + Media, + FormGroup, + CustomInput +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; + +const positions = [ + { label: 'top-left', value: 'top-left' }, + { label: 'top-right', value: 'top-right' }, + { label: 'top-center', value: 'top-center' }, + { label: 'bottom-left', value: 'bottom-left' }, + { label: 'bottom-right', value: 'bottom-right' }, + { label: 'bottom-center', value: 'bottom-center' }, +]; + +const types = [ + { label: 'info', value: 'info' }, + { label: 'success', value: 'success' }, + { label: 'warning', value: 'warning' }, + { label: 'error', value: 'error' }, + { label: 'default', value: 'default' }, +]; + +const initialState = { + position: 'top-right', + type: 'default' +} + +// ========== Toast Contents: ============ +// eslint-disable-next-line react/prop-types +const contentSuccess = ({ closeToast }) => ( + + + + + + + Success! + +

    + You successfully read this important alert message. +

    +
    + + +
    +     +     +); +// eslint-disable-next-line react/prop-types +const contentError = ({ closeToast }) => ( + + + + + + + Danger! + +

    + Change a few things up and try submitting. +

    +
    + + +
    +     +     +); +// eslint-disable-next-line react/prop-types +const contentInfo = ({ closeToast }) => ( + + + + + + + Information! + +

    + This alert needs your attention, but it's not important. +

    +
    + + +
    +     +     +); +// eslint-disable-next-line react/prop-types +const contentWarning = ({ closeToast }) => ( + + + + + + + Warning! + +

    + Better check yourself, you're not looking too good. +

    +
    + + +
    +     +     +); +// eslint-disable-next-line react/prop-types +const contentDefault = ({ closeToast }) => ( + + + + + + + Attention! + +

    + This alert needs your attention, but it's not important. +

    +
    + + +
    +     +     +); + +// ========== Component: ============ +export class Notifications extends React.Component { + state = _.clone(initialState); + + render() { + return ( + + +

    + React-Toastify allow you to add notification to your app with ease.
    + Specially written CSS are available in: /app/styles/plugins/_react-toastify.scss +

    + + +
    + +
    Position
    + { + _.map(positions, (position) => ( + { this.setState({position: position.value}) } } + type="radio" + key={`pos-${position.value}`} + id={`pos-${position.value}`} + /> + )) + } +     + +
    Type
    + { + _.map(types, (type) => ( + { this.setState({type: type.value}) } } + type="radio" + key={`pos-${type.value}`} + id={`pos-${type.value}`} + /> + )) + } +     +
    +
    + + + +
    +     +     + + +     + ); + } + + _showHandler = () => { + switch(this.state.type) { + case 'info': + toast.info(contentInfo); + break; + case 'success': + toast.success(contentSuccess); + break; + case 'warning': + toast.warning(contentWarning); + break; + case 'error': + toast.error(contentError); + break; + default: + toast(contentDefault); + break; + } + } + + _clearHandler = () => { + toast.dismiss(); + } + + _resetHandler = () => { + this.setState(initialState); + } +} diff --git a/app/routes/Interface/Notifications/index.js b/app/routes/Interface/Notifications/index.js new file mode 100755 index 0000000..d737351 --- /dev/null +++ b/app/routes/Interface/Notifications/index.js @@ -0,0 +1,3 @@ +import { Notifications } from './Notifications'; + +export default Notifications; diff --git a/app/routes/Interface/Paginations/Paginations.js b/app/routes/Interface/Paginations/Paginations.js new file mode 100755 index 0000000..2434fa1 --- /dev/null +++ b/app/routes/Interface/Paginations/Paginations.js @@ -0,0 +1,572 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Card, + CardTitle, + CardBody, + Pagination, + PaginationItem, + PaginationLink +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const Paginations = () => ( + + + + { /* START Header 1 */} + + + + Documentation and examples for showing pagination to + indicate a series of related content exists across m + ultiple pages. + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + + + + + Pagination: Basic Example + + #1.01 + + +

    + Default example +

    + + + Previous + + + + 1 + + + + + 2 + + + + + 3 + + + + Next + + +     +     + + + + + + Pagination: Disabled State + + #1.02 + + +

    + Disabled example +

    + + + Previous + + + + 1 + + + + + 2 + + + + + 3 + + + + Next + + +     +     + + + + + + Pagination: Active State + + #1.03 + + +

    + Active example +

    + + + Previous + + + + 1 + + + + + 2 + + + + + 3 + + + + Next + + +     +     + +     + { /* END Section 1 */} + { /* START Header 2 */} + + + + Looking to use an icon or symbol in place of text for some pagination links? + Be sure to provide proper screen reader support with aria attributes and + the .sr-only utility. + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + + + + + Pagination: Icons + + #2.01 + + +

    + Icons example +

    + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + + +     +     + + + + Pagination: Icons + + #2.02 + + +

    + Icons example +

    + + + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + + +     +     + + + + + + Pagination: Icons + + #2.03 + + +

    + Icons example +

    + + + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + + + + +     +     + + + + Pagination: Icons + + #2.04 + + +

    + Icons example +

    + + + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + + + + +     +     + + + + + + Pagination: Icons + + #2.05 + + +

    + Icons example +

    + + + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + + + + +     +     + + + + Pagination: Icons + + #2.05 + + +

    + Icons example +

    + + + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + + +     +     + + +     + { /* END Section 2 */} + { /* START Header 3 */} + + + + Fancy larger or smaller pagination? + Add .pagination-lg or .pagination-sm + for additional sizes. + + )} + /> + + + { /* END Header 3 */} + { /* START Section 3 */} + + + + + + Pagination: Large + + #3.01 + + +

    + Large example +

    + + + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + + + + +     +     + + + + + + Pagination: Default + + #3.02 + + +

    + Default example +

    + + + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + + + + +     +     + + + + + + Pagination: Small + + #3.03 + + +

    + Small example +

    + + + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + + + + +     +     + +     + { /* END Section 3 */} + + +); + +export default Paginations; \ No newline at end of file diff --git a/app/routes/Interface/Paginations/index.js b/app/routes/Interface/Paginations/index.js new file mode 100755 index 0000000..107672f --- /dev/null +++ b/app/routes/Interface/Paginations/index.js @@ -0,0 +1,3 @@ +import Paginations from './Paginations'; + +export default Paginations; \ No newline at end of file diff --git a/app/routes/Interface/ProgressBars/ProgressBars.js b/app/routes/Interface/ProgressBars/ProgressBars.js new file mode 100755 index 0000000..3c1e4c4 --- /dev/null +++ b/app/routes/Interface/ProgressBars/ProgressBars.js @@ -0,0 +1,548 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Card, + CardTitle, + CardBody, + Progress, +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const ProgressBars = () => ( + + + + { /* START Header 1 */} + + + + Basic button layout options. + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + { /* START Col4 1 */} + + + + + Progress Bars: Primary + + #1.01 + + +

    + Default progress styling. Use + <Progress value={'{'}2 * 5{'}'}/> +

    + +     +     + + + + Progress Bars: Success + + #1.02 + + +

    + Color progress styling. Use + <Progress color="success" value={'{'}50{'}'}/> +

    + +     +     + + + + Progress Bars: Info + + #1.03 + + +

    + Color progress styling. Use + <Progress color="info" value={'{'}60{'}'}/> +

    + +     +     + + { /* END Col4 1 */} + { /* START Col4 2 */} + + + + + Progress Bars: Warning + + #1.04 + + +

    + Color progress styling. Use + <Progress color="warning" value={'{'}70{'}'}/> +

    + +     +     + + + + Progress Bars: Danger + + #1.05 + + +

    + Color progress styling. Use + <Progress color="danger" value={'{'}80{'}'}/> +

    + +     +     + + + + Progress Bars: Dark + + #1.06 + + +

    + Color progress styling. Use + <Progress color="dark" value={'{'}20{'}'}/> +

    + +     +     + + { /* END Col4 2 */} + { /* START Col4 3 */} + + + + + Progress Bars: Secondary + + #1.06 + + +

    + Color progress styling. Use + <Progress color="secondary" value={'{'}30{'}'}/> +

    + +     +     + + + + Progress Bars: Custom Color + + #1.06 + + +

    + Color progress styling. Use + <Progress color="purple" value={'{'}40{'}'}/> +

    + +     +     + + + + Progress Bars: Social Colors + + #1.06 + + +

    + Color progress styling. Use + <Progress color="facebook" value={'{'}60{'}'}/> +

    + +     +     + + { /* END Col4 3 */} +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + Basic button layout options. + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + { /* START Col4 1 */} + + + + + Progress Bars: Default + + #2.01 + + +

    + Default progress styling. Use + <Progress value={'{'}3 * 5{'}'}/> +

    + +     +     + + + + Progress Bars: 5px + + #2.02 + + +

    + Color progress styling. Use + <Progress value={'{'}50{'}'} style={'{'}{'{'}height: "5px"{'}'}{'}'}/> +

    + +     +     + + { /* END Col4 1 */} + { /* START Col4 2 */} + + + + + Progress Bars: 3px + + #2.03 + + +

    + Color progress styling. Use + <Progress value={'{'}60{'}'} style={'{'}{'{'}height: "3px"{'}'}{'}'}/> +

    + +     +     + + + + Progress Bars: 1px + + #2.04 + + +

    + Color progress styling. Use + <Progress value={'{'}30{'}'} style={'{'}{'{'}height: "1px"{'}'}{'}'}/> +

    + +     +     + + + { /* END Col4 2 */} + { /* START Col4 3 */} + + + + + Progress Bars: 4px + + #2.05 + + +

    + Color progress styling. Use + <Progress value={'{'}70{'}'} style={'{'}{'{'}height: "4px"{'}'}{'}'}/> +

    + +     +     + + + + Progress Bars: 2px + + #2.06 + + +

    + Color progress styling. Use + <Progress value={'{'}40{'}'} style={'{'}{'{'}height: "2px"{'}'}{'}'}/> +

    + +     +     + + { /* END Col4 3 */} +     + { /* END Section 2 */} + + { /* START Header 3 */} + + + + Basic button layout options. + + )} + /> + + + { /* END Header 3 */} + { /* START Section 3 */} + + { /* START Col4 1 */} + + + + + Progress Bars: Label + + #3.01 + + +

    + Custom progress styling. Use + <Progress value={'{'}25{'}'}>25%<Progress> +

    + 25% +     +     + + + + Progress Bars: Label Icon + + #3.02 + + +

    + Custom progress styling. Use + <Progress value={'{'}25{'}'}><i className="fa fa-twitter"></i><Progress> +

    + + + +     +     + + + + Progress Bars: Multiple Bars + + #3.03 + + +

    + Custom progress styling. Use + <Progress multi ><Progress bar value="15" /></Progress> + +

    + + + + + +     +     + + { /* END Col4 1 */} + { /* START Col4 2 */} + + + + + Progress Bars: Striped + + #3.04 + + +

    + Custom progress styling. Use <Progress striped value={'{'}45{'}'} /> +

    + +     +     + + + + Progress Bars: Animated Striped + + #3.05 + + +

    + Custom progress styling. Use <Progress animated striped value={'{'}45{'}'} /> +

    + +     +     + + + + Progress Bars: Square Rounds + + #3.06 + + +

    + Custom progress styling. Use <Progress value={'{'}25{'}'} /> +

    + +     +     + + { /* END Col4 2 */} + { /* START Col4 3 */} + + + + + Progress Bars: Full Rounds + + #3.07 + + +

    + Custom progress styling. Use <Progress value={'{'}15{'}'} /> +

    + +     +     + + { /* END Col4 3 */} +     + { /* END Section 3 */} + + { /* START Header 4 */} + + + + Below are often used UI cases in applications. + + )} + /> + + + { /* END Header 4 */} + { /* START Section 4 */} + + { /* START Col4 1 */} + + + + + Progress Bars: Details Below + + #4.01 + + +

    + A combined example that is often used in UI/UX. +

    + 25% +
    +

    Your Computer:

    +

    + 6GB/12GB +

    +
    +     +     + + { /* END Col4 1 */} + { /* START Col4 2 */} + + + + + Progress Bars: Details Above + + #4.02 + + +

    + A combined example that is often used in UI/UX. +

    +
    +

    Your Disk:

    +

    + 4125GB +

    +
    + 95% +     +     + + { /* END Col4 2 */} + { /* START Col4 3 */} + + + + + Progress Bars: Details Inline + + #4.03 + + +

    + A combined example that is often used in UI/UX. +

    +
    + HDD + 55% + 34GB +
    +     +     + + { /* END Col4 3 */} +     + { /* END Section 4 */} + + +); + +export default ProgressBars; diff --git a/app/routes/Interface/ProgressBars/index.js b/app/routes/Interface/ProgressBars/index.js new file mode 100755 index 0000000..4e9da40 --- /dev/null +++ b/app/routes/Interface/ProgressBars/index.js @@ -0,0 +1,3 @@ +import ProgressBars from './ProgressBars'; + +export default ProgressBars; \ No newline at end of file diff --git a/app/routes/Interface/TabsPills/TabsPills.js b/app/routes/Interface/TabsPills/TabsPills.js new file mode 100755 index 0000000..f5cc526 --- /dev/null +++ b/app/routes/Interface/TabsPills/TabsPills.js @@ -0,0 +1,1556 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Card, + CardTitle, + CardBody, + Nav, + NavItem, + NavLink, + Badge, +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const TabsPills = () => ( + + + + { /* START Header 1 */} + + + + Default, bordered, toolbar layouts + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + { /* START Col6 1 */} + + + + + Pills: Default + + #1.01 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + { /* END Col6 1 */} + { /* START Col6 2 */} + + + + + Pills: Fill & Justify + + #1.02 + + +

    + Easily make pills equal widths of their + parent with .nav-justified class. +

    + +     +     + + { /* END Col6 2 */} +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + Default, bordered, toolbar layouts + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + { /* START Col6 1 */} + + + + + Pills: Center + + #2.01 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Pills: Right + + #2.02 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Pills: Columns + + #2.03 + + +

    + Pills are also vertically stackable. + Just add vertical to the Nav. +

    + +     +     + + + + Pills: Columns Left Badges + + #2.04 + + +

    + Pills are also vertically stackable. + Just add vertical to the Nav. +

    + +     +     + + + + Pills: Columns Left & Right Badges + + #2.05 + + +

    + Pills are also vertically stackable. + Just add vertical to the Nav. +

    + +     +     + + + + Pills: Columns Left Icon + + #2.06 + + +

    + Pills are also vertically stackable. + Just add vertical to the Nav. +

    + +     +     + + { /* END Col6 1 */} + { /* START Col6 2 */} + + + + + Pills: Columns Right Icon + + #2.07 + + +

    + Pills are also vertically stackable. + Just add vertical to the Nav. +

    + +     +     + + + + Pills: Columns Left & Right Icons + + #2.08 + + +

    + Pills are also vertically stackable. + Just add vertical to the Nav. +

    + +     +     + + + + Pills: Columns Right Pills + + #2.09 + + +

    + Pills are also vertically stackable. + Just add vertical to the Nav. +

    + +     +     + + + + Pills: Columns Right Badges + + #2.10 + + +

    + Pills are also vertically stackable. + Just add vertical to the Nav. +

    + +     +     + + + { /* END Col6 2 */} +     + { /* END Section 2 */} + + { /* START Header 3 */} + + + + Default, bordered, toolbar layouts + + )} + /> + + + { /* END Header 3 */} + { /* START Section 3 */} + + + + + + Pills: Left Icons + + #3.01 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Pills: Right Icons + + #3.02 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Pills: Only Icons + + #3.03 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Pills: Justify Left Icon + + #3.04 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Pills: Justify Right Icon + + #3.05 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Pills: Justify Only Icon + + #3.06 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Pills: Justify Right Pills + + #3.07 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + + + Pills: Justify Left Pills + + #3.08 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Pills: Left Pills + + #3.09 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Pills: Left Pills + + #3.10 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Pills: Justify Left Badges + + #3.11 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Pills: Justify Right Badges + + #3.12 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Pills: Right Badges + + #3.13 + + +

    + Basic pills example using <Nav pills> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + +     + { /* END Section 3 */} + + { /* START Header 4 */} + + + + Default, bordered, toolbar layouts + + )} + /> + + + { /* END Header 4 */} + { /* START Section 4 */} + + + + + + Tabs: Default + + #4.01 + + +

    + Basic tabs example using <Nav tabs> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + + + Tabs: Justify + + #4.02 + + +

    + Easily make tabs equal widths of their parent with .nav-justified class. +

    + +     +     + +     + { /* END Section 4 */} + + { /* START Header 5 */} + + + + Default, bordered, toolbar layouts + + )} + /> + + + { /* END Header 5 */} + { /* START Section 4 */} + + + + + + Pills: Center + + #5.01 + + +

    + Basic tabs example using <Nav tabs> class. + Also requires base <NavItem> and + <NavLink> class. +

    +
    + +
    +     +     + + + + Tabs: Right + + #5.02 + + +

    + Basic tabs example using <Nav tabs> class. + Also requires base <NavItem> and + <NavLink> class. +

    +
    + +
    +     +     + + + + Tabs: Left Icons + + #5.03 + + +

    + Basic tabs example using <Nav tabs> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Tabs: Right Icons + + #5.04 + + +

    + Basic tabs example using <Nav tabs> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Tabs: Only Icons + + #5.05 + + +

    + Basic tabs example using <Nav tabs> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Tabs: Big Icons + + #5.06 + + +

    + Basic tabs example using <Nav tabs> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + + + Tabs: Right Pills + + #5.07 + + +

    + Basic tabs example using <Nav tabs> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Tabs: Only Pills + + #5.08 + + +

    + Basic tabs example using <Nav tabs> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Tabs: Left Pills + + #5.09 + + +

    + Basic tabs example using <Nav tabs> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Tabs: Right Badges + + #5.10 + + +

    + Basic tabs example using <Nav tabs> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Tabs: Left Badges + + #5.11 + + +

    + Basic tabs example using <Nav tabs> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + + + + Tabs: Only Badges + + #5.12 + + +

    + Basic tabs example using <Nav tabs> class. + Also requires base <NavItem> and + <NavLink> class. +

    + +     +     + +     + { /* END Section 3 */} + + +); + +export default TabsPills; \ No newline at end of file diff --git a/app/routes/Interface/TabsPills/index.js b/app/routes/Interface/TabsPills/index.js new file mode 100755 index 0000000..02fc147 --- /dev/null +++ b/app/routes/Interface/TabsPills/index.js @@ -0,0 +1,3 @@ +import TabsPills from './TabsPills'; + +export default TabsPills; \ No newline at end of file diff --git a/app/routes/Interface/TooltipsPopovers/TooltipsPopovers.js b/app/routes/Interface/TooltipsPopovers/TooltipsPopovers.js new file mode 100755 index 0000000..868e3d8 --- /dev/null +++ b/app/routes/Interface/TooltipsPopovers/TooltipsPopovers.js @@ -0,0 +1,284 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Container, + Row, + Col, + Button, + Card, + CardTitle, + CardBody, + CardText, + UncontrolledTooltip, + UncontrolledPopover, + PopoverHeader, + PopoverBody +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const TooltipsPopovers = () => ( + + + + { /* START Header 1 */} + + + + A rendered modal with header, body, and set of actions in the footer. + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + + + + + Tight pants next level keffiyeh you probably haven't heard of them. + Photo booth beard raw denim letterpress vegan messenger bag stumptown. + Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american + apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans + banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko + mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, + scenester farm-to-table banksy Austin twitter handle freegan cred raw denim + single-origin coffee viral. + + + + + Default Tooltip + + + Another Tooltip + + + Another one here too + + + The last tip! + + + + { /* END Section 1 */} + { /* START Header 2 */} + + + + Four options are available: top, right, bottom, and left aligned. + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + + + + + Tooltip: Top + + #2.01 + + + + + Tooltip Top + + + + + + + + + Tooltip: Right + + #2.02 + + + + + Tooltip Right + + + + + + + + + Tooltip: Bottom + + #2.03 + + + + + Tooltip Bottom + + + + + + + + + Tooltip: Left + + #2.03 + + + + + Tooltip Left + + + + + + { /* END Section 2 */} + { /* START Header 3 */} + + + + Four options are available: top, right, bottom, and left aligned. + + )} + /> + + + { /* END Header 3 */} + { /* START Section 3 */} + + + + + + Popover: Top + + #3.01 + + + + + + Top Popover + + + { faker.lorem.paragraph() } + + + + + + + + + + Popover: Right + + #3.02 + + + + + + Right Popover + + + { faker.lorem.paragraph() } + + + + + + + + + + Popover: Bottom + + #3.03 + + + + + + Bottom Popover + + + { faker.lorem.paragraph() } + + + + + + + + + + Popover: Left + + #3.03 + + + + + + Left Popover + + + { faker.lorem.paragraph() } + + + + + + + { /* END Section 3 */} + + +); + +export default TooltipsPopovers; \ No newline at end of file diff --git a/app/routes/Interface/TooltipsPopovers/index.js b/app/routes/Interface/TooltipsPopovers/index.js new file mode 100755 index 0000000..d746a13 --- /dev/null +++ b/app/routes/Interface/TooltipsPopovers/index.js @@ -0,0 +1,3 @@ +import TooltipsPopovers from './TooltipsPopovers'; + +export default TooltipsPopovers; \ No newline at end of file diff --git a/app/routes/Interface/Typography/Typography.js b/app/routes/Interface/Typography/Typography.js new file mode 100755 index 0000000..490ce60 --- /dev/null +++ b/app/routes/Interface/Typography/Typography.js @@ -0,0 +1,962 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Card, + CardTitle, + CardBody +} from './../../../components'; +import { HeaderMain } from "../../components/HeaderMain"; +import { HeaderDemo } from "../../components/HeaderDemo"; + +const Typography = () => ( + + + + { /* START Header 1 */} + + + + Convey meaning through color with a + handful of color utility classes. + Includes support for styling links + with hover states, too. + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + { /* START Col4 1 */} + + + + + Defaults Colors + + #1.01 + + +

    + Use any of these color variables as they + are or reassign them to more meaningful + variables for your project. +

    +
    +

    This is an example for .text-secondary +

    +

    + This is an example for .text-success +

    +

    + This is an example for .text-danger +

    +

    + This is an example for .text-warning +

    +

    + This is an example for .text-info +

    + +

    + This is an example for .text-body +

    +

    + This is an example for .text-muted +

    +

    + This is an example for .text-dark +

    +

    + This is an example for .text-black-50 +

    +

    + This is an example for .text-white +

    +

    + This is an example for .text-light +

    +

    + This is an example for .text-white-50 +

    +
    +     +     + + + + Social Colors + + #1.03 + + +

    + Colors are often used for social media. +

    +
    +

    + + This is an example for .text-facebook +

    +

    + + This is an example for .text-twitter +

    +

    + + This is an example for .text-lastfm +

    +

    + + This is an example for .text-pinterest +

    +

    + + This is an example for .text-linkedin +

    +

    + + This is an example for .text-medium +

    +

    + + This is an example for .text-skype +

    +

    + + This is an example for .text-foursquare +

    +

    + + This is an example for + .text-android +

    +

    + + This is an example for .text-spotify +

    +

    + + This is an example for .text-youtube +

    +

    + + This is an example for .text-windows +

    +

    + + This is an example for .text-amazon +

    +
    +     +     + + { /* END Col4 1 */} + { /* START Col4 2 */} + + + + + Grays + + #1.02 + + +

    + Grayscale colors provide quick access to + commonly used shades of black while semantic + include various colors assigned to meaningful + contextual values. +

    +
    +

    + This is an example for .text-gray-100 +

    +

    + This is an example for .text-gray-200 +

    +

    + This is an example for .text-gray-300 +

    +

    + This is an example for .text-gray-400 +

    +

    + This is an example for + .text-gray-500 +

    +

    + This is an example for .text-gray-600 +

    +

    + This is an example for .text-gray-700 +

    +

    + This is an example for .text-gray-800 +

    +

    + This is an example for .text-gray-900 +

    +
    +     +     + + + + Social Colors + + #1.03 + + +

    + Colors are often used for social media. +

    +
    +

    + This is an example Primary Link +

    +

    + This is an example Secondary Link +

    +

    + This is an example Success Link +

    +

    + This is an example Danger Link +

    +

    + This is an example Warning Link +

    +

    + This is an example Info Link +

    +

    + This is an example Dark Link +

    +

    + Light Link +

    +
    +     +     + + { /* END Col4 2 */} +     + { /* END Section 1 */} + + { /* START Header 2 */} + + + + All HTML headings, <h1> + through <h6>, are available. + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + + + + + Header: Light + + #2.01 + + +

    + Just add class/helper .fw-300 to <h1> + - <h6>. +

    +
    +

    + h1. Light Heading +

    +

    + h2. Light Heading +

    +

    + h3. Light Heading +

    +

    + h4. Light Heading +

    +
    + h5. Light Heading +
    +
    + h6. Light Heading +
    +
    +     +     + + + + Header: Displays + + #2.05 + + +

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

    +
    +

    Display 1

    +

    Display 2

    +

    Display 3

    +

    Display 4

    +
    +     +     + + + + + + Header: Regular + + #2.02 + + +

    + In the case of Regular is from set as default in .scss. +

    +
    +

    + h1. Regular Heading +

    +

    + h2. Regular Heading +

    +

    + h3. Regular Heading +

    +

    + h4. Regular Heading +

    +
    + h5. Regular Heading +
    +
    + h6. Regular Heading +
    +
    +     +     + + + + Header: Customizing + + #2.04 + + +

    + Use the included utility classes to recreate the small secondary + heading text from Bootstrap 4 +

    +
    +

    + h1. Custom + + with Small Text + +

    +

    + h2. Custom + + with Small Text + +

    +

    + h3. Custom + + with Small Text + +

    +

    + h4. Custom + + with Small Text + +

    +
    + h5. Custom + + with Small Text + +
    +
    + h6. Custom + + with Small Text + +
    +
    +     +     + + +     + { /* END Section 2 */} + + { /* START Header 3 */} + + + + + + { /* END Header 3 */} + { /* START Section 3 */} + + + + + + Text: Justify + + #3.01 + + +

    + Just add class .text-justify. +

    +

    + Ambitioni dedisse scripsisse iudicaretur. + Cras mattis iudicium purus sit amet fermentum. + Donec sed odio operae, eu vulputate felis rhoncus. + Praeterea iter est quasdam res quas ex communi. + At nos hinc posthac, sitientis piros Afros. + Petierunt uti sibi concilium totius Galliae in diem certam indicere. + Cras mattis iudicium purus sit amet fermentum. +

    +     +     + + + + Text: No Wrap + + #3.01 + + +

    + Prevent text from wrapping with a .text-nowrap class. +

    +
    + This text should overflow the parent. +
    +     +     + + + + Text: Transform + + #2.05 + + +

    + Transform text in components with text capitalization classes. +

    +

    + Lowercased text. +

    +

    + Uppercased text. +

    +

    + CapiTaliZed text. +

    +     +     + + + + Text: Monospace + + #2.07 + + +

    + Change a selection to our monospace font stack with .text-monospace. +

    +

    + This is in monospace +

    +     +     + + + + Text: Inline Text Elements + + #2.09 + + +

    + Styling for common inline HTML5 elements. +

    +

    You can use the mark tag to highlight text.

    +

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

    +

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

    +

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

    +

    This line of text will render as underlined

    +

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

    +

    This line rendered as bold text.

    +

    This line rendered as italicized text.

    +     +     + + + + + + Text: Alignment + + #3.02 + + +

    + Add class .text-left, + .text-center or + .text-right. +

    +
    +

    + Left aligned text on all viewport sizes. +

    +

    + Center aligned text on all viewport sizes. +

    +

    + Right aligned text on all viewport sizes. +

    +
    +     +     + + + + Text: Truncate + + #2.04 + + +

    + For longer content, you can add a .text-truncate + class to truncate the text with an ellipsis. Requires display: + inline-block or display: block. +

    +
    +
    + Praeterea iter est quasdam res quas ex communi. +
    +
    + + Praeterea iter est quasdam res quas ex communi. + +     +     + + + + Text: Transform + + #3.06 + + +
    +

    + Quickly change the weight (boldness) of text or italicize text. +

    +

    + Bold text. +

    +

    + Normal weight text. +

    +

    + Light weight text. +

    +

    + Italic text. +

    +
    +     +     + + + + Text: Lead + + #3.08 + + +

    + Make a paragraph stand out by adding .lead. +

    +

    + Vivamus sagittis lacus vel augue laoreet rutrum + faucibus dolor auctor. Duis mollis, est non commodo luctus. +

    +     +     + + + + Text: Abbreviations + + #3.10 + + +

    + Add .initialism to an abbreviation for a slightly smaller font-size. +

    +

    attr

    +

    HTML

    +     +     + +     + { /* END Section 3 */} + + { /* START Header 4 */} + + + + + + { /* END Header 4 */} + { /* START Section 4 */} + + + + + + Blackquote: Default + + #4.01 + + +

    + Wrap <blockquote className="blockquote" /> around any HTML as the quote. +

    +
    +

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

    +
    +     +     + + + + Blackquote: Alignment Center + + #4.03 + + +

    + Use text utilities as needed to change the alignment of your blockquote. +

    +
    +

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

    +
    + Someone famous in Source Title +
    +
    +     +     + + + + + + Blackquote: Naming a Source + + #4.02 + + +

    + Add a <footer className="blockquote-footer"> + for identifying the source. Wrap the name of the source work in cite. +

    +
    +

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

    +
    + Someone famous in Source Title +
    +
    +     +     + + + + Blackquote: Alignment Right + + #4.04 + + +

    + Use text utilities as needed to change the alignment of your blockquote. +

    +
    +

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

    +
    + Someone famous in Source Title +
    +
    +     +     + +     + { /* END Section 4 */} + { /* START Header 5 */} + + + + + + { /* END Header 5 */} + { /* START Section 5 */} + + + + + + Lists: Unstyled + + #5.01 + + +

    + Remove the default .list-style and left margin on list items. +

    +
      +
    • Lorem ipsum dolor sit amet
      • +
    • Consectetur adipiscing elit
      • +
    • Integer molestie lorem at massa
      • +
    • Facilisis in pretium nisl aliquet
      • +
    • Nulla volutpat aliquam velit +
        +
      • Phasellus iaculis neque
        • +
      • Purus sodales ultricies
        • +
      • Vestibulum laoreet porttitor sem
        • +
      • Ac tristique libero volutpat at
        • +
      +
      • +
    • Faucibus porta lacus fringilla vel
      • +
    • Aenean sit amet erat nunc
      • +
    • Eget porttitor lorem
      • +
    +     +     + + + + + + Lists: Inline + + #5.02 + + +

    + Remove a list’s bullets and apply some light margin + with a combination of two classes, .list-inline and + .list-inline-item. +

    +
      +
    • Lorem ipsum
      • +
    • Phasellus iaculis
      • +
    • Nulla volutpat
      • +
    +     +     + + + + + + Lists: Description List Alignment + + #5.03 + + +

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

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

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

    +

    Donec id elit non mi porta gravida at eget metus.

    +
    +
    Malesuada porta
    +
    Etiam porta sem malesuada magna mollis euismod.
    +
    Truncated term is truncated
    +
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    +
    Nesting
    +
    +
    +
    Nested definition list
    +
    Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
    +
    +
    +
    +     +     + +     + { /* END Section 5 */} + { /* START Header 6 */} + + + + + + { /* END Header 6 */} + { /* START Section 6 */} + + + + + + Code: Inline Code + + #6.01 + + +

    + Wrap inline snippets of code with <code>. + Be sure to escape HTML angle brackets. +

    +     +     + + + + Code: Variables + + #6.03 + + +

    + For indicating variables use the <var> tag. +

    + y = mx + b +     +     + + + + Code: User Input + + #6.04 + + +

    + Use the <kbd> to indicate input that is typically entered via keyboard. +

    + To switch directories, type cd followed by the name of + the directory.
    + To edit settings, press ctrl + , +     +     + + + + + + Code: Sample Output + + #6.05 + + +

    + For indicating sample output from a program use the <samp> tag. +

    + This text is meant to be treated as sample output from a computer program. +     +     + + + + Code: Code Blocks + + #6.02 + + +

    + Use <pre>s for multiple lines of code. Once again, be sure to + escape any angle brackets in the code for proper rendering. + You may optionally add the .pre-scrollable class, \ + which will set a max-height of 340px and provide a y-axis scrollbar. +

    + <p>Sample text here...</p> + <p>And another line of sample text here...</p> + +     +     + +     + { /* END Section 6 */} + + +); + +export default Typography; diff --git a/app/routes/Interface/Typography/index.js b/app/routes/Interface/Typography/index.js new file mode 100755 index 0000000..f013eeb --- /dev/null +++ b/app/routes/Interface/Typography/index.js @@ -0,0 +1,3 @@ +import Typography from './Typography'; + +export default Typography; \ No newline at end of file diff --git a/app/routes/Layouts/DragAndDropLayout/DragAndDropLayout.js b/app/routes/Layouts/DragAndDropLayout/DragAndDropLayout.js new file mode 100755 index 0000000..42cbdae --- /dev/null +++ b/app/routes/Layouts/DragAndDropLayout/DragAndDropLayout.js @@ -0,0 +1,200 @@ +import React from 'react'; +import v4 from 'uuid/v4'; +import _ from 'lodash'; +import faker from 'faker/locale/en_US'; + +import { + Container, + FloatGrid as Grid, + Button, + Card, + CardHeader, + CardBody, + UncontrolledDropdown, + DropdownMenu, + DropdownToggle, + DropdownItem +} from './../../../components'; +import { applyColumn } from './../../../components/FloatGrid'; +import { + HeaderMain +} from './../../components/HeaderMain'; + +export class DragAndDropLayout extends React.Component { + constructor(props) { + super(props); + + this._lastLayout = this._generateLayout(); + + this.state = { + layouts: this._lastLayout, + compactType: 'vertical', + fluid: false, + texts: this._generateTexts(this._lastLayout) + } + + this.generateLayoutHandler = this.generateLayoutHandler.bind(this); + this.resetLayoutHandler = this.resetLayoutHandler.bind(this); + } + + generateLayoutHandler() { + this._lastLayout = this._generateLayout(); + + this.setState({ + layouts: this._lastLayout, + texts: this._generateTexts(this._lastLayout) + }); + } + + resetLayoutHandler() { + this.setState({ + layouts: this._lastLayout + }); + } + + selectCompactType(compactType) { + this.setState({ compactType }); + } + + selectFluid(fluid) { + this.setState({ fluid }); + } + + render() { + const { compactType, fluid, texts } = this.state; + + return ( + + + +

    + React-Grid Layout is a grid layout system much like Packery or Gridster for React. Unlike those systems, it is responsive and supports breakpoints. These breakpoints can be provided in the same way as in Reactstrap's Grid system. +

    +
    + + + + + Change Compaction Type:  + + { !compactType && "No Compactions" } + { compactType === "vertical" && "Vertical" } + { compactType === "horizontal" && "Horizontal" } + + + + + this.selectCompactType(null)} + > + No Compactions + + this.selectCompactType("vertical")} + > + Vertical + + this.selectCompactType("horizontal")} + > + Horizontal + + + + + + + Layout:  + + { !fluid && "Container" } + { fluid && "Fluid" } + + + + + this.selectFluid(false)} + > + Container + + this.selectFluid(true)} + > + Fluid + + + + + +
    +     + + this.setState({ layouts }) } + columnSizes={ this.state.layouts } + rowHeight={ 55 } + > + { + _.chain(this.state.layouts) + .keys() + .map((layoutKey) => ( + + + + { texts[layoutKey].title } + + + { texts[layoutKey].desc } + + + + )) + .value() + } + + +     + ); + } + + _generateLayout = (rowsCount = 3) => { + const TOTAL_ROWS = 12; + const HEIGHT = 5; + let output = {}; + + for (let i = 0; i < rowsCount; i++) { + let availableRow = TOTAL_ROWS; + while (availableRow > 0) { + const newCol = availableRow < TOTAL_ROWS ? availableRow : + _.random(3, 9); + + availableRow -= newCol; + output = { + ...output, + [v4()]: { md: newCol, h: HEIGHT } + } + } + } + + return output; + } + + _generateTexts = (layouts) => + _.mapValues(layouts, () => ({ + title: faker.commerce.productName(), + desc: faker.lorem.paragraph() + })) +} \ No newline at end of file diff --git a/app/routes/Layouts/DragAndDropLayout/index.js b/app/routes/Layouts/DragAndDropLayout/index.js new file mode 100755 index 0000000..8c23ee9 --- /dev/null +++ b/app/routes/Layouts/DragAndDropLayout/index.js @@ -0,0 +1,3 @@ +import { DragAndDropLayout } from './DragAndDropLayout'; + +export default DragAndDropLayout; diff --git a/app/routes/Layouts/NavbarOnly/NavbarOnly.js b/app/routes/Layouts/NavbarOnly/NavbarOnly.js new file mode 100755 index 0000000..c93db93 --- /dev/null +++ b/app/routes/Layouts/NavbarOnly/NavbarOnly.js @@ -0,0 +1,123 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Link } from 'react-router-dom'; +import { withPageConfig } from + './../../../components/Layout/withPageConfig'; +import { + Container, +} from './../../../components'; + +class NavbarOnly extends React.Component { + static propTypes = { + pageConfig: PropTypes.object + }; + + componentDidMount() { + const { pageConfig } = this.props; + + pageConfig.setElementsVisibility({ + sidebarHidden: true + }); + } + + componentWillUnmount() { + const { pageConfig } = this.props; + + pageConfig.setElementsVisibility({ + sidebarHidden: false + }); + } + + render() { + return ( + +

    + Welcome to the "Airframe" Admin Dashboard Theme based on Bootstrap 4.x version for React called  + reactstrap - easy to use React Bootstrap 4 components compatible with React 16+. +

    + +
    +
    + Layouts for this framework: +
    +
      +
    • + Navbar +
      • +
    • + Sidebar +
      • +
    • + Sidebar with Navbar +
      • +
    +
    + +
    +
    + This Starter has: +
    +
      +
    • + Documentation - which describes how to configure this version. +
      • +
    • + Credits - technical details of which versions are used for this framework. +
      • +
    • + Roadmap - update for this technology for the coming months. +
      • +
    • + Bugs - do you see errors in this version? Please report vie email: info@webkom.co +
      • +
    +
    + +
    +
    + Other versions for "Airframe": +
    +
      +
    • + jQuery - based on the newest Bootstrap 4.x +
      • +
    • + React - based on the newest Reactstrap +
      • +
    • + Next.js (React) - based on the newest Reactstrap and Next.js +
      • +
    • + Angular - based on the newest ng-bootstrap +
      • +
    • + .NET MVC - based on the newest Bootstrap 4.x +
      • +
    • + Vue.js - based on the newest BootstrapVue +
      • +
    • + Other Versions, such as Ruby on Rails, Ember, Laravel etc., please ask for the beta version via email: info@webkom.co +
      • +
    +
    + +
    +
    + Work Orders: +
    +

    + Regarding configuration, changes under client's requirements.
    + Pleace contact us through the webkom.co/contact website. +

    +
    +     + ); + } +} + +const ExtendedNavbarOnly = withPageConfig(NavbarOnly); + +export { + ExtendedNavbarOnly as NavbarOnly +}; diff --git a/app/routes/Layouts/NavbarOnly/components/LayoutNavbar.js b/app/routes/Layouts/NavbarOnly/components/LayoutNavbar.js new file mode 100755 index 0000000..45efb91 --- /dev/null +++ b/app/routes/Layouts/NavbarOnly/components/LayoutNavbar.js @@ -0,0 +1,100 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { + Button, + DropdownToggle, + Nav, + NavItem, + NavLink, + Avatar, + AvatarAddOn, + Navbar, + NavbarToggler, + UncontrolledDropdown, + ThemeConsumer, +} from './../../../../components'; +import { randomAvatar } from './../../../../utilities'; + +import { NavbarActivityFeed } from + './../../../../layout/components/NavbarActivityFeed'; +import { NavbarMessages } from + './../../../../layout/components/NavbarMessages'; +import { NavbarUser } from + './../../../../layout/components/NavbarUser'; +import { DropdownProfile } from + './../../../components/Dropdowns/DropdownProfile'; +import { NavbarNavigation } from + './../../../components/Navbars/NavbarNavigation'; +import { LogoThemed } from + './../../../components/LogoThemed/LogoThemed'; + +export const LayoutNavbar = () => ( + + + + + + + + + { /* Navigation with Collapse */ } + + + { /* END Navbar: Left Side */ } + { /* START Navbar: Right Side */ } + + { /* END Navbar: Right Side */ } + + + +

    + Navbar Only +

    + + + { + ({ color }) => ( + + ) + } + +     +     +); diff --git a/app/routes/Layouts/NavbarOnly/index.js b/app/routes/Layouts/NavbarOnly/index.js new file mode 100755 index 0000000..ee54f98 --- /dev/null +++ b/app/routes/Layouts/NavbarOnly/index.js @@ -0,0 +1,6 @@ +import { NavbarOnly } from './NavbarOnly'; +import { LayoutNavbar } from './components/LayoutNavbar'; + +NavbarOnly.Navbar = LayoutNavbar; + +export default NavbarOnly; diff --git a/app/routes/Layouts/SidebarA/SidebarA.js b/app/routes/Layouts/SidebarA/SidebarA.js new file mode 100755 index 0000000..167b7b2 --- /dev/null +++ b/app/routes/Layouts/SidebarA/SidebarA.js @@ -0,0 +1,90 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Container, +} from './../../../components'; + +export const SidebarA = () => ( + +

    Sidebar A

    + +

    + Welcome to the "Airframe" Admin Dashboard Theme based on Bootstrap 4.x version for React called  + reactstrap - easy to use React Bootstrap 4 components compatible with React 16+. +

    + +
    +
    + Layouts for this framework: +
    +
      +
    • + Sidebar A +
      • +
    • + Navbar Only +
      • +
    +
    + +
    +
    + This Starter has: +
    +
      +
    • + Documentation - which describes how to configure this version. +
      • +
    • + Credits - technical details of which versions are used for this framework. +
      • +
    • + Roadmap - update for this technology for the coming months. +
      • +
    • + Bugs - do you see errors in this version? Please report vie email: info@webkom.co +
      • +
    +
    + +
    +
    + Other versions for "Airframe": +
    +
      +
    • + jQuery - based on the newest Bootstrap 4.x +
      • +
    • + React - based on the newest Reactstrap +
      • +
    • + Next.js (React) - based on the newest Reactstrap and Next.js +
      • +
    • + Angular - based on the newest ng-bootstrap +
      • +
    • + .NET MVC - based on the newest Bootstrap 4.x +
      • +
    • + Vue.js - based on the newest BootstrapVue +
      • +
    • + Other Versions, such as Ruby on Rails, Ember, Laravel etc., please ask for the beta version via email: info@webkom.co +
      • +
    +
    + +
    +
    + Work Orders: +
    +

    + Regarding configuration, changes under client's requirements.
    + Pleace contact us through the webkom.co/contact website. +

    +
    +     +); diff --git a/app/routes/Layouts/SidebarA/index.js b/app/routes/Layouts/SidebarA/index.js new file mode 100755 index 0000000..0241917 --- /dev/null +++ b/app/routes/Layouts/SidebarA/index.js @@ -0,0 +1,3 @@ +import { SidebarA } from './SidebarA'; + +export default SidebarA; diff --git a/app/routes/Layouts/SidebarDefault/SidebarDefault.js b/app/routes/Layouts/SidebarDefault/SidebarDefault.js new file mode 100755 index 0000000..e445905 --- /dev/null +++ b/app/routes/Layouts/SidebarDefault/SidebarDefault.js @@ -0,0 +1,93 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Container, +} from './../../../components'; + +export const SidebarDefault = () => ( + +

    Sidebar & Navbar

    + +

    + Welcome to the "Airframe" Admin Dashboard Theme based on Bootstrap 4.x version for React called  + reactstrap - easy to use React Bootstrap 4 components compatible with React 16+. +

    + +
    +
    + Layouts for this framework: +
    +
      +
    • + Navbar +
      • +
    • + Sidebar +
      • +
    • + Sidebar with Navbar +
      • +
    +
    + +
    +
    + This Starter has: +
    +
      +
    • + Documentation - which describes how to configure this version. +
      • +
    • + Credits - technical details of which versions are used for this framework. +
      • +
    • + Roadmap - update for this technology for the coming months. +
      • +
    • + Bugs - do you see errors in this version? Please report vie email: info@webkom.co +
      • +
    +
    + +
    +
    + Other versions for "Airframe": +
    +
      +
    • + jQuery - based on the newest Bootstrap 4.x +
      • +
    • + React - based on the newest Reactstrap +
      • +
    • + Next.js (React) - based on the newest Reactstrap and Next.js +
      • +
    • + Angular - based on the newest ng-bootstrap +
      • +
    • + .NET MVC - based on the newest Bootstrap 4.x +
      • +
    • + Vue.js - based on the newest BootstrapVue +
      • +
    • + Other Versions, such as Ruby on Rails, Ember, Laravel etc., please ask for the beta version via email: info@webkom.co +
      • +
    +
    + +
    +
    + Work Orders: +
    +

    + Regarding configuration, changes under client's requirements.
    + Pleace contact us through the webkom.co/contact website. +

    +
    +     +); diff --git a/app/routes/Layouts/SidebarDefault/index.js b/app/routes/Layouts/SidebarDefault/index.js new file mode 100755 index 0000000..6ab5090 --- /dev/null +++ b/app/routes/Layouts/SidebarDefault/index.js @@ -0,0 +1,3 @@ +import { SidebarDefault } from './SidebarDefault'; + +export default SidebarDefault; diff --git a/app/routes/Layouts/SidebarWithNavbar/SidebarWithNavbar.js b/app/routes/Layouts/SidebarWithNavbar/SidebarWithNavbar.js new file mode 100755 index 0000000..0400253 --- /dev/null +++ b/app/routes/Layouts/SidebarWithNavbar/SidebarWithNavbar.js @@ -0,0 +1,91 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Container, +} from './../../../components'; + +export const SidebarWithNavbar = () => ( + +

    + Welcome to the "Airframe" Admin Dashboard Theme based on Bootstrap 4.x version for React called  + reactstrap - easy to use React Bootstrap 4 components compatible with React 16+. +

    + +
    +
    + Layouts for this framework: +
    +
      +
    • + Navbar +
      • +
    • + Sidebar +
      • +
    • + Sidebar with Navbar +
      • +
    +
    + +
    +
    + This Starter has: +
    +
      +
    • + Documentation - which describes how to configure this version. +
      • +
    • + Credits - technical details of which versions are used for this framework. +
      • +
    • + Roadmap - update for this technology for the coming months. +
      • +
    • + Bugs - do you see errors in this version? Please report vie email: info@webkom.co +
      • +
    +
    + +
    +
    + Other versions for "Airframe": +
    +
      +
    • + jQuery - based on the newest Bootstrap 4.x +
      • +
    • + React - based on the newest Reactstrap +
      • +
    • + Next.js (React) - based on the newest Reactstrap and Next.js +
      • +
    • + Angular - based on the newest ng-bootstrap +
      • +
    • + .NET MVC - based on the newest Bootstrap 4.x +
      • +
    • + Vue.js - based on the newest BootstrapVue +
      • +
    • + Other Versions, such as Ruby on Rails, Ember, Laravel etc., please ask for the beta version via email: info@webkom.co +
      • +
    +
    + +
    +
    + Work Orders: +
    +

    + Regarding configuration, changes under client's requirements.
    + Pleace contact us through the webkom.co/contact website. +

    +
    +     +); diff --git a/app/routes/Layouts/SidebarWithNavbar/index.js b/app/routes/Layouts/SidebarWithNavbar/index.js new file mode 100755 index 0000000..d8657bb --- /dev/null +++ b/app/routes/Layouts/SidebarWithNavbar/index.js @@ -0,0 +1,12 @@ +import { SidebarWithNavbar } from './SidebarWithNavbar'; +import { + SidebarWithNavbarNavbar +} from './../../../layout/components/SidebarWithNavbarNavbar'; +import { + DefaultSidebar +} from './../../../layout/components/DefaultSidebar'; + +SidebarWithNavbar.Navbar = SidebarWithNavbarNavbar; +SidebarWithNavbar.Sidebar = DefaultSidebar; + +export default SidebarWithNavbar; diff --git a/app/routes/Pages/ComingSoon/ComingSoon.js b/app/routes/Pages/ComingSoon/ComingSoon.js new file mode 100755 index 0000000..fd6d6da --- /dev/null +++ b/app/routes/Pages/ComingSoon/ComingSoon.js @@ -0,0 +1,91 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Form, + FormGroup, + FormText, + Input, + InputGroupAddon, + InputGroup, + Button, + Label, + EmptyLayout, + ThemeConsumer +} from './../../../components'; + +import { HeaderAuth } from "../../components/Pages/HeaderAuth"; +import { FooterAuth } from "../../components/Pages/FooterAuth"; + +const ComingSoon = () => ( + + + { /* START Header */} + + { /* END Header */} +
      +
    • +

      16

      +
      Days
      +
      • +
    • +

      34

      +
      Hours
      +
      • +
    • +

      10

      +
      Min
      +
      • +
    • +

      3

      +
      Sec
      +
      • +
    + { /* START Form */} +
    + + + + + + + { + ({ color }) => ( + + ) + } + + + + + If you want to be informed about the start, please subscribe to the newsletter + + +
    + { /* END Form */} + { /* START Bottom Links */} +
    + + Back to Home + + + Contact + +
    + { /* END Bottom Links */} + { /* START Footer */} + + { /* END Footer */} +     +     +); + +export default ComingSoon; diff --git a/app/routes/Pages/ComingSoon/index.js b/app/routes/Pages/ComingSoon/index.js new file mode 100755 index 0000000..de1af96 --- /dev/null +++ b/app/routes/Pages/ComingSoon/index.js @@ -0,0 +1,3 @@ +import ComingSoon from './ComingSoon'; + +export default ComingSoon; \ No newline at end of file diff --git a/app/routes/Pages/Confirmation/Confirmation.js b/app/routes/Pages/Confirmation/Confirmation.js new file mode 100755 index 0000000..c994a60 --- /dev/null +++ b/app/routes/Pages/Confirmation/Confirmation.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + EmptyLayout +} from './../../../components'; + +import { HeaderAuth } from "../../components/Pages/HeaderAuth"; +import { FooterAuth } from "../../components/Pages/FooterAuth"; + +const Confirmation = () => ( + + + { /* START Header */} + + The confirmation mail was sent to + email@example.com Check your mailbox + and hit the Confirm My Email + link to confirm your email address. + + )} + /> + { /* END Header */} + { /* START Bottom Links */} +
    + + Back to Home + +
    + { /* END Bottom Links */} + { /* START Footer */} + + { /* END Footer */} +     +     +); + +export default Confirmation; diff --git a/app/routes/Pages/Confirmation/index.js b/app/routes/Pages/Confirmation/index.js new file mode 100755 index 0000000..9b5a2a5 --- /dev/null +++ b/app/routes/Pages/Confirmation/index.js @@ -0,0 +1,3 @@ +import Confirmation from './Confirmation'; + +export default Confirmation; \ No newline at end of file diff --git a/app/routes/Pages/Danger/Danger.js b/app/routes/Pages/Danger/Danger.js new file mode 100755 index 0000000..d77f043 --- /dev/null +++ b/app/routes/Pages/Danger/Danger.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { EmptyLayout } from './../../../components'; +import { HeaderAuth } from "../../components/Pages/HeaderAuth"; +import { FooterAuth } from "../../components/Pages/FooterAuth"; + +const Danger = () => ( + + + { /* START Header */} + + { /* END Header */} + { /* START Bottom Links */} +
    + + Correct Errors + +
    + { /* END Bottom Links */} + { /* START Footer */} + + { /* END Footer */} +     +     +); + +export default Danger; diff --git a/app/routes/Pages/Danger/index.js b/app/routes/Pages/Danger/index.js new file mode 100755 index 0000000..c44268e --- /dev/null +++ b/app/routes/Pages/Danger/index.js @@ -0,0 +1,3 @@ +import Danger from './Danger'; + +export default Danger; \ No newline at end of file diff --git a/app/routes/Pages/Error404/Error404.js b/app/routes/Pages/Error404/Error404.js new file mode 100755 index 0000000..e76e03b --- /dev/null +++ b/app/routes/Pages/Error404/Error404.js @@ -0,0 +1,67 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Form, + FormGroup, + Input, + InputGroupAddon, + InputGroup, + Button, + Label, + EmptyLayout, + ThemeConsumer +} from './../../../components'; + +import { HeaderAuth } from "../../components/Pages/HeaderAuth"; +import { FooterAuth } from "../../components/Pages/FooterAuth"; + +const Error404 = () => ( + + + { /* START Header */} + + { /* END Header */} + { /* START Form */} +
    + + + + + + + { + ({ color }) => ( + + ) + } + + + + +
    + { /* END Form */} + { /* START Bottom Links */} +
    + + Back to Home + + + Support + +
    + { /* END Bottom Links */} + { /* START Footer */} + + { /* END Footer */} +     +     +); + +export default Error404; diff --git a/app/routes/Pages/Error404/index.js b/app/routes/Pages/Error404/index.js new file mode 100755 index 0000000..4f59965 --- /dev/null +++ b/app/routes/Pages/Error404/index.js @@ -0,0 +1,3 @@ +import Error404 from './Error404'; + +export default Error404; \ No newline at end of file diff --git a/app/routes/Pages/ForgotPassword/ForgotPassword.js b/app/routes/Pages/ForgotPassword/ForgotPassword.js new file mode 100755 index 0000000..de96d78 --- /dev/null +++ b/app/routes/Pages/ForgotPassword/ForgotPassword.js @@ -0,0 +1,70 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Form, + FormGroup, + FormText, + Input, + Button, + Label, + EmptyLayout, + ThemeConsumer +} from './../../../components'; + +import { HeaderAuth } from "../../components/Pages/HeaderAuth"; +import { FooterAuth } from "../../components/Pages/FooterAuth"; + +const ForgotPassword = () => ( + + + { /* START Header */} + + { /* END Header */} + { /* START Form */} +
    + + + + + We&ll never share your email with anyone else. + + +
    + + { + ({ color }) => ( + + ) + } + + +
    +
    + { /* END Form */} + { /* START Bottom Links */} +
    + + Login + + + Register + +
    + { /* END Bottom Links */} + { /* START Footer */} + + { /* END Footer */} +     +     +); + +export default ForgotPassword; diff --git a/app/routes/Pages/ForgotPassword/index.js b/app/routes/Pages/ForgotPassword/index.js new file mode 100755 index 0000000..b6d86d4 --- /dev/null +++ b/app/routes/Pages/ForgotPassword/index.js @@ -0,0 +1,3 @@ +import ForgotPassword from './ForgotPassword'; + +export default ForgotPassword; \ No newline at end of file diff --git a/app/routes/Pages/LockScreen/LockScreen.js b/app/routes/Pages/LockScreen/LockScreen.js new file mode 100755 index 0000000..28844af --- /dev/null +++ b/app/routes/Pages/LockScreen/LockScreen.js @@ -0,0 +1,61 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Form, + FormGroup, + Input, + Button, + Label, + EmptyLayout, + ThemeConsumer +} from './../../../components'; + +import { HeaderAuth } from "../../components/Pages/HeaderAuth"; +import { FooterAuth } from "../../components/Pages/FooterAuth"; + +const LockScreen = () => ( + + + { /* START Header */} + + { /* END Header */} + { /* START Form */} +
    + + + + + + { + ({ color }) => ( + + ) + } + +
    + { /* END Form */} + { /* START Bottom Links */} +
    + + Sign as Diffrent User + + + Back to Home + +
    + { /* END Bottom Links */} + { /* START Footer */} + + { /* END Footer */} +     +     +); + +export default LockScreen; diff --git a/app/routes/Pages/LockScreen/index.js b/app/routes/Pages/LockScreen/index.js new file mode 100755 index 0000000..38d2ea3 --- /dev/null +++ b/app/routes/Pages/LockScreen/index.js @@ -0,0 +1,3 @@ +import LockScreen from './LockScreen'; + +export default LockScreen; \ No newline at end of file diff --git a/app/routes/Pages/Login/Login.js b/app/routes/Pages/Login/Login.js new file mode 100755 index 0000000..16514c0 --- /dev/null +++ b/app/routes/Pages/Login/Login.js @@ -0,0 +1,75 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Form, + FormGroup, + FormText, + Input, + CustomInput, + Button, + Label, + EmptyLayout, + ThemeConsumer +} from './../../../components'; + +import { HeaderAuth } from "../../components/Pages/HeaderAuth"; +import { FooterAuth } from "../../components/Pages/FooterAuth"; + +const Login = () => ( + + + { /* START Header */} + + { /* END Header */} + { /* START Form */} +
    + + + + + We&ll never share your email with anyone else. + + + + + + + + + + + { + ({ color }) => ( + + ) + } + +
    + { /* END Form */} + { /* START Bottom Links */} +
    + + Forgot Password + + + Register + +
    + { /* END Bottom Links */} + { /* START Footer */} + + { /* END Footer */} +     +     +); + +export default Login; diff --git a/app/routes/Pages/Login/index.js b/app/routes/Pages/Login/index.js new file mode 100755 index 0000000..68d80c8 --- /dev/null +++ b/app/routes/Pages/Login/index.js @@ -0,0 +1,3 @@ +import Login from './Login'; + +export default Login; \ No newline at end of file diff --git a/app/routes/Pages/Register/Register.js b/app/routes/Pages/Register/Register.js new file mode 100755 index 0000000..76dc837 --- /dev/null +++ b/app/routes/Pages/Register/Register.js @@ -0,0 +1,87 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Form, + FormGroup, + FormText, + Input, + CustomInput, + Button, + Label, + EmptyLayout, + ThemeConsumer +} from './../../../components'; + +import { HeaderAuth } from "../../components/Pages/HeaderAuth"; +import { FooterAuth } from "../../components/Pages/FooterAuth"; + +const Register = () => ( + + + { /* START Header */} + + { /* END Header */} + { /* START Form */} +
    + + + + + + + + + + + + + + + + + We&ll never share your email with anyone else. + + + + + + + { + ({ color }) => ( + + ) + } + +
    + { /* END Form */} + { /* START Bottom Links */} +
    + + Forgot Password + + + Login + +
    + { /* END Bottom Links */} + { /* START Footer */} + + { /* END Footer */} +     +     +); + +export default Register; diff --git a/app/routes/Pages/Register/index.js b/app/routes/Pages/Register/index.js new file mode 100755 index 0000000..76cdf2b --- /dev/null +++ b/app/routes/Pages/Register/index.js @@ -0,0 +1,3 @@ +import Register from './Register'; + +export default Register; \ No newline at end of file diff --git a/app/routes/Pages/Success/Success.js b/app/routes/Pages/Success/Success.js new file mode 100755 index 0000000..26b3456 --- /dev/null +++ b/app/routes/Pages/Success/Success.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + EmptyLayout +} from './../../../components'; + +import { HeaderAuth } from "../../components/Pages/HeaderAuth"; +import { FooterAuth } from "../../components/Pages/FooterAuth"; + +const Success = () => ( + + + { /* START Header */} + + To activate your account, please click the link in the activation email which has been sent to you. If you do not see the activation email in your inbox, you may need to check your spam/junk email folders. + + )} + /> + { /* END Header */} + { /* START Bottom Links */} +
    + + Back to Home + +
    + { /* END Bottom Links */} + { /* START Footer */} + + { /* END Footer */} +     +     +); + +export default Success; diff --git a/app/routes/Pages/Success/index.js b/app/routes/Pages/Success/index.js new file mode 100755 index 0000000..ba0301f --- /dev/null +++ b/app/routes/Pages/Success/index.js @@ -0,0 +1,3 @@ +import Success from './Success'; + +export default Success; \ No newline at end of file diff --git a/app/routes/Pages/Timeline/Timeline.js b/app/routes/Pages/Timeline/Timeline.js new file mode 100755 index 0000000..9c00f20 --- /dev/null +++ b/app/routes/Pages/Timeline/Timeline.js @@ -0,0 +1,130 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Card, + CardBody, + CardTitle, + Container, + ListGroup, + ListGroupItem, + Row, + Col, + CustomInput, + Button, + Label +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; + +import { HeaderAuth } from "../../components/Pages/HeaderAuth"; +import { FooterAuth } from "../../components/Pages/FooterAuth"; +import { + TimelineMini +} from "../../components/Timeline/TimelineMini"; +import { + TimelineDefault +} from "../../components/Timeline/TimelineDefault"; + +const Timeline = () => ( + + + + + + + + + + + + + + { /* START Card Widget */} + + + + Timeline Mini + + + + + + + + + + { /* END Card Widget */} + + + + +); +export default Timeline; diff --git a/app/routes/Pages/Timeline/index.js b/app/routes/Pages/Timeline/index.js new file mode 100755 index 0000000..078f1e3 --- /dev/null +++ b/app/routes/Pages/Timeline/index.js @@ -0,0 +1,3 @@ +import Timeline from './Timeline'; + +export default Timeline; \ No newline at end of file diff --git a/app/routes/Tables/AgGrid/AgGrid.js b/app/routes/Tables/AgGrid/AgGrid.js new file mode 100755 index 0000000..3701624 --- /dev/null +++ b/app/routes/Tables/AgGrid/AgGrid.js @@ -0,0 +1,439 @@ +import React from 'react'; +import { chain, reduce } from 'lodash'; +import fetch from 'node-fetch'; + +import { + Container, + Card, + CardFooter, + CardHeader, + Input, + InputGroup, +} from './../../../components'; +import { + AgGridReact, + AgGridColumn, +} from './../../../components/agGrid'; +import { + HeaderMain, +} from './../../components/HeaderMain'; +import colors from './../../../colors'; + +/* + CONSTS +*/ +const DATA_URL = "https://api.myjson.com/bins/18oni9"; + +const COUNTRY_CODES = { + Ireland: "ie", + Spain: "es", + "United Kingdom": "gb", + France: "fr", + Germany: "de", + Sweden: "se", + Italy: "it", + Greece: "gr", + Iceland: "is", + Portugal: "pt", + Malta: "mt", + Norway: "no", + Brazil: "br", + Argentina: "ar", + Colombia: "co", + Peru: "pe", + Venezuela: "ve", + Uruguay: "uy" +}; + +const IT_SKILLS = ["android", "css", "html5", "mac", "windows"]; +const IT_SKILLS_NAMES = ["Android", "CSS", "HTML 5", "Mac", "Windows"]; + +const PROFICIENCY_NONE = "none"; +const PROFICIENCY_ABOVE40 = "above40"; +const PROFICIENCY_ABOVE60 = "above60"; +const PROFICIENCY_ABOVE80 = "above80"; + +const PROFICIENCY_NAMES = ["No Filter", "Above 40%", "Above 60%", "Above 80%"]; +const PROFICIENCY_VALUES = [ + PROFICIENCY_NONE, + PROFICIENCY_ABOVE40, + PROFICIENCY_ABOVE60, + PROFICIENCY_ABOVE80 +]; + +/* + Custom Renderers +*/ +const nameRenderer = ({ data }) => ` + + ${ data.name } + + `; +const skillsCellRenderer = ({ data }) => + chain(IT_SKILLS) + .map((skill) => data && data.skills[skill] ? + `` : '' + ) + .compact() + .join(' ') + .value(); +const countryCellRenderer = ({ value }) => ` + ${ value } + `; +const percentCellRenderer = ({ value }) => { + const eDivPercentBar = document.createElement('div'); + eDivPercentBar.className = 'div-percent-bar'; + eDivPercentBar.style.width = `${value}%`; + if (value < 20) { + eDivPercentBar.style.backgroundColor = colors['danger']; + } else if (value < 60) { + eDivPercentBar.style.backgroundColor = colors['warning']; + } else { + eDivPercentBar.style.backgroundColor = colors['success']; + } + + const eValue = document.createElement('div'); + eValue.className = 'div-percent-value'; + eValue.innerHTML = `${value}%`; + + const eOuterDiv = document.createElement('div'); + eOuterDiv.className = 'div-outer-div'; + eOuterDiv.appendChild(eDivPercentBar); + eOuterDiv.appendChild(eValue); + + return eOuterDiv; +} + +/* + Custom Filters +*/ +class SkillFilter { + init({ filterChangedCallback }) { + this.filterChangedCallback = filterChangedCallback; + + // Initial State + this.model = { + android: false, + css: false, + html5: false, + mac: false, + windows: false + } + } + getModel() { } + setModel() { } + getGui() { + const eGui = document.createElement("div"); + + const eInstructions = document.createElement("div"); + eInstructions.className = "h6 dropdown-header"; + eInstructions.innerText = "Custom Skills Filter"; + eGui.appendChild(eInstructions); + + const createCheckMarkElement = () => { + var eCheckMark = document.createElement('i'); + eCheckMark.className = "fa fa-check fa-fw ml-auto text-success"; + + return eCheckMark; + } + + IT_SKILLS.forEach((skill, index) => { + const skillName = IT_SKILLS_NAMES[index]; + + const eFilter = document.createElement("a"); + eFilter.className = "dropdown-item d-flex align-items-center" + //eFilter.classList.toggle("active", this.model[skill]); + eFilter.href="javascript:;"; + + const eImg = document.createElement("img"); + eImg.src = '//www.ag-grid.com/images/skills/' + skill + '.png'; + eImg.height = 20; + eImg.className = "mr-2"; + + const eName = document.createElement('span'); + eName.innerText = skillName; + + eFilter.appendChild(eImg); + eFilter.appendChild(eName); + if (this.model[skill]) { + eFilter.appendChild( + createCheckMarkElement() + ); + } + eGui.appendChild(eFilter); + + eFilter.addEventListener("click", (e) => { + const element = e.currentTarget; + this.model[skill] = !this.model[skill]; + this.filterChangedCallback(); + + // Toggle check marks + if (this.model[skill]) { + element.appendChild( + createCheckMarkElement() + ); + } else { + const eCheckMark = element.querySelector('i'); + + if (eCheckMark) { eCheckMark.remove() } + } + + return false; + }); + }); + + return eGui; + } + doesFilterPass({ data }) { + const rowSkills = data.skills; + const { model } = this; + + const passed = reduce( + IT_SKILLS, + (acc, skill) => acc || (rowSkills[skill] && model[skill]), + false + ); + + return passed; + } + isFilterActive() { + return ( + this.model.android || + this.model.css || + this.model.html5 || + this.model.mac || + this.model.windows + ); + } +} + +class ProficiencyFilter { + init({ filterChangedCallback, valueGetter }) { + this.filterChangedCallback = filterChangedCallback; + this.valueGetter = valueGetter; + + this.selected = PROFICIENCY_NONE; + } + getModel() { } + setModel() { } + getGui() { + const eGui = document.createElement("div"); + + const eInstructions = document.createElement("div"); + eInstructions.className = "h6 dropdown-header"; + eInstructions.innerText = "Custom Proficiency Filter"; + eGui.appendChild(eInstructions); + + PROFICIENCY_NAMES.forEach((name, index) => { + const eFilter = document.createElement("a"); + eFilter.className = "dropdown-item" + eFilter.classList.toggle("active", PROFICIENCY_VALUES[index] === this.selected); + eFilter.href="javascript:;"; + eFilter.innerText = name; + + eGui.appendChild(eFilter); + + eFilter.addEventListener("click", (e) => { + const element = e.currentTarget; + element.parentElement.childNodes.forEach(function(node) { + node.classList.toggle('active', false); + }); + element.classList.toggle("active"); + + this.selected = PROFICIENCY_VALUES[index]; + this.filterChangedCallback(); + + return false; + }); + }); + + return eGui; + } + doesFilterPass(params) { + const value = this.valueGetter(params); + const valueAsNumber = parseFloat(value); + + switch (this.selected) { + case PROFICIENCY_ABOVE40: + return valueAsNumber >= 40; + case PROFICIENCY_ABOVE60: + return valueAsNumber >= 60; + case PROFICIENCY_ABOVE80: + return valueAsNumber >= 80; + default: + return true; + } + } + isFilterActive() { + return this.selected !== PROFICIENCY_NONE; + } +} + +export default class AgGridExample extends React.Component { + constructor(props) { + super(props); + + this.state = { + rowData: [], + visibleCount: 0, + quickFilterValue: '' + }; + + this.gridApi = null; + + this.onGridReady = this.onGridReady.bind(this); + this.onModelUpdated = this.onModelUpdated.bind(this); + this.onQuickFilterChange = this.onQuickFilterChange.bind(this); + } + + componentDidMount() { + fetch(DATA_URL) + .then(res => res.json()) + .then(fetchedData => { + this.setState({ rowData: fetchedData }); + }); + } + + componentDidUpdate(prevProps, prevState) { + if (this.gridApi) { + if (this.state.quickFilterValue !== prevState.quickFilterValue) { + this.gridApi.setQuickFilter(this.state.quickFilterValue); + } + } + } + + onModelUpdated() { + if (this.gridApi) { + const model = this.gridApi.getModel(); + const visibleCount = model.getRowCount(); + + this.setState({ visibleCount }); + } + } + + onGridReady({ api }) { + this.gridApi = api; + } + + onQuickFilterChange(e) { + this.setState({ quickFilterValue: e.target.value }); + } + + render() { + const { rowData, visibleCount, quickFilterValue } = this.state; + + return ( + + +

    + Over 2,500 Companies use ag-Grid. The "ag" part of ag-Grid stands for "agnostic". The internal ag-Grid engine is implemented in TypeScript with zero dependencies. ag-Grid supports Angular through a wrapper component. + The wrapper lets you use ag-Grid in your application like any other Angular component – you pass configuration through property bindings and handle events through event bindings. + You can even use Angular components to customize the grid UI and cell contents / behavior. +

    + + + + AgGrid Example +
    + + { visibleCount } / { rowData.length } + + + + + +
    +     +
    + + + + + + + + + + + + + + + + + + + +
    + + More examples of this table can be found Here + +     +     + ); + } +} diff --git a/app/routes/Tables/AgGrid/index.js b/app/routes/Tables/AgGrid/index.js new file mode 100755 index 0000000..d05b5f3 --- /dev/null +++ b/app/routes/Tables/AgGrid/index.js @@ -0,0 +1,3 @@ +import AgGrid from './AgGrid'; + +export default AgGrid; diff --git a/app/routes/Tables/ExtendedTable/ExtendedTable.js b/app/routes/Tables/ExtendedTable/ExtendedTable.js new file mode 100755 index 0000000..05f85b3 --- /dev/null +++ b/app/routes/Tables/ExtendedTable/ExtendedTable.js @@ -0,0 +1,63 @@ +import React from 'react'; +import { Container, Row, Col } from './../../../components'; + +import { + AdvancedTableA, + AdvancedTableB, + BasicTable, + BorderedTable, + CellEdit, + ClearSearch, + LargeTable, + SortTable +} from './components'; +import { HeaderMain } from "../../components/HeaderMain"; + +export const ExtendedTable = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/app/routes/Tables/ExtendedTable/components/AdvancedTableA.js b/app/routes/Tables/ExtendedTable/components/AdvancedTableA.js new file mode 100755 index 0000000..9d05dd7 --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/AdvancedTableA.js @@ -0,0 +1,309 @@ +import React from 'react'; +import BootstrapTable from 'react-bootstrap-table-next'; +import paginationFactory from 'react-bootstrap-table2-paginator'; +import filterFactory, { Comparator, dateFilter } from 'react-bootstrap-table2-filter' +import ToolkitProvider from 'react-bootstrap-table2-toolkit'; +import _ from 'lodash'; +import faker from 'faker/locale/en_US'; +import moment from 'moment'; + +import { + Badge, + Button, + CustomInput, + StarRating, + ButtonGroup +} from './../../../../components'; +import { CustomExportCSV } from './CustomExportButton'; +import { CustomSearch } from './CustomSearch'; +import { CustomPaginationPanel } from './CustomPaginationPanel'; +import { CustomSizePerPageButton } from './CustomSizePerPageButton'; +import { CustomPaginationTotal } from './CustomPaginationTotal'; +import { randomArray } from './../../../../utilities'; +import { + buildCustomTextFilter, + buildCustomSelectFilter, + buildCustomNumberFilter +} from './../filters'; + +const INITIAL_PRODUCTS_COUNT = 500; + +const ProductQuality = { + Good: 'product-quality__good', + Bad: 'product-quality__bad', + Unknown: 'product-quality__unknown' +}; + +const sortCaret = (order) => { + if (!order) + return ; + if (order) + return +} + +const generateRow = (index) => ({ + id: index, + name: faker.commerce.productName(), + quality: randomArray([ + ProductQuality.Bad, + ProductQuality.Good, + ProductQuality.Unknown + ]), + price: (1000 + Math.random() * 1000).toFixed(2), + satisfaction: Math.round(Math.random() * 6), + inStockDate: faker.date.past() +}); + +export class AdvancedTableA extends React.Component { + constructor() { + super(); + + this.state = { + products: _.times(INITIAL_PRODUCTS_COUNT, generateRow), + selected: [] + }; + + this.headerCheckboxRef = React.createRef(); + } + + handleSelect(row, isSelected) { + if (isSelected) { + this.setState({ selected: [...this.state.selected, row.id] }) + } else { + this.setState({ + selected: this.state.selected.filter(itemId => itemId !== row.id) + }) + } + } + + handleSelectAll(isSelected, rows) { + if (isSelected) { + this.setState({ selected: _.map(rows, 'id') }) + } else { + this.setState({ selected: [] }); + } + } + + handleAddRow() { + const currentSize = this.state.products.length; + + this.setState({ + products: [ + generateRow(currentSize + 1), + ...this.state.products, + ] + }); + } + + handleDeleteRow() { + this.setState({ + products: _.filter(this.state.products, product => + !_.includes(this.state.selected, product.id)) + }) + } + + handleResetFilters() { + this.nameFilter(''); + this.qualityFilter(''); + this.priceFilter(''); + this.satisfactionFilter(''); + } + + createColumnDefinitions() { + return [{ + dataField: 'id', + text: 'Product ID', + headerFormatter: column => ( + + { column.text } + + Reset Filters + + + ) + }, { + dataField: 'name', + text: 'Product Name', + sort: true, + sortCaret, + formatter: (cell) => ( + + { cell } + + ), + ...buildCustomTextFilter({ + placeholder: 'Enter product name...', + getFilter: filter => { this.nameFilter = filter; } + }) + }, { + dataField: 'quality', + text: 'Product Quality', + formatter: (cell) => { + let pqProps; + switch (cell) { + case ProductQuality.Good: + pqProps = { + color: 'success', + text: 'Good' + } + break; + case ProductQuality.Bad: + pqProps = { + color: 'danger', + text: 'Bad' + } + break; + case ProductQuality.Unknown: + default: + pqProps = { + color: 'secondary', + text: 'Unknown' + } + } + + return ( + + { pqProps.text } + + ) + }, + sort: true, + sortCaret, + ...buildCustomSelectFilter({ + placeholder: 'Select Quality', + options: [ + { value: ProductQuality.Good, label: 'Good' }, + { value: ProductQuality.Bad, label: 'Bad' }, + { value: ProductQuality.Unknown, label: 'Unknown' } + ], + getFilter: filter => { this.qualityFilter = filter; } + }) + }, { + dataField: 'price', + text: 'Product Price', + sort: true, + sortCaret, + ...buildCustomNumberFilter({ + comparators: [Comparator.EQ, Comparator.GT, Comparator.LT], + getFilter: filter => { this.priceFilter = filter; } + }) + }, { + dataField: 'satisfaction', + text: 'Buyer Satisfaction', + sort: true, + sortCaret, + formatter: (cell) => + , + ...buildCustomSelectFilter({ + placeholder: 'Select Satisfaction', + options: _.times(6, (i) => ({ value: i + 1, label: i + 1 })), + getFilter: filter => { this.satisfactionFilter = filter; } + }) + }, { + dataField: 'inStockDate', + text: 'In Stock From', + formatter: (cell) => + moment(cell).format('DD/MM/YYYY'), + filter: dateFilter({ + className: 'd-flex align-items-center', + comparatorClassName: 'd-none', + dateClassName: 'form-control form-control-sm', + comparator: Comparator.GT, + getFilter: filter => { this.stockDateFilter = filter; } + }), + sort: true, + sortCaret + }]; + } + + render() { + const columnDefs = this.createColumnDefinitions(); + const paginationDef = paginationFactory({ + paginationSize: 5, + showTotal: true, + pageListRenderer: (props) => ( + + ), + sizePerPageRenderer: (props) => ( + + ), + paginationTotalRenderer: (from, to, size) => ( + + ) + }); + const selectRowConfig = { + mode: 'checkbox', + selected: this.state.selected, + onSelect: this.handleSelect.bind(this), + onSelectAll: this.handleSelectAll.bind(this), + selectionRenderer: ({ mode, checked, disabled }) => ( + + ), + selectionHeaderRenderer: ({ mode, checked, indeterminate }) => ( + el && (el.indeterminate = indeterminate)} /> + ) + }; + + return ( + + { + props => ( + +
    +
    + AdvancedTable A +
    +
    + + + + Export + + + + +
    +
    + +     + ) + } +     + ); + } +} \ No newline at end of file diff --git a/app/routes/Tables/ExtendedTable/components/AdvancedTableB.js b/app/routes/Tables/ExtendedTable/components/AdvancedTableB.js new file mode 100755 index 0000000..ddb8ca7 --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/AdvancedTableB.js @@ -0,0 +1,234 @@ +import React from 'react'; +import BootstrapTable from 'react-bootstrap-table-next'; +import ToolkitProvider from 'react-bootstrap-table2-toolkit'; +import moment from 'moment'; +import _ from 'lodash'; +import faker from 'faker/locale/en_US'; + +import { + Avatar, + Badge, + Button, + ButtonGroup, + Row, + Col +} from './../../../../components'; +import { CustomExportCSV } from './CustomExportButton'; +import { CustomSearch } from './CustomSearch'; +import { randomArray, randomAvatar } from './../../../../utilities'; + +const generateRow = (id) => ({ + id, + photo: randomAvatar(), + firstName: faker.name.firstName(), + lastName: faker.name.lastName(), + role: faker.name.jobType(), + status: randomArray([ + 'Active', + 'Suspended', + 'Waiting', + 'Unknown' + ]), + region: randomArray(['North', 'South', 'East', 'West']), + earnings: 500 + Math.random() * 1000, + earningsCurrencyIcon: randomArray([ + , + + ]), + lastLoginDate: faker.date.recent(), + ipAddress: faker.internet.ip(), + browser: 'Safari 9.1.1(11601.6.17)', + os: 'OS X El Capitan', + planSelected: randomArray(['Basic', 'Premium', 'Enterprise']), + planEnd: faker.date.future() +}); + +const sortCaret = (order) => { + if (!order) + return ; + if (order) + return +}; + +export class AdvancedTableB extends React.Component { + constructor(props) { + super(props); + + this.state = { + users: _.times(10, generateRow) + } + } + + handleAddRow() { + const usersLength = this.state.users.length; + + this.setState({ + users: [ + generateRow(usersLength + 1), + ...this.state.users + ] + }) + } + + createColumnDefinitions() { + return [ + { + dataField: 'photo', + text: 'Photo', + formatter: (cell) => ( + + ) + }, { + dataField: 'firstName', + text: 'First Name', + sort: true, + sortCaret + }, { + dataField: 'lastName', + text: 'Last Name', + sort: true, + sortCaret + }, { + dataField: 'role', + text: 'Role', + sort: true, + sortCaret + }, { + dataField: 'status', + text: 'Status', + sort: true, + sortCaret, + formatter: (cell) => { + const color = (status) => { + const map = { + 'Active': 'success', + 'Suspended': 'danger', + 'Waiting': 'info', + 'Unknown': 'secondary' + }; + return map[status]; + } + + return ( + + { cell } + + ); + } + }, { + dataField: 'region', + text: 'Region', + sort: true, + sortCaret + }, { + dataField: 'earnings', + text: 'Earnings', + sort: true, + sortCaret, + formatter: (cell, row) => ( + + { row.earningsCurrencyIcon } + { _.isNumber(cell) && cell.toFixed(2) } + + ) + } + ]; + } + + render() { + const columnDefs = this.createColumnDefinitions(); + + const expandRow = { + renderer: row => ( + + +
    +
    Last Login
    +
    { moment(row.lastLoginDate).format('DD-MMM-YYYY') }
    + +
    IP Address
    +
    { row.ipAddress }
    + +
    Browser
    +
    { row.browser }
    +
    + + +
    +
    Operating System
    +
    { row.os }
    + +
    Selected Plan
    +
    { row.planSelected }
    + +
    Plan Expiriation
    +
    { moment(row.planEnd).format('DD-MMM-YYYY') }
    +
    + +     + ), + showExpandColumn: true, + expandHeaderColumnRenderer: ({ isAnyExpands }) => isAnyExpands ? ( + + ) : ( + + ), + expandColumnRenderer: ({ expanded }) => + expanded ? ( + + ) : ( + + ) + } + + return ( + + { + props => ( + +
    +
    + AdvancedTable B +
    +
    + + + + Export + + + +
    +
    + +     + ) + } +     + ); + } +} \ No newline at end of file diff --git a/app/routes/Tables/ExtendedTable/components/BasicTable.js b/app/routes/Tables/ExtendedTable/components/BasicTable.js new file mode 100755 index 0000000..25bcc9b --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/BasicTable.js @@ -0,0 +1,38 @@ +import React from 'react'; +import _ from 'lodash'; +import BootstrapTable from 'react-bootstrap-table-next'; +import faker from 'faker/locale/en_US'; + +const columns = [ + { + dataField: 'id', + text: 'Product ID' + }, { + dataField: 'name', + text: 'Product Name' + }, { + dataField: 'price', + text: 'Product Price' + } +]; + +const data = _.times(5, (index) => ({ + id: index, + name: faker.commerce.productName(), + price: Math.round(2000 + Math.random() * 500) +})); + +export const BasicTable = () => ( + +
    + Basic Table +
    + +     +); diff --git a/app/routes/Tables/ExtendedTable/components/BorderedTable.js b/app/routes/Tables/ExtendedTable/components/BorderedTable.js new file mode 100755 index 0000000..9122168 --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/BorderedTable.js @@ -0,0 +1,38 @@ +import React from 'react'; +import _ from 'lodash'; +import BootstrapTable from 'react-bootstrap-table-next'; +import faker from 'faker/locale/en_US'; + +const columns = [ + { + dataField: 'id', + text: 'Product ID' + }, { + dataField: 'name', + text: 'Product Name' + }, { + dataField: 'price', + text: 'Product Price' + } +]; + +const data = _.times(5, (index) => ({ + id: index, + name: faker.commerce.productName(), + price: Math.round(2000 + Math.random() * 500) +})); + +export const BorderedTable = () => ( + +
    + Bordered Table +
    + +     +); diff --git a/app/routes/Tables/ExtendedTable/components/CellEdit.js b/app/routes/Tables/ExtendedTable/components/CellEdit.js new file mode 100755 index 0000000..631aacf --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/CellEdit.js @@ -0,0 +1,89 @@ +import React from 'react'; +import _ from 'lodash'; +import BootstrapTable from 'react-bootstrap-table-next'; +import cellEditFactory, { Type } from 'react-bootstrap-table2-editor'; +import faker from 'faker/locale/en_US'; + +import { randomArray } from './../../../../utilities'; + +const regions = [ + { value: 'Europe', label: 'Europe' }, + { value: 'North America', label: 'North America' }, + { value: 'Asia', label: 'Asia' }, + { value: 'Australia', label: 'Australia' }, +]; + +const columns = [ + { + dataField: 'id', + text: 'Product ID', + headerClasses: 'text-nowrap' + }, { + dataField: 'available', + text: 'Available', + editor: { + type: Type.CHECKBOX, + value: 'Y:N' + }, + formatter: function AvailableFormatter(cell) { + return cell === 'Y' ? + : + ; + }, + headerClasses: 'text-nowrap' + }, { + dataField: 'name', + text: 'Product Name', + editor: { + type: Type.TEXT + }, + headerClasses: 'text-nowrap' + }, { + dataField: 'description', + text: 'Product Description', + editor: { + type: Type.TEXTAREA + }, + style: { + width: '40%' + }, + headerClasses: 'text-nowrap' + }, { + dataField: 'price', + text: 'Product Price', + headerClasses: 'text-nowrap' + }, { + dataField: 'region', + text: 'Region', + headerClasses: 'text-nowrap', + editor: { + type: Type.SELECT, + options: regions + } + } +]; + +const data = _.times(5, (index) => ({ + id: index, + available: !Math.round(Math.random()) ? 'Y' : 'N', + name: faker.commerce.productName(), + description: faker.lorem.paragraph(), + price: Math.round(2000 + Math.random() * 500), + region: randomArray(_.map(regions, 'value')) +})) + +export const CellEdit = () => ( + +
    + Cell Edit +
    + +     +); diff --git a/app/routes/Tables/ExtendedTable/components/ClearSearch.js b/app/routes/Tables/ExtendedTable/components/ClearSearch.js new file mode 100755 index 0000000..e741f21 --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/ClearSearch.js @@ -0,0 +1,59 @@ +import React from 'react'; +import _ from 'lodash'; +import BootstrapTable from 'react-bootstrap-table-next'; +import ToolkitProvider from 'react-bootstrap-table2-toolkit'; +import faker from 'faker/locale/en_US'; + +import { CustomSearch } from './CustomSearch'; + +const columns = [ + { + dataField: 'id', + text: 'Product ID' + }, { + dataField: 'name', + text: 'Product Name' + }, { + dataField: 'price', + text: 'Product Price' + } +]; + +const data = _.times(5, (index) => ({ + id: index, + name: faker.commerce.productName(), + price: Math.round(2000 + Math.random() * 500) +})); + +export const ClearSearch = () => ( + + { + props => ( + +
    +
    + Table Search with Clear +
    + +
    + +
    +
    + +     + ) + } +     +); diff --git a/app/routes/Tables/ExtendedTable/components/CustomExportButton.js b/app/routes/Tables/ExtendedTable/components/CustomExportButton.js new file mode 100755 index 0000000..8c10c70 --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/CustomExportButton.js @@ -0,0 +1,28 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + Button +} from './../../../../components'; + +export const CustomExportCSV = ({children, onExport, ...props}) => { + return ( + + ); +} + +CustomExportCSV.propTypes = { + size: PropTypes.string, + outline: PropTypes.bool, + onExport: PropTypes.func, + children: PropTypes.node +} + +CustomExportCSV.defaultProps = { + size: 'sm', + outline: true +} \ No newline at end of file diff --git a/app/routes/Tables/ExtendedTable/components/CustomPaginationPanel.js b/app/routes/Tables/ExtendedTable/components/CustomPaginationPanel.js new file mode 100755 index 0000000..5aa657a --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/CustomPaginationPanel.js @@ -0,0 +1,31 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { map, isInteger } from 'lodash'; +import { Pagination, PaginationItem, PaginationLink, Col } from './../../../../components'; + +const mapToFa = { + '<': , + '<<': , + '>': , + '>>': +} + +export const CustomPaginationPanel = ({ onPageChange, pages, ...otherProps }) => ( + + + { + map(pages, page => ( + + onPageChange(page.page)}> + { isInteger(page.page) ? page.page : mapToFa[page.page] } + + + )) + } + + +); +CustomPaginationPanel.propTypes = { + pages: PropTypes.array, + onPageChange: PropTypes.func +}; diff --git a/app/routes/Tables/ExtendedTable/components/CustomPaginationTotal.js b/app/routes/Tables/ExtendedTable/components/CustomPaginationTotal.js new file mode 100755 index 0000000..6a49cc6 --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/CustomPaginationTotal.js @@ -0,0 +1,13 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +export const CustomPaginationTotal = ({ from, to, size }) => ( + + Showing { from } to { to } of { size } Results + +); +CustomPaginationTotal.propTypes = { + from: PropTypes.number, + to: PropTypes.number, + size: PropTypes.number, +}; diff --git a/app/routes/Tables/ExtendedTable/components/CustomSearch.js b/app/routes/Tables/ExtendedTable/components/CustomSearch.js new file mode 100755 index 0000000..e37a433 --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/CustomSearch.js @@ -0,0 +1,57 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + Input, + InputGroup, + Button, + InputGroupAddon +} from './../../../../components'; + +export class CustomSearch extends React.Component { + static propTypes = { + className: PropTypes.string, + onSearch: PropTypes.func + } + + constructor(props) { + super(props); + + this.state = { + value: '' + } + } + + componentDidUpdate(prevProps, prevState) { + if (prevState.value !== this.state.value) { + this.props.onSearch(this.state.value); + } + } + + render() { + return ( + + + + + { this.setState({ value: e.target.value }) }} + value={ this.state.value } + className="bg-white" + placeholder="Type to search..." + /> + { + this.state.value && ( + + + + ) + } + + ) + } +} \ No newline at end of file diff --git a/app/routes/Tables/ExtendedTable/components/CustomSizePerPageButton.js b/app/routes/Tables/ExtendedTable/components/CustomSizePerPageButton.js new file mode 100755 index 0000000..ee99cd3 --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/CustomSizePerPageButton.js @@ -0,0 +1,40 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { map } from 'lodash'; +import { + UncontrolledButtonDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem +} from './../../../../components'; + +export const CustomSizePerPageButton = ({ + options, + currSizePerPage, + onSizePerPageChange, + ...ddProps, +}) => ( + + + { currSizePerPage } + + + Page Size + { + map(options, option => ( + onSizePerPageChange(option.page)} + active={option.page === currSizePerPage} + > + { option.text } + + )) + } + + +); +CustomSizePerPageButton.propTypes = { + options: PropTypes.object, + currSizePerPage: PropTypes.number, + onSizePerPageChange: PropTypes.func +} diff --git a/app/routes/Tables/ExtendedTable/components/LargeTable.js b/app/routes/Tables/ExtendedTable/components/LargeTable.js new file mode 100755 index 0000000..13cdacf --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/LargeTable.js @@ -0,0 +1,71 @@ +import React from 'react'; +import _ from 'lodash'; +import BootstrapTable from 'react-bootstrap-table-next'; +import faker from 'faker/locale/en_US'; + +import classes from './LargeTable.scss'; +import { Card, CardHeader } from './../../../../components'; + +const columns = [ + { + dataField: 'id', + text: 'Product ID' + }, { + dataField: 'name', + text: 'Product Name' + }, { + dataField: 'price', + text: 'Product Price' + } +]; + +const data = _.times(500, (index) => ({ + id: index, + name: faker.commerce.productName(), + price: Math.round(2000 + Math.random() * 500) +})); + +const expandRow = { + showExpandColumn: true, + renderer: function ExtendedRowRender(row) { + return ( +
    +

    { `This Expand row is belong to rowKey ${row.id}` }

    +

    You can render anything here, also you can add additional data on every row object

    +

    expandRow.renderer callback will pass the origin row object to you

    +
    + ); + }, + expandHeaderColumnRenderer: ({ isAnyExpands }) => isAnyExpands ? ( + + ) : ( + + ), + expandColumnRenderer: ({ expanded }) => + expanded ? ( + + ) : ( + + ) +}; + +export const LargeTable = () => ( + + + + Large Table + +
    + +
    +     +     +); diff --git a/app/routes/Tables/ExtendedTable/components/LargeTable.scss b/app/routes/Tables/ExtendedTable/components/LargeTable.scss new file mode 100755 index 0000000..d92bfae --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/LargeTable.scss @@ -0,0 +1,4 @@ +.table-scroll-wrap { + max-height: 380px; + overflow-y: auto; +} \ No newline at end of file diff --git a/app/routes/Tables/ExtendedTable/components/SelectAll.js b/app/routes/Tables/ExtendedTable/components/SelectAll.js new file mode 100755 index 0000000..5301ff8 --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/SelectAll.js @@ -0,0 +1,44 @@ +import React from 'react'; +import _ from 'lodash'; +import BootstrapTable from 'react-bootstrap-table-next'; +import faker from 'faker/locale/en_US'; + +const columns = [ + { + dataField: 'id', + text: 'Product ID' + }, { + dataField: 'name', + text: 'Product Name', + }, { + dataField: 'price', + text: 'Product Price', + } +]; + +const data = _.times(5, (index) => ({ + id: index, + name: faker.commerce.productName(), + price: Math.round(2000 + Math.random() * 500) +})); + +const selectRow = { + mode: 'checkbox', + clickToSelect: true +}; + +export const SelectAll = () => ( + +
    + Select All +
    + +     +); diff --git a/app/routes/Tables/ExtendedTable/components/SortTable.js b/app/routes/Tables/ExtendedTable/components/SortTable.js new file mode 100755 index 0000000..25e0566 --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/SortTable.js @@ -0,0 +1,49 @@ +import React from 'react'; +import _ from 'lodash'; +import BootstrapTable from 'react-bootstrap-table-next'; +import faker from 'faker/locale/en_US'; + +const sortCaret = (order) => { + if (!order) + return ; + if (order) + return +} + +const columns = [ + { + dataField: 'id', + text: 'Product ID' + }, { + dataField: 'name', + text: 'Product Name', + sort: true, + sortCaret + }, { + dataField: 'price', + text: 'Product Price', + sort: true, + sortCaret + } +]; + +const data = _.times(10, (index) => ({ + id: index, + name: faker.commerce.productName(), + price: Math.round(2000 + Math.random() * 500) +})); + +export const SortTable = () => ( + +
    + Sort Table +
    + +     +); diff --git a/app/routes/Tables/ExtendedTable/components/index.js b/app/routes/Tables/ExtendedTable/components/index.js new file mode 100755 index 0000000..828e10e --- /dev/null +++ b/app/routes/Tables/ExtendedTable/components/index.js @@ -0,0 +1,11 @@ +export * from './AdvancedTableA'; +export * from './AdvancedTableB'; +export * from './BasicTable'; +export * from './BorderedTable'; +export * from './CellEdit'; +export * from './ClearSearch'; +export * from './CustomExportButton'; +export * from './CustomSearch'; +export * from './LargeTable'; +export * from './SelectAll'; +export * from './SortTable'; diff --git a/app/routes/Tables/ExtendedTable/filters/index.js b/app/routes/Tables/ExtendedTable/filters/index.js new file mode 100755 index 0000000..b718cfa --- /dev/null +++ b/app/routes/Tables/ExtendedTable/filters/index.js @@ -0,0 +1,3 @@ +export * from './textFilter'; +export * from './selectFilter'; +export * from './numberFilter'; \ No newline at end of file diff --git a/app/routes/Tables/ExtendedTable/filters/numberFilter.js b/app/routes/Tables/ExtendedTable/filters/numberFilter.js new file mode 100755 index 0000000..ca386ef --- /dev/null +++ b/app/routes/Tables/ExtendedTable/filters/numberFilter.js @@ -0,0 +1,143 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import uid from 'uuid/v4'; +import { customFilter, Comparator, FILTER_TYPES } from 'react-bootstrap-table2-filter'; + +import { CustomInput, Input } from './../../../../components'; + +const comparatorSign = (comp) => { + switch (comp) { + case Comparator.EQ: + return '='; + case Comparator.GT: + return '>'; + case Comparator.LT: + return '<'; + } +} + +class NumberFilter extends React.Component { + static propTypes = { + column: PropTypes.object.isRequired, + onFilter: PropTypes.func.isRequired, + placeholder: PropTypes.string, + getFilter: PropTypes.func, + comparators: PropTypes.array, + comparator: PropTypes.string, + onClick: PropTypes.func + } + + static defaultProps = { + comparators: [Comparator.EQ], + comparator: Comparator.EQ + } + + constructor(props) { + super(props); + + this.state = { + value: '', + comparator: props.comparator + } + + this.comparatorInputId = uid(); + this.valueInputId = uid(); + } + + componentDidMount() { + if (_.isFunction(this.props.getFilter)) { + this.props.getFilter((value) => { + this.setState({ value }); + }); + } + } + + componentDidUpdate(prevProps, prevState) { + if ( + prevState.value !== this.state.value || + prevState.comparator !== this.state.comparator + ) { + this.props.onFilter({ + number: this.state.value, + comparator: this.state.comparator + }); + } + if (prevProps.comparator !== this.props.comparator) { + this.setState({ comparator: this.props.comparator }); + } + } + + handleClick(e) { + e.stopPropagation(); + + if (this.props.onClick) { + this.props.onClick(e); + } + } + + render() { + const { placeholder, comparators } = this.props; + const { comparator } = this.state; + return ( +
    + { + (!_.isEmpty(comparators) && comparators.length > 0) && ( + { this.setState({ comparator: e.target.value }) }} + onClick={this.handleClick} + value={ comparator } + className="d-block bg-white mr-1" + id={this.comparatorInputId} + > + + + { + _.map(comparators, (comparator, index) => ( + + )) + } + + ) + } + { this.setState({ value: e.target.value }) }} + onClick={this.handleClick} + value={ this.state.value } + placeholder={ placeholder } + id={this.valueInputId} + /> +
    + ) + } +} + +export const buildCustomNumberFilter = ({ placeholder, getFilter, comparators, ...other } = {}) => ({ + filter: customFilter({ + type: FILTER_TYPES.NUMBER, + ...other + }), + filterRenderer: function NumberFilterWrap(onFilter, column) { + return ( + + ) + } +}); \ No newline at end of file diff --git a/app/routes/Tables/ExtendedTable/filters/selectFilter.js b/app/routes/Tables/ExtendedTable/filters/selectFilter.js new file mode 100755 index 0000000..af326d0 --- /dev/null +++ b/app/routes/Tables/ExtendedTable/filters/selectFilter.js @@ -0,0 +1,90 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import { customFilter } from 'react-bootstrap-table2-filter'; +import uid from 'uuid/v4'; + +import { CustomInput } from './../../../../components'; + +class SelectFilter extends React.Component { + static propTypes = { + column: PropTypes.object.isRequired, + onFilter: PropTypes.func.isRequired, + options: PropTypes.array.isRequired, + placeholder: PropTypes.string, + getFilter: PropTypes.func, + onClick: PropTypes.func + } + + constructor() { + super(); + + this.state = { + value: '' + } + this.inputId = uid(); + this.handleClick = this.handleClick.bind(this); + } + + componentDidMount() { + if (_.isFunction(this.props.getFilter)) { + this.props.getFilter((value) => { + this.setState({ value }); + }); + } + } + + componentDidUpdate(prevProps, prevState) { + if (prevState.value !== this.state.value) { + this.props.onFilter(this.state.value); + } + } + + handleClick(e) { + e.stopPropagation(); + + if (this.props.onClick) { + this.props.onClick(e); + } + } + + render() { + const { placeholder, options } = this.props; + return ( + { this.setState({ value: e.target.value }) }} + onClick={ this.handleClick } + value={ this.state.value } + className="d-block bg-white" + id={this.inputId} + > + + + { + _.map(options, ({ value, label }, index) => ( + + )) + } + + ) + } +} + +export const buildCustomSelectFilter = ({ placeholder, options, getFilter, ...other } = {}) => ({ + filter: customFilter(other), + filterRenderer: function TextFilterWrap(onFilter, column) { + return ( + + ) + } +}); \ No newline at end of file diff --git a/app/routes/Tables/ExtendedTable/filters/textFilter.js b/app/routes/Tables/ExtendedTable/filters/textFilter.js new file mode 100755 index 0000000..3c70eb6 --- /dev/null +++ b/app/routes/Tables/ExtendedTable/filters/textFilter.js @@ -0,0 +1,89 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import { customFilter } from 'react-bootstrap-table2-filter'; + +import { + Form, + Input +} from './../../../../components'; + +class TextFilter extends React.Component { + static propTypes = { + column: PropTypes.object.isRequired, + onFilter: PropTypes.func.isRequired, + placeholder: PropTypes.string, + getFilter: PropTypes.func, + onClick: PropTypes.func + } + + constructor() { + super(); + + this.state = { + value: '' + } + + this.handleClick = this.handleClick.bind(this); + } + + componentDidMount() { + if (_.isFunction(this.props.getFilter)) { + this.props.getFilter((value) => { + this.setState({ value }); + }); + } + } + + componentDidUpdate(prevProps, prevState) { + if (prevState.value !== this.state.value) { + this.props.onFilter(this.state.value); + } + } + + handleClick(e) { + e.stopPropagation(); + + if (this.props.onClick) { + this.props.onClick(e); + } + } + + render() { + const { onFilter, placeholder } = this.props; + return ( +
    { + e.preventDefault(); + onFilter(this.state.value) + }} + > + this.setState({value: e.target.value})} + onClick={ this.handleClick } + value={ this.state.value } + placeholder={ placeholder } + /> +
    + ) + } +} + +export const buildCustomTextFilter = ({ placeholder, getFilter, ...other } = {}) => ({ + filter: customFilter(other), + filterRenderer: function TextFilterWrap(onFilter, column) { + return ( + + ) + } +}); \ No newline at end of file diff --git a/app/routes/Tables/ExtendedTable/index.js b/app/routes/Tables/ExtendedTable/index.js new file mode 100755 index 0000000..f26390f --- /dev/null +++ b/app/routes/Tables/ExtendedTable/index.js @@ -0,0 +1,3 @@ +import { ExtendedTable } from './ExtendedTable'; + +export default ExtendedTable; diff --git a/app/routes/Tables/Tables/Tables.js b/app/routes/Tables/Tables/Tables.js new file mode 100755 index 0000000..d939326 --- /dev/null +++ b/app/routes/Tables/Tables/Tables.js @@ -0,0 +1,483 @@ +import React from 'react'; + +import { + Container, + Row, + Col, + Card, + CardTitle, + CardBody, + Table, +} from './../../../components'; + +import { HeaderMain } from "../../components/HeaderMain"; + +import { + HeaderDemo +} from "../../components/HeaderDemo"; + +import { + TrTableDefault +} from "./components/TrTableDefault"; +import { + TrTableResponsive +} from "./components/TrTableResponsive"; +import { + TrTableStriped +} from "./components/TrTableStriped"; +import { + TrTableHoverable +} from "./components/TrTableHoverable"; +import { + TrTableSmall +} from "./components/TrTableSmall"; +import { + TrTableBorderless +} from "./components/TrTableBorderless"; +import { + TrTableBordered +} from "./components/TrTableBordered"; +import { + TrTableHeads +} from "./components/TrTableHeads"; +import { + TrTableContextual +} from "./components/TrTableContextual"; + +const Tables = () => ( + + + + { /* START Header 1 */} + + + + All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent. + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + + + + + Table Default + + #1.01 + + +

    + Using the most basic table markup, here’s how .table-based tables look in Bootstrap. + All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the + same manner as the parent. +

    +     + { /* START Table */} + + + + + + + + + + + + + + +
    ProjectDeadlineLeaderBudgetStatus + Actions +
    + { /* END Table */} +     + +     + { /* END Section 1 */} + + { /* START Section 2 */} + + + + + + Table Responsive + + #2.01 + + +

    + Responsive tables allow tables to be scrolled horizontally with ease. + Make any table responsive across all viewports by wrapping a Table with responsive. +

    +     + { /* START Table */} + + + + + + + + + + + + + + +
    #Browser & OSIPLocationSigned In + Action +
    + { /* END Table */} +     + +     + { /* END Section 2 */} + + { /* START Section 3 */} + + + + + + Table Striped + + #3.01 + + +

    + Use striped to add zebra-striping to any table row within the <tbody>. +

    +     + { /* START Table */} + + + + + + + + + + + + +
    #Product NameLast Refresh + Last Month +
    + { /* END Table */} +     + +     + { /* END Section 3 */} + + { /* START Section 4 */} + + + + + + Table Hoverable + + #4.01 + + +

    + Use hover to add zebra-striping to any table row within the <tbody>. +

    +     + { /* START Table */} + + + + + + + + + + + + + + + +
    #NamePrice + Date +
    + { /* END Table */} +     + +     + { /* END Section 4 */} + + { /* START Section 5 */} + + + + + + Table Small + + #5.01 + + +

    + Add size="sm" to make tables more compact by cutting cell padding in half. +

    +     + { /* START Table */} + + + + + + + + + + + + +
    IDNameAmount + Payment +
    + { /* END Table */} +     + +     + { /* END Section 5 */} + + { /* START Section 6 */} + + + + + + Table Borderless + + #6.01 + + +

    + Add borderless for a table without borders. +

    +     + { /* START Table */} + + + + + + + + + + + + + + + +
    #IDDateAmountDescriptionPayment Method + Receipt +
    + { /* END Table */} +     + +     + { /* END Section 6 */} + + { /* START Section 7 */} + + + + + + Table Bordered + + #7.01 + + +

    + Add bordered for borders on all sides of the table and cells. +

    + { /* START Table */} + + + + + + + + + + + + + +
    TicketCompletionCreateDeadline + Actions +
    + { /* END Table */} +     +     + +     + { /* END Section 7 */} + + { /* START Section 8 */} + + + + + + Table Heads + + #8.01 + + +

    + Similar to tables and dark tables, use the modifier classes + .thead-light or .thead-dark to make + <thead>s appear light or dark gray. +

    +     + { /* START Table */} + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #First NameLast NameEmailNick + Role +
    #First NameLast NameEmailNick + Role +
    + { /* END Table */} +     + +     + { /* END Section 8 */} + + { /* START Section 9 */} + + + + + + Table Contextual + + #9.01 + + +

    + Use contextual classes to color table rows or individual cells. +

    +     + { /* START Table */} + + + + + + + + + + + + + + +
    InvoiceNameDatePriceStatus + Country +
    + { /* END Table */} +     + +     + { /* END Section 9 */} + + { /* START Section 10 */} + + + + + + Table Inverse + + #1.10 + + +

    + You can also invert the colors—with light text on dark backgrounds—with dark. +

    +     + { /* START Table */} + + + + + + + + + + + + + + +
    ProjectDeadlineLeaderBudgetStatus + Actions +
    + { /* END Table */} +     + +     + { /* END Section 10 */} + + +); + +export default Tables; \ No newline at end of file diff --git a/app/routes/Tables/Tables/components/TrTableBordered.js b/app/routes/Tables/Tables/components/TrTableBordered.js new file mode 100755 index 0000000..7486bfe --- /dev/null +++ b/app/routes/Tables/Tables/components/TrTableBordered.js @@ -0,0 +1,55 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import _ from 'lodash'; + +import { + Progress, + ButtonGroup, + Button +} from './../../../../components'; + +/*eslint-disable */ +const completion = [ + "25", + "50", + "75", + "97" +]; +/*eslint-enable */ + +const TrTableBordered = () => ( + + { + _.times(5, (index) => ( + + + + { faker.company.catchPhrase() } + + + + + + + { faker.date.weekday() }, 12 { faker.date.month() }, 2018 + + + { faker.date.weekday() }, 12 { faker.date.month() }, 2018 + + + + + + + + + )) + } + +) + +export { TrTableBordered }; diff --git a/app/routes/Tables/Tables/components/TrTableBorderless.js b/app/routes/Tables/Tables/components/TrTableBorderless.js new file mode 100755 index 0000000..aad00ff --- /dev/null +++ b/app/routes/Tables/Tables/components/TrTableBorderless.js @@ -0,0 +1,92 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import _ from 'lodash'; + +import { + Badge, + UncontrolledTooltip, +} from './../../../../components'; + +/*eslint-disable */ +const payment = [ + + Premium + , + + Basic + , + + Pro + , + + Advanced + , + + Free + +]; +/*eslint-enable */ +/*eslint-disable */ +const receipt = [ + + + + + + Download + + , + + +]; +/*eslint-enable */ +/*eslint-disable */ +const paymentMethod = [ + + + { faker.internet.email() } + , + + + Visa 4*** **** **** 9221 + +]; +/*eslint-enable */ +/*eslint-disable */ +const status = [ + + + , + + + +]; +/*eslint-enable */ + +const TrTableBorderless = () => ( + + { + _.times(5, (index) => ( + + { status[index%2] } + + { faker.random.number() } + + + { faker.date.weekday() }, 12 { faker.date.month() }, 2018 + + + $ { faker.finance.amount() } + + + { payment[index%5] } + + { paymentMethod[index%2] } + { receipt[index%2] } + + )) + } + +) + +export { TrTableBorderless }; diff --git a/app/routes/Tables/Tables/components/TrTableContextual.js b/app/routes/Tables/Tables/components/TrTableContextual.js new file mode 100755 index 0000000..a4a677b --- /dev/null +++ b/app/routes/Tables/Tables/components/TrTableContextual.js @@ -0,0 +1,83 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import _ from 'lodash'; + +import { + Badge +} from './../../../../components'; + +/*eslint-disable */ +const trColor = [ + "table-active", + "", + + "table-success", + "", + + "table-info", + "", + + "table-warning", + "", + + "table-danger", + "", + + "table-primary", + "" +]; +/*eslint-enable */ +/*eslint-disable */ +const statusColor = [ + "secondary", + "secondary", + + "success", + "secondary", + + "info", + "secondary", + + "warning", + "secondary", + + "danger", + "secondary", + + "primary", + "secondary" +]; +/*eslint-enable */ + +const TrTableContextual = () => ( + + { + _.times(12, (index) => ( + + + #{ faker.finance.mask() } + + + { faker.name.firstName() } { faker.name.lastName() } + + + { faker.date.weekday() }, 12 { faker.date.month() }, 2018 + + + $ { faker.finance.amount() } + + + + { faker.finance.accountName() } + + + + { faker.address.country() } + + + )) + } + +) + +export { TrTableContextual }; diff --git a/app/routes/Tables/Tables/components/TrTableDefault.js b/app/routes/Tables/Tables/components/TrTableDefault.js new file mode 100755 index 0000000..58062bc --- /dev/null +++ b/app/routes/Tables/Tables/components/TrTableDefault.js @@ -0,0 +1,127 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import _ from 'lodash'; +import PropTypes from 'prop-types'; + +import { + UncontrolledButtonDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + Media, + Avatar, + AvatarAddOn +} from './../../../../components'; +import { randomAvatar } from './../../../../utilities'; + +/*eslint-disable */ +const colorStatus = [ + "danger", + "success", + "warning", + "secondary" +]; +/*eslint-enable */ + +const TrTableDefault = (props) => ( + + { + _.times(4, (index) => ( + + +
    + { faker.name.firstName() } { faker.name.lastName() } +
    + + { faker.company.companyName() } + + + +
    + Thursday +
    + + Overdue + + + + + + , + + ]} + /> + + +
    + { faker.name.firstName() } { faker.name.lastName() } +
    + + { faker.name.jobTitle() } + +     +     + + +
    + { faker.finance.amount() } +
    + + Paid + + + + + { faker.finance.transactionType() } + + + + + + + + + + Send Email + + + + Call + + + + Profile + + + + + + )) + } +     +) + +TrTableDefault.propTypes = { + projectColor: PropTypes.node, + leaderStatus: PropTypes.node, + dropdownColor: PropTypes.node +}; +TrTableDefault.defaultProps = { + projectColor: "text-inverse", + leaderStatus: "white", + dropdownColor: "" +}; + +export { TrTableDefault }; diff --git a/app/routes/Tables/Tables/components/TrTableHeads.js b/app/routes/Tables/Tables/components/TrTableHeads.js new file mode 100755 index 0000000..cce441a --- /dev/null +++ b/app/routes/Tables/Tables/components/TrTableHeads.js @@ -0,0 +1,49 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import _ from 'lodash'; + +import { + Badge +} from './../../../../components'; + +/*eslint-disable */ +const colorStatus = [ + "danger", + "success", + "warning", + "secondary" +]; +/*eslint-enable */ + +const TrTableHeads = () => ( + + { + _.times(4, (index) => ( + + + 1 + + + { faker.name.firstName() } + + + { faker.name.lastName() } + + + { faker.internet.email() } + + + { faker.internet.userName() } + + + + { faker.name.jobType() } + + + + )) + } + +) + +export { TrTableHeads }; diff --git a/app/routes/Tables/Tables/components/TrTableHoverable.js b/app/routes/Tables/Tables/components/TrTableHoverable.js new file mode 100755 index 0000000..62b3e02 --- /dev/null +++ b/app/routes/Tables/Tables/components/TrTableHoverable.js @@ -0,0 +1,25 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +const TrTableHoverable = () => ( + + + + + Invoice #{ faker.finance.mask() } + + + + { faker.name.firstName() } { faker.name.lastName() } + + + $ { faker.finance.amount() } + + + { faker.date.weekday() }, 12 { faker.date.month() }, 2018 + + + +) + +export { TrTableHoverable }; diff --git a/app/routes/Tables/Tables/components/TrTableResponsive.js b/app/routes/Tables/Tables/components/TrTableResponsive.js new file mode 100755 index 0000000..4c76619 --- /dev/null +++ b/app/routes/Tables/Tables/components/TrTableResponsive.js @@ -0,0 +1,97 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import _ from 'lodash'; + +import { + UncontrolledTooltip, + Media +} from './../../../../components'; + +/*eslint-disable */ +const browserOs = [ + "Safari", + "Firefox", + "Opera", + "Chrome" +]; +/*eslint-enable */ +/*eslint-disable */ +const browserIcon = [ + "desktop", + "laptop", + "mobile", + "tablet" +]; +/*eslint-enable */ +/*eslint-disable */ +const colorStatus = [ + "danger", + "success", + "warning", + "secondary" +]; +/*eslint-enable */ + +const TrTableResponsive = () => ( + + { + _.times(4, (index) => ( + + + + + + + + + + +
    + + { browserOs[index%4] } + / + { faker.system.semver() } +
    + + macOs { faker.system.semver() } + +     +     + + +
    + + { faker.internet.ip() } + +
    + + - + + + +
    + { faker.address.city() } +
    + + { faker.address.state() }, { faker.address.country() } + + + + { faker.date.weekday() }, 12 { faker.date.month() }, 2018
    + 12:34 PM + + + + + + + Revoke + + + + )) + } +     +) + +export { TrTableResponsive }; diff --git a/app/routes/Tables/Tables/components/TrTableSmall.js b/app/routes/Tables/Tables/components/TrTableSmall.js new file mode 100755 index 0000000..08eb067 --- /dev/null +++ b/app/routes/Tables/Tables/components/TrTableSmall.js @@ -0,0 +1,43 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import _ from 'lodash'; + +import { + Badge +} from './../../../../components'; + +/*eslint-disable */ +const payment = [ + "success", + "danger", + "warning", + "secondary" +]; +/*eslint-enable */ + +const TrTableSmall = () => ( + + { + _.times(4, (index) => ( + + + #{ faker.finance.mask() } + + + { faker.name.firstName() } { faker.name.lastName() } + + + $ { faker.finance.amount() } + + + + { faker.finance.transactionType() } + + + + )) + } + +) + +export { TrTableSmall }; diff --git a/app/routes/Tables/Tables/components/TrTableStriped.js b/app/routes/Tables/Tables/components/TrTableStriped.js new file mode 100755 index 0000000..111b513 --- /dev/null +++ b/app/routes/Tables/Tables/components/TrTableStriped.js @@ -0,0 +1,47 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import _ from 'lodash'; + +/*eslint-disable */ +const lastMonth = [ + + 92.02% + , + + 23.02% + +]; +/*eslint-enable */ +/*eslint-disable */ +const no = [ + "1", + "2", + "3", + "4" +]; +/*eslint-enable */ + +const TrTableStriped = () => ( + + { + _.times(4, (index) => ( + + + { no[index%4] }. + + + + { faker.commerce.productName() } + + + + { faker.date.weekday() }, 12 { faker.date.month() }, 2018 + + { lastMonth[index%2] } + + )) + } + +) + +export { TrTableStriped }; diff --git a/app/routes/Tables/Tables/index.js b/app/routes/Tables/Tables/index.js new file mode 100755 index 0000000..da97f21 --- /dev/null +++ b/app/routes/Tables/Tables/index.js @@ -0,0 +1,3 @@ +import Tables from './Tables'; + +export default Tables; \ No newline at end of file diff --git a/app/routes/Widgets/Widgets.js b/app/routes/Widgets/Widgets.js new file mode 100755 index 0000000..b39835e --- /dev/null +++ b/app/routes/Widgets/Widgets.js @@ -0,0 +1,770 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import faker from 'faker/locale/en_US'; + +import { + Container, + Row, + Col, + Card, + CardBody, + ListGroup, + ListGroupItem, + CardDeck, + Progress, + CardFooter, + CardColumns, + CardTitle, + InputGroup, + Input, + InputGroupAddon, + UncontrolledButtonDropdown, + DropdownMenu, + DropdownToggle, + DropdownItem, + Button +} from './../../components' +import { HeaderMain } from "../components/HeaderMain"; +import { + HeaderDemo +} from "../components/HeaderDemo"; +import { + TasksCardGrid +} from "../components/Tasks/TasksCardGrid"; +import { + ProfileOverviewCard +} from "../components/Profile/ProfileOverviewCard"; +import { + GalleryCard +} from "../components/Gallery/GalleryCard"; +import { + UsersResultsCard +} from "../components/SearchResults/UsersResultsCard"; +import { + ImagesResultsCard +} from "../components/SearchResults/ImagesResultsCard"; +import { + Attachment +} from "../components/Attachment"; +import { + Comment +} from "../components/Comment"; +import { + ChatLeft +} from "../components/Chat/ChatLeft"; +import { + ChatRight +} from "../components/Chat/ChatRight"; +import { + ChatCardFooter +} from "../components/Chat/ChatCardFooter"; +import { + SessionsByDevice +} from "../components/Analytics/SessionsByDevice"; +import { + MetricVsTarget +} from "../components/Analytics/MetricVsTarget"; +import { + Activity +} from "../components/Dropdowns/Activity"; +import { + WebsitePerformance +} from "../components/Analytics/WebsitePerformance"; +import { + Messages +} from "../components/Dropdowns/Messages"; +import { + TasksMedia +} from "../components/ProjectsDashboards/TasksMedia"; +import { + ProjectsList +} from "../components/ProjectsDashboards/ProjectsList"; +import { + SimpleLineChart +} from "../Graphs/ReCharts/components/SimpleLineChart"; +import { + TinyAreaChart +} from "../Graphs/ReCharts/components/TinyAreaChart"; +import { + TimelineMini +} from "../components/Timeline/TimelineMini"; + +export const Widgets = () => ( + + + { /* START Header 1 */} + + + + Last Update: 12-23-2018, 4:32:12 PM, Amount: 4 + + )} + /> + + + { /* END Header 1 */} + { /* START Section 1 */} + + { /* START Card Widget */} + + + + + + { /* START Card Widget */} + { /* START Card Widget */} + + + + + + { /* START Card Widget */} + { /* START Card Widget */} + + + + + + { /* START Card Widget */} + { /* START Card Widget */} + + + + + + { /* START Card Widget */} + + { /* START Section 1 */} + + { /* START Header 2 */} + + + + Last Update: 12-23-2018, 4:32:12 PM, Amount: 4 + + )} + /> + + + { /* END Header 2 */} + { /* START Section 2 */} + + + + + + + { /* START Section 2 */} + + { /* START Header 3 */} + + + + Last Update: 12-23-2018, 4:32:12 PM, Amount: 4 + + )} + /> + + + { /* END Header 3 */} + { /* START Section 3 */} + + + { /* START Card Widget */} + + + + Attachments + + #3.01 + + + + + + + + + + + + + + + + { /* START Card Widget */} + { /* START Card Widget */} + + + + Chat + + #3.03 + + + + + + + + + + + { /* START Card Widget */} + { /* START Card Widget */} + + + + Messages + + #3.05 + + + + + + + + + + + + + + + + { /* START Card Widget */} + { /* START Card Widget */} + + + + Projects + + #3.07 + + + + + + + + + + + + + + + + + + + + + + + + View All Projects + + + + + { /* END Card Widget */} + + + { /* START Card Widget */} + + + + Comments + + #3.02 + + + + + + + + + + + { /* START Card Widget */} + { /* START Card Widget */} + + + + Activity + + #3.04 + + + + + + + + + + + + + + + + + + + { /* END Card Widget */} + { /* START Card Widget */} + + + + Tasks + + #3.06 + + + + + + + + + + + + + + + + + + + + + + + + View All Tasks + + + + + { /* END Card Widget */} + { /* START Card Widget */} + + + + Timeline Mini + + + + + + + + + + + Timeline Details + + + + + { /* END Card Widget */} + + + { /* START Section 3 */} + + { /* START Header 4 */} + + + + Last Update: 12-23-2018, 4:32:12 PM, Amount: 2 + + )} + /> + + + { /* END Header 4 */} + { /* START Section 4 */} + + + { /* START Card Widget */} + + + + Sessions by Device Type + + #4.01 + + + + + + + + + + + + + + + + + + + + + + How do your users (visitors), sessions (visits) and pageviews + metrics for www.webkom.com compare to your targets over the last 30 days? + + + { /* END Card Widget */} + { /* START Card Widget */} + + + + Website Performance + + #4.03 + + + + + + + + + + + + + + + + + + + + How do your users (visitors), sessions (visits) and pageviews + metrics for www.webkom.com compare to your targets over the last 30 days? + + + { /* END Card Widget */} + { /* START Card Widget */} + + +
    + + Spend + + #4.05 + + + + Dec 22, 2016 to
    + Dec 31, 2016 (prev.) +     +
    +
    +

    + $2,890.12 +

    +
    + + 23.34% +
    +
    + vs { faker.finance .amount() } (prev.) +
    +
    +     + + + +     + { /* END Card Widget */} + + + { /* START Card Widget */} + + + + Metrics vs Targets + + #4.02 + + + + + + + How do your users (visitors), sessions (visits) and pageviews + metrics for www.webkom.com compare to your targets over the last 30 days? + + + { /* END Card Widget */} + { /* START Card Widget */} + + +
    +
    +
    + How did my organic traffic perform? + + #4.04 + +
    + + Dec 22, 2016 to Dec 31, 2016 (prev.) + +
    + + Goal: + + + All + + + Select Goal: + All + Other + + Custom... + + + +
    +
    +
    Organics Sessons
    +

    + 46,982 +

    +
    + + 23.34% vs { faker.finance .amount() } (prev.) + +
    +
    + +     + + + How do your users (visitors), sessions (visits) and pageviews + metrics for www.webkom.com compare to your targets over the last 30 days? + +     + { /* END Card Widget */} + +     + { /* START Section 3 */} + +     +); + +export default Widgets; diff --git a/app/routes/Widgets/index.js b/app/routes/Widgets/index.js new file mode 100755 index 0000000..7473a32 --- /dev/null +++ b/app/routes/Widgets/index.js @@ -0,0 +1,3 @@ +import Widgets from './Widgets'; + +export default Widgets; diff --git a/app/routes/components/Analytics/MetricVsTarget.js b/app/routes/components/Analytics/MetricVsTarget.js new file mode 100755 index 0000000..b3547ed --- /dev/null +++ b/app/routes/components/Analytics/MetricVsTarget.js @@ -0,0 +1,46 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { + Progress, + InputGroupAddon, + InputGroupText, + Input, + InputGroup +} from './../../../components'; + + +const MetricVsTarget = (props) => ( + +

    + { props.value } +

    + +
    + Target: { props.targetValue } +
    + + + Daily Target: + + + +     +) +MetricVsTarget.propTypes = { + title: PropTypes.node, + value: PropTypes.node, + progressbarValue: PropTypes.string, + progressbarColor: PropTypes.node, + targetValue: PropTypes.node +}; +MetricVsTarget.defaultProps = { + title: "Title", + value: "000.000", + progressbarValue: "24", + progressbarColor: "secondary", + targetValue: "000.000" +}; + + +export { MetricVsTarget }; diff --git a/app/routes/components/Analytics/SessionsByDevice.js b/app/routes/components/Analytics/SessionsByDevice.js new file mode 100755 index 0000000..40d891e --- /dev/null +++ b/app/routes/components/Analytics/SessionsByDevice.js @@ -0,0 +1,35 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const SessionsByDevice = (props) => ( + +
    + { props.title } +
    +

    + { props.valuePercent }% +

    +
    + { props.value } +
    +     +) +SessionsByDevice.propTypes = { + title: PropTypes.node, + titlePercentColor: PropTypes.node, + valuePercent: PropTypes.string, + valuePercentColor: PropTypes.node, + value: PropTypes.node, + valueColor: PropTypes.node +}; +SessionsByDevice.defaultProps = { + title: "Title", + titlePercentColor: "text-inverse", + valuePercent: "00,0", + valuePercentColor: "text-muted", + value: "000,000", + valueColor: "text-muted" +}; + + +export { SessionsByDevice }; diff --git a/app/routes/components/Analytics/TinyAreaChart.js b/app/routes/components/Analytics/TinyAreaChart.js new file mode 100755 index 0000000..4c81c03 --- /dev/null +++ b/app/routes/components/Analytics/TinyAreaChart.js @@ -0,0 +1,28 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import { + ResponsiveContainer, + AreaChart, + Area +} from 'recharts'; + +import colors from './../../../colors'; + +const data = _.times(20, () => ({ pv: Math.random() * 100 })); + +const TinyAreaChart = ({ height }) => ( + + + + + +); +TinyAreaChart.propTypes = { + height: PropTypes.number, +}; +TinyAreaChart.defaultProps = { + height: 25, +}; + +export { TinyAreaChart }; diff --git a/app/routes/components/Analytics/TinyAreaChartSpend.js b/app/routes/components/Analytics/TinyAreaChartSpend.js new file mode 100755 index 0000000..e39008f --- /dev/null +++ b/app/routes/components/Analytics/TinyAreaChartSpend.js @@ -0,0 +1,21 @@ +import React from 'react'; +import _ from 'lodash'; +import { + ResponsiveContainer, + AreaChart, + Area +} from 'recharts'; + +import colors from './../../../colors'; + +const data = _.times(20, () => ({ pv: Math.random() * 100 })); + +const TinyAreaChartSpend = () => ( + + + + + +); + +export { TinyAreaChartSpend }; diff --git a/app/routes/components/Analytics/TrTableTrafficChannels.js b/app/routes/components/Analytics/TrTableTrafficChannels.js new file mode 100755 index 0000000..0181903 --- /dev/null +++ b/app/routes/components/Analytics/TrTableTrafficChannels.js @@ -0,0 +1,56 @@ +import React from 'react'; +import _ from 'lodash'; +import faker from 'faker/locale/en_US'; +import { + Media, + Avatar, + AvatarAddOn +} from './../../../components'; + +import { randomArray } from './../../../utilities'; + +import { + TinyAreaChart +} from "./TinyAreaChart"; + +const channel = [ + "Organic Search", + "Display", + "Direct", + "Paid Search" +]; + +const change = [ + "75,0% ", + "34,4% ", + "12,9%", + "23,0%" +]; + +const TrTableTrafficChannels = () => ( + + { + _.times(5, (index) => ( + + + { randomArray(channel) } + + + { faker.finance.amount() } + + + { faker.finance.amount() } + + + { randomArray(change) } + + + + + + )) + } + +) + +export { TrTableTrafficChannels }; diff --git a/app/routes/components/Analytics/WebsitePerformance.js b/app/routes/components/Analytics/WebsitePerformance.js new file mode 100755 index 0000000..56dbe33 --- /dev/null +++ b/app/routes/components/Analytics/WebsitePerformance.js @@ -0,0 +1,55 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import PropTypes from 'prop-types'; + +import { + Row, + Col +} from './../../../components'; + +import { + TinyAreaChart +} from "./../../Graphs/ReCharts/components/TinyAreaChart"; + +const WebsitePerformance = (props) => ( + + + +
    + { props.title } +
    + + + +

    + { props.value } +

    +
    + + { props.valuePercent }% +
    +
    + vs { faker.finance .amount() } (prev.) +
    + +     +     +) +WebsitePerformance.propTypes = { + title: PropTypes.node, + value: PropTypes.node, + valuePercentColor: PropTypes.node, + valuePercentIcon: PropTypes.node, + valuePercent: PropTypes.node +}; +WebsitePerformance.defaultProps = { + title: "Title", + value: "00.000", + valuePercentColor: "text-muted", + valuePercentIcon: "caret-down", + valuePercent: "00,00" +}; + + +export { WebsitePerformance }; diff --git a/app/routes/components/Attachment.js b/app/routes/components/Attachment.js new file mode 100755 index 0000000..863f383 --- /dev/null +++ b/app/routes/components/Attachment.js @@ -0,0 +1,61 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import faker from 'faker/locale/en_US'; +import { + Media, + Button +} from 'reactstrap'; + +const Attachment = (props) => ( + + + + + + + + +
    +
    + { faker.system.fileName() } +
    + + by + { faker.name.firstName() } { faker.name.firstName() } + + · + + { faker.finance.amount() } Kb + + +
    +
    +
    + 04-Oct-2012
    + 05:20 PM +
    + +
    +     +     + + +) +Attachment.propTypes = { + mediaClassName: PropTypes.node, + icon: PropTypes.node, + iconClassName: PropTypes.node, + BgIcon: PropTypes.node, + BgIconClassName: PropTypes.node +}; +Attachment.defaultProps = { + mediaClassName: "", + icon: "question", + iconClassName: "text-white", + BgIcon: "square", + BgIconClassName: "text-muted" +}; + +export { Attachment }; diff --git a/app/routes/components/CardFooterInfo.js b/app/routes/components/CardFooterInfo.js new file mode 100755 index 0000000..fc2b7f7 --- /dev/null +++ b/app/routes/components/CardFooterInfo.js @@ -0,0 +1,24 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const CardFooterInfo = (props) => ( + +
    + + { props.text } +
    +     + +) +CardFooterInfo.propTypes = { + icon: PropTypes.node, + iconClassName: PropTypes.node, + text: PropTypes.node, +}; +CardFooterInfo.defaultProps = { + icon: "question-circle", + iconClassName: "text-muted", + text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam beatae, nesciunt incidunt laudantium. Eveniet ratione quis accusantium dolorum velit maiores illo mollitia." +}; + +export { CardFooterInfo }; diff --git a/app/routes/components/CardTextDemo.js b/app/routes/components/CardTextDemo.js new file mode 100755 index 0000000..3a09c01 --- /dev/null +++ b/app/routes/components/CardTextDemo.js @@ -0,0 +1,21 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { CardText } from './../../components'; + +const CardTextDemo = (props) => ( + + + #{ props.cardNo } + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla nisl elit, porta a sapien eget, fringilla sagittis ex. + +) +CardTextDemo.propTypes = { + cardNo: PropTypes.node +}; +CardTextDemo.defaultProps = { + cardNo: "?.??" +}; + +export { CardTextDemo }; diff --git a/app/routes/components/Chat/ChatCardFooter.js b/app/routes/components/Chat/ChatCardFooter.js new file mode 100755 index 0000000..5a5a799 --- /dev/null +++ b/app/routes/components/Chat/ChatCardFooter.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + InputGroup, + InputGroupAddon, + Button, + Input +} from './../../../components'; + +const ChatCardFooter = () => ( + + + + + + + + + + + +) + +export { ChatCardFooter }; diff --git a/app/routes/components/Chat/ChatCardHeader.js b/app/routes/components/Chat/ChatCardHeader.js new file mode 100755 index 0000000..dbb3725 --- /dev/null +++ b/app/routes/components/Chat/ChatCardHeader.js @@ -0,0 +1,38 @@ +import React from 'react'; + +import { + UncontrolledButtonDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, +} from './../../../components'; + +const ChatCardHeader = () => ( + +
    + Chat with Romaine Weber +
    + + + + + + + + Private Message + + + + Search this Thread + + + + + Block this User + + + +     +) + +export { ChatCardHeader }; diff --git a/app/routes/components/Chat/ChatLeft.js b/app/routes/components/Chat/ChatLeft.js new file mode 100755 index 0000000..e8786a8 --- /dev/null +++ b/app/routes/components/Chat/ChatLeft.js @@ -0,0 +1,69 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import faker from 'faker/locale/en_US'; + +import { + Card, + Media, + Avatar, + AvatarAddOn +} from './../../../components'; + +import { randomArray, randomAvatar } from './../../../utilities'; + +const status = [ + "warning", + "danger", + "success", + "secondary" +]; + +const ChatLeft = (props) => ( + + + + , + + ]} + /> + + + +

    + { faker.lorem.paragraph() } +

    +     +
    + + { faker.name.firstName() } { faker.name.firstName() } + + + 13-Jun-2015, 08:13 + +
    +     +     +     +) +ChatLeft.propTypes = { + cardClassName: PropTypes.node +}; +ChatLeft.defaultProps = { + cardClassName: "bg-white" +}; + +export { ChatLeft }; diff --git a/app/routes/components/Chat/ChatLeftNav.js b/app/routes/components/Chat/ChatLeftNav.js new file mode 100755 index 0000000..d4c3fc2 --- /dev/null +++ b/app/routes/components/Chat/ChatLeftNav.js @@ -0,0 +1,248 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Nav, + NavItem, + Media, + InputGroup, + Input, + InputGroupAddon, + Button, + Avatar, + AvatarAddOn, + NavLink +} from './../../../components'; +import { randomAvatar } from './../../../utilities'; + +const ChatLeftNav = () => ( + + { /* START Left Nav */} +
    +
    + Search +
    + + + + + + +
    + { /* END Left Nav */} + { /* START Left Nav */} +
    +
    + + Contacts + +
    + +
    + { /* END Left Nav */} + { /* START Left Nav */} +
    +
    + + Updates + +
    + +
    + { /* END Left Nav */} +     +) + +export { ChatLeftNav }; diff --git a/app/routes/components/Chat/ChatRight.js b/app/routes/components/Chat/ChatRight.js new file mode 100755 index 0000000..5a7cd5e --- /dev/null +++ b/app/routes/components/Chat/ChatRight.js @@ -0,0 +1,69 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import faker from 'faker/locale/en_US'; + +import { + Card, + Media, + Avatar, + AvatarAddOn +} from './../../../components'; + +import { randomArray, randomAvatar } from './../../../utilities'; + +const status = [ + "warning", + "danger", + "success", + "secondary" +]; + +const ChatRight = (props) => ( + + + + +

    + { faker.lorem.paragraph() } +

    +     +
    + + { faker.name.firstName() } { faker.name.firstName() } + + + 13-Jun-2015, 08:13 + +
    +     + + , + + ]} + /> + +     +     +) +ChatRight.propTypes = { + cardClassName: PropTypes.node +}; +ChatRight.defaultProps = { + cardClassName: "bg-white" +}; + +export { ChatRight }; diff --git a/app/routes/components/Colors/CardColor.js b/app/routes/components/Colors/CardColor.js new file mode 100755 index 0000000..4fffc61 --- /dev/null +++ b/app/routes/components/Colors/CardColor.js @@ -0,0 +1,65 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + Card, + CardTitle, + CardBody, + CardHeader +} from './../../../components'; + +import { InfoPopover } from './InfoPopover'; + +const CardColor = (props) => ( + + + + + { props.color } + +
    +
    Hex
    +
    + {props.hex} +
    +
    Rgba
    +
    + {props.rgba} +
    +
    Cmyk
    +
    + {props.cmyk} +
    +
    Scss
    +
    + ${ props.color } +
    +
    More
    +
    + + Details + + +
    +
    +     +     + +) +CardColor.propTypes = { + cardClass: PropTypes.node, + color: PropTypes.node, + hex: PropTypes.node, + rgba: PropTypes.node, + cmyk: PropTypes.node, + scss: PropTypes.node +}; +CardColor.defaultProps = { + cardClass: "", + color: "Waiting for Data...", + hex: "Waiting for Data...", + rgba: "Waiting for Data...", + cmyk: "Waiting for Data...", + scss: "Waiting for Data...", +}; + +export { CardColor }; diff --git a/app/routes/components/Colors/CardRgbaColor.js b/app/routes/components/Colors/CardRgbaColor.js new file mode 100755 index 0000000..a78ed68 --- /dev/null +++ b/app/routes/components/Colors/CardRgbaColor.js @@ -0,0 +1,43 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'lodash'; +import { + Card, + CardBody, + CardFooter, + Button, + CardHeader +} from './../../../components'; + +import { InfoPopover } from './InfoPopover'; + +const CardRgbaColor = (props) => ( + + { + _.times(9, (index) => { + let Tag = CardFooter; + Tag = index === 0 ? CardHeader : CardBody; + Tag = index === 8 ? CardFooter : CardBody; + const colorId = `${ props.color }-0${ index + 1 }` + return ( + + + { colorId } + + + + ); + }) + } + +); +CardRgbaColor.propTypes = { + cardClass: PropTypes.node, + color: PropTypes.node +}; +CardRgbaColor.defaultProps = { + cardClass: "", + color: "Waiting for Data..." +}; + +export { CardRgbaColor }; diff --git a/app/routes/components/Colors/InfoPopover.js b/app/routes/components/Colors/InfoPopover.js new file mode 100755 index 0000000..c9e4436 --- /dev/null +++ b/app/routes/components/Colors/InfoPopover.js @@ -0,0 +1,56 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + UncontrolledPopover, + PopoverHeader, + PopoverBody, + Button +} from './../../../components'; + +export const POPOVER_BODY_PARTS = [ + '.text-', + '.bg-', + '.b-', + '.bl-', + '.br-', + '.bt-', + '.bb-', + '.by-', + '.bx-', + '.btn-' +]; + +export const InfoPopover = ({ colorId, children, className, tag: Tag, ...otherProps }) => ( + + + { children } + + + + Color Options for { colorId } + + + { + POPOVER_BODY_PARTS.map((partText, index) => + { `${partText}${colorId}` } + ) + } + + + +); +InfoPopover.propTypes = { + colorId: PropTypes.string, + children: PropTypes.node, + className: PropTypes.string, + tag: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func + ]) +}; +InfoPopover.defaultProps = { + tag: 'a' +} \ No newline at end of file diff --git a/app/routes/components/Comment.js b/app/routes/components/Comment.js new file mode 100755 index 0000000..c82736a --- /dev/null +++ b/app/routes/components/Comment.js @@ -0,0 +1,89 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import faker from 'faker/locale/en_US'; +import { + Avatar, + Media, + AvatarAddOn, + UncontrolledTooltip +} from './../../components'; +import { randomArray, randomAvatar } from './../../utilities'; + +const status = [ + "success", + "danger", + "warning", + "secondary" +]; + +const Comment = (props) => ( + + + + , + + ]} + /> + + +
    + + { faker.name.firstName() } { faker.name.firstName() } + + + 13-Jun-2015, 08:13 + +
    +

    + { faker.lorem.paragraph() } +

    +
    + + +92 + + + + + + Vote Up + + + + + + Vote Down + + · + + Reply + + · + + Edit + +
    +     +     + +) +Comment.propTypes = { + mediaClassName: PropTypes.node +}; +Comment.defaultProps = { + mediaClassName: "text-empty" +}; + +export { Comment }; diff --git a/app/routes/components/Dropdowns/Activity.js b/app/routes/components/Dropdowns/Activity.js new file mode 100755 index 0000000..f2019f0 --- /dev/null +++ b/app/routes/components/Dropdowns/Activity.js @@ -0,0 +1,45 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import faker from 'faker/locale/en_US'; +import { + Media, +} from './../../../components'; + +const Activity = (props) => ( + + + + + + + + + + + { faker.name.firstName() } { faker.name.lastName() } + changed Description to "{ faker.random.words() }" +

    + { faker.lorem.sentence() } +

    +
    + { faker.date.past().toString() } +
    +     +     +     + +) +Activity.propTypes = { + iconColorBelow: PropTypes.node, + iconBelow: PropTypes.node, + iconColor: PropTypes.node, + icon: PropTypes.node +}; +Activity.defaultProps = { + iconColorBelow: "muted", + iconBelow: "circle", + iconColor: "white", + icon: "question", +}; + +export { Activity }; diff --git a/app/routes/components/Dropdowns/DropdownProfile.js b/app/routes/components/Dropdowns/DropdownProfile.js new file mode 100755 index 0000000..82b57ed --- /dev/null +++ b/app/routes/components/Dropdowns/DropdownProfile.js @@ -0,0 +1,43 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import PropTypes from 'prop-types'; +import { Link } from 'react-router-dom'; + +import { + DropdownMenu, + DropdownItem +} from './../../../components'; + +const DropdownProfile = (props) => ( + + + + { faker.name.firstName() } { faker.name.lastName() } + + + + My Profile + + + Settings + + + Billings + + + + + Sign Out + + + +) +DropdownProfile.propTypes = { + position: PropTypes.string, + right: PropTypes.bool +}; +DropdownProfile.defaultProps = { + position: "" +}; + +export { DropdownProfile }; diff --git a/app/routes/components/Dropdowns/Messages.js b/app/routes/components/Dropdowns/Messages.js new file mode 100755 index 0000000..fae12df --- /dev/null +++ b/app/routes/components/Dropdowns/Messages.js @@ -0,0 +1,60 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Avatar, + AvatarAddOn, + Media +} from './../../../components'; +import { randomArray, randomAvatar } from './../../../utilities'; + +const status = [ + "success", + "danger", + "warning", + "secondary" +]; + +const Messages = () => ( + + + + , + + ]} + /> + + + + + { faker.name.firstName() } { faker.name.lastName() } + + + (23) + Now + +

    + { faker.lorem.sentences() } +

    + + { faker.date.past().toString() } + +     +     +     + +) + +export { Messages }; diff --git a/app/routes/components/Dropdowns/SwitchVersion.js b/app/routes/components/Dropdowns/SwitchVersion.js new file mode 100755 index 0000000..e27abf6 --- /dev/null +++ b/app/routes/components/Dropdowns/SwitchVersion.js @@ -0,0 +1,64 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import { Link } from 'react-router-dom'; + +import { + Badge, +} from './../../../components'; + +import { + DropdownMenu, + DropdownItem +} from './../../../components'; + +const SwitchVersion = () => ( + + + + Bootstrap 4 Versions: + + + + Jquery 2.0 +
    + + Sun, Jun 12, 2018 4:43:12 PM + +     + +     + + + React 2.0 +
    + + Sun, Jun 12, 2018 4:43:12 PM + +     + +     + + + Angular 1.0 +
    + + Sun, Jun 12, 2018 4:43:12 PM + +     + +     + + + Vue 1.0.0 +
    + + Sun, Jun 12, 2018 4:43:12 PM + +     + +     +     +     +) + +export { SwitchVersion }; diff --git a/app/routes/components/Files/FilesCardGrid.js b/app/routes/components/Files/FilesCardGrid.js new file mode 100755 index 0000000..d027131 --- /dev/null +++ b/app/routes/components/Files/FilesCardGrid.js @@ -0,0 +1,160 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Card, + CardBody, + Badge, + CardFooter, + HolderProvider, + Avatar, + UncontrolledButtonDropdown, + DropdownToggle, + CardImg, + DropdownMenu, + DropdownItem, + AvatarAddOn +} from './../../../components'; + +import { randomArray, randomAvatar } from './../../../utilities'; + +const badges = [ + "secondary" +]; + +const avatarStatus = [ + "secondary", + "warning", + "danger", + "success" +]; + +const FilesCardGrid = () => ( + + { /* START Card */} + + + + + +
    + { faker.commerce.productName() } +
    + + { faker.finance.amount() } Mb + +
    + { faker.system.commonFileName() }
    + { faker.internet.userName() }
    + { faker.date.weekday() }, 12 { faker.date.month() }, 2018
    + 12:34 PM +
    +
    + + { faker.commerce.department() } + + + { faker.commerce.department() } + + + { faker.commerce.department() } + +
    +
    + , + + ]} + /> + , + + ]} + /> + , + + ]} + /> +
    +     + +
    + + Details + + + + + + + + + Share + + + + Download + + + + Delete + + + + Edit + + + + + Copy + + + +
    +     +     + { /* END Card */} +     +) + +export { FilesCardGrid }; diff --git a/app/routes/components/Files/FilesLeftNav.js b/app/routes/components/Files/FilesLeftNav.js new file mode 100755 index 0000000..9e2e0ba --- /dev/null +++ b/app/routes/components/Files/FilesLeftNav.js @@ -0,0 +1,123 @@ +import React from 'react'; + +import { + Nav, + NavItem, + NavLink, + Badge +} from './../../../components'; + +const FilesLeftNav = () => ( + + { /* START Left Nav */} +
    + +
    + { /* END Left Nav */} + { /* START Left Nav */} +
    +
    + Tags +
    + +
    + { /* END Left Nav */} +     +) + +export { FilesLeftNav }; diff --git a/app/routes/components/Financial/StackedAreaChart.js b/app/routes/components/Financial/StackedAreaChart.js new file mode 100755 index 0000000..42259c2 --- /dev/null +++ b/app/routes/components/Financial/StackedAreaChart.js @@ -0,0 +1,119 @@ +import React from 'react'; +import { map } from 'lodash'; +import { + AreaChart, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Area, + Dot, + Rectangle, + Polygon +} from './../../../components/recharts'; + +import colors from './../../../colors'; + +const generateDot = ({ diameter, fill, stroke }) => + /* eslint-disable */ + ({ cx, cy }) => ( + + ) + /* eslint-enable */ + +const generateSquare = ({ height, fill, stroke }) => + /* eslint-disable */ + ({ cx, cy }) => ( + + ); + /* eslint-enable */ + +const generateTriangle = ({height, fill, stroke}) => + // eslint-disable-next-line react/prop-types + ({ cx, cy }) => { + const halfSide = height / Math.sqrt(3); + const points = [ + { x: 0, y: -(height * 2 / 3) }, + { x: -halfSide, y: height / 3 }, + { x: halfSide, y: height / 3 } + ]; + const vertices = map(points, ({ x, y }) => ({ x: cx + x, y: cy + y })); + + return ( + + ); + } + +const data = [ + {name: 'Mon', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Tue', uv: 3000, pv: 1398, amt: 2210}, + {name: 'Wed', uv: 2000, pv: 9800, amt: 2290}, + {name: 'Thu', uv: 2780, pv: 3908, amt: 2000}, + {name: 'Fri', uv: 1890, pv: 4800, amt: 2181}, + {name: 'Sat', uv: 2390, pv: 3800, amt: 2500}, + {name: 'Sun', uv: 3490, pv: 4300, amt: 2100}, +]; + +const StackedAreaChart = () => ( + + + + + + + + + + + + +) + +export { StackedAreaChart }; diff --git a/app/routes/components/Financial/TinyDonutChartBig.js b/app/routes/components/Financial/TinyDonutChartBig.js new file mode 100755 index 0000000..5dcdfab --- /dev/null +++ b/app/routes/components/Financial/TinyDonutChartBig.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + PieChart, + Pie, + Cell +} from 'recharts'; + +import colors from './../../../colors'; + +const data = [ + {name: 'Group A', value: 400}, + {name: 'Group B', value: 300}, + {name: 'Group C', value: 300}, + {name: 'Group C', value: 300} +]; + +const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']]; + +const TinyDonutChartBig = (props) => ( + + + { + data.map((entry, index) => ) + } + + +); + +TinyDonutChartBig.propTypes = { + pieBg: PropTypes.spring +}; +TinyDonutChartBig.defaultProps = { + pieBg: "300" +}; + +export { TinyDonutChartBig }; diff --git a/app/routes/components/Financial/TrTableInvoices.js b/app/routes/components/Financial/TrTableInvoices.js new file mode 100755 index 0000000..2d76d2c --- /dev/null +++ b/app/routes/components/Financial/TrTableInvoices.js @@ -0,0 +1,74 @@ +import React from 'react'; +import _ from 'lodash'; +import faker from 'faker/locale/en_US'; +import { + Media, + Avatar, + AvatarAddOn +} from './../../../components'; + +import { randomAvatar } from './../../../utilities'; + +const TrTableInvoices = () => ( + + { + _.times(6, (index) => ( + + + { faker.company.companyName() }
    + { faker.company.bsBuzz() } + + + ${ faker.commerce.price() } + + + 25-May-2018 + + + + + , + + ]} + /> + + + + + { faker.name.firstName() } { faker.name.lastName() } + + +

    + { faker.name.jobTitle() } +

    +     +     + + + + { faker.internet.exampleEmail() } +
    + { faker.phone.phoneNumber() } + + + View + + + )) + } +     +) + +export { TrTableInvoices }; diff --git a/app/routes/components/Financial/TrTableRecentFundings.js b/app/routes/components/Financial/TrTableRecentFundings.js new file mode 100755 index 0000000..946c517 --- /dev/null +++ b/app/routes/components/Financial/TrTableRecentFundings.js @@ -0,0 +1,29 @@ +import React from 'react'; +import _ from 'lodash'; +import faker from 'faker/locale/en_US'; + + +const TrTableRecentFundings = () => ( + + { + _.times(6, (index) => ( + + + { faker.company.companyName() } + + + ${ faker.commerce.price() } + + + 20-02-2015 + + + View + + + )) + } + +) + +export { TrTableRecentFundings }; diff --git a/app/routes/components/FooterText.js b/app/routes/components/FooterText.js new file mode 100755 index 0000000..52955b6 --- /dev/null +++ b/app/routes/components/FooterText.js @@ -0,0 +1,29 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const FooterText = (props) => ( + + (C) { props.year } All Rights Reserved. This is the "{ props.name }" built with { props.desc }. + Designed and implemented by{' '} + + www.webkom.co + + +) +FooterText.propTypes = { + year: PropTypes.node, + name: PropTypes.node, + desc: PropTypes.node, +}; +FooterText.defaultProps = { + year: "2018", + name: "Admin Theme", + desc: "Bootstrap 4, React 16 (latest) & NPM" +}; + +export { FooterText }; diff --git a/app/routes/components/Gallery/GalleryCard.js b/app/routes/components/Gallery/GalleryCard.js new file mode 100755 index 0000000..2a369b7 --- /dev/null +++ b/app/routes/components/Gallery/GalleryCard.js @@ -0,0 +1,116 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import PropTypes from 'prop-types'; + +import { + Card, + CardImg, + HolderProvider, + Media, + Avatar, + CustomInput, + UncontrolledTooltip, + AvatarAddOn, + Badge, + CardBody +} from './../../../components'; + +import { randomArray, randomAvatar } from './../../../utilities'; + +const status = [ + "success", + "danger", + "warning", + "secondary" +]; +const badges = [ + "secondary" +]; + +const GalleryCard = (props) => ( + + { /* START Card */} + + + + + + + + + + + + + { faker.commerce.productName() } + +
    + + { faker.system.fileName() } + +     +     + + + + + + Download + + +     + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + + + { faker.address.state() }, { faker.address.stateAbbr() } + + + +
    + + { faker.commerce.department() } + + + { faker.commerce.department() } + + + { faker.commerce.department() } + +
    +     +     + { /* END Card */} +     +) +GalleryCard.propTypes = { + id: PropTypes.node +}; +GalleryCard.defaultProps = { + id: "1" +}; + +export { GalleryCard }; diff --git a/app/routes/components/HeaderDemo.js b/app/routes/components/HeaderDemo.js new file mode 100755 index 0000000..758444d --- /dev/null +++ b/app/routes/components/HeaderDemo.js @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Media } from 'reactstrap'; + +const HeaderDemo = (props) => ( + + +

    + {props.no}. +

    +     + +

    + {props.title} +

    +

    {props.children || props.subTitle}

    +     +     +) +HeaderDemo.propTypes = { + no: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]), + title: PropTypes.string, + subTitle: PropTypes.string, + children: PropTypes.node, + className: PropTypes.string +}; +HeaderDemo.defaultProps = { + no: 0, + title: "Waiting for Data...", + subTitle: "Waiting for Data..." +}; + +export { HeaderDemo }; diff --git a/app/routes/components/HeaderMain.js b/app/routes/components/HeaderMain.js new file mode 100755 index 0000000..17da9eb --- /dev/null +++ b/app/routes/components/HeaderMain.js @@ -0,0 +1,26 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const HeaderMain = (props) => ( + + { /* START H1 Header */} +
    +

    + { props.title } +

    +
    + { /* END H1 Header */} +     +) +HeaderMain.propTypes = { + title: PropTypes.string, + subTitle: PropTypes.node, + className: PropTypes.string +}; +HeaderMain.defaultProps = { + title: "Waiting for Data...", + subTitle: "Waiting for Data...", + className: "my-4" +}; + +export { HeaderMain }; diff --git a/app/routes/components/LogoThemed/LogoThemed.js b/app/routes/components/LogoThemed/LogoThemed.js new file mode 100755 index 0000000..e7a4778 --- /dev/null +++ b/app/routes/components/LogoThemed/LogoThemed.js @@ -0,0 +1,56 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { ThemeConsumer } from '../../../components/Theme'; + +const logos = { + 'white': require('./../../../images/logos/logo-white.svg'), + 'primary': require('./../../../images/logos/logo-primary.svg'), + 'success': require('./../../../images/logos/logo-success.svg'), + 'warning': require('./../../../images/logos/logo-warning.svg'), + 'danger': require('./../../../images/logos/logo-danger.svg'), + 'info': require('./../../../images/logos/logo-info.svg'), + 'indigo': require('./../../../images/logos/logo-indigo.svg'), + 'purple': require('./../../../images/logos/logo-purple.svg'), + 'pink': require('./../../../images/logos/logo-pink.svg'), + 'yellow': require('./../../../images/logos/logo-yellow.svg') +} + +const getLogoUrl = (style, color) => { + return logos[color]; +} + +// Check for background +const getLogoUrlBackground = (style, color) => { + if (style === 'color') { + return logos['white']; + } else { + return getLogoUrl(style, color); + } +} + +const LogoThemed = ({ checkBackground, className, ...otherProps }) => ( + + { + ({ style, color }) => ( + Airframe Logo + ) + } + +); +LogoThemed.propTypes = { + checkBackground: PropTypes.bool, + className: PropTypes.string, +}; + +export { LogoThemed }; diff --git a/app/routes/components/Logos/LogoNavbar.js b/app/routes/components/Logos/LogoNavbar.js new file mode 100755 index 0000000..4f88931 --- /dev/null +++ b/app/routes/components/Logos/LogoNavbar.js @@ -0,0 +1,22 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const LogoNavbar = (props) => ( + + { /* START Logo: Visible on: md, lg, xl */} + + { /* END Logo: Visible on: md, lg, xl */} + { /* START Logo: Visible on: xs, sm */} + + { /* END Logo: Visible on: xs, sm */} + +) + +LogoNavbar.propTypes = { + logo: PropTypes.node +}; +LogoNavbar.defaultProps = { + logo: "send" +}; + +export { LogoNavbar }; diff --git a/app/routes/components/Logos/LogotypeNavbar.js b/app/routes/components/Logos/LogotypeNavbar.js new file mode 100755 index 0000000..e36f4d8 --- /dev/null +++ b/app/routes/components/Logos/LogotypeNavbar.js @@ -0,0 +1,33 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const LogotypeNavbar = (props) => ( + + { /* START Logotype: Visible on: md, lg, xl */} +
    + { props.logotype } +
    + { /* END Logotype: Visible on: md, lg, xl */} + { /* START Logotype: Visible on: xs, sm */} +
    + { props.logotype } +
    + { /* END Logotype: Visible on: xs, sm */} +
    + Version: React, { props.version } +
    +     +) + +LogotypeNavbar.propTypes = { + logoH: PropTypes.node, + logotype: PropTypes.node, + version: PropTypes.node, +}; +LogotypeNavbar.defaultProps = { + logoH: "h5", + logotype: "react", + version: "2.0" +}; + +export { LogotypeNavbar }; diff --git a/app/routes/components/Mailbox/MailboxLeftNav.js b/app/routes/components/Mailbox/MailboxLeftNav.js new file mode 100755 index 0000000..8c74807 --- /dev/null +++ b/app/routes/components/Mailbox/MailboxLeftNav.js @@ -0,0 +1,98 @@ +import React from 'react'; + +import { + Nav, + NavItem, + NavLink, + Badge +} from './../../../components'; + +const MailboxLeftNav = () => ( + + { /* START Left Nav */} +
    + +
    + { /* END Left Nav */} + { /* START Left Nav */} +
    +
    + Labels +
    + +
    + { /* END Left Nav */} +     +) + +export { MailboxLeftNav }; diff --git a/app/routes/components/Monitor/TinyAreaChart.js b/app/routes/components/Monitor/TinyAreaChart.js new file mode 100755 index 0000000..6dc03e4 --- /dev/null +++ b/app/routes/components/Monitor/TinyAreaChart.js @@ -0,0 +1,21 @@ +import React from 'react'; +import _ from 'lodash'; +import { + ResponsiveContainer, + AreaChart, + Area +} from './../../../components/recharts'; + +import colors from './../../../colors'; + +const data = _.times(20, () => ({ pv: Math.random() * 100 })); + +const TinyAreaChart = () => ( + + + + + +); + +export { TinyAreaChart }; diff --git a/app/routes/components/Monitor/TinyDonutChart.js b/app/routes/components/Monitor/TinyDonutChart.js new file mode 100755 index 0000000..3de68c5 --- /dev/null +++ b/app/routes/components/Monitor/TinyDonutChart.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { + PieChart, + Pie, + Cell +} from 'recharts'; + +import colors from './../../../colors'; + +const data = [ + {name: 'Group A', value: 400}, + {name: 'Group B', value: 300}, + {name: 'Group C', value: 300} +]; + +const COLORS = [ colors['primary'], colors['info'], colors['300']]; + +const TinyDonutChart = () => ( + + + { + data.map((entry, index) => ) + } + + +); + +export { TinyDonutChart }; diff --git a/app/routes/components/Monitor/TinyDonutChartBig.js b/app/routes/components/Monitor/TinyDonutChartBig.js new file mode 100755 index 0000000..74391a8 --- /dev/null +++ b/app/routes/components/Monitor/TinyDonutChartBig.js @@ -0,0 +1,40 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + PieChart, + Pie, + Cell +} from 'recharts'; + +import colors from './../../../colors'; + +const data = [ + {name: 'Group A', value: 400}, + {name: 'Group B', value: 300} +]; + +const TinyDonutChartBig = (props) => ( + + + + + +); + +TinyDonutChartBig.propTypes = { + pieColor: PropTypes.string, + pieBg: PropTypes.string +}; +TinyDonutChartBig.defaultProps = { + pieColor: "secondary", + pieBg: "300" +}; + +export { TinyDonutChartBig }; diff --git a/app/routes/components/Monitor/TrTableMonitor.js b/app/routes/components/Monitor/TrTableMonitor.js new file mode 100755 index 0000000..b0db904 --- /dev/null +++ b/app/routes/components/Monitor/TrTableMonitor.js @@ -0,0 +1,52 @@ +import React from 'react'; +import _ from 'lodash'; + +import { + Badge, + Progress +} from './../../../components'; + +/*eslint-disable */ +const status = [ + + Healthly + , + + Degraded + +]; +/*eslint-enable */ +/*eslint-disable */ +const tasksCompleted = [ + "25", + "50", + "70", + "90" +]; +/*eslint-enable */ + +const TrTableMonitor = () => ( + + { + _.times(14, (index) => ( + + + HDD1 (ada0) + + + Mirror /mtn/volume1 + + + + + + 7.3.5 TiB / 9.3.1 TiB + + { status[index%2] } + + )) + } + +) + +export { TrTableMonitor }; diff --git a/app/routes/components/Navbars/NavbarExample.js b/app/routes/components/Navbars/NavbarExample.js new file mode 100755 index 0000000..1402d62 --- /dev/null +++ b/app/routes/components/Navbars/NavbarExample.js @@ -0,0 +1,114 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Link } from 'react-router-dom'; + +import { + Avatar, + AvatarAddOn, + Button, + DropdownToggle, + NavbarThemeProvider, + Navbar, + NavbarBrand, + Nav, + NavItem, + NavLink, + NavbarToggler, + UncontrolledCollapse, + UncontrolledDropdown, +} from './../../../components'; + +import { NavbarActivityFeed } from './../../../layout/components/NavbarActivityFeed'; +import { NavbarMessages } from './../../../layout/components/NavbarMessages'; +import { NavbarUser } from './../../../layout/components/NavbarUser'; +import { NavbarNavigation } from './NavbarNavigation'; +import { DropdownProfile } from './../Dropdowns/DropdownProfile'; + +import { randomAvatar } from './../../../utilities'; + +const NavbarExample = ({ themeColor, themeStyle, navStyle }) => { + return ( + + + + + react.bs4 + + + + + + { /* Navigation with Collapse */ } + + + + + { /* END Navbar: Left Side */ } + { /* START Navbar: Right Side */ } + + { /* END Navbar: Right Side */ } + + + +

    + Navbar Only +

    + + +     +     + ); +} + +NavbarExample.propTypes = { + navStyle: PropTypes.oneOf(['pills', 'accent', 'default']), + themeStyle: PropTypes.string, + themeColor: PropTypes.string, +}; +NavbarExample.defaultProps = { + navStyle: 'default', + themeStyle: 'dark', + themeColor: 'primary' +}; + +export { NavbarExample }; diff --git a/app/routes/components/Navbars/NavbarNavigation.js b/app/routes/components/Navbars/NavbarNavigation.js new file mode 100755 index 0000000..7d9dc75 --- /dev/null +++ b/app/routes/components/Navbars/NavbarNavigation.js @@ -0,0 +1,158 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { NavLink as Link } from 'react-router-dom'; +import classNames from 'classnames'; + +import { + Nav, + DropdownToggle, + NavLink, + UncontrolledDropdown, + NavItem, + DropdownMenu, + DropdownItem, + NestedDropdown +} from './../../../components'; + +const NavbarNavigation = ({ accent, pills, ...navbarProps }) => ( + +); +NavbarNavigation.propTypes = { + pills: PropTypes.bool, + accent: PropTypes.bool, +}; + + +export { NavbarNavigation }; diff --git a/app/routes/components/Pages/FooterAuth.js b/app/routes/components/Pages/FooterAuth.js new file mode 100755 index 0000000..bc9745c --- /dev/null +++ b/app/routes/components/Pages/FooterAuth.js @@ -0,0 +1,15 @@ +import React from 'react'; +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import { FooterText } from '../FooterText'; + +const FooterAuth = ({ className }) => ( +

    + +

    +); +FooterAuth.propTypes = { + className: PropTypes.string +}; + +export { FooterAuth }; diff --git a/app/routes/components/Pages/HeaderAuth.js b/app/routes/components/Pages/HeaderAuth.js new file mode 100755 index 0000000..cbd264b --- /dev/null +++ b/app/routes/components/Pages/HeaderAuth.js @@ -0,0 +1,40 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Link } from 'react-router-dom'; + +import { LogoThemed } from './../LogoThemed/LogoThemed'; + +const HeaderAuth = (props) => ( +
    +
    + + { + props.icon ? ( + + ) : ( + + ) + } + +
    +
    + { props.title } +
    +

    + { props.text } +

    +
    +) +HeaderAuth.propTypes = { + icon: PropTypes.node, + iconClassName: PropTypes.node, + title: PropTypes.node, + text: PropTypes.node, +}; +HeaderAuth.defaultProps = { + title: "Waiting for Data...", + text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure voluptas aperiam odit, reiciendis dicta nihil.", + iconClassName: "text-theme" +}; + +export { HeaderAuth }; diff --git a/app/routes/components/Paginations.js b/app/routes/components/Paginations.js new file mode 100755 index 0000000..5027885 --- /dev/null +++ b/app/routes/components/Paginations.js @@ -0,0 +1,40 @@ +import React from 'react'; + +import { + Pagination, + PaginationItem, + PaginationLink +} from 'reactstrap'; + +const Paginations = () => ( + + + + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + + + + +) + +export { Paginations }; diff --git a/app/routes/components/Profile.js b/app/routes/components/Profile.js new file mode 100755 index 0000000..38a96e3 --- /dev/null +++ b/app/routes/components/Profile.js @@ -0,0 +1,112 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Avatar, + AvatarAddOn +} from './../../components'; + +import { randomArray, randomAvatar } from './../../utilities'; + +const Profile = () => { + + const avatar = [ + [ + , + + ], + [ + , + + ], + [ + , + + ], + [ + , + + ], + [ + , + + ], + ]; + return ( + +
    + , + ...randomArray(avatar) + ]} + /> +
    +
    + + { faker.name.firstName() } { faker.name.lastName() } + +
    + { faker.name.jobTitle() } +
    +
    + + { faker.address.city() } +
    +
    +     + ) +} + +export { Profile }; diff --git a/app/routes/components/Profile/DlRowAddress.js b/app/routes/components/Profile/DlRowAddress.js new file mode 100755 index 0000000..c87dcc0 --- /dev/null +++ b/app/routes/components/Profile/DlRowAddress.js @@ -0,0 +1,27 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const DlRowAddress = (props) => ( + +
    +
    Adress
    +
    700 Zemlak Glen
    +
    City
    +
    Jacobiton
    +
    State
    +
    West Virginia
    +
    ZIP
    +
    87032
    +
    +     +) +DlRowAddress.propTypes = { + leftSideClassName: PropTypes.node, + rightSideClassName: PropTypes.node +}; +DlRowAddress.defaultProps = { + leftSideClassName: "", + rightSideClassName: "" +}; + +export { DlRowAddress }; diff --git a/app/routes/components/Profile/DlRowContacts.js b/app/routes/components/Profile/DlRowContacts.js new file mode 100755 index 0000000..aee637f --- /dev/null +++ b/app/routes/components/Profile/DlRowContacts.js @@ -0,0 +1,31 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const DlRowContacts = (props) => ( + +
    +
    Phone
    +
    340-702-6720
    +
    Mobile
    +
    363-999-9380
    +
    Fax
    +
    727-613-5840
    +
    Email
    +
    + t.herald@gmail.com +
    +
    Skype
    +
    t.herald
    +
    +     +) +DlRowContacts.propTypes = { + leftSideClassName: PropTypes.node, + rightSideClassName: PropTypes.node +}; +DlRowContacts.defaultProps = { + leftSideClassName: "text-right", + rightSideClassName: "text-left" +}; + +export { DlRowContacts }; diff --git a/app/routes/components/Profile/ProfileHeader.js b/app/routes/components/Profile/ProfileHeader.js new file mode 100755 index 0000000..82f2e7e --- /dev/null +++ b/app/routes/components/Profile/ProfileHeader.js @@ -0,0 +1,50 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import faker from 'faker/locale/en_US'; + +import { + Badge, + Media, + Avatar, + AvatarAddOn +} from './../../../components'; +import { randomAvatar } from './../../../utilities'; + +const ProfileHeader = () => ( + + { /* START Header */} + + + , + + ]} + /> + + +
    + + { faker.name.firstName() } { faker.name.lastName() } + / Profile Edit +
    + Premium + Edit Your Name, Avatar, etc. +     +     + { /* END Header */} +     +) + +export { ProfileHeader }; diff --git a/app/routes/components/Profile/ProfileLeftNav.js b/app/routes/components/Profile/ProfileLeftNav.js new file mode 100755 index 0000000..3fa66db --- /dev/null +++ b/app/routes/components/Profile/ProfileLeftNav.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { NavLink as RouterNavLink } from 'react-router-dom'; +import { + Nav, + NavItem, + NavLink +} from './../../../components'; + +const ProfileLeftNav = () => ( + + { /* START Left Nav */} +
    + +
    + { /* END Left Nav */} +     +) + +export { ProfileLeftNav }; diff --git a/app/routes/components/Profile/ProfileOverviewCard.js b/app/routes/components/Profile/ProfileOverviewCard.js new file mode 100755 index 0000000..6846d18 --- /dev/null +++ b/app/routes/components/Profile/ProfileOverviewCard.js @@ -0,0 +1,59 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { + CardTitle, + Badge +} from './../../../components'; + +const ProfileOverviewCard = (props) => ( + +
    + + { props.title } + + + { props.badgeTitle } + +
    +
    +

    { props.value }

    + + { props.valueTitle } + +
    +
    + + { props.footerTitle } + + + + { props.footerValue } + +
    +     +) +ProfileOverviewCard.propTypes = { + title: PropTypes.node, + badgeColor: PropTypes.node, + badgeTitle: PropTypes.node, + value: PropTypes.node, + valueTitle: PropTypes.node, + footerTitle: PropTypes.node, + footerTitleClassName: PropTypes.node, + footerIcon: PropTypes.node, + footerValue: PropTypes.node +}; +ProfileOverviewCard.defaultProps = { + title: "Waiting", + badgeColor: "secondary", + badgeTitle: "Waiting", + value: "0.000", + valueTitle: "Waiting", + footerTitle: "Waiting", + footerTitleClassName: "text-muted", + footerIcon: "caret-down", + footerValue: "0.00%" +}; + +export { ProfileOverviewCard }; diff --git a/app/routes/components/Projects/ProjectsCardGrid.js b/app/routes/components/Projects/ProjectsCardGrid.js new file mode 100755 index 0000000..a3c3f66 --- /dev/null +++ b/app/routes/components/Projects/ProjectsCardGrid.js @@ -0,0 +1,123 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import { Link } from 'react-router-dom'; + +import { + Card, + CardBody, + Badge, + CardFooter, + Progress, + Avatar, + UncontrolledButtonDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem +} from './../../../components'; + +import { randomArray, randomAvatar } from './../../../utilities'; + +const badges = [ + + Active + , + + Suspended + , + + Waiting + , + + Paused + , +]; + +const taskCompleted = [ + "15", + "28", + "30", + "80", + "57", + "90" +]; + +const ProjectsCardGrid = () => ( + + { /* START Card */} + + + { randomArray(badges) } +
    + + + + + { faker.company.catchPhrase() } + +
    +
    + Last Edited by: { faker.name.firstName() } { faker.name.lastName() }
    + { faker.date.weekday() }, 12 { faker.date.month() }, 2018 +
    +
    + +
    + Tasks Completed: + + 36/94 + +
    +
    +
    + + + +
    +     + + + 20 Sep, Fri, 2018 + + + + + + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + +     + { /* END Card */} +     +) + +export { ProjectsCardGrid }; diff --git a/app/routes/components/Projects/ProjectsLeftNav.js b/app/routes/components/Projects/ProjectsLeftNav.js new file mode 100755 index 0000000..cbd97c6 --- /dev/null +++ b/app/routes/components/Projects/ProjectsLeftNav.js @@ -0,0 +1,179 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + InputGroup, + Button, + Input, + InputGroupAddon, + Nav, + NavItem, + NavLink, + Badge, + Media, + Avatar +} from './../../../components'; +import { randomAvatar } from './../../../utilities'; + +const ProjectsLeftNav = () => ( + + { /* START Left Nav */} +
    +
    + Search +
    + + + + + + +
    + { /* END Left Nav */} + { /* START Left Nav */} +
    +
    + Favorites +
    + +
    + { /* END Left Nav */} + { /* START Left Nav */} +
    +
    + Projects +
    + +
    + { /* END Left Nav */} + { /* START Left Nav */} +
    +
    + People +
    + +
    + { /* END Left Nav */} +     +) + +export { ProjectsLeftNav }; diff --git a/app/routes/components/Projects/ProjectsSmHeader.js b/app/routes/components/Projects/ProjectsSmHeader.js new file mode 100755 index 0000000..5a70097 --- /dev/null +++ b/app/routes/components/Projects/ProjectsSmHeader.js @@ -0,0 +1,110 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { NavLink, Link } from 'react-router-dom'; + +import { + Button, + Breadcrumb, + ButtonToolbar, + UncontrolledTooltip, + BreadcrumbItem, + ButtonGroup, +} from './../../../components'; + +const ProjectsSmHeader = (props ) => ( + + { /* START Header Nav */} +
    + + { /* START 1st */} + + + + + + { /* END 1st */} + + { /* START 2nd */} + { + props.title ? ( + + + {props.subTitle} + + + ): ( + + {props.subTitle} + + ) + } + { /* END 2nd */} + + { /* START 3rd */} + { + props.title && ( + + {props.title} + + ) + } + { /* END 3rd */} + + + + + + Show List + + + + Show Grid + + { + props.btnShowKanban && ( + + + + Show Kanban + + + ) + } + + + + + Add New + + + +
    + { /* END Header Nav */} +     +) +ProjectsSmHeader.propTypes = { + subTitle: PropTypes.node, + title: PropTypes.node, + subTitleLink: PropTypes.string, + linkList: PropTypes.node, + linkGrid: PropTypes.node, + btnShowKanban: PropTypes.bool, + linkKanban: PropTypes.node +}; +ProjectsSmHeader.defaultProps = { + subTitle: "Folder", + linkList: "#", + linkGrid: "#", + btnShowKanban: false, + linkKanban: "/apps/tasks-kanban" +}; + +export { ProjectsSmHeader }; diff --git a/app/routes/components/ProjectsDashboards/ProjectsList.js b/app/routes/components/ProjectsDashboards/ProjectsList.js new file mode 100755 index 0000000..c9aca50 --- /dev/null +++ b/app/routes/components/ProjectsDashboards/ProjectsList.js @@ -0,0 +1,69 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import PropTypes from 'prop-types'; + +import { + Badge, + Progress +} from './../../../components'; + +const ProjectsList = (props) => ( + +
    +
    + + { props.title || faker.commerce.productName() } + + + { props.badgeTitle } + +
    + +
    +
    +
    + { props.completeValue }% +
    + + Complete + +
    +
    +
    + { props.myTasksValue } +
    + + My Tasks + +
    +
    +
    + { props.daysDueValue } +
    + + Days Due + +
    +
    +
    +     +) +ProjectsList.propTypes = { + title: PropTypes.string, + badgeColor: PropTypes.string, + badgeTitle: PropTypes.string, + progressValue: PropTypes.string, + completeValue: PropTypes.string, + myTasksValue: PropTypes.string, + daysDueValue: PropTypes.string +}; +ProjectsList.defaultProps = { + badgeColor: "secondary", + badgeTitle: "Waiting", + progressValue: "25", + completeValue: "60", + myTasksValue: "5", + daysDueValue: "53" +}; + +export { ProjectsList }; diff --git a/app/routes/components/ProjectsDashboards/TasksMedia.js b/app/routes/components/ProjectsDashboards/TasksMedia.js new file mode 100755 index 0000000..e55d41e --- /dev/null +++ b/app/routes/components/ProjectsDashboards/TasksMedia.js @@ -0,0 +1,42 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import PropTypes from 'prop-types'; +import { Link } from 'react-router-dom'; + +import { + Media, + CustomInput +} from './../../../components'; + +const TasksMedia = (props) => ( + + + + + + +
    + + { faker.hacker.phrase() } + +
    +
    + { faker.date.past().toString() } +
    +     + + + +     +     +) +TasksMedia.propTypes = { + iconColor: PropTypes.node, + id: PropTypes.node, +}; +TasksMedia.defaultProps = { + iconColor: "muted", + id: "1" +}; + +export { TasksMedia }; diff --git a/app/routes/components/ProjectsDashboards/TinyDonutChart.js b/app/routes/components/ProjectsDashboards/TinyDonutChart.js new file mode 100755 index 0000000..b8b5957 --- /dev/null +++ b/app/routes/components/ProjectsDashboards/TinyDonutChart.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { + PieChart, + Pie, + Cell +} from 'recharts'; + +import colors from './../../../colors'; + +const data = [ + {name: 'Group A', value: 200}, + {name: 'Group B', value: 300}, + {name: 'Group C', value: 300} +]; + +const COLORS = [ colors['yellow'], colors['red'], colors['success'], colors['yellow']]; + +const TinyDonutChart = () => ( + + + { + data.map((entry, index) => ) + } + + +); + +export { TinyDonutChart }; diff --git a/app/routes/components/ProjectsDashboards/TinyDonutChartAllProjects.js b/app/routes/components/ProjectsDashboards/TinyDonutChartAllProjects.js new file mode 100755 index 0000000..d8677a7 --- /dev/null +++ b/app/routes/components/ProjectsDashboards/TinyDonutChartAllProjects.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { + PieChart, + Pie, + Cell +} from 'recharts'; + +import colors from './../../../colors'; + +const data = [ + {name: 'Group A', value: 200}, + {name: 'Group B', value: 200}, + {name: 'Group C', value: 300} +]; + +const COLORS = [ colors['primary'], colors['info'], colors['purple'], colors['yellow']]; + +const TinyDonutChartAllProjects = () => ( + + + { + data.map((entry, index) => ) + } + + +); + +export { TinyDonutChartAllProjects }; diff --git a/app/routes/components/SearchResults/ImagesResultsCard.js b/app/routes/components/SearchResults/ImagesResultsCard.js new file mode 100755 index 0000000..4230464 --- /dev/null +++ b/app/routes/components/SearchResults/ImagesResultsCard.js @@ -0,0 +1,91 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Card, + CardImg, + HolderProvider, + Media, + Avatar, + AvatarAddOn, + CardFooter, + CardBody +} from './../../../components'; + +import { randomArray, randomAvatar } from './../../../utilities'; + +const status = [ + "danger", + "success", + "warning", + "secondary" +]; + +const ImagesResultsCard = () => ( + + { /* START Card */} + + + + + + + + + , + + ]} + /> + + +
    + { faker.name.firstName() } { faker.name.lastName() } +
    + + { faker.address.state() }, { faker.address.stateAbbr() } + +     +     +     + + + 233 + + + 98 + + +     + { /* END Card */} +     +) + +export { ImagesResultsCard }; diff --git a/app/routes/components/SearchResults/SearchResultsCard.js b/app/routes/components/SearchResults/SearchResultsCard.js new file mode 100755 index 0000000..5ac8d0f --- /dev/null +++ b/app/routes/components/SearchResults/SearchResultsCard.js @@ -0,0 +1,76 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Card, + CardBody +} from './../../../components'; + +import { randomArray } from './../../../utilities'; + +const stars = [ + + + + + + + , + + + + + + + , + + + + + + + , + + + + + + + , + + + + + + + , +]; + +const SearchResultsCard = () => ( + + + + + { faker.lorem.sentence() } + +
    +
    + + { faker.internet.url() } + + · + { randomArray(stars) } + · + + Votes + +
    +

    + { faker.lorem.paragraph() } +

    +     +     +     +) + +export { SearchResultsCard }; diff --git a/app/routes/components/SearchResults/SearchResultsHeader.js b/app/routes/components/SearchResults/SearchResultsHeader.js new file mode 100755 index 0000000..ac35d61 --- /dev/null +++ b/app/routes/components/SearchResults/SearchResultsHeader.js @@ -0,0 +1,35 @@ +import React from 'react'; + +import { + InputGroup, + InputGroupAddon, + Input, + Button, +} from './../../../components'; + +const SearchResultsHeader = () => ( + +
    +

    + + Search Results for + "Content Designer" + + + About 1,370 result (0.13 seconds) + + +

    + + + + + + +
    +     +) + +export { SearchResultsHeader }; diff --git a/app/routes/components/SearchResults/SearchResultsLeftNav.js b/app/routes/components/SearchResults/SearchResultsLeftNav.js new file mode 100755 index 0000000..c6b183b --- /dev/null +++ b/app/routes/components/SearchResults/SearchResultsLeftNav.js @@ -0,0 +1,254 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import { NavLink as RouterNavLink } from 'react-router-dom'; + +import { + Nav, + NavLink, + NavItem, + InputGroup, + InputGroupAddon, + Input, + Button, + CustomInput, + Badge +} from './../../../components'; + +const SearchResultsLeftNav = () => ( + + { /* START Navigation */} + + { /* END Navigation */} + { /* START Category */} + + { /* END Category */} + { /* START Rating */} + + { /* END Rating */} + { /* START Tags */} + + { /* END Tags */} + { /* START Price */} + + { /* END Price */} + { /* START Shipping */} + + { /* END Shipping */} + { /* START Sales */} + + { /* END Sales */} + + + +) + +export { SearchResultsLeftNav }; diff --git a/app/routes/components/SearchResults/UsersResultsCard.js b/app/routes/components/SearchResults/UsersResultsCard.js new file mode 100755 index 0000000..f867bf8 --- /dev/null +++ b/app/routes/components/SearchResults/UsersResultsCard.js @@ -0,0 +1,106 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Card, + UncontrolledTooltip, + UncontrolledButtonDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, + Button, + Badge, + CardBody +} from './../../../components'; + +import { + Profile +} from "./../Profile"; + +import { randomArray } from './../../../utilities'; + +const badgesColors = [ + "info", + "primary", + "secondary" +]; + +const UsersResultsCard = () => ( + + { /* START Card */} + + +
    + + + Add To Favorites + + + + + + + + + Call + + + + Chat + + + + Video + + + + Profile + + + + Edit + + + + + Delete + + + +
    + +
    +
    + + Labels + +
    + + { faker.commerce.department() } + + + { faker.commerce.department() } + + + { faker.commerce.department() } + +
    +
    +
    + + Profile + +
    +

    + { faker.lorem.paragraph() } +

    +
    +     +     + { /* END Card */} +     +) + +export { UsersResultsCard }; diff --git a/app/routes/components/SearchResults/VideosResultsCard.js b/app/routes/components/SearchResults/VideosResultsCard.js new file mode 100755 index 0000000..268b831 --- /dev/null +++ b/app/routes/components/SearchResults/VideosResultsCard.js @@ -0,0 +1,137 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Card, + CardImg, + HolderProvider, + Media, + Avatar, + AvatarAddOn, + Button, + Badge, + CardBody +} from './../../../components'; + +import { randomArray, randomAvatar } from './../../../utilities'; + +const status = [ + "warning", + "danger", + "success", + "secondary" +]; +const stars = [ + + + + + + + , + + + + + + + , + + + + + + + , + + + + + + + , + + + + + + + , +]; + +const VideosResultsCard = () => ( + + +
    +
    + + + +
    +
    + + +
    + { faker.internet.url() } +
    +
    + { faker.lorem.paragraph() } +
    +
    + { randomArray(stars) } 16 Reviews +
    +
    + + { faker.internet.domainName() } + + + { faker.internet.domainName() } + + + { faker.internet.domainName() } + +
    +
    + + + , + + ]} + /> + + +
    + { faker.name.firstName() } { faker.name.lastName() } +
    +     +     +
    +     +
    +
    +     +     +) + +export { VideosResultsCard }; diff --git a/app/routes/components/Sidebar/SidebarBottomA.js b/app/routes/components/Sidebar/SidebarBottomA.js new file mode 100755 index 0000000..b4ec822 --- /dev/null +++ b/app/routes/components/Sidebar/SidebarBottomA.js @@ -0,0 +1,59 @@ +import React from 'react'; + +import { + Button, + Sidebar, + UncontrolledPopover, + PopoverBody +} from './../../../components'; + +import { FooterAuth } from '../Pages/FooterAuth'; +import { FooterText } from '../FooterText'; +import { VersionSelector } from '../VersionSelector'; + +const SidebarBottomA = () => ( + + { /* START Desktop */ } + + + + + + + + + { /* END Desktop */ } + + { /* START Slim Only */ } + + + { /* Slim Version Selector */ } + ( + + )} + /> + + { /* Footer Text as Tooltip */ } + + + + + + + + + { /* END Slim Only */ } + +) + +export { SidebarBottomA }; diff --git a/app/routes/components/Sidebar/SidebarBottomB.js b/app/routes/components/Sidebar/SidebarBottomB.js new file mode 100755 index 0000000..05cc30b --- /dev/null +++ b/app/routes/components/Sidebar/SidebarBottomB.js @@ -0,0 +1,117 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Button, + Sidebar, + UncontrolledButtonDropdown, + DropdownToggle, + UncontrolledPopover, + PopoverBody, + Media, + Avatar, + AvatarAddOn +} from './../../../components'; +import { randomAvatar } from './../../../utilities'; + +import { DropdownProfile } from '../Dropdowns/DropdownProfile'; +import { FooterAuth } from '../Pages/FooterAuth'; +import { FooterText } from '../FooterText'; + +const SidebarBottomB = () => ( + + { /* START Sidebar BOTTOM: B */ } + + { /* START DESKTOP View */ } + + + + + + , + + ]} + /> + + + + { faker.name.firstName() } { faker.name.lastName() } + +

    + { faker.name.jobTitle() } +

    +     +     +     + +     +     + { /* END DESKTOP View */ } + { /* START SLIM Only View */ } + +
    + + + , + + ]} + /> + + + +
    +     + { /* END SLIM Only View */ } + { /* START DESKTOP View */ } + + + + { /* END DESKTOP View */ } + { /* START SLIM Only View */ } + +
    + + + + + + +
    +     + { /* END SLIM Only View */ } +     + { /* END Sidebar BOTTOM: B */ } +     +) + +export { SidebarBottomB }; diff --git a/app/routes/components/Sidebar/SidebarTopA.js b/app/routes/components/Sidebar/SidebarTopA.js new file mode 100755 index 0000000..17a5a7f --- /dev/null +++ b/app/routes/components/Sidebar/SidebarTopA.js @@ -0,0 +1,102 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import { Link } from 'react-router-dom'; + +import { + Sidebar, + UncontrolledButtonDropdown, + Avatar, + AvatarAddOn, + DropdownToggle, + DropdownMenu, + DropdownItem +} from './../../../components'; +import { randomAvatar } from './../../../utilities'; + +const avatarImg = randomAvatar(); + +const SidebarTopA = () => ( + + { /* START: Sidebar Default */ } + + + + + , + + ]} + /> + + + + + + { faker.name.firstName() } { faker.name.lastName() } + + + + + { faker.name.firstName() } { faker.name.lastName() } + + + + My Profile + + + Settings + + + Billings + + + + + Sign Out + + + +
    + { faker.name.jobTitle() } +
    +     +     + { /* END: Sidebar Default */ } + + { /* START: Sidebar Slim */ } + + + , + + ]} + /> + + + { /* END: Sidebar Slim */ } +     +) + +export { SidebarTopA }; diff --git a/app/routes/components/Sidebar/SidebarTopB.js b/app/routes/components/Sidebar/SidebarTopB.js new file mode 100755 index 0000000..30a5fe8 --- /dev/null +++ b/app/routes/components/Sidebar/SidebarTopB.js @@ -0,0 +1,62 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { + Sidebar, + UncontrolledTooltip +} from './../../../components'; + +import { VersionSelector } from '../VersionSelector'; + +const SidebarTopB = () => ( + + { /* START Sidebar TOP: B */ } + { /* START DESKTOP View */ } + +
    +
    + + + + + Back to Home + + + ( + +
    + react.bs4 +
    +
    + Version: {currentVersion.label}, {currentVersion.version} +
    +     + )} + /> +
    +
    +     + { /* END DESKTOP View */ } + { /* START SLIM Only View */ } + +
    + + + + + Back to Home + +
    +     + { /* END SLIM Only View */ } + { /* END Sidebar TOP: B */ } +     +) + +export { SidebarTopB }; diff --git a/app/routes/components/Stock/SimpleLineChart.js b/app/routes/components/Stock/SimpleLineChart.js new file mode 100755 index 0000000..7a2a9cc --- /dev/null +++ b/app/routes/components/Stock/SimpleLineChart.js @@ -0,0 +1,61 @@ +import React from 'react'; +import { + Line, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Legend, + LineChart, + Dot +} from './../../../components/recharts'; + +import colors from './../../../colors'; + +const data = [ + {name: 'Mar \'11', uv: 4000, pv: 2400, amt: 2400}, + {name: 'Dec \'11', uv: 3000, pv: 1398, amt: 2210}, + {name: 'Oct \'12', uv: 2000, pv: 9800, amt: 2290}, + {name: 'Jul \'13', uv: 2780, pv: 3908, amt: 2000}, + {name: 'May \'14', uv: 1890, pv: 4800, amt: 2181}, + {name: 'Feb \'15', uv: 2390, pv: 3800, amt: 2500}, + {name: 'Dec \'15', uv: 3490, pv: 4300, amt: 2100}, +]; + +// eslint-disable-next-line +const generateDot = ({stroke, ...other}) => ( + +); + +const generateActiveDot = (props) => ( + +); + +const SimpleLineChart = () => ( + + + + + + + + + + + + +); + +export { SimpleLineChart }; diff --git a/app/routes/components/Stock/TrTableFavStock.js b/app/routes/components/Stock/TrTableFavStock.js new file mode 100755 index 0000000..1ecec1e --- /dev/null +++ b/app/routes/components/Stock/TrTableFavStock.js @@ -0,0 +1,64 @@ +import React from 'react'; +import _ from 'lodash'; +import { randomArray } from './../../../utilities'; +import { + Badge +} from './../../../components'; + +const name = [ + "Action Score", + "Quality Score", + "Value Score", + "Growth Score" +]; +const badge = [ + "a", + "q", + "v", + "g" +]; +const value = [ + "23", + "67", + "12", + "89", + "11", + "10", + "43", + "98" +]; + +const TrTableFavStock = () => { + return ( + + { + _.times(5, (index) => ( + + + { randomArray(name) } + + + { randomArray(badge) } { randomArray(value) } + + + { randomArray(badge) } { randomArray(value) } + + + { randomArray(badge) } { randomArray(value) } + + + { randomArray(badge) } { randomArray(value) } + + + { randomArray(badge) } { randomArray(value) } + + + { randomArray(badge) } { randomArray(value) } + + + )) + } + ) +} + +export { TrTableFavStock }; diff --git a/app/routes/components/Stock/TrTableStock.js b/app/routes/components/Stock/TrTableStock.js new file mode 100755 index 0000000..a62159b --- /dev/null +++ b/app/routes/components/Stock/TrTableStock.js @@ -0,0 +1,93 @@ +import React from 'react'; +import _ from 'lodash'; +import { randomArray } from './../../../utilities'; + +const name = [ + + Caterpillar (CAT) + , + + Google (GOOGL) + , + + Microsoft (MSFT) + , + + Apple (AAPL) + , + + Samsung Electronics (0593xq) + +]; + +const percentForPrice = [ + "34.18", + "21.34", + "19.12", + "67.82" +]; +const score = [ + "87", + "11", + "12" +]; +const q = [ + "35", + "98", + "56" +]; +const v = [ + "17", + "38", + "23" +]; +const g = [ + "45", + "15", + "16" +]; + +const price = [ + + + { randomArray(percentForPrice) }% + + , + + + { randomArray(percentForPrice) }% + + +]; + +const TrTableStock = () => { + return ( + + { + _.times(5, (index) => ( + + + { randomArray(name) } + + + { randomArray(price) } + + + { randomArray(score) } + + + { randomArray(q) } + + + { randomArray(v) } + + + { randomArray(g) } + + + )) + } + ) +} + +export { TrTableStock }; diff --git a/app/routes/components/Stock/TrTableSummary.js b/app/routes/components/Stock/TrTableSummary.js new file mode 100755 index 0000000..6b71656 --- /dev/null +++ b/app/routes/components/Stock/TrTableSummary.js @@ -0,0 +1,48 @@ +import React from 'react'; +import _ from 'lodash'; +import { randomArray } from './../../../utilities'; + +const name = [ + "PE", + "CROIC", + "Magic Y", + "EV/EBITDA", + "P/FCF", + "ROA" +]; + +const tr2013 = [ + "33*4%", + "10*4", + "2*5" +]; + +const ttm = [ + "28*3%", + "16*5" +]; + +const TrTableSummary = () => ( + + { + _.times(9, (index) => ( + + + { randomArray(name) } + + + { randomArray(tr2013) } + + + { randomArray(tr2013) } + + + { randomArray(ttm) } + + + )) + } + +) + +export { TrTableSummary }; diff --git a/app/routes/components/Tables/TrBorderless.js b/app/routes/components/Tables/TrBorderless.js new file mode 100755 index 0000000..d29b9e6 --- /dev/null +++ b/app/routes/components/Tables/TrBorderless.js @@ -0,0 +1,47 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Badge, + UncontrolledTooltip +} from './../../../components'; + +const TrBorderless = () => ( + + { /* START TR */} + + + + + + { faker.random.number() } + + + { faker.date.weekday() }, 12 { faker.date.month() }, 2018 + + + $ { faker.finance.amount() } + + + + Premium + + + + + { faker.internet.email() } + + + + + + + Download + + + + { /* END TR */} + +) + +export { TrBorderless }; diff --git a/app/routes/components/Tables/TrResponsive.js b/app/routes/components/Tables/TrResponsive.js new file mode 100755 index 0000000..3621890 --- /dev/null +++ b/app/routes/components/Tables/TrResponsive.js @@ -0,0 +1,69 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; + +import { + Media, + UncontrolledTooltip +} from './../../../components'; + +const TrResponsive = () => ( + + { /* START TR */} + + + + + + + + + + +
    + + Safari + / + { faker.system.semver() } +
    + + macOs { faker.system.semver() } + +     +     + + +
    + + { faker.internet.ip() } + +
    + + - + + + +
    + { faker.address.city() } +
    + + { faker.address.state() }, { faker.address.country() } + + + + { faker.date.weekday() }, 12 { faker.date.month() }, 2018
    + 12:34 PM + + + + + + + Revoke + + + + { /* END TR */} +     +) + +export { TrResponsive }; diff --git a/app/routes/components/Tasks/TasksCardGrid.js b/app/routes/components/Tasks/TasksCardGrid.js new file mode 100755 index 0000000..4b03d1e --- /dev/null +++ b/app/routes/components/Tasks/TasksCardGrid.js @@ -0,0 +1,199 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import PropTypes from 'prop-types'; +import { Link } from 'react-router-dom'; + +import { + Card, + CardBody, + Badge, + Avatar, + Media, + CustomInput, + CardFooter, + UncontrolledButtonDropdown, + DropdownToggle, + DropdownItem, + DropdownMenu, + AvatarAddOn +} from './../../../components'; + +import { randomArray, randomAvatar } from './../../../utilities'; + +const badgesColors = [ + "secondary" +]; + +const avatarStatus = [ + "secondary", + "warning", + "danger", + "success" +]; + +const prioStatus = [ + + + Small + , + + + Normal + , + + + High + , + + + Big + +]; + +const TasksCardGrid = (props) => ( + + { /* START Card */} + + + + + { randomArray(prioStatus) } + + + Select Priority + + + Big + + + + High + + + + Normal + + + + Small + + + + + + + + + #{ faker.random.number() } + + { faker.hacker.phrase() } + + + +

    + { faker.lorem.sentence() } +

    +
    + + { faker.commerce.department() } + + + { faker.commerce.department() } + +
    +
    + , + + ]} + /> + , + + ]} + /> + , + + ]} + /> +
    +     + + + 20 Sep, Fri, 2018 + + + + + + + + + View + + + + Add Task + + + + Add Files + + + + + Delete + + + + +     + { /* END Card */} +     +) + +TasksCardGrid.propTypes = { + id: PropTypes.node +}; +TasksCardGrid.defaultProps = { + id: "1" +}; + +export { TasksCardGrid }; diff --git a/app/routes/components/Timeline/TimelineDefault.js b/app/routes/components/Timeline/TimelineDefault.js new file mode 100755 index 0000000..ff64956 --- /dev/null +++ b/app/routes/components/Timeline/TimelineDefault.js @@ -0,0 +1,122 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import PropTypes from 'prop-types'; + + +import { randomArray } from './../../../utilities'; + +const hour = [ + "1", + "2", + "3", + "4", + "5", + "6", + "7", + "8", + "9", + "10", + "11", + "12" +]; + +const min = [ + "00", + "15", + "20", + "25", + "30", + "35", + "40", + "45", + "50" +]; + +const amPm = [ + "am", + "pm" +]; + +const TimelineDefault = (props) => ( + + { /* START TIMELINE Default */} +
    + { + props.showPillDate && ( + + { /* START PILL Date */} +
    + + { props.pillDate } + +
    + { /* END PILL Date */} +     + ) + } +
    + { /* START Small ICON */} +
    + +
    + { /* END Small ICON */} +
    + { /* START HOUR */} + + { randomArray(hour) }:{ randomArray(min) } { randomArray(amPm) } + + { /* START HOUR */} +
    + { /* START ICON Circle */} +
    + + + + +
    + { /* END ICON Circle */} +
    + { /* START TITLE */} +
    + { faker.company.catchPhrase() } +
    + { /* END TITLE */} + { /* START SUB-TITLE */} +

    + { faker.company.catchPhraseAdjective() } +

    + { /* END SUB-TITLE */} +
    +
    + { /* START CONTENT */} +
    +

    + { faker.lorem.paragraph() } +

    +
    + { /* END CONTENT */} +
    +
    +
    + { /* END TIMELINE Default */} +     +) + +TimelineDefault.propTypes = { + showPillDate: PropTypes.bool, + pillDate: PropTypes.string, + smallIconColor: PropTypes.string, + iconCircleColor: PropTypes.string, + iconCircle: PropTypes.string, + badgeTitle: PropTypes.string +}; + +TimelineDefault.defaultProps = { + showPillDate: false, + pillDate: "Waiting", + smallIconColor: "secondary", + iconCircleColor: "secondary", + iconCircle: "question" +}; + +export { TimelineDefault }; diff --git a/app/routes/components/Timeline/TimelineMini.js b/app/routes/components/Timeline/TimelineMini.js new file mode 100755 index 0000000..909bc77 --- /dev/null +++ b/app/routes/components/Timeline/TimelineMini.js @@ -0,0 +1,73 @@ +import React from 'react'; +import faker from 'faker/locale/en_US'; +import PropTypes from 'prop-types'; + +import { + Badge +} from './../../../components'; + +const TimelineMini = (props) => ( + + { /* START TIMELINE Position */} +
    + { + props.showPillDate && ( + + { /* START PILL Date */} +
    + + { props.pillDate } + +
    + { /* END PILL Date */} +     + ) + } + { /* START POST Timeline */} +
    + { /* Icon */} +
    + +
    +
    + { /* Badge */} +
    + + { props.badgeTitle } + +
    + { /* Content */} +

    + { faker.company.catchPhrase() } +

    + { /* Date */} +

    + { faker.date.past().toString() } +

    +
    +
    + { /* END POST Timeline */} +
    + { /* END Timeline Position */} +     +) + +TimelineMini.propTypes = { + showPillDate: PropTypes.bool, + pillDate: PropTypes.string, + icon: PropTypes.string, + iconClassName: PropTypes.string, + badgeColor: PropTypes.string, + badgeTitle: PropTypes.string +}; + +TimelineMini.defaultProps = { + showPillDate: false, + pillDate: "Waiting", + icon: "question-circle", + iconClassName: "text-secondary", + badgeColor: "secondary", + badgeTitle: "Waiting" +}; + +export { TimelineMini }; diff --git a/app/routes/components/Users/UsersCardGrid.js b/app/routes/components/Users/UsersCardGrid.js new file mode 100755 index 0000000..3824a2c --- /dev/null +++ b/app/routes/components/Users/UsersCardGrid.js @@ -0,0 +1,92 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + Card, + CardBody, + Button, + UncontrolledTooltip, + UncontrolledButtonDropdown, + DropdownToggle, + DropdownMenu, + CardFooter, + CustomInput, + ButtonGroup, + DropdownItem +} from './../../../components'; + +import { + Profile +} from "./../Profile"; + +const UsersCardGrid = (props) => ( + + { /* START Card */} + + +
    + + + + + Add To Favorites + + + + + + + + + Call + + + + Chat + + + + Video + + + + Profile + + + + Edit + + + + + Delete + + + + +
    + +     + + + + 233 + + + 98 + + + +     + { /* END Card */} +     +) +UsersCardGrid.propTypes = { + id: PropTypes.node +}; +UsersCardGrid.defaultProps = { + id: "1" +}; + +export { UsersCardGrid }; diff --git a/app/routes/components/Users/UsersLeftNav.js b/app/routes/components/Users/UsersLeftNav.js new file mode 100755 index 0000000..c30cb27 --- /dev/null +++ b/app/routes/components/Users/UsersLeftNav.js @@ -0,0 +1,96 @@ +import React from 'react'; + +import { + Nav, + NavItem, + NavLink, + Badge +} from './../../../components'; + +const UsersLeftNav = () => ( + + { /* START Left Nav */} +
    + +
    + { /* END Left Nav */} + { /* START Left Nav */} +
    +
    + Tags +
    + +
    + { /* END Left Nav */} +     +) + +export { UsersLeftNav }; diff --git a/app/routes/components/VersionSelector.js b/app/routes/components/VersionSelector.js new file mode 100755 index 0000000..7e78ea7 --- /dev/null +++ b/app/routes/components/VersionSelector.js @@ -0,0 +1,129 @@ +import React from 'react'; +import fetch from 'node-fetch'; +import classNames from 'classnames'; +import _ from 'lodash'; +import moment from 'moment'; +import PropTypes from 'prop-types'; +import { + UncontrolledButtonDropdown, + DropdownMenu, + DropdownItem, + DropdownToggle +} from './../../components'; + +const SERVICE_URL = "http://dashboards.webkom.co:8000"; + +export class VersionSelector extends React.Component { + static propTypes = { + dashboard: PropTypes.string, + down: PropTypes.bool, + compact: PropTypes.bool, + render: PropTypes.func, + className: PropTypes.string, + sidebar: PropTypes.bool + } + + constructor(props) { + super(props); + + this.state = { + versions: [], + isError: false, + render: null + }; + } + + async fetchVersions() { + const { dashboard } = this.props; + let versions; + try { + versions = await fetch(`${SERVICE_URL}/dashboards/versions`) + .then(response => response.json()); + } catch(exc) { + this.setState({ isError: true }) + } + const targetVersions = _.filter(versions, { dashboardName: dashboard }); + + this.setState({ versions: targetVersions }); + } + + componentDidMount() { + this.fetchVersions(); + } + + componentDidUpdate(prevProps) { + if (prevProps.dashboard !== this.props.dashboard) { + this.fetchVersions(); + } + } + + render() { + const { down, render, className, sidebar } = this.props; + const { versions } = this.state; + const currentVersion = _.find(versions, { label: "React" }); + + return ( + + + { + currentVersion ? ( + render ? render(currentVersion) : ( + + React {currentVersion.version} +
    + + { moment(currentVersion.date).format("ddd, MMM DD, YYYY h:mm:ss A") } + +     + ) + ) : ( + Loading... + ) + } +     + { + (!_.isEmpty(versions)) && ( + + + Bootstrap 4 Versions: + + { + _.map(versions, (version, index) => ( + + + { version.label } { version.version } +
    + + { moment(version.date).format("ddd, MMM DD, YYYY h:mm:ss A") } + +     + { + (version === currentVersion) && ( + + ) + } +     + )) + } +     + ) + } +     + ); + } +} \ No newline at end of file diff --git a/app/routes/index.js b/app/routes/index.js new file mode 100755 index 0000000..a045427 --- /dev/null +++ b/app/routes/index.js @@ -0,0 +1,269 @@ +import React from 'react'; +import { + Route, + Switch, + Redirect +} from 'react-router'; + +// ----------- Pages Imports --------------- +import Analytics from './Dashboards/Analytics'; +import ProjectsDashboard from './Dashboards/Projects'; +import System from './Dashboards/System'; +import Monitor from './Dashboards/Monitor'; +import Financial from './Dashboards/Financial'; +import Stock from './Dashboards/Stock'; +import Reports from './Dashboards/Reports'; + +import Widgets from './Widgets'; + +import Cards from './Cards/Cards'; +import CardsHeaders from './Cards/CardsHeaders'; + +import NavbarOnly from './Layouts/NavbarOnly'; +import SidebarDefault from './Layouts/SidebarDefault'; +import SidebarA from './Layouts/SidebarA'; +import DragAndDropLayout from './Layouts/DragAndDropLayout'; +import SidebarWithNavbar from './Layouts/SidebarWithNavbar'; + +import Accordions from './Interface/Accordions'; +import Alerts from './Interface/Alerts'; +import Avatars from './Interface/Avatars'; +import BadgesLabels from './Interface/BadgesLabels'; +import Breadcrumbs from './Interface/Breadcrumbs'; +import Buttons from './Interface/Buttons'; +import Colors from './Interface/Colors'; +import Dropdowns from './Interface/Dropdowns'; +import Images from './Interface/Images'; +import ListGroups from './Interface/ListGroups'; +import MediaObjects from './Interface/MediaObjects'; +import Modals from './Interface/Modals'; +import Navbars from './Interface/Navbars'; +import Paginations from './Interface/Paginations'; +import ProgressBars from './Interface/ProgressBars'; +import TabsPills from './Interface/TabsPills'; +import TooltipPopovers from './Interface/TooltipsPopovers'; +import Typography from './Interface/Typography'; +import Notifications from './Interface/Notifications'; +import CropImage from './Interface/CropImage'; +import DragAndDropElements from './Interface/DragAndDropElements'; +import Calendar from './Interface/Calendar'; +import ReCharts from './Graphs/ReCharts'; + +import Forms from './Forms/Forms'; +import FormsLayouts from './Forms/FormsLayouts'; +import InputGroups from './Forms/InputGroups'; +import Wizard from './Forms/Wizard'; +import TextMask from './Forms/TextMask'; +import Typeahead from './Forms/Typeahead'; +import Toggles from './Forms/Toggles'; +import Editor from './Forms/Editor'; +import DatePicker from './Forms/DatePicker'; +import Dropzone from './Forms/Dropzone'; +import Sliders from './Forms/Sliders'; + +import Tables from './Tables/Tables'; +import ExtendedTable from './Tables/ExtendedTable'; +import AgGrid from './Tables/AgGrid'; + +import AccountEdit from './Apps/AccountEdit'; +import BillingEdit from './Apps/BillingEdit'; +import Chat from './Apps/Chat'; +import Clients from './Apps/Clients'; +import EmailDetails from './Apps/EmailDetails'; +import Files from './Apps/Files'; +import GalleryGrid from './Apps/GalleryGrid'; +import GalleryTable from './Apps/GalleryTable'; +import ImagesResults from './Apps/ImagesResults'; +import Inbox from './Apps/Inbox'; +import NewEmail from './Apps/NewEmail'; +import ProfileDetails from './Apps/ProfileDetails'; +import ProfileEdit from './Apps/ProfileEdit'; +import Projects from './Apps/Projects'; +import SearchResults from './Apps/SearchResults'; +import SessionsEdit from './Apps/SessionsEdit'; +import SettingsEdit from './Apps/SettingsEdit'; +import Tasks from './Apps/Tasks'; +import TasksDetails from './Apps/TasksDetails'; +import TasksKanban from './Apps/TasksKanban'; +import Users from './Apps/Users'; +import UsersResults from './Apps/UsersResults'; +import VideosResults from './Apps/VideosResults'; + +import ComingSoon from './Pages/ComingSoon'; +import Confirmation from './Pages/Confirmation'; +import Danger from './Pages/Danger'; +import Error404 from './Pages/Error404'; +import ForgotPassword from './Pages/ForgotPassword'; +import LockScreen from './Pages/LockScreen'; +import Login from './Pages/Login'; +import Register from './Pages/Register'; +import Success from './Pages/Success'; +import Timeline from './Pages/Timeline'; + +import Icons from './Icons'; + +// ----------- Layout Imports --------------- +import { DefaultNavbar } from './../layout/components/DefaultNavbar'; +import { DefaultSidebar } from './../layout/components/DefaultSidebar'; + +import { SidebarANavbar } from './../layout/components/SidebarANavbar'; +import { SidebarASidebar } from './../layout/components/SidebarASidebar'; + +//------ Route Definitions -------- +// eslint-disable-next-line no-unused-vars +export const RoutedContent = () => { + return ( + + + + + + + + + + + + + + { /* Cards Routes */ } + + + + { /* Layouts */ } + + + + + + + { /* Interface Routes */ } + + + + + + + + + + + + + + + + + + + + + + + + { /* Forms Routes */ } + + + + + + + + + + + + + { /* Graphs Routes */ } + + + { /* Tables Routes */ } + + + + + { /* Apps Routes */ } + + + + + + + + + + + + + + + + + + + + + + + + + { /* Pages Routes */ } + + + + + + + + + + + + + + { /* 404 */ } + + + ); +}; + +//------ Custom Layout Parts -------- +export const RoutedNavbars = () => ( + + { /* Other Navbars: */} + + + + { /* Default Navbar: */} + + +); + +export const RoutedSidebars = () => ( + + { /* Other Sidebars: */} + + + { /* Default Sidebar: */} + + +); diff --git a/app/styles/bootstrap.scss b/app/styles/bootstrap.scss new file mode 100755 index 0000000..bd75a0c --- /dev/null +++ b/app/styles/bootstrap.scss @@ -0,0 +1 @@ +@import '~@owczar/dashboard-style--airframe/scss/bootstrap/bootstrap'; \ No newline at end of file diff --git a/app/styles/components/float-grid.scss b/app/styles/components/float-grid.scss new file mode 100755 index 0000000..41b639a --- /dev/null +++ b/app/styles/components/float-grid.scss @@ -0,0 +1,28 @@ +@import './../variables.scss'; +@import '~bootstrap/scss/mixins/breakpoints'; + +.float-grid-parent { + margin: 0 auto; + padding-left: $grid-gutter-width / 2; + padding-right: $grid-gutter-width / 2; + + &.float-grid-parent__static { + @media (min-width: breakpoint-min('sm', $grid-breakpoints)) { + width: map-get($container-max-widths, 'sm'); + } + @media (min-width: breakpoint-min('md', $grid-breakpoints)) { + width: map-get($container-max-widths, 'md'); + } + @media (min-width: breakpoint-min('lg', $grid-breakpoints)) { + width: map-get($container-max-widths, 'lg'); + } + @media (min-width: breakpoint-min('xl', $grid-breakpoints)) { + width: map-get($container-max-widths, 'xl'); + } + } +} + +.float-col { + padding-left: $grid-gutter-width / 2; + padding-right: $grid-gutter-width / 2; +} diff --git a/app/styles/components/theme-selector.scss b/app/styles/components/theme-selector.scss new file mode 100755 index 0000000..89f0cff --- /dev/null +++ b/app/styles/components/theme-selector.scss @@ -0,0 +1,3 @@ +.theme-config__body .custom-control .custom-control-label { + display: block; +} \ No newline at end of file diff --git a/app/styles/components/wizard.scss b/app/styles/components/wizard.scss new file mode 100755 index 0000000..fffdcc9 --- /dev/null +++ b/app/styles/components/wizard.scss @@ -0,0 +1,81 @@ +@import './../../styles/variables.scss'; +@import '~bootstrap/scss/mixins/breakpoints'; + +.wizard { + display: flex; + align-items: center; +} + +.wizard-step { + flex: 0 1 auto; + display: flex; + align-items: center; + text-decoration: none !important; + white-space: nowrap; + + &--active { + .wizard-step__icon { + background: $primary; + } + .wizard-step__content { + color: $body-color; + } + } + + &--disabled { + opacity: 0.4; + cursor: not-allowed; + } + + &--complete { + .wizard-step__icon { + background: $success; + } + } + + &__icon { + flex: 0 0 30px; + width: 30px; + height: 30px; + margin-right: 10px; + background: $gray-300; + border-radius: 50%; + + display: flex; + align-items: center; + justify-content: center; + + > * { + color: #fff; + } + } + + &__content { + color: $text-muted; + } + + + .wizard-step { + margin-left: 20px; + } +} + +@media (max-width: breakpoint-max('md', $grid-breakpoints)) { + .wizard { + flex-wrap: wrap; + } + + .wizard-step { + flex: 0 1 50%; + padding: 0.5rem; + + + .wizard-step { + margin-left: 0; + } + } +} + +@media (max-width: breakpoint-max('xs', $grid-breakpoints)) { + .wizard-step { + flex-basis: 100%; + } +} diff --git a/app/styles/main.scss b/app/styles/main.scss new file mode 100755 index 0000000..d459cbd --- /dev/null +++ b/app/styles/main.scss @@ -0,0 +1 @@ +@import '~@owczar/dashboard-style--airframe/scss/style'; \ No newline at end of file diff --git a/app/styles/plugins/_ag-grid.scss b/app/styles/plugins/_ag-grid.scss new file mode 100755 index 0000000..f281ac9 --- /dev/null +++ b/app/styles/plugins/_ag-grid.scss @@ -0,0 +1,2 @@ +@import '~@owczar/dashboard-style--airframe/scss/plugins/ag-grid/ag-grid'; +@import '~@owczar/dashboard-style--airframe/scss/plugins/ag-grid/ag-theme-bootstrap'; diff --git a/app/styles/plugins/_font-awesome.scss b/app/styles/plugins/_font-awesome.scss new file mode 100755 index 0000000..58ce59a --- /dev/null +++ b/app/styles/plugins/_font-awesome.scss @@ -0,0 +1,3 @@ +$fa-font-path: "~font-awesome/fonts/"; + +@import "~font-awesome/scss/font-awesome"; \ No newline at end of file diff --git a/app/styles/plugins/_rc-slider.scss b/app/styles/plugins/_rc-slider.scss new file mode 100755 index 0000000..a9b52ee --- /dev/null +++ b/app/styles/plugins/_rc-slider.scss @@ -0,0 +1,32 @@ +/* RC Sliders Overrides */ +@import "./../variables.scss"; + +.rc-slider { + .rc-slider-track { + background-color: $primary; + } + + .rc-slider-dot-active { + border-color: $primary !important; + } + + .rc-slider-handle { + border-color: $primary; + + &:active { + border-color: darken($primary, 10%); + box-shadow: 0 0 5px darken($primary, 10%); + } + &:hover { + border-color: darken($primary, 5%); + } + } + + .rc-slider-rail { + background-color: $gray-400; + } + .rc-slider-dot { + background-color: $white; + border: 2px solid $gray-500; + } +} diff --git a/app/styles/plugins/_react-big-calendar.scss b/app/styles/plugins/_react-big-calendar.scss new file mode 100755 index 0000000..108ded5 --- /dev/null +++ b/app/styles/plugins/_react-big-calendar.scss @@ -0,0 +1,71 @@ +/* React Big Calendar Overrides */ +.rbc-month-view { + border: 1px solid $gray-300 !important; +} +.rbc-off-range-bg { + background: $gray-100 !important; +} + +.rbc-header { + font-size: 12px !important; + font-weight: 500 !important; +} + +.rbc-off-range { + color: $gray-400 !important; +} + +.rbc-event { + background: $primary !important; +} + +.rbc-day-slot .rbc-event { + border: 1px solid darken($primary, 15%) !important; +} + +.rbc-show-more { + font-weight: normal !important; +} + +.rbc-today { + background-color: lighten($primary, 40%) !important; +} + +.rbc-date-cell.rbc-now { + color: $black !important; + font-weight: normal !important; +} + +.rbc-toolbar-label { + color: $black !important; +} + +.rbc-toolbar button { + color: $body-color !important; + font-size: 14px !important; + border: 1px solid $gray-300 !important; +} + +.rbc-toolbar button:active, .rbc-toolbar button.rbc-active { + background-image: none; + color: $black !important; + box-shadow: none !important; + background-color: $gray-300 !important; + border-color: $gray-300 !important; +} + +.rbc-toolbar button:hover { + background-color: lighten($gray-300, 5%) !important; +} + +.rbc-header { + border-bottom: 1px solid $gray-300 !important; +} + +.rbc-header + .rbc-header { + border-left: 1px solid $gray-300 !important; +} + +.rbc-month-row + .rbc-month-row { + border-top: 1px solid $gray-300 !important; +} \ No newline at end of file diff --git a/app/styles/plugins/_react-bootstrap-table.scss b/app/styles/plugins/_react-bootstrap-table.scss new file mode 100755 index 0000000..ce14abf --- /dev/null +++ b/app/styles/plugins/_react-bootstrap-table.scss @@ -0,0 +1,24 @@ +/*@import "~react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";*/ + +@import "./../variables.scss"; + +.react-bootstrap-table th.sortable { + white-space: nowrap; +} + +.react-bootstrap-table th, +.react-bootstrap-table td { + vertical-align: middle !important; +} + +.react-bootstrap-table .table:not(.table-bordered) tbody tr:last-child td { + border-bottom: 1px solid $table-border-color; +} + +.react-bootstrap-table-pagination { + padding: 0 0.75rem; +} + +.react-bootstrap-table-pagination-list .pagination { + justify-content: flex-end; +} diff --git a/app/styles/plugins/_react-bootstrap-typeahead.scss b/app/styles/plugins/_react-bootstrap-typeahead.scss new file mode 100755 index 0000000..b3231e8 --- /dev/null +++ b/app/styles/plugins/_react-bootstrap-typeahead.scss @@ -0,0 +1,8 @@ +/* React Bootstrap Typeahead Overrides */ +.rbt-token { + background-color: $primary !important; + color: $white !important; +} +.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus { + color: darken($white,20%) !important; +} diff --git a/app/styles/plugins/_react-datepicker.scss b/app/styles/plugins/_react-datepicker.scss new file mode 100755 index 0000000..3423fce --- /dev/null +++ b/app/styles/plugins/_react-datepicker.scss @@ -0,0 +1,80 @@ +/* React Datepicker Overrides */ + +// Card +.react-datepicker { + border: solid 1px $gray-400 !important; + font-family: inherit !important; + box-shadow: $box-shadow; +} +.react-datepicker__header { + background-color: $gray-200 !important; + border-bottom: solid 0px $gray-400 !important; +} + +// Card Header +.react-datepicker__navigation--next { + border-left-color: $gray-500 !important; +} +.react-datepicker__navigation--next:hover { + border-left-color: $gray-600 !important; +} +.react-datepicker__navigation--previous { + border-right-color: $gray-500 !important; +} +.react-datepicker__navigation--previous:hover { + border-right-color: $gray-600 !important; +} + +// Month Header +.react-datepicker__current-month { + color: $black !important; + font-weight: 500 !important; + font-size: 14px !important; +} +.react-datepicker__day-name { + color: $body-color !important; +} + +// Active Day +.react-datepicker__day--selected { + color: $white !important; + background-color: $primary !important; +} +// Hover Day +.react-datepicker__day:hover { + background-color: $primary !important; + color: $white !important; +} + + +// Day In Range +.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) { + background-color: lighten($primary, 15%) !important; + color: $white !important; +} +.react-datepicker__day--in-range { + background-color: lighten($primary, 24%) !important; + color: $white !important; +} + +// Day in Selecting Range +.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) { + background-color: $primary !important; + color: $white !important; +} + +// Triangle Top +[data-placement^="bottom"] .react-datepicker__triangle { + border-bottom-color: $gray-200 !important; +} +[data-placement^="bottom"] .react-datepicker__triangle::before { + border-bottom-color: $gray-400 !important; +} + +// Triangle Bottom +[data-placement^="top"] .react-datepicker__triangle { + border-top-color: $gray-400 !important; +} +[data-placement^="top"] .react-datepicker__triangle::before { + border-top-color: $gray-400 !important; +} \ No newline at end of file diff --git a/app/styles/plugins/_react-dropzone.scss b/app/styles/plugins/_react-dropzone.scss new file mode 100755 index 0000000..8bf4e89 --- /dev/null +++ b/app/styles/plugins/_react-dropzone.scss @@ -0,0 +1,14 @@ +@import "./../variables.scss"; + +.dropzone { + border: 2px dashed $gray-300; + padding: 20px; + text-align: center; + cursor: pointer; + + &:hover, + &--active { + border-color: $primary; + background-color: rgba($primary, 0.1); + } +} diff --git a/app/styles/plugins/_react-grid-layout.scss b/app/styles/plugins/_react-grid-layout.scss new file mode 100755 index 0000000..ec18ef8 --- /dev/null +++ b/app/styles/plugins/_react-grid-layout.scss @@ -0,0 +1,76 @@ +/* React Grid Layout Overrides */ +@import "./../variables.scss"; + +.react-grid-layout { + margin: 0 (-$grid-gutter-width / 2); + + .react-grid-item.react-grid-placeholder { + background: none; + z-index: 2; + transition-duration: 100ms; + user-select: none; + position: relative; + opacity: 0.7; + + &:after { + position: absolute; + left: 50%; + top: 0; + transform: translate(-50%, 0); + content: " "; + background: rgba($primary, 0.3); + border-radius: 4px; + border: 2px dashed $primary; + height: calc(100% - #{$grid-gutter-width / 2}); + width: calc(100% - #{$grid-gutter-width}); + } + } +} + +.float-column { + display: flex; + flex-direction: column; + + > .card { + flex: 1 1 auto; + margin-bottom: $grid-gutter-width / 2; + + + .react-resizable-handle { + bottom: $grid-gutter-width / 2; + right: $grid-gutter-width / 2; + } + + > .card-header { + cursor: move; + user-select: none; + /* + &:before { + position: absolute; + font: normal normal normal 14px/1 FontAwesome; + content: "\f142"; + top: 50%; + left: 1rem; + transform: translateY(-50%); + color: $text-muted; + } + */ + } + } +} + +// Internal Breakpoint System +//===================================== +.float-column { + // Reset column sizes + [class^="col-"] { + flex: 0 0 100%; + max-width: 100%; + } + + &--size-lg { + .col-md-4 { + flex: 0 0 (100% / 3); + max-width: (100% / 3); + } + } +} \ No newline at end of file diff --git a/app/styles/plugins/_react-image-crop.scss b/app/styles/plugins/_react-image-crop.scss new file mode 100755 index 0000000..84a93a5 --- /dev/null +++ b/app/styles/plugins/_react-image-crop.scss @@ -0,0 +1 @@ +@import '~react-image-crop/lib/ReactCrop.scss'; diff --git a/app/styles/plugins/_react-quill.scss b/app/styles/plugins/_react-quill.scss new file mode 100755 index 0000000..f9f8342 --- /dev/null +++ b/app/styles/plugins/_react-quill.scss @@ -0,0 +1,98 @@ +/* React Quill Overrides */ +@import "~bootstrap/scss/mixins/_border-radius.scss"; +@import "./../variables.scss"; + +.card .quill { + display: flex; + flex-direction: column; + + .ql-toolbar { + // START Bootstrap Card Header + padding: $card-spacer-y $card-spacer-x; + margin-bottom: 0; // Removes the default margin-bottom of + color: $card-cap-color; + background-color: $card-cap-bg; + border-bottom: $card-border-width solid $card-border-color; + + &:first-child { + @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); + } + + + .list-group { + .list-group-item:first-child { + border-top: 0; + } + } + // END Bootstrap Card Header + + flex: 0 0 auto; + border-width: 0 0 1px 0; + background-color: $gray-100; + } + + .ql-container { + font-family: inherit; + font-size: inherit; + + flex: 1 1 auto; + border: none; + display: flex; + flex-direction: column; + + .ql-editor { + flex: 1 1 auto; + color: $body-color; + background: $white; + } + } + + .ql-snow .ql-stroke { + stroke: $body-color; + } + .ql-snow .ql-fill { + fill: $body-color; + } +} + +// Button SVG modifiers + .quill .ql-snow { + .ql-stroke { + stroke: $gray-500; + } + + .ql-fill { + fill: $gray-500; + } + } + + // Hover button SVG modifiers + .quill .ql-snow.ql-toolbar button:hover { + .ql-stroke { + stroke: $primary; + } + .ql-fill { + fill: $primary; + } + } + + // Active button SVG modifiers + .quill .ql-snow.ql-toolbar button.ql-active { + .ql-stroke { + stroke: $primary; + } + .ql-fill { + fill: $primary; + } + } + + // Focus button SVG modifiers + .quill .ql-snow.ql-toolbar button:focus { + outline: none; + + .ql-stroke { + stroke: $primary; + } + .ql-fill { + fill: $primary; + } + } \ No newline at end of file diff --git a/app/styles/plugins/_react-toastify.scss b/app/styles/plugins/_react-toastify.scss new file mode 100755 index 0000000..c85fb46 --- /dev/null +++ b/app/styles/plugins/_react-toastify.scss @@ -0,0 +1,82 @@ +@import "~react-toastify/scss/main.scss"; +@import "../variables.scss"; + +.Toastify__toast { + background-color: $white; + padding: 20px; + border-radius: 3px; + border-top: 1px solid $gray-300; + border-bottom: 1px solid $gray-300; + border-right: 1px solid $gray-300; + font-family: inherit; +} +.Toastify__toast p { + color: $body-color; +} +.Toastify__toast h6 { + color: $black; + font-weight: 500; +} + +// Toastiy: "SUCCESS" Alert +.Toastify__toast--success .fa-check { + color: $success; +} +.Toastify__toast--success .fa-check-circle { + color: $success !important; +} +.Toastify__toast--success { + border-left: 3px solid $success; +} +.Toastify__close-button--success { + color: $gray-500; +} + +// Toastiy: "INFO" Alert + +.Toastify__toast--info .fa-info { + color: $primary; +} +.Toastify__toast--info { + background-color: $white; + border-left: 3px solid $primary; +} +.Toastify__close-button--info { + color: $gray-500; +} + +// Toastiy: "WARNING" Alert +.Toastify__toast--warning .fa-exclamation { + color: $warning; +} +.Toastify__toast--warning { + background-color: $white; + border-left: 3px solid $warning; +} +.Toastify__close-button--warning { + color: $gray-500; +} + +// Toastiy: "ERROR" Alert +.Toastify__toast--error .fa-close { + color: $danger; +} +.Toastify__toast--error { + background-color: $white; + border-left: 3px solid $danger; +} +.Toastify__close-button--error { + color: $gray-500; +} + +// Toastiy: "DEFAULT" Alert +.Toastify__toast--default .fa-exclamation { + color: $dark; +} +.Toastify__toast--default { + background-color: $white; + border-left: 3px solid $secondary; +} +.Toastify__close-button--default { + color: $gray-500; +} \ No newline at end of file diff --git a/app/styles/plugins/_react-toggle.scss b/app/styles/plugins/_react-toggle.scss new file mode 100755 index 0000000..de6e6a5 --- /dev/null +++ b/app/styles/plugins/_react-toggle.scss @@ -0,0 +1,17 @@ +/* React Toggle Overrides */ +.react-toggle-track { + .fa { + font-size: 12px; + } +} + +.react-toggle-track { + background-color: $gray-500 !important; +} +.react-toggle-thumb { + border: 1px solid $gray-500 !important; +} + +.react-toggle--checked .react-toggle-track { + background-color: $success !important; +} \ No newline at end of file diff --git a/app/styles/plugins/plugins.css b/app/styles/plugins/plugins.css new file mode 100755 index 0000000..97ea0ad --- /dev/null +++ b/app/styles/plugins/plugins.css @@ -0,0 +1,8 @@ +@import "~react-toggle/style.css"; +@import '~react-bootstrap-typeahead/css/Typeahead.css'; +@import '~react-bootstrap-typeahead/css/Typeahead-bs4.css'; +@import "~react-quill/dist/quill.snow.css"; +@import "~react-datepicker/dist/react-datepicker.css"; +@import "~react-big-calendar/lib/css/react-big-calendar.css"; +@import "~react-grid-layout/css/styles.css"; +@import "~rc-slider/assets/index.css"; diff --git a/app/styles/plugins/plugins.scss b/app/styles/plugins/plugins.scss new file mode 100755 index 0000000..b0f8f3e --- /dev/null +++ b/app/styles/plugins/plugins.scss @@ -0,0 +1,17 @@ +@import "ag-grid"; +@import "font-awesome"; +@import "react-toastify"; +@import "react-image-crop"; +@import "react-toggle"; +@import "react-bootstrap-typeahead"; +@import "react-quill"; +@import "react-datepicker"; +@import "font-awesome"; +@import "react-big-calendar"; +@import "font-awesome"; +@import "react-grid-layout"; +@import "font-awesome"; +@import "react-dropzone"; +@import "font-awesome"; +@import "rc-slider.scss"; +@import "react-bootstrap-table.scss"; diff --git a/app/styles/variables.scss b/app/styles/variables.scss new file mode 100755 index 0000000..3d8febb --- /dev/null +++ b/app/styles/variables.scss @@ -0,0 +1 @@ +@import "~@owczar/dashboard-style--airframe/scss/variables"; \ No newline at end of file diff --git a/app/utilities.js b/app/utilities.js new file mode 100755 index 0000000..736b04c --- /dev/null +++ b/app/utilities.js @@ -0,0 +1,13 @@ +const allAvatars = (ctx => { + let keys = ctx.keys(); + return keys.map(ctx); +})(require.context('./images/avatars', true, /.*/)); + +export function randomArray(arr) { + const index = Math.round(Math.random() * (arr.length - 1)); + return arr[index]; +} + +export function randomAvatar() { + return randomArray(allAvatars); +} \ No newline at end of file diff --git a/build/cli-tools.js b/build/cli-tools.js new file mode 100755 index 0000000..5f82840 --- /dev/null +++ b/build/cli-tools.js @@ -0,0 +1,50 @@ +var program = require('commander'); +var rimraf = require('rimraf'); +var fs = require('fs'); +var mkdirp = require('mkdirp'); + +var config = require('./../config'); + +function dirParamToPath(dirParam) { + switch(dirParam) { + case 'dist': + return config.distDir; + case 'serve': + return config.serveDir; + } + return null; +} + +var commands = { + clear: function(value) { + var targetPath = dirParamToPath(value); + + if(targetPath) { + rimraf.sync(targetPath); + + console.info('Cleared target directory: %s', targetPath); + } + }, + + create: function(value) { + var targetPath = dirParamToPath(value); + + if(targetPath) { + mkdirp.sync(targetPath); + + console.info('Created target directory: %s', targetPath); + } + } +} + +program + .option('-c, --clear [serve/dist]') + .option('-cr, --create [serve/dist]') + .parse(process.argv); + +for (var commandName in commands) { + if (commands.hasOwnProperty(commandName) && program[commandName]) { + commands[commandName](program[commandName]); + } +} + diff --git a/build/webpack.config.client.dev.js b/build/webpack.config.client.dev.js new file mode 100755 index 0000000..727ca39 --- /dev/null +++ b/build/webpack.config.client.dev.js @@ -0,0 +1,150 @@ +var path = require('path'); +var webpack = require('webpack'); +var HtmlWebpackPlugin = require('html-webpack-plugin'); +var CircularDependencyPlugin = require('circular-dependency-plugin'); +var ExtractCssChunks = require("extract-css-chunks-webpack-plugin"); + +var config = require('./../config'); + +var BASE_PATH = process.env.BASE_PATH || '/'; + +module.exports = { + name: 'client', + devtool: 'cheap-eval-source-map', + target: 'web', + mode: 'development', + entry: { + app: [path.join(config.srcDir, 'index.js')] + }, + output: { + filename: '[name].bundle.js', + chunkFilename: '[name].chunk.js', + path: config.distDir, + publicPath: BASE_PATH + }, + resolve: { + modules: [ + 'node_modules', + config.srcDir + ] + }, + plugins: [ + new CircularDependencyPlugin({ + exclude: /a\.js|node_modules/, + failOnError: true, + allowAsyncCycles: false, + cwd: process.cwd(), + }), + new HtmlWebpackPlugin({ + template: config.srcHtmlLayout, + inject: false, + chunksSortMode: 'none' + }), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('development'), + 'process.env.BASE_PATH': JSON.stringify(BASE_PATH), + }), + new webpack.NamedModulesPlugin(), + new webpack.HotModuleReplacementPlugin(), + new ExtractCssChunks(), + ], + module: { + rules: [ + { + test: /\.js$/, + exclude: /node_modules/, + use: 'babel-loader' + }, + // Modular Styles + { + test: /\.css$/, + use: [ + { loader: 'style-loader' }, + { + loader: 'css-loader', + options: { + modules: true, + importLoaders: 1, + } + }, + { loader: 'postcss-loader' } + ], + exclude: [path.resolve(config.srcDir, 'styles')], + include: [config.srcDir] + }, + { + test: /\.scss$/, + use: [ + { loader: 'style-loader' }, + { + loader: 'css-loader', + options: { + modules: true, + importLoaders: 1, + } + }, + { loader: 'postcss-loader' }, + { + loader: 'sass-loader', + options: { + includePaths: config.scssIncludes + } + } + ], + exclude: [path.resolve(config.srcDir, 'styles')], + include: [config.srcDir] + }, + // Global Styles + { + test: /\.css$/, + use: [ + ExtractCssChunks.loader, + 'css-loader', + 'postcss-loader' + ], + include: [path.resolve(config.srcDir, 'styles')] + }, + { + test: /\.scss$/, + use: [ + ExtractCssChunks.loader, + 'css-loader', + 'postcss-loader', + { + loader: 'sass-loader', + options: { + includePaths: config.scssIncludes + } + } + ], + include: [path.resolve(config.srcDir, 'styles')] + }, + // Fonts + { + test: /\.(ttf|eot|woff|woff2)$/, + loader: "file-loader", + options: { + name: "fonts/[name].[ext]", + } + }, + // Files + { + test: /\.(jpg|jpeg|png|gif|svg|ico)$/, + loader: "file-loader", + options: { + name: "static/[name].[ext]", + } + } + ] + }, + devServer: { + hot: true, + contentBase: config.serveDir, + compress: true, + historyApiFallback: { + index: BASE_PATH + }, + host: '0.0.0.0', + port: 4100 + } +} \ No newline at end of file diff --git a/build/webpack.config.client.prod.js b/build/webpack.config.client.prod.js new file mode 100755 index 0000000..6a31b22 --- /dev/null +++ b/build/webpack.config.client.prod.js @@ -0,0 +1,153 @@ +var path = require('path'); +var webpack = require('webpack'); +var HtmlWebpackPlugin = require('html-webpack-plugin'); +var ExtractCssChunks = require("extract-css-chunks-webpack-plugin"); +var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); +var TerserPlugin = require('terser-webpack-plugin'); +var CircularDependencyPlugin = require('circular-dependency-plugin'); + +var config = require('./../config'); + +var BASE_PATH = process.env.BASE_PATH || '/'; + +module.exports = { + devtool: 'inline-source-map', + mode: 'production', + entry: { + app: ['react-hot-loader/patch', path.join(config.srcDir, 'index.js')] + }, + output: { + filename: '[name].bundle.js', + chunkFilename: '[name].chunk.js', + path: config.distDir, + publicPath: BASE_PATH + }, + resolve: { + modules: [ + 'node_modules', + config.srcDir + ] + }, + plugins: [ + new CircularDependencyPlugin({ + exclude: /a\.js|node_modules/, + failOnError: true, + allowAsyncCycles: false, + cwd: process.cwd(), + }), + new HtmlWebpackPlugin({ + template: config.srcHtmlLayout, + inject: false + }), + new webpack.HashedModuleIdsPlugin(), + new ExtractCssChunks(), + new OptimizeCssAssetsPlugin(), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production'), + 'process.env.BASE_PATH': JSON.stringify(BASE_PATH), + }) + ], + optimization: { + minimizer: [new TerserPlugin()] + }, + module: { + rules: [ + { + test: /\.js$/, + include: config.srcDir, + exclude: /node_modules/, + use: 'babel-loader' + }, + // Modular Styles + { + test: /\.css$/, + use: [ + ExtractCssChunks.loader, + { + loader: 'css-loader', + options: { + modules: true, + importLoaders: 1, + } + }, + { loader: 'postcss-loader' } + ], + exclude: [path.resolve(config.srcDir, 'styles')], + include: [config.srcDir] + }, + { + test: /\.scss$/, + use: [ + ExtractCssChunks.loader, + { + loader: 'css-loader', + options: { + modules: true, + importLoaders: 1, + } + }, + { loader: 'postcss-loader' }, + { + loader: 'sass-loader', + options: { + includePaths: config.scssIncludes + } + } + ], + exclude: [path.resolve(config.srcDir, 'styles')], + include: [config.srcDir] + }, + // Global Styles + { + test: /\.css$/, + use: [ + ExtractCssChunks.loader, + { loader: 'css-loader' }, + { loader: 'postcss-loader' } + ], + include: [path.resolve(config.srcDir, 'styles')] + }, + { + test: /\.scss$/, + use: [ + ExtractCssChunks.loader, + { loader: 'css-loader' }, + { loader: 'postcss-loader' }, + { + loader: 'sass-loader', + options: { + includePaths: config.scssIncludes + } + } + ], + include: [path.resolve(config.srcDir, 'styles')] + }, + // Fonts + { + test: /\.(ttf|eot|woff|woff2)$/, + loader: "file-loader", + options: { + name: "fonts/[name].[ext]", + } + }, + // Files + { + test: /\.(jpg|jpeg|png|gif|svg|ico)$/, + loader: "file-loader", + options: { + name: "static/[name].[ext]", + } + } + ] + }, + devServer: { + hot: false, + contentBase: config.distDir, + compress: true, + historyApiFallback: { + index: '/' + }, + host: '0.0.0.0', + port: 4100 + } +} \ No newline at end of file diff --git a/config.js b/config.js new file mode 100755 index 0000000..69d484a --- /dev/null +++ b/config.js @@ -0,0 +1,28 @@ +var path = require('path'); + +var root = path.join(__dirname); + +var config = { + rootDir: root, + // Targets ======================================================== + serveDir: path.join(root, '.serve'), + distDir: path.join(root, 'dist'), + clientManifestFile: 'manifest.webpack.json', + clientStatsFile: 'stats.webpack.json', + + // Source Directory =============================================== + srcDir: path.join(root, 'app'), + srcServerDir: path.join(root, 'server'), + + // HTML Layout ==================================================== + srcHtmlLayout: path.join(root, 'app', 'index.html'), + + // Site Config ==================================================== + siteTitle: 'Airframe', + siteDescription: 'Default Dashboard ready for Development', + siteCannonicalUrl: 'http://localhost:4100', + siteKeywords: 'react dashboard seed bootstrap', + scssIncludes: [] +} + +module.exports = config; \ No newline at end of file diff --git a/package.json b/package.json new file mode 100755 index 0000000..c1a0bb4 --- /dev/null +++ b/package.json @@ -0,0 +1,99 @@ +{ + "name": "airframe-dashboard", + "version": "0.1.0", + "description": "Seed project for flexible light React/Bootstrap 4 dashboards.", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "npm run start:dev", + "build:dev": "node ./build/cli-tools.js --clear dist --create dist && webpack --config ./build/webpack.config.client.dev.js", + "build:prod": "node ./build/cli-tools.js --clear dist --create dist && webpack --config ./build/webpack.config.client.prod.js", + "start:dev": "node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.dev.js", + "start:prod": "node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.prod.js" + }, + "author": "Webkom", + "license": "ISC", + "devDependencies": { + "@babel/cli": "^7.4.4", + "@babel/core": "^7.4.5", + "@babel/plugin-proposal-class-properties": "^7.4.4", + "@babel/plugin-syntax-dynamic-import": "^7.2.0", + "@babel/preset-env": "^7.4.5", + "@babel/preset-react": "^7.0.0", + "autoprefixer": "^9.6.0", + "babel-eslint": "^10.0.1", + "babel-loader": "^8.0.6", + "babel-plugin-universal-import": "^4.0.0", + "circular-dependency-plugin": "^5.0.2", + "commander": "^2.20.0", + "css-loader": "^3.1.0", + "eslint": "^6.1.0", + "eslint-config-airbnb": "^17.1.0", + "eslint-import-resolver-alias": "^1.1.2", + "eslint-plugin-import": "^2.17.3", + "eslint-plugin-jsx-a11y": "^6.2.1", + "eslint-plugin-react": "^7.13.0", + "extract-css-chunks-webpack-plugin": "^4.5.2", + "file-loader": "^4.0.0", + "html-webpack-plugin": "^3.2.0", + "mkdirp": "^0.5.1", + "node-sass": "^4.12.0", + "optimize-css-assets-webpack-plugin": "^5.0.1", + "postcss-loader": "^3.0.0", + "raw-loader": "^3.0.0", + "rimraf": "^2.6.3", + "sass-loader": "^7.1.0", + "style-loader": "^0.23.1", + "terser-webpack-plugin": "^1.3.0", + "webpack": "^4.33.0", + "webpack-cli": "^3.3.4", + "webpack-dev-server": "^3.7.1" + }, + "dependencies": { + "@babel/polyfill": "^7.4.4", + "@owczar/dashboard-style--airframe": "^0.1.13", + "ag-grid-community": "^21.0.1", + "ag-grid-react": "^21.0.1", + "bootstrap": "^4.3.1", + "faker": "^4.1.0", + "font-awesome": "^4.7.0", + "holderjs": "^2.9.6", + "lodash": "^4.17.11", + "moment": "^2.24.0", + "node-fetch": "^2.6.0", + "numeral": "^2.0.6", + "prop-types": "^15.7.2", + "query-string": "^6.7.0", + "rc-slider": "^8.6.13", + "react": "^16.8.6", + "react-beautiful-dnd": "^11.0.4", + "react-big-calendar": "^0.22.0", + "react-bootstrap-table-next": "^3.1.4", + "react-bootstrap-table2-editor": "^1.2.4", + "react-bootstrap-table2-filter": "^1.1.9", + "react-bootstrap-table2-paginator": "^2.0.6", + "react-bootstrap-table2-toolkit": "^2.0.1", + "react-bootstrap-typeahead": "^4.0.0-alpha.9", + "react-datepicker": "^2.7.0", + "react-dom": "^16.8.6", + "react-dropzone": "^10.1.5", + "react-grid-layout": "^0.16.6", + "react-helmet": "^5.2.1", + "react-hot-loader": "^4.11.0", + "react-image-crop": "^8.0.2", + "react-quill": "^1.3.3", + "react-responsive": "^7.0.0", + "react-router": "^5.0.1", + "react-router-dom": "^5.0.1", + "react-text-mask": "^5.4.3", + "react-toastify": "^5.2.1", + "react-toggle": "^4.0.2", + "react-universal-component": "^4.0.0", + "reactstrap": "^8.0.0", + "recharts": "^1.6.2", + "text-mask-addons": "^3.8.0", + "uuid": "^3.3.2", + "webpack-cli": "^3.1.0", + "webpack-flush-chunks": "^2.0.3" + } +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100755 index 0000000..2e2f832 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,5 @@ +module.exports = { + plugins: [ + require('autoprefixer') + ] +}; \ No newline at end of file