Merge pull request #397 from Zuehlke/feat/add-posthog

feat: add posthog

Author: Cybertron01Z

.cursor/rules/poinz.mdc

@@ -7,5 +7,6 @@ alwaysApply: false
 
 - we are still using javascript
 - if you are working on a js file, do not create a ts file, do everything in the javascript file
+- if you are creating new files you must use typescript
 
 - NEVER FINISH BEFORE YOU ARE NOT FINISHED, I DO NOT WANT TO HEAR "should I continue?"

.gitignore

@@ -30,3 +30,4 @@ client/*.local
 webpack-build-stats.json
 deploy/
 npm_dependencies_report.*.md
+.env

client/.cursor/rules/posthog-integration.mdc

@@ -0,0 +1,27 @@
+---
+description: apply when interacting with PostHog/analytics tasks
+globs: 
+alwaysApply: true
+---
+
+Never hallucinate an API key. Instead, always use the API key populated in the .env file.
+
+# Feature flags
+
+A given feature flag should be used in as few places as possible. Do not increase the risk of undefined behavior by scattering the same feature flag across multiple areas of code. If the same feature flag needs to be introduced at multiple callsites, flag this for the developer to inspect carefully.
+
+If a job requires creating new feature flag names, make them as clear and descriptive as possible.
+
+If using TypeScript, use an enum to store flag names. If using JavaScript, store flag names as strings to an object declared as a constant, to simulate an enum. Use a consistent naming convention for this storage. enum/const object members should be written UPPERCASE_WITH_UNDERSCORE.
+
+Gate flag-dependent code on a check that verifies the flag's values are valid and expected.
+
+# Custom properties
+
+If a custom property for a person or event is at any point referenced in two or more files or two or more callsites in the same file, use an enum or const object, as above in feature flags.
+
+# Naming
+
+Before creating any new event or property names, consult with the developer for any existing naming convention. Consistency in naming is essential, and additional context may exist outside this project. Similarly, be careful about any changes to existing event and property names, as this may break reporting and distort data for the project.
+
+

client/package-lock.json

@@ -25,6 +25,7 @@
     "history": "5.3.0",
     "loglevel": "1.8.1",
     "nanoid": "5.0.1",
+    "posthog-js": "^1.245.1",
     "purecss": "3.0.0",
     "react": "^18.3.1",
     "react-dnd": "^16.0.1",
@@ -46,17 +47,19 @@
     "@babel/core": "7.23.2",
     "@babel/preset-env": "7.23.2",
     "@babel/preset-react": "7.22.15",
-    "babel-jest": "29.7.0",
-    "jest": "29.7.0",
+    "@babel/preset-typescript": "^7.27.1",
     "@eslint/js": "^9.17.0",
     "@quickbaseoss/babel-plugin-styled-components-css-namespace": "1.0.1",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",
+    "babel-jest": "29.7.0",
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
+    "jest": "29.7.0",
+    "react-test-renderer": "^18.3.1",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5"
@@ -73,17 +76,25 @@
   },
   "jest": {
     "transform": {
-      "^.+\\.[jt]sx?$": ["babel-jest", { "configFile": "./test/.babelrc" }]
+      "^.+\\.[jt]sx?$": [
+        "babel-jest",
+        {
+          "configFile": "./test/.babelrc"
+        }
+      ]
     },
     "testMatch": [
-      "**/test/unit/**/*Test.js",
-      "**/test/integration/**/*Test.js"
+      "**/test/unit/**/*Test.[jt]s?(x)",
+      "**/test/integration/**/*Test.[jt]s?(x)"
     ],
     "setupFilesAfterEnv": [
       "<rootDir>/test/unit/setup.js"
     ],
     "transformIgnorePatterns": [
       "/node_modules/(?!nanoid).+\\.js$"
-    ]
+    ],
+    "moduleNameMapper": {
+      "^.+\\.(css|less|scss)$": "<rootDir>/test/styleMock.js"
+    }
   }
 }

client/package.json

@@ -12,19 +12,29 @@ import configureStore from './state/configureStore';
 import {WithL10n} from './services/l10n';
 import ErrorBoundary from './components/common/ErrorBoundary';
 import Main from './components/Main';
