builds collection editor, builds stepnav

.eslintrc.js

@@ -61,7 +61,7 @@ module.exports = exports = {
     "no-labels": WARN,
     "no-lone-blocks": WARN,
     "no-loop-func": ERROR,
-    "no-magic-numbers": [ WARN, { "ignore": [0] } ],
+    "no-magic-numbers": [ WARN, { "ignore": [-1, 0, 1] } ],
     "no-multi-spaces": ERROR,
     "no-multi-str": WARN,
     "no-native-reassign": ERROR,

demo/client/Routes.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Route, Switch, Link, withRouter } from 'react-router-dom';
+import { Route, Switch, withRouter } from 'react-router-dom';
 
 import DefaultTemplate from 'payload/client/components/layout/DefaultTemplate';
 import Dashboard from 'payload/client/components/views/Dashboard';
@@ -21,11 +21,10 @@ class Routes extends Component {
             <DefaultTemplate>
               <Route path="/" exact component={Dashboard} />
               {this.props.collections.map((collection) => {
-
                 return (
-                  <React.Fragment key={collection.slug}>
-                    <Route path={`/collections/${collection.slug}`} exact component={collection.archive} />
-                    <Route path={`/collections/${collection.slug}/:id`} component={collection.edit} />
+                  <React.Fragment key={collection.attrs.slug}>
+                    <Route path={`/collections/${collection.attrs.slug}`} exact component={collection.components.archive} />
+                    <Route path={`/collections/${collection.attrs.slug}/:id`} component={collection.components.edit} />
                   </React.Fragment>
                 );
               })}

demo/client/components/collections/Pages/Archive.js

@@ -1,9 +1,16 @@
 import React, { Component } from 'react';
+import SetStepNav from 'payload/client/components/utilities/SetStepNav';
 
 class PagesArchive extends Component {
   render() {
     return (
       <div>
+        <SetStepNav nav={ [
+          {
+            url: '/collections/pages',
+            label: 'Pages'
+          }
+        ] } />
         <h1>Pages</h1>
       </div>
     );

demo/client/components/collections/Pages/Edit.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
+import CollectionEdit from 'payload/client/components/views/CollectionEdit';
 
 class PagesEdit extends Component {
   render() {
     return (
-      <div>
+      <CollectionEdit id={this.props.match.params.id}>
         <h1>Edit page {this.props.match.params.id}</h1>
-      </div>
+      </CollectionEdit>
     );
   }
 }

demo/collections.js

@@ -6,19 +6,98 @@ import OrdersEdit from './client/components/collections/Orders/Edit';
 
 export default [
   {
+    attrs: {
       slug: 'pages',
       label: 'Pages',
       singular: 'Page',
       plural: 'Pages',
+    },
+
+    fields: {
+      metaInfo: {
+        type: 'group',
+        fields: {
+          title: {
+            type: 'string',
+            maxLength: 100
+          },
+          description: { type: 'textarea',
+            wysiwyg: false,
+            height: 100
+          },
+          keywords: { type: 'text' }
+        }
+      },
+      content: {
+        type: 'group',
+        fields: {
+          exampleField1: {
+            type: 'textarea',
+            wysiwyg: true,
+            height: 400
+          },
+          flexibleContentExample: {
+            type: 'flex',
+            availableLayouts: [
+              'layout1',
+              'layout5'
+            ]
+          }
+        }
+      }
+    },
+
+    components: {
       archive: PagesArchive,
       edit: PagesEdit
+    }
   },
+
   {
+    attrs: {
       slug: 'orders',
       label: 'Orders',
       singular: 'Order',
       plural: 'Orders',
+    },
+
+    fields: {
+      metaInfo: {
+        type: 'group',
+        fields: {
+          title: {
+            type: 'string',
+            maxLength: 100
+          },
+          description: { type: 'textarea',
+            wysiwyg: false,
+            height: 100
+          },
+          keywords: { type: 'text' }
+        }
+      },
+      content: {
+        type: 'group',
+        fields: {
+          exampleField1: {
+            type: 'textarea',
+            wysiwyg: true,
+            height: 400
+          },
+          flexibleContentExample: {
+            type: 'flex',
+            availableLayouts: [
+              'layout1',
+              'layout5'
+            ]
+          }
+        }
+      }
+    },
+
+    components: {
       archive: OrdersArchive,
       edit: OrdersEdit
     }
+  },
 ];

src/client/components/layout/DefaultTemplate/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Sidebar from '../Sidebar';
+import StepNav from '../StepNav';
 
 import './index.css';
 
@@ -7,7 +8,8 @@ export default props => {
   return (
     <div className="default-template">
       <Sidebar />
+      <StepNav />
       {props.children}
     </div>
   );
-}
+};

src/client/components/layout/Sidebar/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { NavLink, Link } from 'react-router-dom';
 import Icon from 'demo/client/components/graphics/Icon';
 import Label from '../../type/Label';
 
@@ -20,14 +20,21 @@ class Sidebar extends Component {
         <Label>Collections</Label>
         <nav>
           {this.props.collections.map((collection, i) => {
+            const href = `/collections/${collection.attrs.slug}`;
+
             return (
-              <Link key={i} to={`/collections/${collection.slug}`}>{collection.plural}</Link>
+              <NavLink activeClassName="active" key={i} to={href}>{collection.attrs.plural}</NavLink>
             );
           })}
         </nav>
+        <Label>Globals</Label>
+        <nav>
+          <NavLink activeClassName="active" to="/components">Components</NavLink>
+          <NavLink activeClassName="active" to="/settings">Settings</NavLink>
+        </nav>
       </aside>
     );
   }
-};
+}
 
 export default connect(mapStateToProps)(Sidebar);

