feat(User Interaction): Get closest ancestor react component

If internal components are not tracking-enabled, use data-attribute to target the closest React component upon a DOM event

Author: booleanhunter

dist/react/components/withTracking.d.ts.map

@@ -34,16 +34,17 @@ export function withTracking(Component) {
     return function (props) {
         var eventHandlers = {};
         var trackers = props.trackers, origin = props.origin, dataContextFromProps = props.dataContext, originalProps = __rest(props, ["trackers", "origin", "dataContext"]);
-        var dataContext = useContext(DataContext);
-        if (dataContextFromProps) {
-            dataContext = dataContextFromProps;
-        }
+        var dataContext = dataContextFromProps ? dataContextFromProps : useContext(DataContext);
         function trackUserInteraction(e, tracker) {
             var targetNode = e.target;
             var value = getValueFromNode(e);
-            var userInteractionResource = UserInteraction.generateResource(dataContext.app, tracker.action, __assign(__assign({ context: dataContext.context }, (originalProps.origin && {
-                origin: originalProps.origin
-            })), { component: Component.displayName || Component.name, element: __assign({ currentTarget: e.currentTarget.nodeName, target: targetNode.nodeName || e.currentTarget.nodeName, innerHTML: targetNode.innerHTML, innerText: targetNode.innerText }, (value && {
+            var closestComponent = targetNode.closest('[data-element-type="component"]');
+            var userInteractionResource = UserInteraction.generateResource(dataContext.app, tracker.action, __assign(__assign({ context: dataContext.context }, (origin && {
+                origin: origin,
+            })), { component: {
+                    currentTarget: Component.displayName || Component.name,
+                    target: closestComponent ? closestComponent.getAttribute('data-display-name') : null
+                }, element: __assign({ currentTarget: e.currentTarget.nodeName, target: targetNode.nodeName || e.currentTarget.nodeName, innerHTML: targetNode.innerHTML, innerText: targetNode.innerText }, (value && {
                     value: value,
                 })) }), tracker.data);
             tracker.track(e, userInteractionResource);

dist/react/components/withTracking.js

@@ -9,7 +9,10 @@ export interface UserInteractionResource extends BaseResource {
     source: {
         context: string;
         origin?: string;
-        component: string;
+        component: {
+            currentTarget: string;
+            target: string | null;
+        };
         element: {
             currentTarget: string;
             target: string;

dist/resources/userInteractionResource.d.ts

@@ -9,21 +9,24 @@
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/pako": "^1.0.1",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
     "localforage": "^1.9.0",
     "pako": "^2.0.3",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
     "web-vitals": "^2.0.1",
     "workerize-loader": "^1.3.0"
   },
+  "peerDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build-scripts": "react-scripts build",
+    "build": "npm run tsc",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006 -s public",
@@ -65,6 +68,8 @@
     "@storybook/react": "^6.1.18",
     "@types/styled-components": "^5.1.8",
     "antd": "^4.12.3",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "styled-components": "^5.2.1",
     "typedoc": "^0.21.2"
   }

dist/resources/userInteractionResource.d.ts.map

@@ -26,6 +26,8 @@ function Button(props: ButtonProps) {
 
     return (
         <AntButton
+            data-element-type="component"
+            data-display-name="Button"
             {...rest}
             onClick={onClick}
         >

package.json

@@ -11,6 +11,8 @@ function Header(props: HeaderProps) {
 
     return (
         <PageHeader
+            data-element-type="component"
+            data-display-name="Header"
             {...props}
         />
     );

src/examples/components/elements/Button/index.tsx

@@ -15,6 +15,8 @@ function Input(props: InputProps) {
 
     return (
         <AntInput
+            data-element-type="component"
+            data-display-name="Input"
             {...props}
         />
     );

src/examples/components/elements/Header/index.tsx

@@ -16,6 +16,8 @@ function Menu(props: MenuProps) {
 
     return (
         <AntMenu
+            data-element-type="component"
+            data-display-name="Menu"
             theme={theme}
             mode={mode}
             defaultSelectedKeys={defaultSelectedKeys}

src/examples/components/elements/Input/index.tsx

@@ -0,0 +1,38 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react/types-6-0';
+
+import TrackingOnTopLevel from './index';
+
+export default {
+    title: 'Components/Pages/Tracking on top level',
+    component: TrackingOnTopLevel,
+    argTypes: {
+        mode: {
+            control: {
+                type: 'select',
+                options: [
+                    "horizontal",
+                    "vertical",
+                    "vertical-left",
+                    "vertical-right", 
+                    "inline",
+                ],
+            },
+        },
+        defaultSelectedKeys: {
+            control: {
+                type: 'array',
+            }
+        }
+    },
+};
+
+const Template: Story<any> = (args) => {
+    return (
+        <TrackingOnTopLevel />
+    )
+};
+
+export const Default = Template.bind({});
+
+Default.args = {};

src/examples/components/elements/Menu/index.tsx

@@ -0,0 +1,63 @@
+
+import UserInteractionResource, { UserInteraction } from 'library/resources/userInteractionResource';
+import { DataContext } from 'library/react/contexts/dataContext';
+
+import MenuItem from '../../elements/Menu/MenuItem';
+import { LandingPageWithTracking } from '../../templates/LandingPageTwo';
+
+export interface TopLevelProps {
+
+}
+
+const data = {
+    context: "Tracking on top level",
+    app: {
+        version: "1",
+    },
+} as UserInteraction.DataContext;
+
+function TrackingOnTopLevel(props: TopLevelProps) {
+
+    function logEvent(
+        event: React.MouseEvent<HTMLElement, MouseEvent>,
+        interactionResource: UserInteractionResource
+    ) {
+        // tracking logic goes here
+        console.log("logEvent");
+        console.log(interactionResource);
+    }
+
+    const landingPageProps = {
+        items: ["Landing 1", "Landing 2", "Landing 3"],
+    }
+
+    return (
+        <DataContext.Provider value={data}>
+            <LandingPageWithTracking
+                {...landingPageProps}
+                trackers={[
+                    {
+                        action: "onClick",
+                        track: logEvent,
+                    },
+                    {
+                        action: "onMouseOver",
+                        track: logEvent,
+                    }
+                ]}
+                origin="Tracking on Top Level"
+            >
+        
+                { 
+                    landingPageProps.items.map((item: string, i: any) => {
+                        return (
+                        <MenuItem key={`${i}`}>{item}</MenuItem>
+                    )})
+                }
+     
+            </LandingPageWithTracking>
+        </DataContext.Provider>
+    )
+}
+
+export default TrackingOnTopLevel;

src/examples/components/pages/TrackingOnTopLevelOnly/index.stories.tsx

@@ -103,7 +103,7 @@ function LandingPage(props: LandingPageProps) {
                 </NavBar>
                 <StyledContent>
                     <div style={headerStyle}>
-                        <h1>Let us help solve your critical website development challenges.</h1>
+                        <h1>A sample Landing page that uses tracking-enabled components</h1>
                     </div>
                 </StyledContent>
                 <NewsLetter

src/examples/components/pages/TrackingOnTopLevelOnly/index.tsx

@@ -0,0 +1,65 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react/types-6-0';
+import MenuItem from '../../elements/Menu/MenuItem';
+
+import LandingPageTwo, { LandingPageTwoProps } from './index';
+
+
+export default {
+    title: 'Components/Templates/Landing Page: Tracking only on top level',
+    component: LandingPageTwo,
+    argTypes: {
+        mode: {
+            control: {
+                type: 'select',
+                options: [
+                    "horizontal",
+                    "vertical",
+                    "vertical-left",
+                    "vertical-right", 
+                    "inline",
+                ],
+            },
+        },
+        theme: {
+            control: {
+                type: 'select',
+                options: [
+                    "light",
+                    "dark",
+                ],
+            },
+        },
+        items: {
+            control: {
+                type: 'array',
+            },
+        },
+        defaultSelectedKeys: {
+            control: {
+                type: 'array',
+            }
+        }
+    },
+};
+
+const Template: Story<any> = (args) => {
+    const { items } = args;
+    return (
+    <LandingPageTwo {...args}>
+        
+        { 
+            items.map((item: string, i: any) => {
+                return (
+                <MenuItem key={`${i}`}>{item}</MenuItem>
+            )})
+        }
+     
+    </LandingPageTwo>
+)};
+
+export const Default = Template.bind({});
+
+Default.args = {
+    items: ["Landing 1", "Landing 2", "Landing 3"],
+};