feat(interaction tracking): Define library structure

- Define BaseResource structure for user analytics event
- Define resource for User interactions
- Tracker callback returns UserInteractionResource

Author: booleanhunter

package-lock.json

@@ -6,31 +6,23 @@ import {
 
 import 'antd/lib/button/style/css';
 
-import {
-    withDataContext,
-} from '../../contexts/withDataContext';
-
 import {
     withTracking,
-} from '../../contexts/withTracking';
+} from '../../../library/user-analytics/react/components/withTracking';
 
 interface ButtonStateProps extends AntButtonProps {
     label: string;
     context?: any;
 }
 
 export interface ButtonActionProps {
-    customCallback?: (data: any) => void;
+    
 }
 
 export type ButtonProps = ButtonStateProps & ButtonActionProps
 
 function Button(props: ButtonProps) {
-    const { label, context, onClick, customCallback, ...rest } = props;
-
-    // function handleClick(e: React.MouseEvent) {
-    //     customCallback && customCallback(context);
-    // }
+    const { label, onClick, ...rest } = props;
 
     return (
         <AntButton
@@ -44,5 +36,4 @@ function Button(props: ButtonProps) {
 
 export default Button;
 
-export const ButtonWithContext = withDataContext(Button)
-export const ButtonWithTracking = withTracking(Button)
+export const ButtonWithTracking = withTracking(Button);

src/components/contexts/withTracking.tsx

@@ -5,7 +5,7 @@ import 'antd/lib/input/style/css';
 
 import {
     withTracking,
-} from '../../contexts/withTracking';
+} from '../../../library/user-analytics/react/components/withTracking';
 
 export interface InputProps extends AntInputProps {
 

src/components/elements/Button/index.tsx

@@ -1,27 +1,44 @@
-import { DataContext } from '../../contexts/withDataContext';
-import Button, { ButtonWithContext, ButtonWithTracking } from '../../elements/Button';
-
-import Input from '../../elements/Input';
+import
+    UserInteractionResource,
+    {
+        UserInteraction,
+    }
+from '../../../library/user-analytics/lib/resources/userInteractionResource';
+import { DataContext } from '../../../library/user-analytics/react/contexts/dataContext';
 
+import Button, { ButtonWithTracking } from '../../elements/Button';
+import Input, { InputWithTracking } from '../../elements/Input';
 import Card from '../../widgets/Card';
 
 export interface LoginFormProps {
 
 }
 
 const data = {
-    page: "Login page",
-    company: "My company",
-}
+    context: "Login Page",
+    app: {
+        version: "1",
+    },
+} as UserInteraction.DataContext;
 
 function LoginForm(props: LoginFormProps) {
 
-    function verifyUsernameAndPassword (e: React.MouseEvent<HTMLElement, MouseEvent>) {
+    function verifyUsernameAndPassword(e: React.MouseEvent<HTMLElement, MouseEvent>) {
         // app logic goes here
+        console.log("verifyUsernameAndPassword");
     }
 
-    function logMouseEvent (event: React.MouseEvent<HTMLElement, MouseEvent>, data: any) {
+    function logEvent(
+        event: React.MouseEvent<HTMLElement, MouseEvent>,
+        interactionResource: UserInteractionResource
+    ) {
         // tracking logic goes here
+        console.log("logEvent");
+        console.log(interactionResource);
+        /*
+            do whatever you want with the resource,
+            like save it to IndexedDB, compress it, save it via API, etc
+        */
     }
 
     return (
@@ -32,34 +49,50 @@ function LoginForm(props: LoginFormProps) {
                     <ButtonWithTracking
                         type="primary"
                         label="Login"
-                        onClick={(e: any) => verifyUsernameAndPassword(e.value)}
+                        onClick={verifyUsernameAndPassword}
+                        
                         trackers={[{
-                            context: "Login and Signup",
-                            type: "onClick",
-                            callback: logMouseEvent,
+                            action: "onClick",
+                            track: logEvent,
+                            
+                            // pass optional custom data
                             data: {
-                                element: "Login button",
-                                ...data,
+                                color: "blue",
                             }
                         }]}
+
+                        // optional props
+                        origin="Login Button"
+                        // context="AntD Card"
                     />,
                     <Button
                         type="ghost"
                         label="Sign Up"
-                        onClick={verifyUsernameAndPassword}  
+                        onClick={verifyUsernameAndPassword}
                     />
                 ]}>
-                <Input
+                <InputWithTracking
                     type="text"
                     placeholder="email"
+
+                    trackers={[{
+                        action: "onClick",
+                        track: logEvent,
+                        data: {
+                            customKey1: "input",
+                        }
+                    }]}
+
+                    // optional props
+                    origin="Email Input"
                 />
                 <Input
                     type="password"
                     placeholder="password"
                 />
             </Card>
         </DataContext.Provider>
-        
+
     )
 }
 

src/components/elements/Input/index.tsx

@@ -0,0 +1,26 @@
+export function getUserOS() {
+    const userAgent = window.navigator.userAgent;
+    const platform = window.navigator.platform;
+    const macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"];
+    const windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"];
+    const iosPlatforms = ["iPhone", "iPad", "iPod"];
+    
+    let name = "";
+
+    if (macosPlatforms.includes(platform)) {
+        name = "Mac OS";
+    } else if (iosPlatforms.includes(platform)) {
+        name = "iOS";
+    } else if (windowsPlatforms.includes(platform)) {
+        name = "Windows";
+    } else if (/Android/.test(userAgent)) {
+        name = "Android";
+    } else if (!name && /Linux/.test(platform)) {
+        name = "Linux";
+    }
+
+    return {
+        name,
+        version: ""
+    };
+}

src/components/templates/LoginForm/index.tsx

@@ -0,0 +1,20 @@
+export default interface BaseResource {
+    app: {
+        version: string,
+    };
+    date: Date;
+    browser: {
+        name: string,
+        version: string,
+        userAgent: string,
+        platform: string,
+        window: {
+            width: number,
+            height: number,
+        }
+    };
+    os: {
+        name: string,
+        version: string,
+    };
+}

src/library/user-analytics/lib/interaction-tracking/browser.ts

@@ -0,0 +1,70 @@
+import BaseResource from './baseResource';
+
+import { getUserOS } from '../interaction-tracking/browser';
+
+export type Object<T> = {
+    [P in keyof T]: T[P]
+};
+
+export default interface UserInteractionResource extends BaseResource {
+    type: typeof UserInteraction.TYPE;
+    action: UserInteraction.Action;
+    source: {
+        context: string;
+        origin: string;
+        component: string;
+        element: {
+            currentTarget: string;
+            target: string;
+            innerHTML?: string;
+            innerText?: string;
+            value?: string;
+        };
+    };
+    data?: Object<any>;
+}
+
+export namespace UserInteraction {
+    export interface DataContext {
+        app: BaseResource["app"],
+        context: UserInteractionResource["source"]["context"],
+    }
+
+    export const TYPE = "UserInteraction";
+
+    export type Action =
+    | "onClick";
+
+    export interface Tracker {
+        action: Action;
+        data?: UserInteractionResource["data"];
+        track: (e: any, interactionResource: UserInteractionResource) => void;
+    }
+    
+    export function generateResource(
+        app: BaseResource["app"],
+        action: UserInteraction.Action,
+        source: UserInteractionResource["source"],
+        data: UserInteractionResource["data"],
+    ) : UserInteractionResource {
+        return {
+            type: UserInteraction.TYPE,
+            app,
+            date: new Date(),
+            browser: {
+                name: navigator.appName,
+                version: navigator.appVersion,
+                userAgent: navigator.userAgent,
+                platform: navigator.platform,
+                window: {
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                }
+            },
+            os: getUserOS(),
+            action,
+            source,
+            data,
+        }
+    }
+}

src/library/user-analytics/lib/resources/baseResource.ts

@@ -1,7 +1,4 @@
-import React, { createContext } from 'react';
-
-const data = {} as any;
-export const DataContext = createContext(data);
+import { DataContext } from '../contexts/dataContext';
 
 export const withDataContext = <P extends object>(Component: React.ComponentType<P>) => {
     return function fn(props: P) {