Addons catalog integrate back-end

* Addon detail pages * Search * Wire up Popular and trending addons for home page * Linked tags
storybookjs · Jan 15, 2021 · c9bb8f2 · c9bb8f2
1 parent 5416cef
commit c9bb8f2
Show file tree

Hide file tree

Showing 36 changed files with 1,421 additions and 4,288 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -60,6 +60,13 @@ module.exports = {
       )
     );
 
+    config.resolve.alias['../../../hooks/use-addons-search'] = require.resolve(
+      './use-addons-search.mock.js'
+    );
+    config.resolve.alias['../../../hooks/use-addons-related-tags'] = require.resolve(
+      './use-addons-related-tags.mock.js'
+    );
+
     config.plugins.unshift(
       new webpack.DefinePlugin({
         'process.env.GATSBY_ALGOLIA_API_KEY': JSON.stringify(process.env.GATSBY_ALGOLIA_API_KEY),

diff --git a/.storybook/use-addons-related-tags.mock.js b/.storybook/use-addons-related-tags.mock.js
@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+const relatedTags = [
+  {
+    link: '/notes',
+    name: '🗒 Notes',
+  },
+  {
+    link: '/storybook',
+    name: '📕 Storybook',
+  },
+  {
+    link: '/qa',
+    name: '🕵️‍♀️ QA',
+  },
+  {
+    link: '/prototype',
+    name: '✨ Prototype',
+  },
+  {
+    link: '/testing',
+    name: '✅ Testing',
+  },
+  {
+    link: '/deploy',
+    name: '☁️ Deploy',
+  },
+];
+
+export const useAddonsRelatedTags = () => {
+  return relatedTags;
+};
diff --git a/.storybook/use-addons-search.mock.js b/.storybook/use-addons-search.mock.js
@@ -0,0 +1,67 @@
+import { useState } from 'react';
+
+let search = { isSearching: false, isSearchLoading: false, noResults: false };
+
+export const useAddonsSearch = () => {
+  const [seachData] = useState(search);
+
+  return seachData;
+};
+
+export const UseAddonsSearchDecorator = (story, context) => {
+  search = {
+    query: context.parameters.isSearching ? 'layout' : '',
+    setQuery: () => {},
+    isSearching: context.parameters.isSearching || false,
+    isSearchLoading: context.parameters.isSearchLoading || false,
+    results: context.parameters.noResults ? { search: [], relatedTags: [] } : mockResults,
+  };
+
+  return story();
+};
+
+const mockResults = {
+  search: [
+    {
+      id: 'storybook-addon-outline',
+      name: 'storybook-addon-outline',
+      displayName: 'Outline',
+      description: 'Outline all elements with CSS to help with layout placement and alignment',
+      icon:
+        'https://user-images.githubusercontent.com/263385/101991674-48355c80-3c7c-11eb-9686-f684e755fcdd.png',
+      authors: [
+        {
+          id: 'winkervsbecks',
+          avatarUrl: '//www.gravatar.com/avatar/dc3909557c0f933a066fe5faea796fdf?s=200',
+          name: 'winkervsbecks',
+        },
+      ],
+      weeklyDownloads: 65,
+      repositoryUrl: 'https://github.com/chromaui/storybook-outline',
+      appearance: 'official',
+      verifiedCreator: null,
+    },
+  ],
+  relatedTags: [
+    {
+      name: 'docz',
+      link: '/addons/docz',
+    },
+    {
+      name: 'md',
+      link: '/addons/md',
+    },
+    {
+      name: 'storybook',
+      link: '/addons/jss',
+    },
+    {
+      name: 'addon',
+      link: '/addons/end-to-end',
+    },
+    {
+      name: 'storybookjs',
+      link: '/addons/hooks',
+    },
+  ],
+};
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -1,5 +1,5 @@
 /* eslint-env browser */
-exports.onRouteUpdate = ({ location }) => {
+exports.onRouteUpdate = ({ location, prevLocation }) => {
   if (
     location.pathname.match(/iframe/) ||
     !window.analytics ||

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -8,17 +8,30 @@ require('dotenv').config({
 
 module.exports = {
   siteMetadata,
+  flags: {
+    PRESERVE_WEBPACK_CACHE: true,
+    FAST_DEV: true,
+    QUERY_ON_DEMAND: true,
+  },
   plugins: [
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-typescript',
-    'gatsby-transformer-yaml',
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `images`,
         path: `${__dirname}/src/images`,
       },
     },
+    {
+      resolve: 'gatsby-source-graphql',
+      options: {
+        fieldName: `addons`,
+        url: `https://boring-heisenberg-43a6ed.netlify.app/`,
+        typeName: `ADDON`,
+        // refetchInterval: 60,
+      },
+    },
     'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
     {

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -1,11 +1,15 @@
 const fs = require('fs');
 const path = require('path');
+const remark = require('remark');
+const remarkHTML = require('remark-html');
 
 const { createFilePath } = require(`gatsby-source-filesystem`);
 
 const { toc: docsToc } = require('./src/content/docs/toc');
-const { categories: addonCategories } = require('./src/content/addons/categories');
 const buildPathWithFramework = require('./src/util/build-path-with-framework');
+const buildTagLinks = require('./src/util/build-tag-links');
+
+const processor = remark().use(remarkHTML);
 
 const githubDocsBaseUrl = 'https://github.com/storybookjs/storybook/tree/next';
 const addStateToToc = (items, pathPrefix = '/docs') =>
@@ -64,32 +68,20 @@ exports.onCreatePage = ({ page, actions }) => {
   }
 };
 
-const addonsByCategoryQuery = Object.keys(addonCategories)
-  .map(
-    (categoryType) => `
-    ${categoryType}Addons: allAddonsYaml(filter: { tags: { eq: "${addonCategories[categoryType].id}" } }) {
-      nodes {
-        id: name
-        name
-        displayName
-        description
-        icon
-        authors {
-          id: username
-          avatarUrl: gravatarUrl
-          name: username
-        }
-        weeklyDownloads
-        tags
-        repositoryUrl
-        addonUrl: npmUrl
-        appearance: verified
-        verifiedCreator
-      }
-    }
-  `
-  )
-  .join('');
+const addonDetail = `
+  id: name
+  name
+  displayName
+  description
+  icon
+  authors {
+    id: username
+    avatarUrl: gravatarUrl
+    name: username
+  }
+  weeklyDownloads
+  appearance: verified
+  verifiedCreator`;
 
 exports.createPages = ({ actions, graphql }) => {
   const { createRedirect, createPage } = actions;
@@ -121,23 +113,61 @@ exports.createPages = ({ actions, graphql }) => {
             }
           }
         }
+        addons {
+          addonPages: top(sort: monthlyDownloads) {
+            ${addonDetail}
+            tags {
+              name
+              displayName
+              description
+              icon
+            }
+            compatibility {
+              name
+              displayName
+              icon
+            }
+            status
+            readme
+            publishedAt
+            repositoryUrl
+            homepageUrl
+          }
+          tagPages: tags(isCategory: false) {
+            name
+            displayName
+            description
+            icon
+            addons: top(sort: monthlyDownloads) {
+              ${addonDetail}
+            }
+          }
+          categoryPages: tags(isCategory: true) {
+            name
+            displayName
+            description
+            icon
+            addons: top(sort: monthlyDownloads) {
+              ${addonDetail}
+            }
+          }
+        }
         site {
           siteMetadata {
             coreFrameworks
             communityFrameworks
           }
         }
-        ${addonsByCategoryQuery}
       }
     `).then(
       ({
         data: {
           docsPages: { edges: docsPagesEdges },
           releasePages: { edges: releasePagesEdges },
+          addons: { addonPages, tagPages, categoryPages },
           site: {
             siteMetadata: { coreFrameworks, communityFrameworks },
           },
-          ...addonsByCategory
         },
       }) => {
         const sortedReleases = releasePagesEdges.sort(
@@ -258,22 +288,43 @@ exports.createPages = ({ actions, graphql }) => {
           });
         }
 
-        const createAddonCategoryPage = (category, addons) =>
+        addonPages.forEach((addon) => {
+          createPage({
+            path: `/addons/${addon.name}`,
+            component: path.resolve(
+              `./src/components/screens/AddonsDetailScreen/AddonsDetailScreen.js`
+            ),
+            context: {
+              ...addon,
+              tags: buildTagLinks(addon.tags),
+              readme: processor.processSync(addon.readme).toString(),
+            },
+          });
+        });
+
+        tagPages.forEach((tag) => {
           createPage({
-            path: category.path,
+            path: `/addons/${tag.name}`,
+            component: path.resolve(`./src/components/screens/AddonsTagScreen/AddonsTagScreen.js`),
+            context: {
+              tag,
+              name: tag.name,
+            },
+          });
+        });
+
+        categoryPages.forEach((category) => {
+          createPage({
+            path: `/addons/${category.name}`,
             component: path.resolve(
               `./src/components/screens/AddonsCategoryScreen/AddonsCategoryScreen.js`
             ),
             context: {
-              category: category.name,
+              category: category.displayName,
               description: category.description,
-              addons,
+              addons: category.addons,
             },
           });
-
-        Object.keys(addonCategories).forEach((categoryType) => {
-          const addons = addonsByCategory[`${categoryType}Addons`].nodes;
-          createAddonCategoryPage(addonCategories[categoryType], addons);
         });
 
         resolve();

diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "gatsby-remark-copy-linked-files": "^2.3.11",
     "gatsby-remark-link-rewrite": "^0.2.1",
     "gatsby-source-filesystem": "^2.3.18",
+    "gatsby-source-graphql": "^2.11.0",
     "gatsby-transformer-sharp": "^2.5.10",
     "gatsby-transformer-yaml": "^2.7.0",
     "global": "^4.4.0",
@@ -56,6 +57,7 @@
     "react-helmet": "^5.2.1",
     "react-lazyload": "^2.6.5",
     "recompose": "^0.30.0",
+    "remark-html": "^13.0.1",
     "request": "^2.88.2",
     "semver": "^7.3.2",
     "styled-components": "^4.4.1",

diff --git a/src/components/basics/Breadcrumb.js b/src/components/basics/Breadcrumb.js
@@ -3,13 +3,19 @@ import styled from 'styled-components';
 import { styles, Icon } from '@storybook/design-system';
 import GatsbyLink from './GatsbyLink';
 
-const { typography } = styles;
+const { breakpoint, typography } = styles;
 
 const BreadcrumbLink = styled(GatsbyLink)`
   font-size: ${typography.size.s2}px;
   line-height: ${typography.size.m2}px;
   font-weight: ${typography.weight.bold};
-  margin-bottom: 8px;
+  margin-top: 16px;
+  margin-bottom: 16px;
+
+  @media (min-width: ${breakpoint * 1.333}px) {
+    margin-top: 0;
+    margin-bottom: 8px;
+  }
 `;
 
 export const Breadcrumb = ({ children, ...props }) => (