chore(PPDSC-2234): investigate Storybook analytics

.storybook/addons/tealium/preset.js

@@ -0,0 +1,5 @@
+function managerEntries(entry = [], options) {
+  return [...entry, require.resolve('./register')];
+}
+
+module.exports = {managerEntries};

.storybook/addons/tealium/register.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import {addons, types} from '@storybook/addons';
+import {STORY_CHANGED, STORY_SPECIFIED} from '@storybook/core-events';
+import Helmet from 'react-helmet';
+import {IconButton, Icons} from '@storybook/components';
+
+import {
+  Consent,
+  Tealium,
+  ConsentSettingsLink,
+  newskitLightTheme,
+  NewsKitProvider,
+  Tooltip,
+} from '../../../src';
+
+const sendEvent = api => {
+  const {path} = api.getUrlState();
+  const storyData = api.getCurrentStoryData();
+  let pageName = '';
+  if (storyData) {
+    const {title, story} = storyData;
+    pageName = `${title.replace('NewsKit Light/', '')} : ${story}`;
+  }
+
+  if (!pageName) return;
+
+  const [component, object] = pageName.split(':').map(s => s.trim());
+
+  const event = {
+    context: {
+      url: path,
+      component,
+      object,
+    },
+    originator: 'page-load',
+    trigger: 'load',
+  };
+
+  if (window && window.tealiumTrack) {
+    // Un-comment when want to see the data
+    // console.log('SEND_EVENT', event);
+    window.tealiumTrack(event);
+  }
+};
+
+const ADDON_ID = 'storybook/tealium';
+const TOOL_ID = `${ADDON_ID}/tool`;
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+const CONFIG = {
+  privacyManagerId: '407619',
+  tealium: {
+    accountId: 'newsinternational',
+    profileId: 'thetimes.storybook',
+    env: isProduction ? 'prod' : 'dev',
+  },
+  consent: {
+    accountId: 259,
+    propertyHref: 'https://newskit.co.uk',
+    gdpr: {},
+  },
+};
+
+const Tool = () => {
+  const handleOnClick = React.useCallback(() => {
+    const link = document.querySelector('.privacy-policy-link');
+    if (link) {
+      link.click();
+    }
+  });
+
+  return (
+    <>
+      <NewsKitProvider theme={newskitLightTheme}>
+        <ConsentSettingsLink
+          privacyManagerId={CONFIG.privacyManagerId}
+          gdpr
+          className="privacy-policy-link"
+        >
+          {''}
+        </ConsentSettingsLink>
+        <Tealium {...CONFIG.tealium} reactHelmet={Helmet} />
+        <Consent
+          sourcePointConfigUnified={CONFIG.consent}
+          reactHelmet={Helmet}
+        />
+        <Tooltip content="Privacy Manager" asLabel placement="left">
+          <span>
+            <IconButton
+              key={TOOL_ID}
+              title="Show Privacy Manager"
+              onClick={handleOnClick}
+            >
+              <Icons icon="shield" />
+            </IconButton>
+          </span>
+        </Tooltip>
+      </NewsKitProvider>
+    </>
+  );
+};
+
+addons.register(ADDON_ID, api => {
+  addons.add(TOOL_ID, {
+    type: types.TOOLEXTRA,
+    title: 'Privacy',
+    render: Tool,
+  });
+
+  // send initial page view event, since storybook doesn't do it via STORY_CHANGED
+  // When the preview boots, the first story is chosen via a selection specifier
+  api.on(STORY_SPECIFIED, () => {
+    sendEvent(api);
+  });
+
+  // send event every time user navigates to a new story
+  api.on(STORY_CHANGED, () => {
+    sendEvent(api);
+  });
+});

.storybook/main.js

@@ -28,6 +28,7 @@ module.exports = {
         },
       },
     },
