feat(PPDSC-2500): add storybook urls to component pages

.circleci/config.yml

@@ -1277,6 +1277,7 @@ workflows:
           requires:
             - build_docs_pr_with_no_base_url
             - install_cypress
+            - build_storybook
       - no_visual_changes:
           type: approval
           requires:

.storybook/main.js

@@ -69,4 +69,7 @@ module.exports = {
     reactDocgen: false, // added to negate https://github.com/styleguidist/react-docgen-typescript/issues/356
   },
   staticDirs: ['../fonts', '../static', 'private-fonts'],
+  // we need the stories.json file to be generated so that we can check that all
+  // Storybook urls in the doc site build are valid
+  features: {buildStoriesJson: true,}
 };

cypress/plugins/index.js

@@ -1,3 +1,50 @@
-module.exports = () => {};
+const path = require('path');
+const fs = require('fs');
+
+// This function recursively loops through a dir and all subdirs and returns
+// an array of all file paths found.
+async function getAllFilePaths(dir) {
+  const subDirs = await fs.promises.readdir(dir);
+  const files = await Promise.all(
+    subDirs.map(async subDir => {
+      const res = path.resolve(dir, subDir);
+      return (await fs.promises.stat(res)).isDirectory()
+        ? getAllFilePaths(res)
+        : res;
+    }),
+  );
+  return files.reduce((a, f) => a.concat(f), []);
+}
+
+// This function reads all files at the paths passed and returns an array of their contents.
+async function readFiles(filePaths) {
+  const promises = filePaths.map(filePath =>
+    fs.promises
+      .readFile(filePath)
+      .then(buffer => buffer.toString())
+      .then(contents => ({
+        filePath,
+        contents,
+      })),
+  );
+  const results = await Promise.all(promises);
+  return results;
+}
+
+// This function reads all files in the dir passed (and its subdirs) and returns
+// an array of their contents.
+async function readAllFilesInDir(dir) {
+  const filePaths = await getAllFilePaths(dir);
+  const results = await readFiles(filePaths);
+  return results;
+}
+
+module.exports = on => {
+  on('task', {
+    readAllFilesInDir(dir) {
+      return readAllFilesInDir(dir);
+    },
+  });
+};
 
 require('@applitools/eyes-cypress')(module);

cypress/site/functional/storybook-links.spec.js

@@ -0,0 +1,34 @@
+// /<reference types="Cypress" />
+
+const STORY_URL = /https:\/\/storybook\.newskit\.co\.uk\/\?path=\/docs\/[-a-zA-Z\\d()@:%_\\+.~#?&/=]+/g;
+
+describe('Storybook links on component pages', () => {
+  it('should exist in the Storybook build', () => {
+    cy.readFile('dist-storybook/stories.json').then(({stories}) => {
+      const validStoryUrls = Object.keys(stories).map(
+        id => `https://storybook.newskit.co.uk/?path=/docs/${id}`,
+      );
+      cy.task('readAllFilesInDir', 'public').then(files => {
+        const usedStoryUrls = files
+          .reduce(
+            (prev, {contents}) => [
+              ...prev,
+              ...Array.from(contents.matchAll(STORY_URL), x => x[0]),
+            ],
+            [],
+          )
+          .filter((value, index, arr) => arr.indexOf(value) === index);
+        const invalidStoryUrls = usedStoryUrls.filter(
+          url => !validStoryUrls.includes(url),
+        );
+        if (invalidStoryUrls.length) {
+          cy.fail(
+            `Found ${invalidStoryUrls.length} invalid Storybook URL${
+              invalidStoryUrls.length > 1 ? 's' : ''
+            } in build: ${invalidStoryUrls.join(', ')}`,
+          );
+        }
+      });
+    });
+  });
+});

site/components/icons/icon-filled-storybook.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {Svg, customToNewsKitIcon} from 'newskit';
+
+export const IconFilledStorybook = customToNewsKitIcon(
+  'IconFilledStorybook',
+  props => (
+    <Svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M4.61824 20.4293L4.00072 3.92089C3.98032 3.37568 4.397 2.91362 4.93974 2.87959L18.9352 2.00199C19.4877 1.96735 19.9635 2.38859 19.998 2.94286C19.9993 2.96374 20 2.98466 20 3.00558V20.9945C20 21.5498 19.5513 22 18.9978 22C18.9828 22 18.9678 21.9997 18.9528 21.999L5.57482 21.3962C5.0538 21.3727 4.6378 20.9522 4.61824 20.4293Z"
+        fill="#FF4785"
+      />
+      <path
+        d="M15.8555 4.42657L15.9531 2.14956L17.9154 2L17.9999 4.34821C18.0028 4.42993 17.9369 4.49849 17.8527 4.50135C17.8166 4.50257 17.7813 4.49135 17.7529 4.46968L16.9962 3.89144L16.1003 4.55068C16.0331 4.6001 15.9374 4.58735 15.8864 4.5222C15.865 4.49478 15.854 4.46096 15.8555 4.42657ZM13.346 9.44092C13.346 9.82708 16.0275 9.642 16.3875 9.37075C16.3875 6.74106 14.9328 5.3592 12.2692 5.3592C9.60547 5.3592 8.11304 6.76256 8.11304 8.8676C8.11304 12.5339 13.2137 12.604 13.2137 14.6038C13.2137 15.1652 12.9304 15.4985 12.3069 15.4985C11.4946 15.4985 11.1735 15.096 11.2112 13.7278C11.2112 13.4309 8.11304 13.3384 8.01859 13.7278C7.77806 17.0436 9.90773 18 12.3447 18C14.7062 18 16.5575 16.779 16.5575 14.5687C16.5575 10.6393 11.3813 10.7446 11.3813 8.79743C11.3813 8.00804 11.9858 7.90279 12.3447 7.90279C12.7226 7.90279 13.4026 7.96739 13.346 9.44092Z"
+        fill="white"
+      />
+    </Svg>
+  ),
+);