feat(components): add app insights to storybook (#210)

package.json

@@ -31,6 +31,7 @@
     "@commitlint/config-conventional": "17.6.5",
     "@custom-elements-manifest/analyzer": "0.8.3",
     "@lit-labs/ssr": "3.1.7",
+    "@microsoft/applicationinsights-web": "3.0.6",
     "@nx-extend/terraform": "^3.2.0",
     "@nx/devkit": "16.8.1",
     "@nx/esbuild": "16.9.1",

packages/components/.storybook/main.ts

@@ -1,6 +1,7 @@
 import { StorybookConfig } from '@storybook/web-components-vite';
 
 const STORYBOOK_CONFIGURATION: StorybookConfig = {
+  core: { disableTelemetry: true },
   features: { storyStoreV7: true },
   framework: '@storybook/web-components-vite',
   stories: [

packages/components/.storybook/manager.ts

@@ -1,5 +1,7 @@
 import { addons } from '@storybook/addons';
 import { create } from '@storybook/theming';
+import Events from '@storybook/core-events';
+import { ApplicationInsights } from '@microsoft/applicationinsights-web';
 import arcLogo from '../../../assets/arc-storybook.svg';
 
 const THEME = create({
@@ -19,3 +21,22 @@ addons.setConfig({
   theme: THEME,
   showPanel: false,
 });
+
+addons.register('application-insights', api => {
+  const APP_INSIGHTS = new ApplicationInsights({
+    config: {
+      ingestionEndpoint: 'https://uksouth-0.in.applicationinsights.azure.com',
+      instrumentationKey: 'c77ad0b6-1dc7-433d-99df-e164c2b2a11f',
+      enableDebug: process.env.NODE_ENV === 'development',
+    },
+  });
+  APP_INSIGHTS.loadAppInsights();
+
+  api.on(Events.SET_CURRENT_STORY, (eventData) => {
+    const uri = window.location.pathname;
+    const storyId = eventData.storyId;
+    const storyName = eventData.viewMode;
+    console.log('Storybook event:', uri, storyId, storyName);
+    APP_INSIGHTS.trackPageView({ name: storyName, uri, properties: { storyId, storyName, storyKind }});
+  });
+});