chore(react-core, react-docs): added ability to add demos to react-do…

…cs. (#711) affects: @patternfly/react-core, @patternfly/react-docs ISSUES CLOSED: #690
patternfly · Oct 5, 2018 · 0d86301 · 0d86301
1 parent e1c90b6
commit 0d86301
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 13 deletions.
diff --git a/packages/patternfly-4/react-core/.babelrc b/packages/patternfly-4/react-core/.babelrc
@@ -1,5 +1,6 @@
 {
   "presets": ["../.babelrc.js"],
+  "ignore": ["demos"],
   "env": {
     "production:esm": {
       "plugins": [

diff --git a/packages/patternfly-4/react-core/src/demos/README.md b/packages/patternfly-4/react-core/src/demos/README.md
@@ -0,0 +1 @@
+This folder contains demos that show case the PatternFly components used in a variety of use cases. Demos should be placed in a sub folder with the name of the demo. For example a demo for PageLayout would found in src/demos/PageLayout.
diff --git a/packages/patternfly-4/react-docs/gatsby-node.js b/packages/patternfly-4/react-docs/gatsby-node.js
@@ -34,7 +34,7 @@ exports.modifyWebpackConfig = ({ config, stage }) => {
   return config;
 };
 
-const componentPathRegEx = /(components|layouts)\//;
+const componentPathRegEx = /(components|layouts|demos)\//;
 
 exports.onCreateNode = ({ node, boundActionCreators }) => {
   const { createNodeField } = boundActionCreators;

diff --git a/packages/patternfly-4/react-docs/src/components/navigation/navigation.js b/packages/patternfly-4/react-docs/src/components/navigation/navigation.js
@@ -14,12 +14,14 @@ const routeShape = PropTypes.shape({
 
 const propTypes = {
   componentRoutes: PropTypes.arrayOf(routeShape),
-  layoutRoutes: PropTypes.arrayOf(routeShape)
+  layoutRoutes: PropTypes.arrayOf(routeShape),
+  demoRoutes: PropTypes.arrayOf(routeShape)
 };
 
 const defaultProps = {
   componentRoutes: [],
-  layoutRoutes: []
+  layoutRoutes: [],
+  demoRoutes: []
 };
 
 class Navigation extends React.Component {
@@ -37,14 +39,16 @@ class Navigation extends React.Component {
   };
 
   render() {
-    const { componentRoutes, layoutRoutes } = this.props;
+    const { componentRoutes, layoutRoutes, demoRoutes } = this.props;
     const { searchValue } = this.state;
     const searchRE = new RegExp(searchValue, 'i');
 
     const filteredComponentRoutes = componentRoutes.filter(c => searchRE.test(c.label));
 
     const filteredLayoutRoutes = layoutRoutes.filter(c => searchRE.test(c.label));
 
+    const filteredDemoRoutes = demoRoutes.filter(c => searchRE.test(c.label));
+
     return (
       <div className={css(styles.navigation)}>
         <div className={css(styles.navigationContent)}>
@@ -84,6 +88,15 @@ class Navigation extends React.Component {
               ))}
             </NavigationItemGroup>
           )}
+          {Boolean(filteredDemoRoutes.length) && (
+            <NavigationItemGroup title="Demos">
+              {filteredDemoRoutes.map(route => (
+                <NavigationItem key={route.label} to={route.to}>
+                  {route.label}
+                </NavigationItem>
+              ))}
+            </NavigationItemGroup>
+          )}
         </div>
       </div>
     );

diff --git a/packages/patternfly-4/react-docs/src/layouts/index.js b/packages/patternfly-4/react-docs/src/layouts/index.js
@@ -20,15 +20,26 @@ const propTypes = {
 };
 
 const Layout = ({ children, data }) => {
-  const componentRoutes = data.componentPages.edges.map(e => ({
-    to: e.node.path,
-    label: e.node.fields.label
-  }));
+  const componentRoutes = data.componentPages
+    ? data.componentPages.edges.map(e => ({
+        to: e.node.path,
+        label: e.node.fields.label
+      }))
+    : [];
 
-  const layoutRoutes = data.layoutPages.edges.map(e => ({
-    to: e.node.path,
-    label: e.node.fields.label
-  }));
+  const layoutRoutes = data.layoutPages
+    ? data.layoutPages.edges.map(e => ({
+        to: e.node.path,
+        label: e.node.fields.label
+      }))
+    : [];
+
+  const demoRoutes = data.demoPages
+    ? data.demoPages.edges.map(e => ({
+        to: e.node.path,
+        label: e.node.fields.label
+      }))
+    : [];
 
   return (
     <React.Fragment>
@@ -41,7 +52,9 @@ const Layout = ({ children, data }) => {
       </Helmet>
       <Page
         title="Patternfly React"
-        navigation={<Navigation componentRoutes={componentRoutes} layoutRoutes={layoutRoutes} />}
+        navigation={
+          <Navigation componentRoutes={componentRoutes} layoutRoutes={layoutRoutes} demoRoutes={demoRoutes} />
+        }
       >
         {children()}
       </Page>
@@ -81,5 +94,15 @@ export const query = graphql`
         }
       }
     }
+    demoPages: allSitePage(filter: { path: { glob: "**/demos/*" } }, sort: { fields: [fields___label], order: ASC }) {
+      edges {
+        node {
+          path
+          fields {
+            label
+          }
+        }
+      }
+    }
   }
 `;