Add OpenPanel (#33)

* add openpanel

* memo

* lint

* fixing typecheck

* adding link/unlink

* convert github action to use script

* make proper react component

* refactor openpanel

* we've ported readme to public repo, we can remove this

Author: ian

.github/workflows/test-cli.yml

@@ -223,22 +223,11 @@ jobs:
 
       - name: Link local packages for testing
         run: |
-          echo "Adding pnpm overrides to use local packages..."
-          cd test-startup
-          node -e "
-          const fs = require('fs');
-          const workspace = process.env.GITHUB_WORKSPACE;
-          const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
-          pkg.pnpm = pkg.pnpm || {};
-          pkg.pnpm.overrides = {
-            '@startupkit/auth': 'link:' + workspace + '/packages/auth',
-            '@startupkit/analytics': 'link:' + workspace + '/packages/analytics'
-          };
-          fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2));
-          console.log('Overrides added:', pkg.pnpm.overrides);
-          "
-          cat package.json | grep -A 6 '"pnpm"'
-        working-directory: test-projects
+          echo "🔗 Linking local @startupkit/* packages..."
+          node "$GITHUB_WORKSPACE/scripts/link-local.js" link "test-projects/test-startup" "$GITHUB_WORKSPACE/packages"
+          
+          echo "📄 Verifying changes in packages/analytics/package.json:"
+          grep -A 2 '@startupkit/analytics' test-projects/test-startup/packages/analytics/package.json || true
 
       - name: Install dependencies in generated project
         run: |

apps/home/package.json

@@ -11,10 +11,11 @@
 		"lint:fix": "biome check --write"
 	},
 	"dependencies": {
+		"@openpanel/web": "^1.0.1",
 		"@radix-ui/react-dialog": "^1.1.1",
 		"@radix-ui/react-slot": "^1.1.0",
 		"@radix-ui/react-tooltip": "^1.1.2",
-		"@startupkit/analytics": "0.2.0",
+		"@startupkit/analytics": "workspace:*",
 		"@startupkit/cms": "0.2.0",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",

apps/home/src/components/Features.tsx

@@ -92,6 +92,11 @@ const FEATURES = [
 				label: "Plausible",
 				image: require("@/images/integrations/plausible.svg"),
 				className: "h-6"
+			},
+			{
+				label: "OpenPanel",
+				image: require("@/images/integrations/openpanel.svg"),
+				className: "h-6"
 			}
 		]
 	},

apps/home/src/components/StartupKitProvider.tsx

@@ -1,32 +1,69 @@
 "use client"
 
+import { OpenPanel } from "@openpanel/web"
 import { AnalyticsProvider } from "@startupkit/analytics"
-import googleAnalytics from "@startupkit/analytics/ga"
-import plausiblePlugin from "@startupkit/analytics/plausible"
-import posthogPlugin from "@startupkit/analytics/posthog"
+import type { ReactNode } from "react"
+import { useEffect, useRef } from "react"
 
-const plugins: any[] = [
-	googleAnalytics({
-		measurementIds: [process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID]
-	}),
-	plausiblePlugin({
-		domain: "startupkit.com",
-		trackLocalhost: true
-	}),
-	posthogPlugin({
-		token: process.env.NEXT_PUBLIC_POSTHOG_TOKEN || "",
-		enabled: true,
-		options: {
-			persistence: "memory",
-			disable_cookie: true
-		}
-	})
-]
+const openpanel =
+	typeof window !== "undefined"
+		? new OpenPanel({
+				clientId:
+					process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID ||
+					process.env.OPENPANEL_CLIENT_ID ||
+					"",
+				trackScreenViews: false,
+				trackOutgoingLinks: true,
+				trackAttributes: true
+			})
+		: null
 
 export const StartupKitProvider = ({
 	children
 }: Readonly<{
-	children: React.ReactNode
+	children: ReactNode
 }>) => {
-	return <AnalyticsProvider plugins={plugins}>{children}</AnalyticsProvider>
+	const initialized = useRef(false)
+
+	useEffect(() => {
+		if (!initialized.current && openpanel) {
+			initialized.current = true
+		}
+	}, [])
+
+	return (
+		<AnalyticsProvider
+			flags={{}}
+			handlers={{
+				identify: (userId, traits) => {
+					if (!openpanel) return
+					if (userId) {
+						openpanel.identify({
+							profileId: userId,
+							...(traits || {})
+						})
+					} else {
+						openpanel.clear()
+					}
+				},
+				track: (event, properties) => {
+					if (!openpanel) return
+					openpanel.track(event, properties || {})
+				},
+				page: (name, properties) => {
+					if (!openpanel) return
+					openpanel.track("$pageview", {
+						...(properties || {}),
+						...(name ? { route: name } : {})
+					})
+				},
+				reset: () => {
+					if (!openpanel) return
+					openpanel.clear()
+				}
+			}}
+		>
+			{children}
+		</AnalyticsProvider>
+	)
 }

apps/home/src/images/integrations/openpanel.svg

@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "description": "",
   "main": "index.js",
+  "type": "module",
   "private": true,
   "scripts": {
     "clean": "pnpm --stream -r run clean",
@@ -15,7 +16,9 @@
     "bump": "./scripts/bump",
     "oldrelease": "pnpm --stream --filter \"./packages/**\" exec -- pnpm release --no-git-checks --access public",
     "release": "pnpm build && pnpm -r publish --access public --no-git-checks",
-    "agents.md": "ruler apply"
+    "agents.md": "ruler apply",
+    "link:local": "node scripts/link-local.js link",
+    "unlink:local": "node scripts/link-local.js unlink"
   },
   "packageManager": "[email protected]",
   "author": "Ian Hunter <[email protected]>",
@@ -26,6 +29,7 @@
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-swc": "^0.3.1",
     "@swc/core": "^1.7.6",
+    "glob": "^11.0.3",
     "rollup": "^4.20.0",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-preserve-directives": "^1.1.1",