feat: ✨ added openpanel analytics along with ga (#81)

* feat: ✨ added openpanel analytics along with ga

* fix: 🐛 fixed them provider issue

* fix: 🐛 fixed lint issue

.prettierignore

@@ -1,5 +1,5 @@
 *.md
-pnpm-lock.yaml
+*-lock.yaml
 node_modules
 .next
 .turbo

apps/web/app/(app)/layout.tsx

@@ -1,7 +1,9 @@
 import { GoogleTagManager } from '@next/third-parties/google';
+import { Provider as AnalyticsProvider } from '@ultra-reporter/analytics/client';
 import '@ultra-reporter/ui/global.css';
 import { Footer } from '@ultra-reporter/ui/home/footer';
 import { ThemeProvider } from '@ultra-reporter/ui/utils/theme-provider';
+import { isProd } from '@ultra-reporter/utils/constants';
 import type { Metadata } from 'next';
 import { DetailedHTMLProps, HtmlHTMLAttributes } from 'react';
 
@@ -32,11 +34,10 @@ const RootLayout = ({
         >
           {children}
           <Footer />
+          <AnalyticsProvider />
         </ThemeProvider>
       </body>
-      {process.env.VERCEL_ENV === 'production' && (
-        <GoogleTagManager gtmId='G-CNW9F6PH7P' />
-      )}
+      {isProd && <GoogleTagManager gtmId='G-CNW9F6PH7P' />}
     </html>
   );
 };

apps/web/package.json

@@ -12,9 +12,10 @@
   "dependencies": {
     "@next/third-parties": "^14.2.15",
     "@tanstack/react-table": "^8.20.5",
+    "@ultra-reporter/analytics": "workspace:*",
     "@ultra-reporter/ui": "workspace:*",
     "@ultra-reporter/utils": "workspace:*",
-    "lucide-react": "^0.453.0",
+    "lucide-react": "^0.456.0",
     "next": "14.2.15",
     "react": "^18",
     "react-dom": "^18"
@@ -24,7 +25,7 @@
     "@types/react-dom": "^18",
     "@ultra-reporter/tailwind-config": "workspace:*",
     "@ultra-reporter/typescript-config": "workspace:*",
-    "postcss": "^8",
+    "postcss": "^8.4.49",
     "tailwindcss": "^3.4.14"
   }
 }

package.json

@@ -11,7 +11,7 @@
     "dev": "turbo dev",
     "lint": "turbo lint",
     "deploy": "turbo run build --scope=app --includeDependencies --no-deps",
-    "format:fix": "prettier --write --ignore-path .gitignore .",
+    "format:fix": "prettier --write .",
     "eslint": "eslint --report-unused-disable-directives",
     "format": "prettier --check .",
     "prepare": "husky",
@@ -27,19 +27,19 @@
     "@eslint/compat": "^1.2.2",
     "@next/eslint-plugin-next": "^14.2.15",
     "@release-it-plugins/lerna-changelog": "^7.0.0",
-    "@stylistic/eslint-plugin-js": "^2.9.0",
-    "@stylistic/eslint-plugin-ts": "^2.9.0",
-    "@types/node": "^22.8.7",
-    "@typescript-eslint/eslint-plugin": "^8.11.0",
-    "@typescript-eslint/parser": "^8.11.0",
+    "@stylistic/eslint-plugin-js": "^2.10.1",
+    "@stylistic/eslint-plugin-ts": "^2.10.1",
+    "@types/node": "^22.9.0",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/parser": "^8.14.0",
     "@vercel/style-guide": "^6.0.0",
-    "eslint": "^9.13.0",
+    "eslint": "^9.14.0",
     "eslint-config-next": "14.2.15",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-turbo": "2.2.3",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "globals": "^15.11.0",
+    "globals": "^15.12.0",
     "husky": "^9.1.6",
     "lerna-changelog": "^2.2.0",
     "lint-staged": "^15.2.10",
@@ -50,7 +50,7 @@
     "release-it-pnpm": "^4.6.3",
     "turbo": "^2.2.3",
     "typescript": "^5",