+import {usePostHogIdentify} from './hooks/usePostHogIdentify';
 
 import GlobalStyle from './_styled';
 
 log.setLevel(appConfig.env === 'dev' ? 'debug' : 'error');
 const store = configureStore(initialState());
 
+function AppContent() {
+  usePostHogIdentify();
+  return (
+    <>
+      <GlobalStyle />
+      <Main />
+    </>
+  );
+}
+
 function App() {
   return (
     <ErrorBoundary>
       <Provider store={store}>
         <WithL10n>
-          <GlobalStyle />
-          <Main />
+          <AppContent />
         </WithL10n>
       </Provider>
     </ErrorBoundary>

client/src/App.tsx

@@ -0,0 +1,19 @@
+import {useEffect} from 'react';
+import {useSelector} from 'react-redux';
+import posthog from 'posthog-js';
+
+interface RootState {
+  users: {
+    ownUserId: string | undefined;
+  };
+}
+
+export function usePostHogIdentify() {
+  const userId = useSelector((state: RootState) => state.users.ownUserId);
+
+  useEffect(() => {
+    if (userId) {
+      posthog.identify(userId);
+    }
+  }, [userId]);
+} 

client/src/hooks/usePostHogIdentify.ts

@@ -1,9 +1,18 @@
 import {StrictMode} from 'react';
 import {createRoot} from 'react-dom/client';
+import {PostHogProvider} from 'posthog-js/react';
 import App from './App.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <PostHogProvider
+      apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY}
+      options={{
+        api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
+        debug: import.meta.env.MODE === "development",
+      }}
+    >
+      <App />
+    </PostHogProvider>
   </StrictMode>
 );

client/src/main.tsx

@@ -0,0 +1,38 @@
+import posthog from 'posthog-js';
+import {
+  RoomSettingsChangedEvent,
+  StoryCreatedEvent,
+  StoryEditedEvent,
+  StoryTrashedEvent,
+  StoryRestoredEvent,
+  MatrixViewToggledEvent,
+  RoomEvent
+} from './tracking.types';
+
+export const trackRoomSettingsChanged = (data: RoomSettingsChangedEvent) => {
+  posthog.capture('room_settings_changed', data);
+};
+
+export const trackStoryCreated = (data: StoryCreatedEvent) => {
+  posthog.capture('story_created', data);
+};
+
+export const trackStoryEdited = (data: StoryEditedEvent) => {
+  posthog.capture('story_edited', data);
+};
+
+export const trackStoryTrashed = (data: StoryTrashedEvent) => {
+  posthog.capture('story_trashed', data);
+};
+
+export const trackStoryRestored = (data: StoryRestoredEvent) => {
+  posthog.capture('story_restored', data);
+};
+
+export const trackMatrixViewToggled = (data: MatrixViewToggledEvent) => {
+  posthog.capture('matrix_view_toggled', data);
+}; 
+
+export const trackNewEstimationRound = (data: RoomEvent) => {
+  posthog.capture('new_estimation_round', data);
+};

client/src/services/tracking.ts

@@ -0,0 +1,34 @@
+export interface RoomEvent {
+  roomId: string;
+}
+
+export interface RoomSettingsChangedEvent extends RoomEvent {
+  setting: 'confidence' | 'autoReveal' | 'password' | 'issueTracking';
+  newValue: boolean | string;
+}
+
+export interface StoryEvent extends RoomEvent {
+  storyId: string;
+}
+
+export interface StoryCreatedEvent extends StoryEvent {
+  hasDescription: boolean;
+  descriptionLength: number;
+}
+
+export interface StoryEditedEvent extends StoryEvent {
+  fieldChanged: 'title' | 'description' | 'both';
+}
+
+export interface StoryTrashedEvent extends StoryEvent {
+  hadConsensus: boolean;
+  storyLifetimeMinutes: number;
+}
+
+export interface StoryRestoredEvent extends StoryEvent {
+  timeInTrashMinutes: number;
+}
+
+export interface MatrixViewToggledEvent extends RoomEvent {
+  totalStories: number;
+}