Merge pull request #14 from storybooks/5-gatsby-static-site

New, static site starting from Gatsby starter kit

.gatsby-context.js

@@ -0,0 +1,15 @@
+'use strict';
+
+/*  weak */
+// This file is auto-written and used by Gatsby to require
+// files from your pages directory.
+module.exports = function (callback) {
+  var context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/); // eslint-disable-line
+  if (module.hot) {
+    module.hot.accept(context.id, function () {
+      context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/); // eslint-disable-line
+      return callback(context);
+    });
+  }
+  return callback(context);
+};

.gitignore

@@ -9,3 +9,4 @@ dist
 build
 packages/examples/automated-*
 yarn.lock
+public

.storybook/addons.js

@@ -1,3 +1 @@
-import { register } from './notes_addon';
-register();
 require('@kadira/storybook/addons');

.storybook/config.js

@@ -1,9 +1,10 @@
 import { configure } from '@kadira/storybook';
+
 import 'bootstrap/dist/css/bootstrap.css';
-import '../src/index.css';
+import '../css/main.css';
 
 function loadStories() {
-  require('../src/stories');
+  require('../stories')
 }
 
 configure(loadStories, module);

.storybook/notes_addon.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import addons from '@kadira/storybook-addons';
-
-const styles = {
-  notesPanel: {
-    margin: 10,
-    fontFamily: '-apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif',
-    fontSize: 14,
-    color: '#444',
-    width: '100%',
-    overflow: 'auto',
-  }
-};
-
-export class WithNote extends React.Component {
-  render() {
-    const { children, note } = this.props;
-    // This is to make sure, we'll always call this at the end of the eventloop.
-    // So we know that, panel will get cleared, before we render the note.
-    setTimeout(() => {
-      addons.getChannel().emit('kadira/notes/add_note', note);
-    }, 0);
-    return children;
-  }
-}
-
-class Notes extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {text: ''};
-    this.onAddNote = this.onAddNote.bind(this);
-  }
-
-  onAddNote(text) {
-    this.setState({text});
-  }
-
-  componentDidMount() {
-    const { channel, api } = this.props;
-    channel.on('kadira/notes/add_note', this.onAddNote);
-
-    this.stopListeningOnStory = api.onStory(() => {
-      this.setState({text: ''});
-    });
-  }
-
-  componentWillUnmount() {
-    if(this.stopListeningOnStory) {
-      this.stopListeningOnStory();
-    }
-
-    this.unmounted = true;
-    const { channel, api } = this.props;
-    channel.removeListener('kadira/notes/add_note', this.onAddNote);
-  }
-
-  render() {
-    const { text } = this.state;
-    const textAfterFormatted = text? text.trim().replace(/\n/g, '<br />') : "";
-
-    return (
-      <div style={styles.notesPanel}>
-        <div dangerouslySetInnerHTML={{__html: textAfterFormatted}} />
-      </div>
-    );
-  }
-}
-
-export function register() {
-  addons.register('kadira/notes', (api) => {
-    addons.addPanel('kadira/notes/panel', {
-      title: 'Notes',
-      render: () => (
-        <Notes channel={addons.getChannel()} api={api}/>
-      ),
-    })
-  })
-}

404.html

@@ -1,5 +0,0 @@
-<!-- See https://www.smashingmagazine.com/2016/08/sghpa-single-page-app-hack-github-pages/ -->
-<script>
-  sessionStorage.redirect = location.href;
-</script>
-<meta http-equiv="refresh" content="0;URL='/'">

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2017 Storybooks
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

app.json

@@ -1,20 +0,0 @@
-{
-  "name": "storybooks.js.org",
-  "scripts": {
-  },
-  "env": {
-  },
-  "formation": {
-    "web": {
-      "quantity": 1
-    }
-  },
-  "addons": [
-
-  ],
-  "buildpacks": [
-    {
-      "url": "https://github.com/mars/create-react-app-buildpack.git"
-    }
-  ]
-}

components/Breakpoint.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './breakpoints.css'
+
+class Breakpoint extends Component {
+  render () {
+    const { mobile, children } = this.props
+
+    if (mobile) {
+      return (
+        <div className="breakpoint-min-width-700">
+          {children}
+        </div>
+      )
+    }
+
+    return (
+      <div className="breakpoint-max-width-700">
+        {children}
+      </div>
+    )
+  }
+}
+
+Breakpoint.propTypes = {
+  children: PropTypes.array,
+  mobile: PropTypes.bool,
+}
+
+export default Breakpoint

components/Docs/Container/index.js