src/client/components/layout/Sidebar/index.scss

@@ -8,8 +8,11 @@
   padding: rem(1);
 
   .icon-wrap {
-    @include m;
-    width: $base;
+    margin: 0 0 rem(.5);
+
+    > * {
+      height: $base;
+    }
   }
 
   label {
@@ -17,7 +20,7 @@
   }
 
   nav {
-    margin: rem(.5) 0;
+    margin: rem(.25) 0 $base;
     a {
       display: block;
       padding: rem(.33) 0;

src/client/components/layout/StepNav/index.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import Label from '../../type/Label';
+
+import './index.css';
+
+const mapStateToProps = state => ({
+  nav: state.common.stepNav
+});
+
+class StepNav extends Component {
+  render() {
+    const dashboardLabel = <Label>Dashboard</Label>;
+
+    return (
+      <nav className="current-view-nav">
+        {this.props.nav.length > 0
+          ? <Link to="/">{dashboardLabel}</Link>
+          : dashboardLabel
+        }
+        {this.props.nav.map((item, i) => {
+          const StepLabel = <Label key={i}>{item.label}</Label>;
+
+          const Step = this.props.nav.length === i + 1
+            ? StepLabel
+            : <Link to={item.url} key={i}>{StepLabel}</Link>;
+
+          return Step;
+        })}
+      </nav>
+    );
+  }
+}
+
+export default connect(mapStateToProps)(StepNav);

src/client/components/layout/StepNav/index.scss

@@ -0,0 +1,22 @@
+@import '_styles';
+
+.current-view-nav {
+  @include m;
+  display: flex;
+
+  * {
+    display: block;
+  }
+
+  a {
+    border: 0;
+  }
+
+  > * {
+    margin-right: rem(.25);
+  }
+
+  > label {
+    color: $gray;
+  }
+}

src/client/components/utilities/SetStepNav/index.js

@@ -0,0 +1,16 @@
+import { Component } from 'react';
+import { connect } from 'react-redux';
+
+const mapDispatchToProps = dispatch => ({
+  set: nav => dispatch({ type: 'SET_STEP_NAV', payload: nav })
+});
+
+class SetStepNav extends Component {
+  componentDidMount() {
+    this.props.set(this.props.nav);
+  }
+
+  render() { return null; }
+}
+
+export default connect(null, mapDispatchToProps)(SetStepNav);

src/client/components/views/CollectionEdit/index.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import SetStepNav from 'payload/client/components/utilities/SetStepNav';
+
+class CollectionEdit extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <article className="collection-edit">
+        <SetStepNav nav={ [
+          {
+            url: '/collections/pages',
+            label: 'Pages'
+          },
+          {
+            url: `/collections/pages/${this.props.id}`,
+            label: this.props.id
+          }
+        ] } />
+        {this.props.children}
+      </article>
+    );
+  }
+}
+
+export default CollectionEdit;

src/client/components/views/Dashboard/index.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import SetStepNav from 'payload/client/components/utilities/SetStepNav';
 
 import './index.css';
 
 export default () => {
   return (
     <article className="dashboard">
+      <SetStepNav nav={ [] } />
       <h1>Dashboard</h1>
       <Link to="/login">Login</Link>
       <br />

src/client/components/views/Login/index.scss

@@ -1,5 +1,5 @@
 .login {
-  .logo {
+  .logo-wrap {
     display: block;
     margin: 0 auto;
     max-width: 200px;

src/client/reducers/common.js

@@ -5,7 +5,8 @@ const defaultState = {
   windowHeight: 900,
   viewWidth: false,
   viewHeight: false,
-  modalState: false
+  modalState: false,
+  stepNav: []
 };
 
 export default (state = defaultState, action) => {
@@ -46,6 +47,13 @@ export default (state = defaultState, action) => {
       modalStatus: action.payload
     };
 
+  case 'SET_STEP_NAV':
+
+    return {
+      ...state,
+      stepNav: action.payload
+    };
+
   default:
       //
   }

src/client/scss/_vars.scss

@@ -38,7 +38,7 @@ $green      : #3bffaa;
 $dark-green : #0FCE84;
 
 $light-gray : #f5f5f5;
-$gray       : #B1B1B1;
+$gray       : #909090;
 $black      : rgb(60, 60, 60);
 
 $pink       : #ff8efc;