improve the docs for V5 launch

docs/gatsby-config.js

@@ -8,19 +8,22 @@ module.exports = {
     docSections: {
       basics: [
         '/basics/introduction/',
-        '/basics/quick-start-guide/',
-        '/basics/slow-start-guide/',
-        '/basics/guide-react/',
-        '/basics/guide-react-native/',
-        '/basics/guide-vue/',
-        '/basics/guide-angular/',
-        '/basics/guide-mithril/',
-        '/basics/guide-ember/',
         '/basics/writing-stories/',
         '/basics/exporting-storybook/',
         '/basics/faq/',
         '/basics/live-examples/',
       ],
+      guides: [
+        '/guides/quick-start-guide/',
+        '/guides/slow-start-guide/',
+        '/guides/guide-react/',
+        '/guides/guide-react-native/',
+        '/guides/guide-vue/',
+        '/guides/guide-angular/',
+        '/guides/guide-mithril/',
+        '/guides/guide-ember/',
+        '/guides/guide-riot/',
+      ],
       configurations: [
         '/configurations/options-parameter/',
         '/configurations/default-config/',

docs/package.json

@@ -14,9 +14,7 @@
     "build-storybook": "build-storybook",
     "dev": "gatsby develop",
     "serve": "gatsby serve",
-    "storybook": "start-storybook -p 9009 -s src/pages",
-    "snyk-protect": "snyk protect",
-    "prepare": "npm run snyk-protect"
+    "storybook": "start-storybook -p 9009 -s src/pages"
   },
   "dependencies": {
     "@storybook/addon-actions": "5.0.0-rc.1",
@@ -28,7 +26,7 @@
     "common-tags": "^1.8.0",
     "gatsby": "^1.9.279",
     "gatsby-link": "^1.6.45",
-    "gatsby-plugin-sharp": "^2.0.12",
+    "gatsby-plugin-sharp": "^1.6.48",
     "gatsby-remark-autolink-headers": "^1.4.19",
     "gatsby-remark-copy-linked-files": "^1.5.37",
     "gatsby-remark-images": "^1.5.67",
@@ -37,17 +35,21 @@
     "gatsby-transformer-remark": "^1.7.44",
     "global": "^4.3.2",
     "highlight.js": "^9.14.2",
+    "is-builtin-module": "^3.0.0",
     "lodash": "^4.17.11",
     "marked": "^0.5.2",
+    "polished": "^3.0.3",
     "prop-types": "^15.7.2",
-    "react": "^15.6.2",
+    "react": "^16.8.3",
     "react-document-title": "^2.0.3",
-    "react-dom": "^15.6.2",
+    "react-dom": "^16.8.3",
     "react-helmet": "^5.2.0",
+    "react-popper-tooltip": "^2.8.1",
     "react-router": "^4.3.1",
     "react-stack-grid": "^0.7.1",
+    "recompose": "^0.30.0",
     "sitemap": "^2.1.0",
-    "snyk": "^1.134.2"
-  },
-  "snyk": true
+    "styled-components": "^4.1.3",
+    "validatorjs": "^3.15.1"
+  }
 }

docs/src/components/Docs/Container/index.js

@@ -1,5 +1,6 @@
+import { window } from 'global';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Component } from 'react';
 import Nav from '../Nav';
 import NavDropdown from '../Nav/dropdown';
 import Content from '../Content';
@@ -12,9 +13,33 @@ const getEditUrl = (selectedSectionId, selectedItemId) => {
   return `${gitHubRepoUrl}/blob/master/docs/src/pages/${docPath}/index.md`;
 };
 
