Feature/docs

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",
@@ -90,12 +91,15 @@
  "react-redux": "^5.0.7",
  "react-router": "^4.3.1",
  "react-router-dom": "^4.3.1",
+ "react-router-hash-link": "^1.2.1",
+ "react-scrollspy": "^3.3.5",
  "react-select2-wrapper": "^1.0.4-beta6",
  "react-shuffle": "2.1.0",
  "react-slick": "^0.23.1",
  "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",
  "react-transition-group": "^2.5.2",
  "reactstrap": "^6.5.0",

src/components/App.js

@@ -8,27 +8,28 @@ import ErrorPage from '../pages/error';
 /* eslint-enable */
 
 import LayoutComponent from '../components/Layout';
+import DocumentationLayoutComponent from '../documentation/DocumentationLayout';
 import LoginComponent from '../pages/login';
 import '../styles/theme.scss';
 
 const PrivateRoute = ({ component, ...rest }) => {
  return ( // eslint-disable-line
- <Route
- {...rest} render={props => (
- localStorage.getItem('id_token') ? (
- React.createElement(component, props)
- ) : (
- <Redirect
- to={{
- pathname: '/login',
- state: { from: props.location }, // eslint-disable-line
- }}
- />
- )
- )}
- />
-);
-}
+  <Route
+  {...rest} render={props => (
+  localStorage.getItem('id_token') ? (
+  React.createElement(component, props)
+  ) : (
+  <Redirect
+  to={{
+  pathname: '/login',
+  state: { from: props.location }, // eslint-disable-line
+  }}
+  />
+  )
+  )}
+  />
+ );
+};
 
 class App extends React.PureComponent {
  render() {
@@ -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/Header.module.scss

@@ -32,6 +32,10 @@
  }
 }
 