-    "typescript-eslint": "^8.11.0"
+    "typescript-eslint": "^8.14.0"
   },
   "lint-staged": {
     "**/*.{ts,tsx}": [

packages/analytics/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@ultra-reporter/analytics",
+  "description": "Ultra Reporter Analytics",
+  "version": "0.4.0",
+  "private": true,
+  "scripts": {
+    "lint": "eslint . --max-warnings 0"
+  },
+  "exports": {
+    "./server": "./src/server.ts",
+    "./client": "./src/client.tsx"
+  },
+  "dependencies": {
+    "@openpanel/nextjs": "^1.0.5",
+    "@vercel/functions": "^1.5.0",
+    "@ultra-reporter/utils": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@ultra-reporter/logger": "workspace:*",
+    "@ultra-reporter/typescript-config": "workspace:*"
+  }
+}

packages/analytics/src/client.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable react/react-in-jsx-scope */
+import {
+  OpenPanelComponent,
+  type PostEventPayload,
+  useOpenPanel,
+} from '@openpanel/nextjs';
+import { logger } from '@ultra-reporter/logger';
+import { isProd } from '@ultra-reporter/utils/constants';
+
+const Provider = () => (
+  <OpenPanelComponent
+    clientId={process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID!}
+    trackAttributes={true}
+    trackScreenViews={isProd}
+    trackOutgoingLinks={isProd}
+  />
+);
+
+const track = (options: { event: string } & PostEventPayload['properties']) => {
+  const { track: openTrack } = useOpenPanel();
+
+  if (!isProd) {
+    logger.info('Track', options);
+    return;
+  }
+
+  const { event, ...rest } = options;
+  openTrack(event, rest);
+};
+
+export { Provider, track };

packages/analytics/src/server.ts

@@ -0,0 +1,41 @@
+import { OpenPanel, type PostEventPayload } from '@openpanel/nextjs';
+import { logger } from '@ultra-reporter/logger';
+import { waitUntil } from '@vercel/functions';
+
+type Props = {
+  userId?: string;
+  fullName?: string | null;
+};
+
+export const setupAnalytics = async (options?: Props) => {
+  const { userId, fullName } = options ?? {};
+
+  const client = new OpenPanel({
+    clientId: process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID!,
+    clientSecret: process.env.OPENPANEL_SECRET_KEY!,
+  });
+
+  if (userId && fullName) {
+    const [firstName, lastName] = fullName.split(' ');
+
+    waitUntil(
+      client.identify({
+        profileId: userId,
+        firstName,
+        lastName,
+      })
+    );
+  }
+
+  return {
+    track: (options: { event: string } & PostEventPayload['properties']) => {
+      if (process.env.NODE_ENV !== 'production') {
+        logger.info('Track', options);
+        return;
+      }
+
+      const { event, ...rest } = options;
+      waitUntil(client.track(event, rest));
+    },
+  };
+};

packages/analytics/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@ultra-reporter/typescript-config/react-library.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["dist", "build", "node_modules"]
+}

packages/logger/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@ultra-reporter/logger",
+  "description": "Ultra Reporter Analytics",
+  "version": "0.4.0",
+  "private": true,
+  "main": "./src/index.ts",
+  "scripts": {
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "pino": "^9.5.0"
+  },
+  "devDependencies": {
+    "@ultra-reporter/typescript-config": "workspace:*"
+  }
+}

packages/logger/src/index.ts

@@ -0,0 +1,3 @@
+import pino from 'pino';
+
+export const logger = pino();

packages/logger/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@ultra-reporter/typescript-config/react-library.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["dist", "build", "node_modules"]
+}

packages/tailwind-config/package.json

@@ -14,9 +14,9 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "postcss": "^8",
     "autoprefixer": "^10.4.20",
     "daisyui": "^4.12.14",
+    "postcss": "^8.4.49",
     "tailwindcss": "^3.4.14"
   }
 }

packages/ui/package.json

@@ -43,9 +43,9 @@
     "class-variance-authority": "^0.7.0",
     "cmdk": "1.0.4",
     "embla-carousel-react": "^8.3.1",
-    "lucide-react": "^0.453.0",
+    "lucide-react": "^0.456.0",
     "next": "14.2.15",
-    "next-themes": "^0.3.0",
+    "next-themes": "^0.4.3",
     "react-code-blocks": "^0.1.6",
     "react-hook-form": "^7.53.2",
     "recharts": "^2.13.3",
@@ -59,7 +59,7 @@
     "@ultra-reporter/typescript-config": "workspace:*",
     "@ultra-reporter/utils": "workspace:*",
     "daisyui": "^4.12.14",
-    "postcss": "^8",
+    "postcss": "^8.4.49",
     "postcss-load-config": "^6.0.1",
     "react": "^18",
     "react-dom": "^18",

packages/ui/src/utils/theme-provider.tsx

@@ -1,7 +1,9 @@
 'use client';
 
-import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import { type ThemeProviderProps } from 'next-themes/dist/types';
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes';
 
 export const ThemeProvider = ({
   children,

packages/utils/package.json

@@ -5,6 +5,7 @@
   "private": true,
   "exports": {
     "./types": "./src/types/types.ts",
+    "./constants": "./src/types/constants.ts",
     "./cn": "./src/functions/cn.ts",
     "./formatting": "./src/functions/formatting.ts",
     "./string-util": "./src/functions/string-util.ts",

packages/utils/src/types/constants.ts

@@ -0,0 +1,3 @@
+const isProd = process.env.NODE_ENV === 'production';
+
+export { isProd };