feat(styleguide): implement styleguidist

this adds the styleguidist lib to the project to generate the style guide docs

package.json

@@ -44,6 +44,7 @@
     "postcss-loader": "^1.1.0",
     "postcss-neat": "^2.5.2",
     "react-remarkable": "^1.1.1",
+    "react-styleguidist": "beta",
     "react-test-renderer": "^15.4.0",
     "ripcord": "^0.25.5",
     "rucksack-css": "^0.8.6",
@@ -72,7 +73,9 @@
     "lint": "standard 'src/**/*.js' '.storybook/**/*.js' 'scripts/**/*.js' 'test/**/*.js' 'stories/**/*.js'",
     "test": "echo 'TBD'",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post",
-    "start": "npm run storybook"
+    "start": "npm run storybook",
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build"
   },
   "ripcord": {
     "rules": [

src/components/FavoriteButton.examples.md

@@ -0,0 +1,11 @@
+const FavoriteButton = require('../src/components/FavoriteButton');
+
+Is Favorited:
+
+    <FavoriteButton isFavorited />
+
+Not Favorited:
+
+    <FavoriteButton />
+
+You can handle the onclick method to fire the API call to record the users preference to favorite an object.

src/components/FavoriteButton.jsx

@@ -9,7 +9,7 @@ const FavoriteButton = (props) => {
     favoriteIconClass = 'icon_star_alt star_gray'
   }
   return (
-    <div onClick={props.onClick} className='favorite-button'>
+    <div className='favorite-button'>
       <i className={favoriteIconClass} />
     </div>
   )
@@ -20,8 +20,7 @@ FavoriteButton.defaultProps = {
 }
 
 FavoriteButton.propTypes = {
-  isFavorited: React.PropTypes.bool,
-  onClick: React.PropTypes.func
+  isFavorited: React.PropTypes.bool
 }
 
 export default FavoriteButton

src/components/PaginationControl.examples.md

@@ -0,0 +1,19 @@
+Enabled Pagination:
+
+    <PaginationControl totalItems={20} perPage={5} />
+
+Disabled Pagination:
+
+    <PaginationControl totalItems={20} perPage={5} controlsDisabled={true} />
+
+Handle the pagination of the resource with navigateToPage.  An example of usage:
+
+```javascript
+navigateToPage(page) { 
+    this.setState({ currentNotes: this.getNotes(page) }); 
+}
+
+getNotes(pageNum) { 
+    return this.state.allNotes.slice( pageNum * this.state.perPage - this.state.perPage, pageNum * this.state.perPage); 
+}
+`````

src/components/TagButton.jsx

@@ -26,6 +26,10 @@ const TagButton = (props) => {
   )
 }
 
+TagButton.defaultProps = {
+  tag: {}
+}
+
 TagButton.propTypes = {
   tag: React.PropTypes.object
 }

src/styles/components/pagination-control.css

@@ -7,7 +7,7 @@
     cursor: pointer;
     display: inline-block;
     padding: 0px;
-    font-size: 2em;
+    font-size: 28px;
     height: 30px;
     -webkit-user-select: none;
     -moz-user-select: none;   

styleguide.config.js

@@ -0,0 +1,72 @@
+const path = require('path')
+const cssnext = require('postcss-cssnext')
+const autoprefixer = require('autoprefixer')
+const impy = require('postcss-import')
+const neat = require('postcss-neat')
+const rucksack = require('rucksack-css')
+
+const PATHS = {
+  app: './src/index.js',
+  dist: path.join(__dirname, 'dist'),
+  html: './src/index.html',
+};
+const dir = path.join(__dirname, 'src');
+module.exports = {
+ title: 'Octagon Style Guide',
+ components: './src/components/**/*.jsx',
+ getExampleFilename(componentpath) {
+    return componentpath.replace(/\.jsx?$/, '.examples.md');
+  },
+  getComponentPathLine(componentPath) {
+    const name = path.basename(componentPath, '.jsx');
+    const dir = path.dirname(componentPath);
+    return 'import ' + name + ' from ../src/components/' + name + ';' ;
+
+  },
+  skipComponentsWithoutExample: true,
+    webpackConfig: {    
+        entry: [
+            path.join(__dirname, './semantic/dist/semantic.css'),
+            path.join(__dirname, './src/styles/components/pagination-control.css'),
+            path.join(__dirname, './src/styles/app.css'),
+        ],    
+  output: {
+    path: PATHS.dist,
+    publicPath: "/",
+    filename: "bundle.js"
+  },         
+    module: {
+    preLoaders: [
+      {
+        test: /\.(js|jsx)$/,
+        loaders: ["babel-loader"],
+        exclude: /node_modules/
+      }
+    ],        
+      loaders: [
+      {
+        test: /\.(jpe?g|png|gif|svg)$/i,
+        loader: 'file?name=[name].[ext]'
+      },
+      {
+        test: /\.css?$/,
+        loaders: [ 'style-loader', 'css-loader?importLoaders=1', 'postcss-loader' ]
+
+      },
+      {
+        test: /\.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
+        loader: 'file-loader?name=fonts/[name].[ext]'
+      }
+      ]
+    },
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+  },    
+    postcss: function () {
+        return {
+        defaults: [impy, cssnext, neat, rucksack],
+        cleaner: [autoprefixer({ browsers: ['last 2 version'] })]
+        }
+    }
+}
+};