feat: add tab navigation in component pages (#17)

* feat: add tab navigation in component pages

* refactor: change tabs' styles

Author: ainursharaev

gatsby-theme-woly/gatsby-node.js

@@ -7,6 +7,7 @@
 const pathsPath = require.resolve('./src/paths.js');
 const { paths } = require(pathsPath);
 const fs = require('fs');
+const path = require('path');
 
 try {
   require.resolve(`babel-plugin-extract-react-types`);
@@ -46,23 +47,55 @@ async function createUsagePages({ actions, graphql, reporter }) {
 
   const component = require.resolve('./src/templates/usage.js');
 
-  result.data.usages.nodes.forEach(({ id, fileAbsolutePath }) => {
-    const [_, name, category, packageName] = fileAbsolutePath
-      .split('/')
-      .reverse();
+  const groupedMdx = result.data.usages.nodes.reduce(
+    (all, { id, fileAbsolutePath }) => {
+      const [filename, name, category, packageName] = fileAbsolutePath
+        .split('/')
+        .reverse();
+
+      const key = `${packageName}-${category}-${name}`;
+      const type = path.basename(filename, '.mdx');
+
+      if (!all[key]) {
+        all[key] = {
+          id,
+          name,
+          category,
+          package: packageName,
+          ids: [],
+          pages: {},
+        };
+      }
 
-    actions.createPage({
-      id,
-      path: paths.componentPage({ package: packageName, category, name }),
-      component,
-      context: {
-        pageID: id,
+      all[key].ids.push(id);
+      all[key].pages[id] = {
         name,
         category,
         package: packageName,
-      },
-    });
-  });
+        type,
+      };
+
+      return all;
+    },
+    {},
+  );
+
+  Object.values(groupedMdx).forEach(
+    ({ id, name, category, package: p, ids, pages }) => {
+      actions.createPage({
+        id,
+        path: paths.componentPage({ package: p, category, name }),
+        component,
+        context: {
+          ids,
+          package: p,
+          category,
+          name,
+          pages,
+        },
+      });
+    },
+  );
 }
 
 exports.onPostBuild = async (gatsby) => {

gatsby-theme-woly/src/components/tabs.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import styled from 'styled-components';
+/**
+ * TODO: set active tab from url
+ */
+
+export const Tabs = ({ data }) => {
+  const [activeIndex, setActiveIndex] = React.useState(0);
+
+  if (data.length === 0) {
+    console.warn('pass at least one tab data element');
+    return null;
+  }
+
+  if (data.length === 1) {
+    const [{ header, content, meta }] = data;
+
+    return (
+      <>
+        {header?.(meta)}
+        {content}
+      </>
+    );
+  }
+
+  const renderTabLabels = () => {
+    return (
+      <TabLabels>
+        {data.map(({ label }, index) => (
+          <TabLabel
+            key={label}
+            data-active={index === activeIndex}
+            onClick={() => setActiveIndex(index)}
+          >
+            {label}
+          </TabLabel>
+        ))}
+      </TabLabels>
+    );
+  };
+
+  const renderTabContent = () => {
+    const tabContent = data[activeIndex];
+
+    if (tabContent) {
+      const { meta, content, header } = tabContent;
+
+      return (
+        <TabContent>
+          {header?.(meta)}
+          {content}
+        </TabContent>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <>
+      {renderTabLabels()}
+      {renderTabContent()}
+    </>
+  );
+};
+
+const TabLabels = styled.div`
+  display: flex;
+
+  & > * + * {
+    margin-left: 1rem;
+  }
+`;
+
+const TabLabel = styled.button`
+  padding: 9px 15px;
+  font-size: inherit;
+  font-family: inherit;
+  background: none;
+  border: none;
+  border-bottom: var(--highlight-border);
+
+  &[data-active='true'] {
+    border-bottom-color: var(--accent);
+  }
+`;
+
+const TabContent = styled.div`
+  padding-top: 12px;
+
+  &[data-active='false'] {
+    display: none;
+  }
+`;

gatsby-theme-woly/src/lib/constants.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { pascalCase } from 'change-case';
+
+export const pageSections = [
+  {
+    code: 'usage',
+    label: 'Usage',
+    renderHeader: (meta) => {
+      return (
+        <pre>
+          import {'{'} {pascalCase(meta.name)} {'}'} from "{meta.package}
+          ";
+        </pre>
+      );
+    },
+  },
+  { code: 'specification', label: 'Specification' },
+  { code: 'state', label: 'State Map' },
+];

gatsby-theme-woly/src/templates/usage.js

@@ -1,41 +1,57 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
-import { pascalCase } from 'change-case';
 import { Layout } from '../components/layout';
+import { Tabs } from '../components/tabs';
 
-const installation = ({ package: p }) =>
-  `npm install ${p}
-# or
-yarn add ${p}`;
+import { pageSections } from '../lib/constants';
+
+const getTabData = ({ pages, mapper }) => {
+  return mapper.reduce((all, { code, label, renderHeader }) => {
+    const page = pages.find((page) => page.meta.type === code);
+
+    if (page) {
+      all.push({
+        label,
+        meta: page.meta,
+        content: <MDXRenderer>{page.body}</MDXRenderer>,
+        header: renderHeader,
+      });
+    }
+
+    return all;
+  }, []);
+};
 
 const ComponentPage = ({ data, pageContext }) => {
-  const { body } = data.usage;
-  const { name, category, package: packageName } = pageContext;
+  const pages = data.allMdx.nodes.map(({ id, body }) => {
+    const meta = pageContext.pages[id];
+
+    return {
+      meta,
+      body,
+    };
+  });
+
+  const tabData = getTabData({ pages, mapper: pageSections });
 
   return (
     <Layout>
       <div>
-        <h2>{name}</h2>
-        <pre>
-          import {'{'} {pascalCase(name)} {'}'} from "{packageName}";
-        </pre>
-        {/* <h3>Installation</h3> */}
-        {/* prettier-ignore */}
-        {/* <pre>
-          {installation(frontmatter)}
-        </pre> */}
-        <MDXRenderer>{body}</MDXRenderer>
+        <h2>{pageContext.name}</h2>
+        <Tabs data={tabData} />
       </div>
     </Layout>
   );
 };
 
 export const pageQuery = graphql`
-  query($pageID: String!) {
-    usage: mdx(id: { eq: $pageID }) {
-      fileAbsolutePath
-      body
+  query($ids: [String]) {
+    allMdx(filter: { id: { in: $ids } }) {
+      nodes {
+        id
+        body
+      }
     }
   }
 `;