@@ -6,17 +6,6 @@ import Content from '../Content';
 import './style.css';
 
 class Container extends React.Component {
-  renderTopNav(cat) {
-    const { selectedCatId } = this.props;
-    const path = `/docs/${cat.id}`;
-
-    if (selectedCatId === cat.id) {
-      return <li className="selected" key={cat.id}>{cat.title}</li>;
-    }
-
-    return <a key={cat.id} href={path}><li>{cat.title}</li></a>;
-  }
-
   render() {
     const {
       categories,
@@ -29,18 +18,10 @@ class Container extends React.Component {
 
     const gitHubRepoUrl = 'https://github.com/storybooks/storybooks.github.io';
     const docPath = `${selectedCatId}/${selectedSectionId}/${selectedItemId}`;
-    const gitHubRepoDocUrl = `${gitHubRepoUrl}/tree/source/src/docs/${docPath}.js`;
+    const gitHubRepoDocUrl = `${gitHubRepoUrl}/tree/source/pages/docs/${docPath}/index.md`;
 
     return (
       <div id="docs-container" className="row">
-        <div className="row">
-          <div className="col-xs-12">
-            <ul className="top-nav">
-              {categories.map(this.renderTopNav.bind(this))}
-            </ul>
-          </div>
-        </div>
-
         <div className="nav col-sm-3 col-md-3 hidden-xs">
           <Nav
             selectedCatId={selectedCatId}

components/Docs/Content/index.js

@@ -1,21 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Highlight from '../../../lib/highlight.js';
-import marked from 'marked';
+import Highlight from '../../Highlight';
 import 'highlight.js/styles/github-gist.css';
 import './style.css';
 
-marked.setOptions({
-  renderer: new marked.Renderer(),
-  gfm: true,
-  tables: true,
-  breaks: true,
-  pedantic: false,
-  sanitize: false,
-  smartLists: true,
-  smartypants: false,
-});
-
 const DocsContent = ({ title, content, editUrl }) => (
   <div id="docs-content">
     <div className="content">
@@ -24,7 +12,7 @@ const DocsContent = ({ title, content, editUrl }) => (
 
       <div className="markdown">
         <Highlight>
-          {marked(content)}
+          {content}
         </Highlight>
       </div>
     </div>

components/Docs/Nav/dropdown.js

@@ -13,13 +13,16 @@ class Nav extends React.Component {
   }
 
   changeRoute(selectedCatId, selectedSectionId, selectedItemId) {
-    const url = `/docs/${selectedCatId}/${selectedSectionId}/${selectedItemId}`;
+    const url = `/docs/${selectedCatId}/${selectedSectionId}/${selectedItemId}/`;
     browserHistory.push(url);
   }
 
   handleHeadingChange(evt) {
-    const { selectedCatId } = this.props;
-    this.changeRoute(selectedCatId, evt.target.value, '');
+    const { selectedCatId, sections } = this.props;
+    const selectedSectionId = evt.target.value
+    const section = sections.find(section => section.id === selectedSectionId)
+    const itemId = section.items[0].id
+    this.changeRoute(selectedCatId, selectedSectionId, itemId);
   }
 
   handleNavChange(evt) {

components/Docs/Nav/index.js

@@ -9,7 +9,7 @@ class Nav extends React.Component {
       ? 'selected'
       : '';
 
-    const url = `/docs/${selectedCatId}/${section.id}/${item.id}`;
+    const url = `/docs/${selectedCatId}/${section.id}/${item.id}/`;
 
     return (
       <li key={item.id}>

components/Docs/index.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Helmet from 'react-helmet';
-import Header from '../Homepage/Header';
+import Header from '../Header';
 import Container from './Container';
-import Footer from '../Homepage/Footer';
+import Footer from '../Footer';
 import './style.css';
 
 class Docs extends React.Component {

components/Footer/index.js

@@ -26,10 +26,6 @@ const Footer = () => (
           </center>
         </div>
       </div>
-
-      <div id="copyright" className="row">
-        <p>Built by Kadira</p>
-      </div>
     </div>
   </div>
 );

components/Header/index.js

@@ -2,11 +2,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import './style.css';
 
-import storybookLogo from '../../../design/homepage/storybook-logo.png';
+import storybookLogo from '../../design/homepage/storybook-logo.png';
 
 const sections = [
   { id: 'home', caption: 'Home', href: '/' },
-  { id: 'docs', caption: 'Docs', href: '/docs' },
+  { id: 'docs', caption: 'Docs', href: '/docs/react-storybook/basics/introduction/' },
 ];
 
 class Header extends React.Component {

components/Homepage/index.js

@@ -2,13 +2,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Helmet from 'react-helmet';
 import './style.css';
-import Header from './Header';
+import Header from '../Header';
 import Heading from './Heading';
 import Demo from './Demo';
 import Platforms from './Platforms';
 import MainLinks from './MainLinks';
 import Featured from './Featured';
-import Footer from './Footer';
+import Footer from '../Footer';
 
 const featuredStorybooks = [
   {

components/breakpoints.css

@@ -0,0 +1,16 @@
+@media only screen and (min-width: 700px) {
+  .breakpoint-min-width-700 {
+    display: block;
+  }
+  .breakpoint-max-width-700 {
+    display: none;
+  }
+}
+@media only screen and (max-width: 700px) {
+  .breakpoint-min-width-700 {
+    display: none;
+  }
+  .breakpoint-max-width-700 {
+    display: block;
+  }
+}

config.toml

@@ -0,0 +1,36 @@
+siteTitle = "Storybook"
+baseColor = "#e64074"
+linkPrefix = "/"
+
+[docSections]
+basics = [
+  "/docs/react-storybook/basics/introduction/",
+  "/docs/react-storybook/basics/quick-start-guide/",
+  "/docs/react-storybook/basics/slow-start-guide/",
+  "/docs/react-storybook/basics/writing-stories/",
+  "/docs/react-storybook/basics/exporting-storybook/",
+  "/docs/react-storybook/basics/faq/",
+]
+configurations = [
+  "/docs/react-storybook/configurations/default-config/",
+  "/docs/react-storybook/configurations/custom-webpack-config/",
+  "/docs/react-storybook/configurations/custom-babel-config/",
+  "/docs/react-storybook/configurations/add-custom-head-tags/",
+  "/docs/react-storybook/configurations/serving-static-files/",
+  "/docs/react-storybook/configurations/env-vars/",
+  "/docs/react-storybook/configurations/cli-options/",
+]
+testing = [
+  "/docs/react-storybook/testing/react-ui-testing/",
+  "/docs/react-storybook/testing/structural-testing/",
+  "/docs/react-storybook/testing/interaction-testing/",
+  "/docs/react-storybook/testing/css-style-testing/",
+  "/docs/react-storybook/testing/manual-testing/",
+]
+addons = [
+  "/docs/react-storybook/addons/introduction/",
+  "/docs/react-storybook/addons/using-addons/",
+  "/docs/react-storybook/addons/addon-gallery/",
+  "/docs/react-storybook/addons/writing-addons/",
+  "/docs/react-storybook/addons/api/",
+]

css/github.css

@@ -0,0 +1,91 @@
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+.hljs-comment,
+.hljs-quote {
+  color: #998;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: #008080;
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: #d14;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: #900;
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: #000080;
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #009926;
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: #990073;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #0086b3;
+}
+
+.hljs-meta {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+

css/main.css

@@ -0,0 +1,21 @@
+@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800';
+
+body, div, p, ul, li, a {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+}
+
+a,
+a:visited,
+a:hover,
+a:active,
+a:focus {
+  text-decoration: none;
+  color: #000;
+}
+
+a:hover {
+  opacity: 0.7;
+}
+
+.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}

html.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import DocumentTitle from 'react-document-title'
+
+import { prefixLink } from 'gatsby-helpers'
+import typography from './utils/typography'
+import { colors } from 'utils/colors'
+import favicon from './design/homepage/storybook-icon.png'
+
+const BUILD_TIME = new Date().getTime()
+
+class HTML extends Component {
+  render () {
+    const title = DocumentTitle.rewind()
+
+    let css
+    if (process.env.NODE_ENV === 'production') {
+      css = <style dangerouslySetInnerHTML={{ __html: require('!raw!./public/styles.css') }} />
+    }
+
+    return (
+      <html lang="en">
+        <head>
+          <meta charSet="utf-8" />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+          />
+          <title>{title}</title>
+          <link rel="icon" href={favicon} type="image/x-icon" />
+          {css}
+        </head>
+        <body>
+          <div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
+          <script src={prefixLink(`/bundle.js?t=${BUILD_TIME}`)} />
+        </body>
+      </html>
+    )
+  }
+}
+
+HTML.displayName = 'HTML'
+HTML.propTypes = {
+  body: PropTypes.string,
+}
+
+export default HTML

package.json

@@ -1,32 +1,40 @@
 {
   "name": "storybooks.js.org",
-  "version": "0.0.1",
   "private": true,
+  "description": "storybooks.js.org documentation",
+  "version": "1.0.0",
+  "dependencies": {
+    "bootstrap": "^3.3.7",
+    "chroma-js": "^0.7.2",
+    "color-pairs-picker": "^1.3.5",
+    "gatsby": "^0.12.45",
+    "lodash": "^4.17.2",
+    "marked": "^0.3.6",
+    "react-document-title": "^2.0.3",
+    "react-helmet": "^5.0.3",
+    "react-motion": "^0.1.0",
+    "react-responsive-grid": "^0.3.3",
+    "react-typography": "^0.15.0",
+    "typography": "^0.15.8",
+    "typography-plugin-code": "^0.15.9",
+    "underscore.string": "^3.2.2"
+  },
   "devDependencies": {
     "@kadira/storybook": "^2.35.3",
-    "react-scripts": "^0.9.5"
-  },
-  "dependencies": {
-    "@kadira/storybook-addons": "^1.3.1",
-    "airbnb-js-shims": "^1.0.1",
-    "bootstrap": "^3.3.7",
-    "common-tags": "^1.3.1",
-    "highlight.js": "^9.6.0",
-    "marked": "^0.3.6",
-    "prop-types": "^15.5.7",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "react-helmet": "^3.1.0",
-    "react-router": "^2.6.1",
-    "react-router-scroll": "^0.3.2",
-    "reflexbox": "^2.1.0"
+    "gh-pages": "^0.12.0"
   },
+  "keywords": [
+    "react",
+    "storybooks"
+  ],
+  "license": "MIT",
+  "main": "n/a",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 9009",
     "build-storybook": "build-storybook",
-    "publish": "npm run build && cp ./404.html ./build && cp ./CNAME ./build && cd build && git init . && git remote add origin $( cd .. && git remote get-url origin ) && git add . && git commit -m 'Update build' && git push -f origin master"
+    "build": "gatsby build && cp CNAME ./public",
+    "deploy": "gh-pages -r git@github.com:storybooks/storybooks.github.io.git -d public -o origin -b master",
+    "develop": "gatsby develop",
+    "storybook": "start-storybook -p 9009",
+    "test": "echo \"Error: no test specified\" && exit 1"
   }
 }

pages/404.md

@@ -0,0 +1,7 @@
+---
+path: /404.html
+---
+
+# NOT FOUND
+
+You just hit a route that doesn't exist... the sadness.

pages/_template.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Container } from 'react-responsive-grid'
+import { colors, activeColors } from 'utils/colors'
+
+import { rhythm, adjustFontSizeTo } from 'utils/typography'
+import { config } from 'config'
+
+// Import styles.
+import 'css/main.css'
+import 'css/github.css'
+import 'bootstrap/dist/css/bootstrap.css'
+
+const PageTemplate = ({ children, location }) => (
+  <div>
+    <a href="https://github.com/storybooks/storybook" className="github-corner" aria-label="View source on Github">
+      <svg width="80" height="80" viewBox="0 0 250 250" style={{ fill: '#E91E63', color: '#fff', position: 'absolute', top: 0, border: 0, right: 0}} aria-hidden="true">
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style={{ transformOrigin: '130px 106px'}} className="octo-arm"></path>
+        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" className="octo-body"></path>
+      </svg>
+    </a>
+    {children}
+  </div>
+)
+
+PageTemplate.propTypes = {
+  children: PropTypes.object,
+  location: PropTypes.object
+}
+
+export default PageTemplate

pages/docs/_template.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import find from 'lodash/find'
+import capitalize from 'lodash/capitalize'
+
+import Docs from 'components/Docs';
+import { config } from 'config'
+
+const categories = [{
+  id: 'react-storybook',
+  title: 'React Storybook',
+}]
+
+const getSections = (catId, config, pages) => {
+  // FIXME: use catId
+  const sections = Object.keys(config.docSections)
+  return sections.map(key => ({
+    id: key,
+    heading: capitalize(key),
+    items: config.docSections[key].map((path) => {
+      const page = pages.find(p => p.path === path)
+      return page.data
+    })
+  }))
+}
+
+const getSelectedItem = (children, sectionId) => {
+  const { data } = children.props.route.page
+  return {
+    id: data.id,
+    section: sectionId,
+    title: data.title,
+    content: data.body
+  }
+}
+
+const parsePath = (path) => {
+  const comps = path.split('/')
+  const [empty, itemId, sectionId, catId, ...rest] = comps.reverse()
+  return { catId, sectionId, itemId }
+}
+
+class DocsContainer extends React.Component {
+  render() {
+    const { pages, path } = this.props.route
+    const { children } = this.props
+    const { catId, sectionId, itemId } = parsePath(children.props.route.path)
+
+    const props = {
+      categories,
+      selectedCatId: catId,
+      sections: getSections(catId, config, pages),
+      selectedItem: getSelectedItem(children, sectionId),
+      selectedSectionId: sectionId,
+      selectedItemId: itemId,
+    }
+    console.log('props', props)
+
+    return <Docs {...props} />
+  }
+}
+
+DocsContainer.propTypes = {
+  location: PropTypes.object,
+  route: PropTypes.object,
+}
+DocsContainer.contextTypes = {
+  router: PropTypes.object.isRequired,
+}
+
+export default DocsContainer;

pages/docs/react-storybook/addons/addon-gallery/index.md

@@ -0,0 +1,74 @@
+---
+id: 'addon-gallery'
+title: 'Addon Gallery'
+---
+This is a list of available addons for Storybook.
+
+## Built-In Addons.
+
+These addons ship with Storybook by default. You can use them right away.
+
+### [Actions](https://github.com/storybooks/storybook/tree/master/packages/addon-actions)
+
+With actions, you can inspect events related to your components. This is pretty neat when you are manually testing your components.
+
+Also, you can think of this as a way to document events in your components.
+
+## Third Party Addons
+
+You need to install these addons directly from NPM in order to use them.
+
+### [Host](https://github.com/philcockfield/storybook-host)
+
+A [decorator](/docs/react-storybook/addons/introduction) with
+powerful display options for hosting, sizing and framing your components.
+
+### [Specs](https://github.com/mthuret/storybook-addon-specifications)
+
+This is a very special addon where it'll allow you to write test specs directly inside your stories.
+You can even run these tests inside a CI box.
+
+### [Knobs](https://github.com/storybooks/storybook/tree/master/packages/addon-knobs)
+
+Knobs allow you to edit React props dynamically using the Storybook UI.
+You can also use Knobs as dynamic variables inside your stories.
+
+### [Notes](https://github.com/storybooks/storybook/tree/master/packages/addon-notes)
+
+With this addon, you can write notes for each story in your component. This is pretty useful when you are working with a team.
+
+### [Info](https://github.com/storybooks/storybook/tree/master/packages/addon-info)
+
+If you are using Storybook as a style guide, then this addon will help you to build a nice-looking style guide with docs, automatic sample source code with a PropType explorer.
+
+### [Options](https://github.com/storybooks/storybook/tree/master/packages/addon-options)
+
+The Storybook webapp UI can be customised with this addon. It can be used to change the header, show/hide various UI elements and to enable full-screen mode by default.
+
+### [Chapters](https://github.com/yangshun/react-storybook-addon-chapters)
+
+With this addon, you can showcase multiple components (or varying component states) within a story by breaking it down into smaller categories (chapters) and subcategories (sections) for more organizational goodness.
+
+### [Backgrounds](https://github.com/NewSpring/react-storybook-addon-backgrounds)
+
+With this addon, you can switch between background colors and background images for your preview components. It is really helpful for styleguides.
+
+### [Material-UI](https://github.com/sm-react/storybook-addon-material-ui)
+
+Wraps your story into MuiThemeProvider. It allows you to add your custom themes, switch between them, make changes in the visual editor and download as JSON file
+
+### [README](https://github.com/tuchk4/storybook-readme)
+
+With this addon, you can add docs in markdown format for each story. It very useful because most projects and components already have README.md files. Now it is easy to add them into your Storybook.
+
+### [i18n tools](https://github.com/joscha/storybook-addon-i18n-tools)
+
+With this addon, you can test your storybooks with a different text-direction. It is very useful if you are working on components that have to work both in LTR as well as in RTL languages.
+
+### [Props Combinations](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations)
+
+Given possible values for each prop, renders your component with all combinations of prop values. Useful for finding edge cases or just seeing all component states at once.
+
+### [StoryRouter](https://github.com/gvaldambrini/storybook-router)
+
+A [decorator](/docs/react-storybook/addons/introduction) that allows you to integrate react-router v.4 components in your stories.

pages/docs/react-storybook/addons/api/index.md

@@ -0,0 +1,133 @@
+---
+id: 'api'
+title: 'API'
+---
+## Core Addon API
+
+This is the core addon API. This is how to get the addon API:
+
+~~~js
+import addonAPI from '@kadira/storybook-addons';
+~~~
+
+Have a look at the API methods for more details:
+
+### addonAPI.getChannel()
+
+Get an instance to the channel where you can communicate with the manager and the preview. You can find this in both the addon register code and in your addon’s wrapper component (where used inside a story).
+
+It has a NodeJS [EventEmitter](https://nodejs.org/api/events.html) compatible API. So, you can use it to emit events and listen for events.
+
+### addonAPI.register()
+
+This method allows you to register an addon and get the storybook API. You can do this only in the Manager App.
+See how we can use this:
+
+~~~js
+// Register the addon with a unique name.
+addonAPI.register('kadira/notes', (storybookAPI) => {
+
+});
+~~~
+
+Now you'll get an instance to our StorybookAPI. See the [api docs](/docs/react-storybook/addons/api#storybook-api) for Storybook API regarding using that.
+
+### addonAPI.addPanel()
+
+This method allows you to add a panel to Storybook. (Storybook's Action Logger is a panel). You can do this only in the Manager App.
+See how you can use this method:
+
+~~~js
+const MyPanel = () => (
+  <div>
+    This is a panel.
+  </div>
+);
+
+// give a unique name for the panel
+addonAPI.addPanel('kadira/notes/panel', {
+  title: 'Notes',
+  render: () => (
+    <MyPanel />
+  ),
+});
+~~~
+
+As you can see, you can set any React Component as the panel. Currently, it's just a text. But you can do anything you want.
+
+You also pass the channel and the Storybook API into that. See:
+
+~~~js
+addonAPI.register('kadira/notes', (storybookAPI) => {
+  // Also need to set a unique name to the panel.
+  addonAPI.addPanel('kadira/notes/panel', {
+    title: 'Notes',
+    render: () => (
+      <Notes channel={addons.getChannel()} api={storybookAPI}/>
+    ),
+  })
+})
+~~~
+
+## Storybook API
+
+Storybook API allows you to access different functionalities of Storybook UI. You can move an instance to the Storybook API when you register an addon.
+
+Let's have a look at API methods.
+
+### storybookAPI.selectStory()
+
+With this method, you can select a story via an API. This method accepts two parameters.
+
+1. story kind name
+2. story name (optional)
+
+Let's say you've got a story like this:
+
+~~~js
+storiesOf('Button', module)
+  .add('with text', () => (
+    <Button onClick={action('clicked')}>Hello Button</Button>
+  ));
+~~~
+
+This is how you can select the above story:
+
+~~~js
+storybookAPI.selectStory('Button', 'with text');
+~~~
+
+### storybookAPI.setQueryParams()
+
+This method allows you to set query string parameters. You can use that as temporary storage for addons. Here's how you set query params.
+
+~~~js
+storybookAPI.setQueryParams({
+  abc: 'this is abc',
+  bbc: 'this is bbc',
+});
+~~~
+
+> If you need to remove a query param, use `null` for that. For an example, let's say we need to remove bbc query param. This is how we do it:
+
+~~~js
+storybookAPI.setQueryParams({
+  bbc: null,
+});
+~~~
+
+### storybookAPI.getQueryParam()
+
+This method allows you to get a query param set by above API `setQueryParams`. For example, let's say we need to get the bbc query param. Then this how we do it:
+
+~~~js
+storybookAPI.getQueryParam('bbc');
+~~~
+
+### storybookAPI.onStory(fn)
+
+This method allows you to register a handler function which will be called whenever the user navigates between stories.
+
+~~~js
+storybookAPI.onStory((kind, story) => console.log(kind, story));
+~~~

pages/docs/react-storybook/addons/introduction/index.md

@@ -0,0 +1,104 @@
+---
+id: 'introduction'
+title: 'Intro to Addons'
+---
+
+By default, Storybook comes with a way to list stories and visualize them. Addons implement extra features for Storybooks to make them more useful.
+
+Basically, there are two types of addons. (Decorators and Native Addons)
+
+## 1. Decorators
+
+These are wrapper components or Storybook decorators that wrap a story.
+
+### Wrapper Components
+
+For example, let's say we want to center a story rendered on the screen. For that, we can use a wrapper component like this:
+
+~~~js
+const Center = ({ children }) => (
+  <div style={{ textAlign: "center" }}>
+    { children }
+  </div>
+);
+~~~
+
+Then we can use it when writing stories.
+
+~~~js
+storiesOf('Button', module)
+  .add('with text', () => (
+    <Center>
+      <Button onClick={action('clicked')}>Hello Button</Button>
+    </Center>
+  ));
+~~~
+
+### Storybook Decorators
+
+You can also expose this functionality as a Storybook decorator and use it like this.
+
+~~~js
+const CenterDecorator = (story) => (
+  <div style={{ textAlign: "center" }}>
+    {story()}
+  </div>
+);
+
+storiesOf('Button', module)
+  .addDecorator(CenterDecorator)
+  .add('with text', () => (
+    <Button onClick={action('clicked')}>Hello Button</Button>
+  ))
+  .add('with some emojies', () => (
+    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+  ));
+~~~
+
+You can also add a decorator globally for all stories like this:
+
+~~~js
+import {
+    storiesOf, action, addDecorator
+} from '@kadira/storybook';
+
+const CenterDecorator = (story) => (
+  <div style={{ textAlign: "center" }}>
+    {story()}
+  </div>
+);
+addDecorator(CenterDecorator);
+
+storiesOf('Welcome', module)
+  .add('to Storybook', () => (
+    <Welcome showApp={linkTo('Button')}/>
+  ));
+
+storiesOf('Button', module)
+  .add('with text', () => (
+    <Button onClick={action('clicked')}>Hello Button</Button>
+  ))
+  .add('with some emojies', () => (
+    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+  ));
+~~~
+
+> You can call `addDecorator()` inside the story definition file as shown above. But adding it to the Storybook config file is a much better option.
+
+## 2. Native Addons
+
+Native addons use Storybook as a platform and interact with it. Native addons can add extra features beyond wrapping stories.
+
+For example, [storybook-actions](https://github.com/storybooks/storybook/tree/master/packages/addon-actions) is such an addon.
+
+![Demo of Storybook Addon Actions](../static/addon-actions-demo.gif)
+
+> This addon ships with Storybook by default. [Check here](https://github.com/storybooks/storybook/tree/master/packages/addon-actions) for more info.
+
+It will allow you to inspect the parameters of any event of your components.
+
+See the following links to learn more about native addons:
+
+* [Using addons](/docs/react-storybook/addons/using-addons)
+* [Addon gallery](/docs/react-storybook/addons/addon-gallery)
+* [Write your own addon](/docs/react-storybook/addons/writing-addons)

pages/docs/react-storybook/addons/using-addons/index.md

@@ -0,0 +1,63 @@
+---
+id: 'using-addons'
+title: 'Using Addons'
+---
+
+By default, Storybook comes with two addons, which are [actions](https://github.com/storybooks/storybook/tree/master/packages/addon-actions) and [links](https://github.com/storybooks/storybook/tree/master/packages/addon-links). But you can use any third party addons distributed via NPM.
+
+Here's how to do it.
+
+Now we are going to use an addon called [Notes](https://github.com/storybooks/storybook/tree/master/packages/addon-notes). Basically, it allows you to write notes for your stories.
+
+First, you need to create a file called `addons.js` inside the storybook config directory and add the following content:
+
+~~~js
+import '@kadira/storybook/addons';
+~~~
+
+This will load our default addons.
+
+Then install the notes addon with:
+
+~~~sh
+npm i --save '@kadira/storybook-addon-notes';
+~~~
+
+
+After that, add it to the addons.js like this:
+
+~~~js
+import '@kadira/storybook/addons';
+import '@kadira/storybook-addon-notes/register';
+~~~
+
+
+Then you'll be able to see those notes when you are viewing the story.
+
+![Stories without notes](../static/stories-without-notes.png)
+
+Now when you are writing a story it like this and add some notes:
+
+~~~js
+import React from 'react';
+import { storiesOf, action, linkTo } from '@kadira/storybook';
+import Button from './Button';
+import { WithNotes } from '@kadira/storybook-addon-notes';
+
+storiesOf('Button', module)
+  .add('with some emoji', () => (
+    <WithNotes notes={'Here we use some emoji as the Button text. Isn\\'t it look nice?'}>
+      <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+    </WithNotes>
+  ));
+~~~
+
+Then you'll be able to see those notes when you are viewing the story.
+
+![Stories with notes](../static/stories-with-notes.png)
+
+Just like this, you can install any other addon and use it. Have a look at our [addon gallery](/docs/react-storybook/addons/addon-gallery) to discover more addons.
+
+> This particular addon has created a panel in Storybook. Some addons may not create a panel and may use some other Storybook platform features.
+>
+> So, look at the addon’s own documentation on how to use it.

pages/docs/react-storybook/addons/writing-addons/index.md

@@ -0,0 +1,180 @@
+---
+id: 'writing-addons'
+title: 'Writing Addons'
+---
+
+This is a complete guide on how to create addons for Storybook.
+
+## Storybook Basics
+
+Before we begin, we need to learn a bit about how Storybook works. Basically, Storybook has a **Manager App** and a **Preview Area**.
+
+Manager App is the client side UI for Storybook. Preview Area is the place where the story is rendered. Usually the Preview Area is an iframe.
+
+When you select a story from the Manager App, the relevant story is rendered inside the Preview Area.
+
+![Storybook Components](../static/storybook-components.png)
+
+As shown in the above image, there's a communication channel that the Manager App and Preview Area use to communicate with each other.
+
+## Capabilities
+
+With an addon, you can add more functionality to Storybook. Here are a few things you could do:
+
+* Add a panel to Storybook (like Action Logger).
+* Interact with the story and the panel.
+* Set and get URL query params.
+* Select a story.
+* Register keyboard shortcuts (coming soon).
+
+With this, you can write some pretty cool addons. Look at our [Addon gallery](/docs/react-storybook/addons/addon-gallery) to have a look at some sample addons.
+
+## Getting Started
+
+Let's write a simple addon for Storybook. It's a Notes addon on which you can display some notes for a story.
+
+
+> Just for the simplicity, we'll write the addon right inside our app. But we can easily move it into a separate NPM module.
+
+## How it looks
+
+We write a story for our addon like this:
+
+~~~js
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Button from './Button';
+import { WithNotes } from '../notes-addon';
+
+storiesOf('Button', module)
+  .add('with text', () => (
+    <WithNotes notes={'This is a very simple Button and you can click on it.'}>
+      <Button onClick={action('clicked')}>Hello Button</Button>
+    </WithNotes>
+  ))
+  .add('with some emoji', () => (
+    <WithNotes notes={'Here we use some emoji as the Button text. Isn\'t it look nice?'}>
+      <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+    </WithNotes>
+  ));
+~~~
+
+Then it will appear in the Notes panel like this:
+
+![With notes](../static/stories-with-notes.png)
+
+## Setup
+
+First, create an `addons.js` inside the Storybook config directory and add the following content to it.
+
+~~~js
+// Storybook's default addons
+import '@kadira/storybook/addons';
+~~~
+
+We'll use this file shortly to register the Notes addon we are building.
+
+Now we need to create two files, `register.js` and `index.js,` inside a directory called `src/notes-addon`.
+
+## The Addon
+
+Let's add the following content to the `index.js`. It will expose a class called `WithNotes`, which wraps our story.
+
+~~~js
+import React from 'react';
+import addons from '@kadira/storybook-addons';
+
+export class WithNotes extends React.Component {
+  render() {
+    const { children, notes } = this.props;
+    const channel = addons.getChannel();
+
+    // send the notes to the channel.
+    channel.emit('kadira/notes/add_notes', notes);
+    // return children elements.
+    return children;
+  }
+}
+~~~
+
+In this case, our component can access something called the channel. It lets us communicate with the panel (where we display notes). It has a NodeJS [EventEmitter](https://nodejs.org/api/events.html) compatible API.
+
+In the above case, it will emit the notes text to the channel, so our panel can listen to it.
+
+Then add the following code to the register.js.
+
+See: https://gist.github.com/arunoda/fb3859840ff616cc5ea0fa3ef8e3f358
+
+It will register our addon and add a panel. In this case, the panel represents a React component called `Notes`. That component has access to the channel and storybook api.
+
+Then it will listen to the channel and render the notes text on the panel. Have a look at the above annotated code.
+
+> In this example, we are only sending messages from the Preview Area to the Manager App (our panel). But we can do it the other way around as well.
+
+It also listens to another event, called onStory, in the storybook API, which fires when the user selects a story. We use that event to clear the previous notes when selecting a story.
+
+### Register the addon
+
+Now, finally, we need to register the addon by importing it to the `.storybook/addons.js` file.
+
+~~~js
+// Storybook's default addons
+import '@kadira/storybook/addons';
+
+// Our addon
+import '../src/notes-addon/register';
+~~~
+
+> Above code runs in the Manager App but not in the preview area.
+
+
+That's it. Now you can create notes for any story as shown below:
+
+~~~js
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Button from './Button';
+import { WithNotes } from '../notes-addon';
+
+storiesOf('Button', module)
+  .add('with text', () => (
+    <WithNotes notes={'This is a very simple Button and you can click on it.'}>
+      <Button onClick={action('clicked')}>Hello Button</Button>
+    </WithNotes>
+  ))
+  .add('with some emojies', () => (
+    <WithNotes notes={'Here we use emojies as the Button text. Isn\'t it look nice?'}>
+      <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+    </WithNotes>
+  ));
+~~~
+
+## Addon API
+
+Here we've only used a few functionalities of our [Addon API](/docs/react-storybook/addons/api).
+You can learn more about the complete API [here](/docs/react-storybook/addons/api).
+
+## Packaging
+
+You can package this addon into a NPM module very easily. Have a look at this [repo](https://github.com/storybooks/storybook/tree/master/packages/addon-notes/tree/version1).
+
+In addition to moving the above code to an NPM module, we've set `react` and `@kadira/storybook-addons` as peer dependencies.
+
+### Local Development
+
+When you are developing your addon as a package, you can't use `npm link` to add it your project. Instead add your package as a local dependency into your `package.json` as shown below:
+
+~~~json
+{
+  ...
+  "dependencies": {
+    "@kadira/storybook-addon-notes": "file:///home/username/myrepo"
+  }
+  ...
+}
+~~~
+
+### Package Maintenance
+
+Your packaged Storybook addon needed to be written in ES5. If you are using ES6, then you need to transpile it.
+In that case, we recommend to use [React CDK](https://github.com/kadirahq/react-cdk) for that.

pages/docs/react-storybook/basics/exporting-storybook/index.md

@@ -0,0 +1,41 @@
+---
+id: 'exporting-storybook'
+title: 'Exporting Storybook as a Static App'
+---
+
+Storybook gives a great developer experience with its dev time features, like instance change updates via Webpack's HMR.
+
+But Storybook is also a tool you can use to showcase your components to others.
+Demos of [React Native Web](http://necolas.github.io/react-native-web/storybook/) and [React Dates](http://airbnb.io/react-dates/) are a good example for that.
+
+For that, Storybook comes with a tool to export your storybook into a static web app. Then you can deploy it to GitHub pages or any static hosting service.
+
+Simply add the following NPM script:
+
+~~~sh
+{
+  ...
+  "scripts": {
+    "storybook": "build-storybook -c .storybook -o .out"
+  }
+  ...
+}
+~~~
+
+Then run `npm run storybook`.
+
+This will build the storybook configured in the Storybook directory into a static webpack and place it inside the `.out` directory.
+Now you can deploy the content in the `.out` directory wherever you want.
+
+To test it locally, simply run the following commands:
+
+~~~sh
+cd .out
+python -m SimpleHTTPServer
+~~~
+
+## Deploying to GitHub Pages
+
+Additionally, you can deploy Storybook directly into GitHub pages with our [storybook-deployer](https://github.com/storybooks/storybook-deployer) tool.
+
+Or, you can simply export your storybook into the docs directory and use it as the root for GitHub pages. Have a look at [this guide](https://github.com/blog/2233-publish-your-project-documentation-with-github-pages) for more information.

pages/docs/react-storybook/basics/faq/index.md

@@ -0,0 +1,14 @@
+---
+id: 'faq'
+title: 'Frequently Asked Questions'
+---
+
+Here are some answers to frequently asked questions. If you have a question, you can ask it by opening an issue on the [Storybook Repository](https://github.com/storybooks/storybook/).
+
+### How can I run coverage tests with Create React App and leave out stories?
+
+Create React App does not allow providing options to Jest in your `package.json`, however you can run `jest` with commandline arguments:
+
+~~~
+npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stories/*"]'
+~~~

pages/docs/react-storybook/basics/introduction/index.md

@@ -0,0 +1,18 @@
+---
+id: 'introduction'
+title: 'Introduction'
+---
+
+React Storybook is a UI development environment for your React components. With it, you can visualize different states of your UI components and develop them interactively.
+
+It runs  outside of your app. So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+![React Storybook](../static/screenshot.png)
+
+React Storybook also comes with a lot of [addons](/docs/react-storybook/addons/introduction) and a great API to customize as you wish. You can also build a [static version](/docs/react-storybook/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
+
+Here are some featured storybooks that you can reference to see how Storybook works:
+
+* [React Button](http://kadira-samples.github.io/react-button) - [source](https://github.com/kadira-samples/react-button)
+* [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates)
+* [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web)

pages/docs/react-storybook/basics/quick-start-guide/index.md

@@ -0,0 +1,25 @@
+---
+id: 'quick-start-guide'
+title: 'Quick Start Guide'
+---
+
+React Storybook is very easy to use. You can use it with any kind of React project.
+Follow these steps to get started with Storybook.
+
+~~~sh
+npm i -g getstorybook
+cd my-react-app
+getstorybook
+~~~
+
+This will configure your app for Storybook. After that, you can run your Storybook with:
+
+~~~
+npm run storybook
+~~~
+
+Then you can access your storybook from the browser.
+
+---
+
+To learn more about what `getstorybook` command does, have a look at our [Slow Start Guide](/docs/react-storybook/basics/slow-start-guide).

pages/docs/react-storybook/basics/slow-start-guide/index.md

@@ -0,0 +1,100 @@
+---
+id: 'slow-start-guide'
+title: 'Slow Start Guide'
+---
+
+You may have tried to use our quick start guide to setup your project for Storybook. If you want to set up Storybook manually, this is the guide for you.
+
+> This will also help you to understand how Storybook works.
+
+## Basics
+
+Storybook has its own Webpack setup and a dev server. Webpack setup is very similar to [Create React App](https://github.com/facebookincubator/create-react-app), but allows you to configure as you want.
+
+In this guide, we are trying to set up Storybook for your React project.
+
+## Add @kadira/storybook
+
+First of all, you need to add `@kadira/storybook` to your project. To do that, simply run:
+
+~~~sh
+npm i --save-dev @kadira/storybook
+~~~
+
+## Add react and react-dom
+Make sure that you have `react` and `react-dom` in your dependencies as well:
+
+~~~sh
+npm i --save react react-dom
+~~~
+
+Then add the following NPM script to your package json in order to start the storybook later in this guide:
+
+~~~js
+{
+  ...
+  "scripts": {
+    "storybook": "start-storybook -p 9001 -c .storybook"
+  }
+  ...
+}
+~~~
+
+## Create the config file
+
+Storybook can be configured in several different ways. That’s why we need a config directory. We've added a `-c` option to the above NPM script mentioning `.storybook` as the config directory.
+
+For the basic Storybook configuration file, you don't need to do much, but simply tell Storybook where to find stories.
+
+To do that, simply create a file at `.storybook/config.js` with the following content:
+
+~~~js
+import { configure } from '@kadira/storybook';
+
+function loadStories() {
+  require('../stories/index.js');
+  // You can require as many stories as you need.
+}
+
+configure(loadStories, module);
+~~~
+
+That'll load stories in `../stories/index.js`.
+
+Just like that, you can load stories from wherever you want to.
+
+## Write your stories
+
+Now you can write some stories inside the `../stories/index.js` file, like this:
+
+~~~js
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+storiesOf('Button', module)
+  .add('with text', () => (
+    <button onClick={action('clicked')}>Hello Button</button>
+  ))
+  .add('with some emoji', () => (
+    <button onClick={action('clicked')}>😀 😎 👍 💯</button>
+  ));
+~~~
+
+Story is a single state of your component. In the above case, there are two stories for the native button component:
+
+1. with text
+2. with some emoji
+
+## Run your Storybook
+
+Now everything is ready. Simply run your storybook with:
+
+~~~js
+npm run storybook
+~~~
+
+Then you can see all your stories, like this:
+
+![Basic stories](../static/basic-stories.png)
+
+Now you can change components and write stories whenever you need to. You'll get those changes into Storybook in a snap with the help of Webpack's HMR API.

pages/docs/react-storybook/basics/writing-stories/index.md

@@ -0,0 +1,169 @@
+---
+id: 'writing-stories'
+title: 'Writing Stories'
+---
+
+Storybook is all about writing stories. Usually a story contains a single state of one of your components. That's like a visual test case.
+
+> Technically, a story is a function that returns a React element.
+
+You can write a set of stories for your components and you'll get a storybook.
+
+## Keeping your stories
+
+There's no hard and fast rule for this. But, keeping stories close to your components is a good idea.
+
+For example, let's say your UI components live in a directory called: `src/components.` Then you can write stories inside the `src/stories` directory.
+
+This is just one way to do that. You can always edit your storybook config file and ask it to load stories from anywhere you want.
+
+## Writing stories
+
+This is how you write stories:
+(Let's assume there's a component called "Button" in `src/components/Button.js`.)
+
+~~~js
+// file: src/stories/index.js
+
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Button from '../components/Button';
+
+storiesOf('Button', module)
+  .add('with text', () => (
+    <Button onClick={action('clicked')}>Hello Button</Button>
+  ))
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+  ));
+~~~
+
+This will show stories in your storybook like this:
+
+![Basic stories](../static/basic-stories.png)
+
+This is just our core API for writing stories. In addition to this, you can use the official and third party Storybook [addons](/docs/react-storybook/addons/introduction) to get more functionality.
+
+
+## Loading stories dynamically
+
+Sometimes, you will want to load your stories dynamically rather than explicitly requiring them in the Storybook config file.
+
+For example, you may write stories for your app inside the `src/components` directory with the `.stories.js` extension. Then you will want to load them at once. Simply edit your config directory at `.storybook/config.js` as follows:
+
+~~~js
+import { configure } from '@kadira/storybook';
+
+const req = require.context('../src/components', true, /\.stories\.js$/)
+
+function loadStories() {
+  req.keys().forEach((filename) => req(filename))
+}
+
+configure(loadStories, module);
+~~~
+
+Here we use Webpack's [require.context](https://webpack.github.io/docs/context.html#require-context) to load modules dynamically. Have a look at the relevant Webpack [docs](https://webpack.github.io/docs/context.html#require-context) to learn more about how to use require.context.
+
+## Using Decorators
+
+A decorator is a way to wrap a story with a common set of component(s). Let's say you want to center all your stories. Here is how we can do this with a decorator:
+
+~~~js
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import MyComponent from '../my_component';
+
+storiesOf('MyComponent', module)
+  .addDecorator((story) => (
+    <div style={{textAlign: 'center'}}>
+      {story()}
+    </div>
+  ))
+  .add('without props', () => (<MyComponent />))
+  .add('with some props', () => (<MyComponent text="The Comp"/>));
+~~~
+
+Here we only add the decorator for the current set of stories. (In this example, we add it just for the **MyComponent** story group.)
+
+But, you can also add a decorator **globally** and it'll be applied to all the stories you create. This is how to add a decorator like that:
+
+~~~js
+import { configure, addDecorator } from '@kadira/storybook';
+addDecorator((story) => (
+  <div style={{textAlign: 'center'}}>
+    {story()}
+  </div>
+));
+
+configure(function () {
+  ...
+}, module);
+~~~
+
+## Linking stories
+
+With `linkTo` you can link stories together to build demos and prototypes directly from your UI components. (Similar to [InVision](https://www.invisionapp.com/) and [Framer.js](https://framerjs.com/))
+
+~~~js
+import { storiesOf, linkTo } from '@kadira/storybook'
+
+storiesOf('Button', module)
+  .add('First', () => (
+    <button onClick={linkTo('Button', 'Second')}>Go to "Second"</button>
+  ))
+  .add('Second', () => (
+    <button onClick={linkTo('Button', 'First')}>Go to "First"</button>
+  ));
+~~~
+
+With that, you can link an event in a component to any story in the Storybook.
+
+* First parameter is the story kind (what you named with storiesOf).
+* Second parameter is the story name (what you named with .add).
+
+You can also pass a function instead for any of above parameters. That function accepts arguments emitted by the event and it should return a string. For example:
+
+~~~js
+linkTo(() => 'Button', () => 'Second')
+~~~
+
+## Managing stories
+
+Storybook has a very simple API to write stories. With that, you can’t display nested stories.
+_**This is something we've done purposely.**_
+
+But you might ask, how do I manage stories If I have many of them? Here's how different developers address this issue. Therefore, there's no need to build a built-in feature for this (at least in the short term).
+
+### Prefix with dots
+
+For example, you can prefix story names with a dot (`.`):
+
+~~~js
+storiesOf('core.Button', module)
+~~~
+
+ Then you can filter stories to display only the stories you want to see.
+
+### Run multiple storybooks
+
+You can run multiple storybooks for different kinds of stories (or components). To do that, you can create different NPM scripts to start different stories. See:
+
+~~~js
+{
+   ...
+   "scripts": {
+     "start-storybook-for-theme": "start-storybook -p 9001 -c .storybook-theme"
+     "start-storybook-for-app": "start-storybook -p 8001 -c .storybook-app"
+   }
+   ...
+}
+~~~
+
+### Use multiple repos
+
+This is a popular option. You can create different repos for different kinds of UI components and have a storybook for each of them. Here are some ways to separate them:
+
+* Have one repo for the theme, and one for the app.
+* Have one repo for each UI component and use those in different apps.
+* Have a few repos for different kinds of UI components and use them in different apps.

pages/docs/react-storybook/configurations/add-custom-head-tags/index.md

@@ -0,0 +1,19 @@
+---
+id: 'add-custom-head-tags'
+title: 'Add Custom Head Tags'
+---
+
+Sometimes, you may need to add different tags to the HTML head. This is useful for adding web fonts or some external scripts.
+
+You can do this very easily. Simply create a file called `head.html` inside the Storybook config directory and add tags like this:
+
+~~~html
+<script src="https://use.typekit.net/xxxyyy.js"></script>
+<script>try{ Typekit.load(); } catch(e){ }</script>
+~~~
+
+That's it. Storybook will inject these tags.
+
+> **Important**
+
+> Storybook will inject these tags to the iframe where your components are rendered. So, these won’t be loaded into the main Storybook UI.

pages/docs/react-storybook/configurations/cli-options/index.md

@@ -0,0 +1,39 @@
+---
+id: 'cli-options'
+title: 'CLI Options'
+---
+
+React Storybook comes with two CLI utilities. They are `start-storybook` and `build-storybook`.
+
+They have some options you can pass to alter the storybook behaviors. We have seen some of them in previous docs.
+
+Here are all those options:
+
+## For start-storybook
+
+~~~
+Usage: start-storybook [options]
+
+Options:
+
+  -h, --help                    output usage information
+  -V, --version                 output the version number
+  -p, --port [number]           Port to run Storybook (Required)
+  -h, --host [string]           Host to run Storybook
+  -s, --static-dir <dir-names>  Directory where to load static files from
+  -c, --config-dir [dir-name]   Directory where to load Storybook configurations from
+~~~
+
+## For build-storybook
+
+~~~
+Usage: build-storybook [options]
+
+Options:
+
+  -h, --help                    output usage information
+  -V, --version                 output the version number
+  -s, --static-dir <dir-names>  Directory where to load static files from
+  -o, --output-dir [dir-name]   Directory where to store built files
+  -c, --config-dir [dir-name]   Directory where to load Storybook configurations from
+~~~

pages/docs/react-storybook/configurations/custom-babel-config/index.md

@@ -0,0 +1,12 @@
+---
+id: 'custom-babel-config'
+title: 'Custom Babel Config'
+---
+
+By default, Storybook loads your root `.babelrc` file and load those configurations. But sometimes some of those options may cause Storybook to throw errors.
+
+In that case, you can provide a custom `.babelrc` just for Storybook. For that, simply create a file called `.babelrc` file inside the Storybook config directory (by default, it's `.storybook`).
+
+Then Storybook will load the Babel configuration only from that file.
+
+> Currently we do not support loading the Babel config from the package.json.

pages/docs/react-storybook/configurations/custom-webpack-config/index.md

@@ -0,0 +1,105 @@
+---
+id: 'custom-webpack-config'
+title: 'Custom Webpack Config'
+---
+
+The default Webpack config of React Storybook is usually well balanced for a medium-size React project (specially created with [Create React App](https://github.com/facebookincubator/create-react-app)) or a library. But if you already have your own Webpack setup, that's not useable.
+
+That's why we allow you to customize our Webpack setup. There are a few ways to do it. Let's discuss:
+
+## Simple Mode
+
+Let's say you want to add [SASS](http://sass-lang.com/) support to Storybook. This is how to do it.
+Simply add the following content to a file called `webpack.config.js` in your Storybook config directory (`.storybook` by default ).
+
+~~~js
+const path = require('path');
+
+module.exports = {
+  module: {
+    loaders: [
+      {
+        test: /\.scss$/,
+        loaders: ["style", "css", "sass"],
+        include: path.resolve(__dirname, '../')
+      }
+    ]
+  }
+}
+~~~
+
+Since this config file stays in the Storybook directory, you need to set the include path as above. If the config directory stays in a different directory, you need to set the include path relative to that.
+
+You also need to install the loaders (style, css, and sass) used in above config manually.
+
+
+> Once you create this `webpack.config.js` file, Storybook won't load the [default Webpack config](/docs/react-storybook/configurations/default-config) other than loading JS files with the Babel loader.
+
+### Supported Webpack Options
+
+You can add any kind of Webpack configuration options with the above config, whether they are plugins, loaders, or aliases.
+But you won't be able to change the following config options:
+
+* entry
+* output
+* js loader with babel
+
+## Full Control Mode
+
+Sometimes, you will want to have full control over the webpack configuration. Maybe you want to add different configurations for dev and production environments. That's where you can use our full control mode.
+
+To enable that, you need to export a **function** from the above `webpack.config.js` file, just like this:
+
+~~~js
+// Export a function. Accept the base config as the only param.
+module.exports = function(storybookBaseConfig, configType) {
+  // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
+  // You can change the configuration based on that.
+  // 'PRODUCTION' is used when building the static version of storybook.
+
+  // Make whatever fine-grained changes you need
+  storybookBaseConfig.module.loaders.push({
+    test: /\.scss$/,
+    loaders: ["style", "css", "sass"],
+    include: path.resolve(__dirname, '../')
+  });
+
+  // Return the altered config
+  return storybookBaseConfig;
+};
+~~~
+
+Storybook uses the config returned from the above function. So, try to edit the `storybookBaseConfig` with care. Make sure to preserve the following config options:
+
+* entry
+* output
+* first loader in the module.loaders (Babel loader for JS)
+
+Other than that, you should try to keep the default set of plugins.
+
+## Extending The Default Config
+
+You may want to keep Storybook's [default config](/docs/react-storybook/configurations/default-config), but just need to extend it. If so, this is how you do it using the Full Control Mode.
+Add following content to the `webpack.config.js` in your Storybook config directory.
+
+~~~js
+// load the default config generator.
+var genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js');
+
+module.exports = function(config, env) {
+  var config = genDefaultConfig(config, env);
+
+  // Extend it as you need.
+
+  return config;
+};
+~~~
+
+## Using Your Existing Config
+
+You may have an existing Webpack config for your project. So, you may need to copy and paste some config items into Storybook's custom Webpack config file.
+
+But you don't need to. There are a few options:
+
+* Simply import your main Webpack config into Storybook's `webpack.config.js` and use the loaders and plugins used in that.
+* Create a new file with common Webpack options and use it in both inside the main Webpack config and inside Storybook's `webpack.config.js`.

pages/docs/react-storybook/configurations/default-config/index.md

@@ -0,0 +1,69 @@
+---
+id: 'default-config'
+title: 'Default Config'
+---
+
+Storybook has a default Webpack setup which is similar to [Create React App](https://github.com/facebookincubator/create-react-app).
+Let's learn about the default config comes with Storybook.
+
+## Babel
+
+We use Babel for JavaScript(ES6) transpiling. Here are some key features of Storybook's Babel configurations.
+
+### ES2016+ Support
+
+We have added ES2016 support with Babel for transpiling your JS code. In addition to that, we've added a few experimental features, like object spreading and async await. Check out our [source](https://github.com/storybooks/storybook/blob/master/packages/react-storybook/src/server/config/babel.js#L19) to learn more about these plugins.
+
+### .babelrc support
+
+If your project has a `.babelrc` file, we'll use that instead of the default config file. So, you could use any babel plugins or presets that you have used in your project with Storybook.
+
+## Webpack
+
+We use Webpack to serve and load JavaScript modules for the web. We've added some Webpack loaders to bring some good defaults. (This setup is very close to what you get with the [Create React App](https://github.com/facebookincubator/create-react-app).)
+
+### CSS Support
+
+You can simply import CSS files wherever you want, whether it's in the storybook config file, a UI component, or inside a story definition file.
+
+Basically, you can import CSS like this:
+
+~~~js
+// locally
+import './styles.css'
+// or from NPM modules
+import 'bootstrap/dist/css/bootstrap.css';
+~~~
+
+### Image and Static File Support
+
+You can also import images and media files directly via JavaScript. This helps you to write stories with media files easily. This is how to do it:
+
+~~~js
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+import imageFile from './static/image.png';
+
+storiesOf('<img>', module)
+  .add('with a image', () => (
+    <img src={imageFile} />
+  ));
+~~~
+
+When you are building a storybook, we'll also export the imported image. So, this is a good approach to loading all of your static content.
+
+
+> Storybook also has a way to mention static directories via the -s option of the `react-storybook` and `build-storybook` commands.
+
+### JSON Loader
+
+You can import `.json` files, as you do with Node.js. This will also allow you to use NPM projects, which imports `.json` files inside them.
+
+## NPM Modules
+
+You can use any of the NPM modules installed on your project. You can simply import and use them.
+
+
+> Unfortunately, we don't support Meteor packages. If your UI component includes one or more Meteor packages, try to avoid using them in UI components.
+> If they are containers, you can use [React Stubber](https://github.com/kadirahq/react-stubber) to use them in Storybook.

pages/docs/react-storybook/configurations/env-vars/index.md

@@ -0,0 +1,37 @@
+----
+id: 'env-vars'
+title: 'Using Environment Variables'
+---
+
+
+Sometimes, we may use configuration items inside Storybook. It might be a theme color, some client secret, or a JSON string. So, we usually tend to hard code them.
+
+But you can expose those configurations via "environment variables." For that, you need to prefix your environment variables with `STORYBOOK_` prefix.
+
+For an example, let's expose two environment variables like this:
+
+~~~sh
+STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook
+~~~
+
+Then we can access these environment variables anywhere inside our JS code like below:
+
+~~~js
+console.log(process.env.STORYBOOK_THEME)
+console.log(process.env.STORYBOOK_DATA_KEY)
+~~~
+
+> Even though we can access these env variables anywhere in the client side JS code, it's better to use them only inside stories and inside the main Storybook config file.
+
+## Build time environment variables
+
+You can also pass these environment variables when you are [building your storybook](/docs/react-storybook/basics/exporting-storybook) with `build-storybook`.
+
+Then they'll be hard coded to the static version of your Storybook.
+
+## NODE_ENV env variable
+
+In addition to the above prefixed environment variables, you can also pass the NODE_ENV variable to Storybook. But, you normally don't need to do that since we set a reasonable default value for it.
+
+* When running `npm run storybook`, we set NODE_ENV to 'development'
+* When building storybook, we set NODE_ENV to 'production'

pages/docs/react-storybook/configurations/serving-static-files/index.md

@@ -0,0 +1,76 @@
+---
+id: 'serving-static-files'
+title: 'Serving Static Files'
+---
+
+It's often useful to load static files like images and videos when creating components and stories.
+
+Storybook provides two ways to do that.
+
+## 1. Via Imports
+
+You can import any media assets by simply importing (or requiring) them as shown below.
+
+
+~~~js
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+import imageFile from './static/image.png';
+
+storiesOf('<img>', module)
+  .add('with a image', () => (
+    <img src={imageFile} />
+  ));
+~~~
+
+
+This is enabled with our [default config](/docs/react-storybook/configurations/default-config). But, if you are using a [custom Webpack config](/docs/react-storybook/configurations/custom-webpack-config), you need to add the [file-loader](https://github.com/webpack/file-loader) into your custom Webpack config.
+
+## 2. Via a Directory
+
+You can also configure a directory (or a list of directories) for searching static content when you are starting Storybook. You can do that with the -s flag.
+
+See the following npm script on how to use it:
+
+~~~js
+{
+  "scripts": {
+    "start-storybook": "start-storybook -s ./public -p 9001"
+  }
+}
+~~~
+
+
+Here `./public` is our static directory. Now you can use static files in the public directory in your components or stories like this.
+
+~~~js
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+// assume image.png is located in the "public" directory.
+storiesOf('<img>', module)
+  .add('with a image', () => (
+    <img src="/image.png" />
+  ));
+~~~
+
+
+> You can also pass a list of directories, instead of a single directory, as shown below.
+> ~~~js
+> {
+>   "scripts": {
+>     "start-storybook": "start-storybook -s ./public,./static -p 9001"
+>   }
+> }
+> ~~~
+
+## Absolute versus relative paths
+
+Sometimes, you may want to deploy your storybook into a subpath, like https://kadira-samples.github.io/react-button.
+
+In this case, you need to have all your images and media files with relative paths. Otherwise, Storybook cannot locate those files.
+
+If you load static content via importing, this is automatic and you do not have to do anything.
+
+If you are using a static directory, then you need to use _relative paths_ to load images.

pages/docs/react-storybook/testing/css-style-testing/index.md

@@ -0,0 +1,30 @@
+---
+id: 'css-style-testing'
+title: 'CSS/Style Testing'
+---
+
+We can also use Storybook as the base for CSS/Style testing with stories as the base. First, have a look at the following Storybook.
+
+![Storybook Screenshot](../static/storybook-screenshot.png)
+
+In that, you can see the Storybook's manager UI. It has UI elements that are not related to your app. However, there's a way to access just a single story.
+
+For an example, let's assume the above storybook runs on port 9009 and we can access it via [http://localhost:9009](http://localhost:9009/).
+Then Let's pick a single story: the "with text" story of the Button. So, in this case:
+
+* selectedKind = Button
+* selectedStory = with text
+
+Then, we can see the above story using the following URL:
+
+http://localhost:9009/iframe.html?selectedKind=Button&selectedStory=with+text&dataId=0
+
+![Storybook Iframe Screenshot](../static/storybook-iframe-screenshot.png)
+
+Just like that, you can access all of the stories in your Storybook.
+
+## Supported CSS/Style Testing Frameworks
+
+It will be hard to use all the frameworks we've [mentioned](/docs/react-storybook/testing/react-ui-testing#3-css-style-testing), but we'll be able to use frameworks which are based on URL as the input source. (Such as [BackstopJS](https://github.com/garris/BackstopJS) and [Gemini](https://github.com/gemini-testing/gemini))
+
+> In the future we are also planning to smooth this process with the help of [StoryShots](https://github.com/storybooks/storyshots).

pages/docs/react-storybook/testing/interaction-testing/index.md

@@ -0,0 +1,17 @@
+---
+id: 'interaction-testing'
+title: 'Interaction Testing'
+---
+
+For the interaction testing, [Enzyme](https://github.com/airbnb/enzyme) is the best tool we can use. With that, we can [simulate](http://airbnb.io/enzyme/docs/api/ReactWrapper/simulate.html) user inputs and see what they are doing.
+
+You can directly write these kind of tests with a full-featured testing framework, such as **Mocha** or **Jest**. Have a look at the [Enzyme guidelines](https://github.com/airbnb/enzyme/) for more information on how to integrate them.
+
+## Specs Addon
+
+If you like to write your tests directly inside your stories, we also have an addon called [specs](https://github.com/mthuret/storybook-addon-specifications).
+
+![Storybook Specs Addon](../static/specs-addon.png)
+
+With that, you can write test specs directly inside stories.
+Additionally, you also can use your CI server to run those tests.

pages/docs/react-storybook/testing/manual-testing/index.md

@@ -0,0 +1,17 @@
+---
+id: 'manual-testing'
+title: 'Manual Testing'
+---  
+Now we arrive at the most interesting (but also hardest) part of UI testing. We usually do this as a team.
+
+First, we need to make a pretty solid Storybook or a set of Storybooks covering most of the scenarios of our UI components. For that we can follow the following structure:
+
+* Write stories for your individual UI components.
+* Write another set of stories for integrating the above UI components (you could consider your pages).
+
+For the individual UI components, you may be using a different repository. Then, keep a storybook inside it for those components. Then, in the main app, write stories for integrations.
+
+## Testing Plan
+Open a new PR (or multiple of them). Then run your Storybook and start reviewing one story at a time. Then you can comment on the PR.
+
+> Join our [Newsletter](http://tinyletter.com/storybooks) or [Slack Team](https://storybooks-slackin.herokuapp.com/) to get updates.