+.logo {
+ font-size: 16px;
+}
+
 .navbarForm {
  padding: 6px 0 6px 1rem;
  margin-left: 10px;

src/components/Helper/Helper.js

@@ -40,11 +40,11 @@ class Helper extends Component {
  >
  <div className="theme-switcher d-flex justify-content-center">
  <div className="form-check abc-radio abc-radio-warning form-check-inline">
- <input className="form-check-input" checked type="radio" id="css-light" value="option2" name="css-light" aria-label="Sing Light" readOnly/>
+ <input className="form-check-input" onClick={() => this.changeLocation('https://demo.flatlogic.com/sing-app-react-light/')} type="radio" id="css-light" value="option2" name="css-light" aria-label="Sing Light" readOnly/>
  <label className="form-check-label" htmlFor="css-light"></label>
  </div>
  <div className="form-check abc-radio abc-radio-secondary mr-0 form-check-inline">
- <input className="form-check-input" onClick={() => this.changeLocation('https://sing-app.herokuapp.com/')} type="radio" id="css-dark" value="option1" name="css-light" aria-label="Single Dark" readOnly/>
+ <input className="form-check-input" checked type="radio" id="css-dark" value="option1" name="css-light" aria-label="Single Dark" readOnly/>
  <label className="form-check-label" htmlFor="css-dark"></label>
  </div>
  </div>

src/components/Sidebar/LinksGroup/LinksGroup.js

@@ -60,13 +60,14 @@ class LinksGroup extends Component {
  if (!this.props.childrenLinks) {
  if (this.props.isHeader) {
  return (
- <li className={[s.headerLink, this.props.className].join(' ')}>
+ <li className={classnames('link-wrapper', s.headerLink, this.props.className)}>
  <NavLink
  to={this.props.link}
  activeClassName={s.headerLinkActive}
  exact
+ target={this.props.target}
  >
- <span className={s.icon}>
+ <span className={classnames('icon', s.icon)}>
  <i className={`fi ${this.props.iconName}`} />
  </span>
  {this.props.header} {this.props.label && <sup className={s.headerLabel}>{this.props.label}</sup>}
@@ -101,14 +102,13 @@ class LinksGroup extends Component {
  children={(params) => {
  const { match } = params;
  return (
- <li className={classnames({ [s.headerLink]: this.props.isHeader }, this.props.className)}>
+ <li className={classnames('link-wrapper', { [s.headerLink]: this.props.isHeader }, this.props.className)}>
  <a className={classnames({ [s.headerLinkActive]: match }, { [s.collapsed]: isOpen }, "d-flex")}
  style={{ paddingLeft: `${this.props.deep == 0 ? 50 : 26 + 10 * (this.props.deep - 1)}px` }}
  onClick={() => this.togglePanelCollapse(this.props.link)}
- href="#"
  >
  {this.props.isHeader ?
- <span className={s.icon}>
+ <span className={classnames('icon', s.icon)}>
  <i className={`fi ${this.props.iconName}`} />
  </span> : null
  }

src/components/Sidebar/Sidebar.js

@@ -98,7 +98,6 @@ class Sidebar extends React.Component {
  isHeader
  iconName="flaticon-database-1"
  index="packages"
- label="new"
  />
  <LinksGroup
  onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
@@ -136,6 +135,17 @@ class Sidebar extends React.Component {
  },
  ]}
  />
+ <LinksGroup
+ onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
+ activeItem={this.props.activeItem}
+ header="Documentation"
+ link="/documentation"
+ isHeader
+ iconName="flaticon-file"
+ index="documentation"
+ label="new"
+ target="_blank"
+ />
  <h5 className={[s.navTitle, s.groupTitle].join(' ')}>TEMPLATE</h5>
  <LinksGroup
  onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}

src/components/Widget/Widget.js

@@ -78,7 +78,7 @@ class Widget extends React.Component {
  const mainControls = !!(close || fullscreen || collapse || refresh || settings || settingsInverse);
  return (
  <section
- className={[s.widget, className].join(' ')}
+ className={['widget', s.widget, className].join(' ')}
  ref={(widget) => { this.el = widget; }} {...attributes}
  >
  {

src/documentation/DocumentationHeader.js

@@ -0,0 +1,146 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Link } from 'react-router-dom';
+import { withRouter } from 'react-router';
+import {
+ Navbar,
+ Nav,
+ NavItem,
+ NavLink,
+} from 'reactstrap';
+
+import { openSidebar, closeSidebar, changeActiveSidebarItem } from '../actions/navigation';
+
+import s from '../components/Header/Header.module.scss'; // eslint-disable-line css-modules/no-unused-class
+import sd from './styles.module.scss';
+
+import twitterLogo from '../images/documentation/twitter-logo.svg';
+import dribbleLogo from '../images/documentation/dribble-logo.svg';
+import facebookLogo from '../images/documentation/facebook-logo.svg';
+import instagramLogo from '../images/documentation/instagram-logo.svg';
+import linkedinLogo from '../images/documentation/linkedin-logo.svg';
+import githubLogo from '../images/documentation/github-logo.svg';
+
+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.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('/')));
+ }
+ }
+
+ toggleMenu() {
+ this.setState({
+ menuOpen: !this.state.menuOpen,
+ });
+ }
+ render() {
+ return (
+ <Navbar className={classnames(s.root, sd.header, 'd-print-none')}>
+ <div className="container">
+ <div className="row w-100 d-flex align-items-center">
+ <Nav>
+ <NavItem>
+ <NavLink className="fs-lg d-lg-none d-md-none" onClick={this.switchSidebar}>
+ <span className="rounded rounded-lg text-white d-md-none"><i className="la la-bars" /></span>
+ <i className="la la-bars ml-3 d-sm-down-none" />
+ </NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink className={classnames(s.logo, 'd-sm-down-none px-4')} href={'/documentation'}>
+ <span className={'fw-semi-bold'}>Sing App React</span> &nbsp; Documentation
+ </NavLink>
+ </NavItem>
+ </Nav>
+
+ <NavLink className={`${s.navbarBrand} d-md-none text-muted`}>
+ <i className="fa fa-circle text-gray mr-n-sm" />
+ <i className="fa fa-circle text-warning" />
+ &nbsp;
+ documentation
+ &nbsp;
+ <i className="fa fa-circle text-warning mr-n-sm" />
+ <i className="fa fa-circle text-muted" />
+ </NavLink>
+
+ <Nav className="ml-auto">
+ <NavItem className="d-flex alight-items-center d-md-down-none">
+ <NavLink href="https://twitter.com/flatlogic" className="mr-1">
+ <img src={twitterLogo} alt="twitter" />
+ </NavLink>
+ <NavLink href="https://dribbble.com/flatlogic" className="mr-1">
+ <img src={dribbleLogo} alt="dribble" />
+ </NavLink>
+ <NavLink href="https://dribbble.com/flatlogic" className="mr-1">
+ <img src={facebookLogo} alt="facebook" />
+ </NavLink>
+ <NavLink href="https://instagram.com/flatlogiccom/" className="mr-1">
+ <img src={instagramLogo} alt="instagram" />
+ </NavLink>
+ <NavLink href="https://www.linkedin.com/company/flatlogic/" className="mr-1">
+ <img src={linkedinLogo} alt="linkedin" />
+ </NavLink>
+ <NavLink href="https://github.com/flatlogic" className="mr-3">
+ <img src={githubLogo} alt="github" />
+ </NavLink>
+ </NavItem>
+ <NavItem className="d-flex align-items-center">
+ <NavItem className="d-md-down-none">
+ <Link to="/" className="btn btn-default">
+ Live Preview
+ </Link>
+ </NavItem>
+ <NavLink href="https://flatlogic.com/admin-dashboards/sing-app-react" target="_blank" className="mr-1">
+ <button className="btn btn-warning text-gray fw-semi-bold">
+ Buy Now
+ </button>
+ </NavLink>
+ </NavItem>
+ </Nav>
+ </div>
+ </div>
+ </Navbar>
+ );
+ }
+}
+
+function mapStateToProps(store) {
+ return {
+ sidebarOpened: store.navigation.sidebarOpened,
+ sidebarStatic: store.navigation.sidebarStatic,
+ };
+}
+
+export default withRouter(connect(mapStateToProps)(Header));
+