+    './addons/tealium/preset.js',
     {
       name: '@storybook/addon-docs',
       options: {
@@ -66,4 +67,5 @@ module.exports = {
   typescript: {
     reactDocgen: false, // added to negate https://github.com/styleguidist/react-docgen-typescript/issues/356
   },
+  staticDirs: ['../fonts', '../static', 'private-fonts'],
 };

package.json

@@ -17,7 +17,7 @@
   "scripts": {
     "dev": "concurrently --names \"src,storybook,docs\" \"yarn build:ts --watch\" \"yarn dev:storybook\" \"next site -p 8081\"",
     "dev:docs": "yarn build:icons && concurrently --names \"src,docs\" \"yarn build:ts --watch\" \"next site -p 8081\"",
-    "dev:storybook": "yarn build:icons && start-storybook --ci -p 6006 -s ./fonts,./.storybook/private-fonts,./static",
+    "dev:storybook": "yarn build:icons && start-storybook --ci -p 6006",
     "eyes:storybook": "eyes-storybook --conf applitools.components.config.js",
     "fetch-external-storybook-fonts": "node ./.storybook/fetch-external-fonts.js",
     "lint:code:base": "eslint --report-unused-disable-directives --ext=.js,.ts,.jsx,.tsx --cache",
@@ -45,7 +45,7 @@
     "build:sync-version-number": "node ./scripts/sync-version-number.js",
     "build:comps:clean-icons": "sh ./scripts/reduce-file-count.sh",
     "build:comps": "concurrently \"yarn build:ts\" \"yarn build:ts:cjs\" && yarn build:comps:clean-icons && yarn build:copy-files && yarn build:package-json",
-    "build:storybook": "build-storybook -c .storybook -o dist-storybook -s ./fonts,./.storybook/private-fonts,./static",
+    "build:storybook": "build-storybook -c .storybook -o dist-storybook",
     "build:docs": "yarn build:comps:clean-icons && next build site && next export site -o public",
     "postbuild:docs": "node ./scripts/post-build",
     "build:icons": "node ./scripts/generate-icons",
@@ -66,11 +66,11 @@
     "serve:docs": "http-server public -p 8081 -c300",
     "serve:storybook": "http-server dist-storybook -p 6006",
     "dependencies:check": "package-change-checker --install-cmd=\"yarn install --pure-lockfile\" HEAD@{1} HEAD",
-    "storybook": "start-storybook -c .storybook -p 6006 -s ./fonts,./.storybook/private-fonts,./static"
+    "storybook": "start-storybook -c .storybook -p 6006 "
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.25.6",
-    "@applitools/eyes-storybook": "^3.27.6",
+    "@applitools/eyes-storybook": "^3.29.3",
     "@babel/core": "^7.13.15",
     "@babel/parser": "^7.14.6",
     "@commitlint/cli": "^8.0.0",
@@ -95,7 +95,10 @@
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-links": "^6.5.9",
     "@storybook/addon-storysource": "^6.5.9",
+    "@storybook/addons": "^6.5.12",
+    "@storybook/components": "^6.5.12",
     "@storybook/react": "^6.5.9",
+    "@storybook/theming": "^6.5.12",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/react-hooks": "^8.0.1",

site/pages/_document.tsx

@@ -251,6 +251,7 @@ export default class MyDocument extends Document {
               accountId="newsinternational"
               profileId="thetimes.newskit"
               env={isSiteEnvProduction ? 'prod' : 'dev'}
+              reactHelmet={Helmet}
             />
           )}
           <Main />

src/tealium/__tests__/__snapshots__/tealium.test.tsx.snap

@@ -24,7 +24,7 @@ exports[`Tealium renders scripts for dev environment 2`] = `
       "content": "(function(a,b,c,d){\\n              a='//tags.tiqcdn.com/utag/the-account-id/the-profile-id/the-env-id/utag.js';\\n              b=document;\\n              c='script';\\n              d=b.createElement(c);\\n              d.src=a;\\n              d.type='text/java'+c;\\n              d.async=true;\\n              window.utag_queue = []\\n              if (d.addEventListener) {\\n                d.addEventListener(\\n                  'load',\\n                  function () {\\n                    for (var i = 0; i < utag_queue.length; i++) {\\n                      event = utag_queue[i];\\n                      utag.track(event.event, event.data);\\n                    }\\n                  },\\n                  false\\n                );\\n              } else {\\n                d.onreadystatechange = function () {\\n                  if (this.readyState == 'complete' || this.readyState == 'loaded') {\\n                    this.onreadystatechange = null;\\n                    for (var i = 0; i < utag_queue.length; i++) {\\n                      event = utag_queue[i];\\n                      utag.track(event.event, event.data);\\n                    }\\n                  }\\n                };\\n              }\\n              a = b.getElementsByTagName(c)[0];\\n              a.parentNode.insertBefore(d, a);\\n            })();"
     }
   ],
-  "reactHelmet": "undefined"
+  "reactHelmet": "function"
 }
   </div>
 </DocumentFragment>

src/tealium/tealium.tsx

@@ -14,8 +14,10 @@ export const Tealium: React.FC<TealiumProps> = ({
   accountId,
   profileId,
   env,
+  reactHelmet,
 }) => (
   <RenderScripts
+    reactHelmet={reactHelmet}
     scripts={[
       {
         content: `(function(a,b,c,d){