Support showing Incubator components and Support unifying Internal components with parent component

Author: ethanshar

uilib-docs/configurations/pageCreators/createComponentPages.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const _ = require('lodash');
 
 module.exports = async ({graphql, boundActionCreators}) => {
   const {createPage} = boundActionCreators;
@@ -39,8 +40,12 @@ module.exports = async ({graphql, boundActionCreators}) => {
     }
   });
 
+  const allComponents = getRelevantComponents(
+    result.data.allComponentMetadata.edges
+  );
+
   // Create components pages
-  result.data.allComponentMetadata.edges.map(({node}) => {
+  allComponents.map(({node}) => {
     createPage({
       path: `/docs/${node.displayName}`,
       component: path.resolve('./src/templates/component.js'),
@@ -52,3 +57,31 @@ module.exports = async ({graphql, boundActionCreators}) => {
     });
   });
 };
+
+function getRelevantComponents(edges) {
+  const components = _.chain(edges)
+    /* Filter all Ignored components */
+    .filter(e => {
+      return e.node.displayName !== 'IGNORE';
+    })
+    /* Group internal components with parent component */
+    .groupBy(e => e.node.displayName)
+    .map((groupedEdged, id) => {
+      if (groupedEdged.length > 1) {
+        const edge = {
+          node: {
+            displayName: id,
+            docblock: _.find(groupedEdged, e => !!e.node.docblock),
+            description: _.find(groupedEdged, e => !!e.node.description),
+            props: _.reduce(groupedEdged, (props, e) => [...props, ...e.node.props], [])
+          }
+        };
+        return edge;
+      } else {
+        return groupedEdged[0];
+      }
+    })
+    .value();
+
+  return components;
+}

uilib-docs/configurations/plugins.js

@@ -34,6 +34,16 @@ const componentsDocgenPlugin = [
   }
 ];
 
+const incubatorComponentsDocgenPlugin = [
+  'gatsby-transformer-react-docgen',
+  {
+    resolve: 'gatsby-source-filesystem',
+    options: {
+      path: `${__dirname}/../../src/incubator/`
+    }
+  }
+];
+
 const nativeComponentsDocgenPlugin = [
   'gatsby-transformer-react-docgen',
   {
@@ -69,6 +79,7 @@ module.exports = {
   manifestPlugin,
   markdownPagesPlugin,
   componentsDocgenPlugin,
+  incubatorComponentsDocgenPlugin,
   nativeComponentsDocgenPlugin,
   imagesPlugin,
   layoutPlugin

uilib-docs/gatsby-config.js

@@ -1,4 +1,4 @@
-const {manifestPlugin, markdownPagesPlugin, componentsDocgenPlugin, nativeComponentsDocgenPlugin, imagesPlugin, layoutPlugin} = require('./configurations/plugins');
+const {manifestPlugin, markdownPagesPlugin, componentsDocgenPlugin, incubatorComponentsDocgenPlugin, nativeComponentsDocgenPlugin, imagesPlugin, layoutPlugin} = require('./configurations/plugins');
 
 module.exports = {
   pathPrefix: '/react-native-ui-lib',
@@ -12,6 +12,7 @@ module.exports = {
     `gatsby-plugin-sass`,
     ...markdownPagesPlugin,
     ...componentsDocgenPlugin,
+    ...incubatorComponentsDocgenPlugin,
     ...nativeComponentsDocgenPlugin,
     ...imagesPlugin,
     ...manifestPlugin,

uilib-docs/src/components/navbar/index.js

@@ -46,6 +46,7 @@ class Navbar extends Component {
     const components = data.allComponentMetadata.edges;
     const filteredComponents = _.chain(components)
       .filter(component => component.node.displayName !== 'IGNORE')
+      .uniqBy('node.displayName')
       .sortBy('node.displayName')
       .value();
 
@@ -77,7 +78,6 @@ class Navbar extends Component {
     const {filter} = this.state;
     const markdowns = this.getMarkdownPages(data);
     const components = this.getNavbarComponents(data);
-
     const filteredComponents = _.filter(components, component =>
       _.includes(_.lowerCase(component.node.displayName), _.lowerCase(filter))
     );

uilib-docs/src/components/navbar/item.js

@@ -5,6 +5,7 @@ import classnames from 'classnames';
 
 export default ({id, link, components, currentPage}) => {
   const hasChildren = _.size(components) > 1;
+
   if (!hasChildren) {
     return <ItemEntry id={id} link={link} currentPage={currentPage} />;
   } else {
@@ -17,7 +18,7 @@ export default ({id, link, components, currentPage}) => {
         </Link>
 
         <ul class="nested">
-          {_.map(_.drop(components, 1), c => {
+          {_.map(_.filter(components, c => c.node.displayName !== id), c => {
             return (
               <ItemEntry id={c.node.displayName} currentPage={currentPage} />
             );