+class Search extends Component {
+  componentDidMount() {
+    window.docsearch({
+      apiKey: 'a4f7f972f1d8f99a66e237e7fd2e489f',
+      indexName: 'storybook-js',
+      inputSelector: '#search',
+      debug: false,
+    });
+  }
+
+  render() {
+    return (
+      <div className="search">
+        <input
+          className="form-control form-control-sm"
+          type="search"
+          id="search"
+          placeholder="type to search"
+        />
+      </div>
+    );
+  }
+}
+
 const Container = ({ sections, selectedItem, selectedSectionId, selectedItemId }) => (
   <div id="docs-container" className="row">
-    <div className="nav col-sm-3 col-md-3 hidden-xs">
+    <div className="nav col-lg-3 col-md-3 d-none d-md-block">
       <Nav
         sections={sections}
         selectedSection={selectedItem.section}
@@ -23,7 +48,7 @@ const Container = ({ sections, selectedItem, selectedSectionId, selectedItemId }
         selectedItemId={selectedItemId}
       />
     </div>
-    <div className="content col-xs-12 col-sm-9 col-md-9 col-lg-9">
+    <div className="content col-xs-12 col-sm-12 col-md-9 col-lg-9">
       <div className="nav-dropdown">
         <NavDropdown
           sections={sections}
@@ -32,6 +57,8 @@ const Container = ({ sections, selectedItem, selectedSectionId, selectedItemId }
         />
       </div>
 
+      <Search />
+
       <Content
         title={selectedItem.title}
         content={selectedItem.content}

docs/src/components/Docs/Container/style.css

@@ -43,10 +43,6 @@
 }
 
 @media only screen and (max-width: 998px) {
-  #docs-container .nav {
-    display: none;
-  }
-
   #docs-container .content {
     border-left: none;
     margin: 15px 0;
@@ -57,3 +53,12 @@
     display: block;
   }
 }
+
+.search {
+  @media only screen and (min-width: 998px) {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    width: 400px;
+  }
+}

docs/src/components/Docs/Content/style.css

@@ -44,7 +44,7 @@
 #docs-content .markdown h3 {
   font-size: 18px;
   margin: 30px 0 10px 0;
-  font-weight: 800;
+  font-weight: 500;
 }
 
 #docs-content .markdown a,

docs/src/components/Docs/Nav/dropdown.js

@@ -58,13 +58,21 @@ class Nav extends React.Component {
     ) : (
       <div>
         <div>
-          <select value={selectedSectionId} onChange={event => this.handleHeadingChange(event)}>
+          <select
+            className="custom-select custom-select-sm"
+            value={selectedSectionId}
+            onChange={event => this.handleHeadingChange(event)}
+          >
             {sections.map(section => this.renderHeadingOpts(section))}
           </select>
         </div>
 
         <div>
-          <select value={selectedItemId} onChange={event => this.handleNavChange(event)}>
+          <select
+            className="custom-select custom-select-sm"
+            value={selectedItemId}
+            onChange={event => this.handleNavChange(event)}
+          >
             {navs.map(nav => this.renderNavOpts(nav))}
           </select>
         </div>

docs/src/components/Docs/index.js

@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 
-import Header from '../Header';
+// import Header from '../Header';
+import Header from '../../new-components/layout/Header';
 import Container from './Container';
 import Footer from '../Footer';
 import './style.css';

docs/src/components/Homepage/MainLinks/index.js

@@ -78,10 +78,10 @@ class MainLinks extends React.Component {
               </Link>
               <ul>
                 <li>
-                  <Link to="/basics/quick-start-guide/">Quick setup</Link>
+                  <Link to="/guides/quick-start-guide/">Quick setup</Link>
                 </li>
                 <li>
-                  <Link to="/basics/slow-start-guide/">Adding to existing project</Link>
+                  <Link to="/guides/slow-start-guide/">Adding to existing project</Link>
                 </li>
                 <li>
                   <Link to="/basics/writing-stories/">Writing stories</Link>

docs/src/css/main.css

@@ -1,4 +1,4 @@
-@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800';
+/* @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;
@@ -16,6 +16,6 @@ a:focus {
 
 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}}

docs/src/new-components/basics/Icon.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { color } from './shared/styles';
+import icons from './shared/icons';
+
+const Svg = styled.svg`
+  display: inline-block;
+  vertical-align: middle;
+`;
+
+const Path = styled.path`
+  fill: ${color.darkest};
+`;
+
+function Icon({ icon, ...props }) {
+  return (
+    <Svg viewBox="0 0 1024 1024" width="20px" height="20px" {...props}>
+      <Path d={icons[icon]} />
+    </Svg>
+  );
+}
+
+Icon.propTypes = {
+  icon: PropTypes.string.isRequired,
+};
+
+export default Icon;