chore(pf4-docs): show components as secondary items and package (#928)

* chore(pf4-docs): show components as secondary items and package * remove pascal-case * try gatsby/webpack patch from gatsbyjs/gatsby#1846 (comment) * fix error reserved keyword switch * remove patch * patch again * try out different travis build env * travis linux build * reset travis config
patternfly · Nov 21, 2018 · ba74ec0 · ba74ec0
1 parent d55f391
commit ba74ec0
Show file tree

Hide file tree

Showing 11 changed files with 153 additions and 37 deletions.
diff --git a/packages/patternfly-4/react-docs/gatsby-browser.js b/packages/patternfly-4/react-docs/gatsby-browser.js
@@ -1 +1,13 @@
-// noop
+/* global window, document */
+const scrollTo = id => () => {
+  const el = document.querySelector(id);
+  if (el) return window.scrollTo(0, el.offsetTop - 20);
+  return false;
+};
+
+export const onRouteUpdate = ({ location: { hash } }) => {
+  // console.log(location)
+  if (hash) {
+    window.setTimeout(scrollTo(hash), 10);
+  }
+};
diff --git a/packages/patternfly-4/react-docs/gatsby-node.js b/packages/patternfly-4/react-docs/gatsby-node.js
@@ -1,5 +1,4 @@
 const path = require(`path`);
-const pascalCase = require('pascal-case');
 const paramCase = require('param-case');
 const fs = require('fs-extra'); //eslint-disable-line
 
@@ -41,15 +40,16 @@ const componentPathRegEx = /(components|layouts|demos)\//;
 exports.onCreateNode = ({ node, boundActionCreators }) => {
   const { createNodeField } = boundActionCreators;
   if (node.internal.type === 'SitePage' && componentPathRegEx.test(node.path)) {
-    const pathLabel = node.path
+    const pathLabel = node.component
       .split('/')
-      .filter(Boolean)
-      .pop();
+      .pop()
+      .split('.')
+      .shift();
 
     createNodeField({
       node,
       name: 'label',
-      value: pascalCase(pathLabel)
+      value: pathLabel
     });
   }
 };
@@ -90,20 +90,21 @@ exports.createPages = async ({ boundActionCreators, graphql }) => {
       }
     }
   `);
+  const docExports = [];
   const docsComponentPath = path.resolve(__dirname, './src/components/componentDocs');
   docs.edges.forEach(({ node: doc }) => {
     const filePath = path.resolve(__dirname, '.tmp', doc.base);
 
     const rawExamples = [];
+    const getPackage = pkg => doc.absolutePath.indexOf(pkg) !== -1 && pkg;
+    const packageDir = getPackage('react-core') || getPackage('react-charts') || getPackage('react-styled-system');
     examples.edges.forEach(({ node: example }) => {
       if (
         example.relativeDirectory
           .split('/')
           .slice(0, 2)
           .join('/') === doc.relativeDirectory
       ) {
-        const getPackage = pkg => doc.absolutePath.indexOf(pkg) !== -1 && pkg;
-        const packageDir = getPackage('react-core') || getPackage('react-charts') || getPackage('react-styled-system');
         const examplePath = `../../${packageDir}/src/${example.relativePath}`;
         rawExamples.push(`{name: '${example.name}', path: '${examplePath}', file: require('!!raw!${examplePath}')}`);
       }
@@ -122,15 +123,28 @@ exports.createPages = async ({ boundActionCreators, graphql }) => {
     const rawExamples = [${rawExamples}];
     const images = [${allImages}];
 
-    export default () => <ComponentDocs rawExamples={rawExamples} images={images} {...docs} />
+    export const ${doc.base.split('.')[0].toLowerCase()}_docs = docs;
+    export const ${doc.base.split('.')[0].toLowerCase()}_package = '${packageDir}';
+
+    export default () => <ComponentDocs rawExamples={rawExamples} images={images} {...docs} />;
     `;
+
+    docExports.push(
+      `export { ${doc.base.split('.')[0].toLowerCase()}_docs, ${doc.base
+        .split('.')[0]
+        .toLowerCase()}_package } from './${doc.base}';`
+    );
+
     fs.outputFileSync(filePath, content);
     boundActionCreators.createPage({
       path: `/${path.dirname(doc.relativePath).toLowerCase()}`,
       component: filePath
     });
   });
 
