some documentation sections

package.json

@@ -20,6 +20,7 @@
  "bundle-loader": "^0.5.6",
  "case-sensitive-paths-webpack-plugin": "2.1.2",
  "chalk": "2.4.1",
+ "classnames": "^2.2.6",
  "css-loader": "1.0.0",
  "dotenv": "6.0.0",
  "dotenv-expand": "4.2.0",
@@ -96,6 +97,7 @@
  "react-sortable-hoc": "^0.8.3",
  "react-sortable-tree": "^2.2.0",
  "react-sparklines": "^1.7.0",
+ "react-syntax-highlighter": "^10.1.2",
  "react-table": "6.7.6",
  "reactstrap": "^6.5.0",
  "redux": "^4.0.1",

src/components/App.js

@@ -8,6 +8,7 @@ import ErrorPage from '../pages/error';
 /* eslint-enable */
 
 import LayoutComponent from '../components/Layout';
+import DocumentationLayoutComponent from '../components/Layout/DocumentationLayout';
 import LoginComponent from '../pages/login';
 import '../styles/theme.scss';
 
@@ -38,6 +39,8 @@ class App extends React.PureComponent {
  <Route path="/" exact render={() => <Redirect to="/app/main" />} />
  <Route path="/app" exact render={() => <Redirect to="/app/main" />} />
  <PrivateRoute path="/app" component={LayoutComponent} />
+ <Route path="/documentation" exact render={() => <Redirect to="/documentation/getting-started/overview" />} />
+ <Route path="/documentation" component={DocumentationLayoutComponent} />
  <Route path="/login" exact component={LoginComponent} />
  <Route path="/error" exact component={ErrorPage} />
  <Redirect from="*" to="/app/main/analytics" />

src/components/Header/DocumentationHeader.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router';
+import {
+ Navbar,
+ Nav,
+ Dropdown,
+ NavItem,
+ NavLink,
+ Badge,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+ UncontrolledTooltip,
+ InputGroupAddon,
+ InputGroup,
+ Input,
+ Form,
+ FormGroup,
+} from 'reactstrap';
+import $ from 'jquery';
+
+import Notifications from '../Notifications';
+import { logoutUser } from '../../actions/user';
+import { toggleSidebar, openSidebar, closeSidebar, changeActiveSidebarItem } from '../../actions/navigation';
+
+import a5 from '../../images/people/a5.jpg';
+import a6 from '../../images/people/a6.jpg';
+
+import s from './Header.module.scss'; // eslint-disable-line css-modules/no-unused-class
+
+class Header extends React.Component {
+ static propTypes = {
+ sidebarOpened: PropTypes.bool.isRequired,
+ sidebarStatic: PropTypes.bool.isRequired,
+ chatToggle: PropTypes.func.isRequired,
+ dispatch: PropTypes.func.isRequired,
+ location: PropTypes.shape({
+ pathname: PropTypes.string,
+ }).isRequired,
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.toggleMenu = this.toggleMenu.bind(this);
+ this.switchSidebar = this.switchSidebar.bind(this);
+ this.toggleSidebar = this.toggleSidebar.bind(this);
+
+ this.state = {
+ menuOpen: false,
+ notificationsOpen: false,
+ notificationsTabSelected: 1,
+ };
+ }
+
+ // collapse/uncolappse
+ switchSidebar() {
+ if (this.props.sidebarOpened) {
+ this.props.dispatch(closeSidebar());
+ this.props.dispatch(changeActiveSidebarItem(null));
+ } else {
+ const paths = this.props.location.pathname.split('/');
+ paths.pop();
+ this.props.dispatch(openSidebar());
+ this.props.dispatch(changeActiveSidebarItem(paths.join('/')));
+ }
+ }
+
+ // static/non-static
+ toggleSidebar() {
+ this.props.dispatch(toggleSidebar());
+ if (this.props.sidebarStatic) {
+ localStorage.setItem('staticSidebar', 'false');
+ this.props.dispatch(changeActiveSidebarItem(null));
+ } else {
+ localStorage.setItem('staticSidebar', 'true');
+ const paths = this.props.location.pathname.split('/');
+ paths.pop();
+ this.props.dispatch(changeActiveSidebarItem(paths.join('/')));
+ }
+ }
+
+ toggleMenu() {
+ this.setState({
+ menuOpen: !this.state.menuOpen,
+ });
+ }
+ render() {
+ return (
+ <Navbar className={`${s.root} d-print-none`}>
+ <Nav>
+ <NavItem>
+ <NavLink className="d-md-down-none ml-3" id="toggleSidebar" onClick={this.toggleSidebar}>
+ <i className="la la-bars" />
+ </NavLink>
+ <UncontrolledTooltip placement="bottom" target="toggleSidebar">
+ Turn on/off<br />sidebar<br />collapsing
+ </UncontrolledTooltip>
+ <NavLink className="fs-lg d-lg-none" onClick={this.switchSidebar}>
+ <span className="rounded rounded-lg bg-gray text-white d-md-none"><i className="la la-bars" /></span>
+ <i className="la la-bars ml-3 d-sm-down-none" />
+ </NavLink>
+ </NavItem>
+ </Nav>
+
+ <NavLink className={`${s.navbarBrand} d-md-none`}>
+ <i className="fa fa-circle text-gray mr-n-sm" />
+ <i className="fa fa-circle text-warning" />
+ &nbsp;
+ sing
+ &nbsp;
+ <i className="fa fa-circle text-warning mr-n-sm" />
+ <i className="fa fa-circle text-gray" />
+ </NavLink>
+ </Navbar>
+ );
+ }
+}
+
+function mapStateToProps(store) {
+ return {
+ sidebarOpened: store.navigation.sidebarOpened,
+ sidebarStatic: store.navigation.sidebarStatic,
+ };
+}
+
+export default withRouter(connect(mapStateToProps)(Header));
+

src/components/Layout/DocumentationLayout.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Switch, Route, withRouter, Redirect } from 'react-router';
+import Hammer from 'rc-hammerjs';
+
+import Header from '../Header/DocumentationHeader';
+import Sidebar from '../Sidebar/DocumentationSidebar';
+import { openSidebar, closeSidebar, changeActiveSidebarItem, toggleSidebar } from '../../actions/navigation';
+import s from './Layout.module.scss';
+
+import Overview from '../../pages/documentation/getting-started/Overview'
+import Licences from '../../pages/documentation/getting-started/Licences';
+import QuickStart from '../../pages/documentation/getting-started/QuickStart';
+import Alerts from '../../pages/documentation/components/Alerts';
+import Badge from '../../pages/documentation/components/Badge';
+import Buttons from '../../pages/documentation/components/Buttons';
+import Card from '../../pages/documentation/components/Card';
+import Carousel from '../../pages/documentation/components/Carousel';
+import Modal from '../../pages/documentation/components/Modal';
+import Nav from '../../pages/documentation/components/Nav';
+import Navbar from '../../pages/documentation/components/Navbar';
+import Popovers from '../../pages/documentation/components/Popovers';
+import Progress from '../../pages/documentation/components/Progress';
+import Tabs from '../../pages/documentation/components/Tabs';
+import Libs from '../../pages/documentation/Libs';
+
+
+class Layout extends React.Component {
+ static propTypes = {
+ sidebarStatic: PropTypes.bool,
+ sidebarOpened: PropTypes.bool,
+ dispatch: PropTypes.func.isRequired,
+ };
+
+ static defaultProps = {
+ sidebarStatic: false,
+ sidebarOpened: false,
+ };
+ constructor(props) {
+ super(props);
+
+ this.handleSwipe = this.handleSwipe.bind(this);
+
+ this.state = {
+ chatOpen: false,
+ };
+ }
+
+ componentDidMount() {
+ const staticSidebar = JSON.parse(localStorage.getItem('staticSidebar'));
+ if (staticSidebar) {
+ this.props.dispatch(toggleSidebar());
+ } else if (this.props.sidebarOpened) {
+ setTimeout(() => {
+ this.props.dispatch(closeSidebar());
+ this.props.dispatch(changeActiveSidebarItem(null));
+ }, 2500);
+ }
+ }
+
+ handleSwipe(e) {
+ if ('ontouchstart' in window) {
+ if (e.direction === 4 && !this.state.chatOpen) {
+ this.props.dispatch(openSidebar());
+ return;
+ }
+
+ if (e.direction === 2 && this.props.sidebarOpened) {
+ this.props.dispatch(closeSidebar());
+ return;
+ }
+ }
+ }
+
+ render() {
+ return (
+ <div
+ className={[
+ s.root,
+ this.props.sidebarStatic ? s.sidebarStatic : '',
+ !this.props.sidebarOpened ? s.sidebarClose : '',
+ ].join(' ')}
+ >
+ <Sidebar />
+ <div className={s.wrap}>
+ <Header/>
+ <Hammer onSwipe={this.handleSwipe}>
+ <main className={s.content}>
+ <Switch>
+ <Route path="/documentation/getting-started/overview" exact component={Overview} />
+ <Route path="/documentation/getting-started/licences" exact component={Licences} />
+ <Route path="/documentation/getting-started/quick-start" exact component={QuickStart} />
+ <Route path="/documentation/components/alerts" exact component={Alerts} />
+ <Route path="/documentation/components/badge" exact component={Badge} />
+ <Route path="/documentation/components/buttons" exact component={Buttons} />
+ <Route path="/documentation/components/card" exact component={Card} />
+ <Route path="/documentation/components/carousel" exact component={Carousel} />
+ <Route path="/documentation/components/modal" exact component={Modal} />
+ <Route path="/documentation/components/nav" exact component={Nav} />
+ <Route path="/documentation/components/navbar" exact component={Navbar} />
+ <Route path="/documentation/components/popovers" exact component={Popovers} />
+ <Route path="/documentation/components/tabs-accordion" exact component={Tabs} />
+ <Route path="/documentation/components/progress" exact component={Progress} />
+ <Route path="/documentation/libs" exact component={Libs} />
+ </Switch>
+ </main>
+ </Hammer>
+ </div>
+ </div>
+ );
+ }
+}
+
+function mapStateToProps(store) {
+ return {
+ sidebarOpened: store.navigation.sidebarOpened,
+ sidebarStatic: store.navigation.sidebarStatic,
+ };
+}
+
+export default withRouter(connect(mapStateToProps)(Layout));