+  const indexFilePath = path.resolve(__dirname, '.tmp', 'index.js');
+  fs.writeFileSync(indexFilePath, docExports.join('\n'));
+
   examples.edges.forEach(({ node: example }) => {
     const examplePath = `/${path.dirname(example.relativePath).toLowerCase()}/${paramCase(example.name)}`;
 

diff --git a/packages/patternfly-4/react-docs/package.json b/packages/patternfly-4/react-docs/package.json
@@ -26,7 +26,6 @@
     "gatsby-source-filesystem": "^1.5.36",
     "gatsby-transformer-react-docgen": "^1.0.17",
     "param-case": "^2.1.1",
-    "pascal-case": "^2.0.1",
     "prop-types": "^15.6.1",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
@@ -49,4 +48,4 @@
     "fs-extra": "^7.0.0",
     "glob": "^7.1.2"
   }
-}
+}
diff --git a/packages/patternfly-4/react-docs/src/components/navigation/navigation.js b/packages/patternfly-4/react-docs/src/components/navigation/navigation.js
@@ -9,7 +9,9 @@ import NavigationItem from './navigationItem';
 
 const routeShape = PropTypes.shape({
   to: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired
+  label: PropTypes.string.isRequired,
+  pkg: PropTypes.string,
+  components: PropTypes.array
 });
 
 const propTypes = {
@@ -43,9 +45,15 @@ class Navigation extends React.Component {
     const { searchValue } = this.state;
     const searchRE = new RegExp(searchValue, 'i');
 
-    const filteredComponentRoutes = componentRoutes.filter(c => searchRE.test(c.label));
+    const filteredComponentRoutes = componentRoutes.filter(c => {
+      c.filteredComponents = c.components.filter(component => searchRE.test(component.label));
+      return searchRE.test(c.label) || c.filteredComponents.length > 0;
+    });
 
-    const filteredLayoutRoutes = layoutRoutes.filter(c => searchRE.test(c.label));
+    const filteredLayoutRoutes = layoutRoutes.filter(c => {
+      c.filteredComponents = c.components.filter(component => searchRE.test(component.label));
+      return searchRE.test(c.label) || c.filteredComponents.length > 0;
+    });
 
     const filteredDemoRoutes = demoRoutes.filter(c => searchRE.test(c.label));
 
@@ -60,20 +68,25 @@ class Navigation extends React.Component {
           <div className={css(styles.search)}>
             <input
               className={css(styles.input)}
-              placeholder="Find components, templates,..."
+              placeholder="Search components"
               type="text"
               value={searchValue}
               onChange={this.handleSearchChange}
             />
           </div>
           <NavigationItemGroup title="Style">
-            <NavigationItem to="/styles/tokens">Tokens</NavigationItem>
-            <NavigationItem to="/styles/icons">Icons</NavigationItem>
+            <NavigationItem to="/styles/tokens" pkg="tokens">Tokens</NavigationItem>
+            <NavigationItem to="/styles/icons" pkg="icons">Icons</NavigationItem>
           </NavigationItemGroup>
           {Boolean(filteredComponentRoutes.length) && (
             <NavigationItemGroup title="Components">
               {filteredComponentRoutes.map(route => (
-                <NavigationItem key={route.label} to={route.to}>
+                <NavigationItem
+                  key={route.label}
+                  to={route.to}
+                  pkg={route.pkg}
+                  components={route.filteredComponents || route.components}
+                >
                   {route.label}
                 </NavigationItem>
               ))}
@@ -82,7 +95,12 @@ class Navigation extends React.Component {
           {Boolean(filteredLayoutRoutes.length) && (
             <NavigationItemGroup title="Layouts">
               {filteredLayoutRoutes.map(route => (
-                <NavigationItem key={route.label} to={route.to}>
+                <NavigationItem
+                  key={route.label}
+                  to={route.to}
+                  pkg={route.pkg}
+                  components={route.filteredComponents || route.components}
+                >
                   {route.label}
                 </NavigationItem>
               ))}

diff --git a/packages/patternfly-4/react-docs/src/components/navigation/navigation.styles.js b/packages/patternfly-4/react-docs/src/components/navigation/navigation.styles.js
@@ -30,7 +30,6 @@ export default StyleSheet.create({
   input: {
     padding: `${spacerSm.var} ${spacerXs.var}`,
     width: '100%',
-    border: 'none',
     fontSize: fontSizeXs.var
   }
 });
diff --git a/packages/patternfly-4/react-docs/src/components/navigation/navigationItem.js b/packages/patternfly-4/react-docs/src/components/navigation/navigationItem.js
@@ -3,20 +3,47 @@ import PropTypes from 'prop-types';
 import { css } from '@patternfly/react-styles';
 import styles from './navigationItem.styles';
 import Link from 'gatsby-link';
+import { Badge } from '@patternfly/react-core';
 
 const propTypes = {
   to: PropTypes.string.isRequired,
-  children: PropTypes.any.isRequired
+  children: PropTypes.any.isRequired,
+  pkg: PropTypes.string,
+  components: PropTypes.array
 };
 
-const NavigationItem = ({ to, children }) => (
+const defaultProps = {
+  pkg: '',
+  components: []
+};
+
+const pathPrefix = 'https://github.com/patternfly/patternfly-react/tree/master/packages/';
+const getPkgPrefix = pkg => (pkg === 'icons' ? 'react-icons' : `patternfly-4/react-${pkg}`);
+
+const NavigationItem = ({ to, children, pkg, components }) => (
   <li>
     <Link className={css(styles.navigationItem)} activeClassName={css(styles.active)} to={to}>
       {children}
     </Link>
+    <Badge isRead className={css(styles.badge)}>
+      <a target="_blank" href={`${pathPrefix}${getPkgPrefix(pkg)}`}>
+        {pkg}
+      </a>
+    </Badge>
+    {components &&
+      components.length > 0 && (
+        <ul className={css(styles.secondaryList)}>
+          {components.map(route => (
+            <li key={route.to}>
+              <Link className={css(styles.navigationItemSecondary)} to={route.to}>{`${route.label} Props`}</Link>
+            </li>
+          ))}
+        </ul>
+      )}
   </li>
 );
 
 NavigationItem.propTypes = propTypes;
+NavigationItem.defaultProps = defaultProps;
 
 export default NavigationItem;
diff --git a/packages/patternfly-4/react-docs/src/components/navigation/navigationItem.styles.js b/packages/patternfly-4/react-docs/src/components/navigation/navigationItem.styles.js
@@ -3,13 +3,17 @@ import {
   global_spacer_sm as spacerSm,
   global_spacer_xs as spacerXs,
   global_spacer_xl as spacerXl,
+  global_spacer_3xl as spacer3Xl,
   global_Color_dark_100 as itemColor,
-  global_BackgroundColor_300 as bgColorHover
+  global_BackgroundColor_300 as bgColorHover,
+  global_BackgroundColor_200,
+  global_FontSize_sm,
+  global_FontSize_xs,
 } from '@patternfly/react-tokens';
 
 export default StyleSheet.create({
   navigationItem: {
-    padding: `${spacerSm.var} ${spacerXs.var} ${spacerSm.var} ${spacerXl.var}`,
+    padding: `${spacerXs.var} ${spacerXs.var} ${spacerXs.var} ${spacerXl.var}`,
     display: 'block',
     color: itemColor.var,
     textDecoration: 'none',
@@ -18,7 +22,26 @@ export default StyleSheet.create({
       textDecoration: 'none'
     }
   },
+  navigationItemSecondary: {
+    padding: `${spacerXs.var} ${spacerXs.var} ${spacerXs.var} ${spacer3Xl.var}`,
+    display: 'block',
+    color: itemColor.var,
+    textDecoration: 'none',
+    ':hover': {
+      backgroundColor: global_BackgroundColor_200.var,
+      textDecoration: 'none'
+    },
+    fontSize: global_FontSize_xs.var
+  },
   active: {
     backgroundColor: bgColorHover.var
+  },
+  badge: {
+    float: 'right',
+    marginTop: '-25px !important',
+    marginRight: '10px !important'
+  },
+  secondaryList: {
+    paddingBottom: spacerXs.var
   }
 });
diff --git a/packages/patternfly-4/react-docs/src/components/propsTable/propsTable.js b/packages/patternfly-4/react-docs/src/components/propsTable/propsTable.js
@@ -31,7 +31,12 @@ const defaultProps = {
 };
 
 export const PropsTable = ({ name, description: preface, props, enumValues }) => (
-  <Section title={`${name} Props`} preface={preface} description={`The ${name} component accepts the following props.`}>
+  <Section
+    name={name}
+    title={`${name} Props`}
+    preface={preface}
+    description={`The ${name} component accepts the following props.`}
+  >
     <Table>
       <Heading>
         <TH>Name</TH>

diff --git a/packages/patternfly-4/react-docs/src/components/section/section.js b/packages/patternfly-4/react-docs/src/components/section/section.js
@@ -5,6 +5,7 @@ import styles from './section.styles';
 import { Title } from '@patternfly/react-core';
 
 const propTypes = {
+  name: PropTypes.string,
   title: PropTypes.string,
   description: PropTypes.string,
   children: PropTypes.node,
@@ -13,18 +14,23 @@ const propTypes = {
 };
 
 const defaultProps = {
+  name: '',
   children: null,
   className: '',
   title: '',
   description: '',
   preface: ''
 };
 
-const Section = ({ children, className, title, description, preface, ...props }) => (
+const Section = ({ name, children, className, title, description, preface, ...props }) => (
   <section className={css(styles.section, className)}>
     {Boolean(title || description) && (
       <header className={css(styles.header)}>
-        {Boolean(title) && <Title size="lg">{title}</Title>}
+        {Boolean(title) && (
+          <Title size="lg" id={name}>
+            {title}
+          </Title>
+        )}
         {Boolean(preface) && <p className={css(styles.preface)}>{preface}</p>}
         {Boolean(description) && <p>{description}</p>}
       </header>

diff --git a/packages/patternfly-4/react-docs/src/layouts/index.js b/packages/patternfly-4/react-docs/src/layouts/index.js
@@ -4,6 +4,7 @@ import Page from '../components/page';
 import Navigation from '../components/navigation';
 import PropTypes from 'prop-types';
 import { withPrefix } from 'gatsby-link';
+import * as DocsFiles from '../../.tmp';
 
 // This is a gatsby limitation will be fixed in newer version
 let globalStyles = require(`!raw-loader!@patternfly/react-core/../dist/styles/base.css`);
@@ -20,25 +21,37 @@ const propTypes = {
 };
 
 const Layout = ({ children, data }) => {
+  const componentMapper = (path, label) => {
+    const { components } = DocsFiles[`${label.toLowerCase()}_docs`];
+    return Object.keys(components).map(k => ({
+      label: k,
+      to: `${path}#${k}`
+    }));
+  };
+  const getPackage = label => DocsFiles[`${label.toLowerCase()}_package`].substr(6);
   const componentRoutes = data.componentPages
     ? data.componentPages.edges.map(e => ({
-        to: e.node.path,
-        label: e.node.fields.label
-      }))
+      to: e.node.path,
+      label: e.node.fields.label,
+      pkg: getPackage(e.node.fields.label),
+      components: componentMapper(e.node.path, e.node.fields.label)
+    }))
     : [];
 
   const layoutRoutes = data.layoutPages
     ? data.layoutPages.edges.map(e => ({
-        to: e.node.path,
-        label: e.node.fields.label
-      }))
+      to: e.node.path,
+      label: e.node.fields.label,
+      pkg: getPackage(e.node.fields.label),
+      components: componentMapper(e.node.path, e.node.fields.label)
+    }))
     : [];
 
   const demoRoutes = data.demoPages
     ? data.demoPages.edges.map(e => ({
-        to: e.node.path,
-        label: e.node.fields.label
-      }))
+      to: e.node.path,
+      label: e.node.fields.label
+    }))
     : [];
 
   return (