Merge pull request #20 from Design-System-Project/feat/analytics

integrate posthog analytics
Design-System-Pro · Aug 29, 2024 · ed1a63e · ed1a63e
2 parents f66fd44 + b5825ba
commit ed1a63e
Show file tree

Hide file tree

Showing 14 changed files with 140 additions and 72 deletions.
diff --git a/apps/dashboard/next.config.mjs b/apps/dashboard/next.config.mjs
@@ -2,7 +2,8 @@ import { fileURLToPath } from 'node:url';
 import createJiti from 'jiti';
 const jiti = createJiti(fileURLToPath(import.meta.url));
 
-jiti('./src/config');
+jiti('./src/env/client');
+jiti('./src/env/server');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -16,6 +17,20 @@ const nextConfig = {
     ],
   },
 
+  async rewrites() {
+    return [
+      {
+        source: '/_proxy/posthog/ingest/static/:path*',
+        destination: 'https://eu-assets.i.posthog.com/static/:path*',
+      },
+      {
+        source: '/_proxy/posthog/ingest/:path*',
+        destination: 'https://eu.i.posthog.com/:path*',
+      },
+    ];
+  },
+  skipTrailingSlashRedirect: true,
+
   reactStrictMode: true,
 
   /** Enables hot reloading for local packages without a build step */

diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -23,6 +23,7 @@
     "@octokit/core": "^6.1.2",
     "@supabase/ssr": "^0.4.0",
     "@supabase/supabase-js": "^2.45.0",
+    "@t3-oss/env-core": "^0.11.0",
     "@t3-oss/env-nextjs": "^0.11.0",
     "@tanstack/react-query": "^5.51.24",
     "@trpc/react-query": "catalog:",
@@ -37,6 +38,7 @@
     "memoize": "^10.0.0",
     "next": "catalog:",
     "postgres": "^3.4.4",
+    "posthog-js": "^1.160.0",
     "rambda": "^9.2.1",
     "react": "catalog:",
     "react-diff-viewer": "^3.1.1",
@@ -51,9 +53,9 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@ds-project/services": "workspace:*",
     "@ds-project/eslint": "workspace:*",
     "@ds-project/prettier": "workspace:*",
+    "@ds-project/services": "workspace:*",
     "@ds-project/typescript": "workspace:*",
     "@next/env": "^14.2.5",
     "@octokit/types": "^13.5.0",

diff --git a/apps/dashboard/src/app/app/tokens/_actions/fetch-release-tokens.action.ts b/apps/dashboard/src/app/app/tokens/_actions/fetch-release-tokens.action.ts
@@ -2,9 +2,9 @@
 import type { DesignTokens } from 'style-dictionary/types';
 import type { Octokit } from '@octokit/core';
 
-import { config } from '@/config';
 import { api } from '@ds-project/api/rsc';
 import { getInstallationOctokit } from '@ds-project/services/github';
+import { config } from '@/config';
 
 async function searchFileSha({
   octokit,

diff --git a/apps/dashboard/src/app/auth/login/_actions/login-user.action.ts b/apps/dashboard/src/app/auth/login/_actions/login-user.action.ts
@@ -1,9 +1,9 @@
 'use server';
 
 import { z } from 'zod';
-import { config } from '@/config';
 import { createServerClient } from '@ds-project/auth/server';
 import type { Database } from '@ds-project/database';
+import { config } from '@/config';
 
 const schema = z.object({
   email: z.string().email(),

diff --git a/apps/dashboard/src/app/layout.tsx b/apps/dashboard/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import { cn } from '@/lib/css';
+import { AnalyticsProvider } from '@/lib/analytics/provider';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -17,14 +18,16 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={cn(
-          'flex flex-col items-center bg-zinc-100 min-h-screen',
-          inter.className
-        )}
-      >
-        {children}
-      </body>
+      <AnalyticsProvider>
+        <body
+          className={cn(
+            'flex flex-col items-center bg-zinc-100 min-h-screen',
+            inter.className
+          )}
+        >
+          {children}
+        </body>
+      </AnalyticsProvider>
     </html>
   );
 }
diff --git a/apps/dashboard/src/config.ts b/apps/dashboard/src/config.ts
@@ -1,63 +1,19 @@
-import { createEnv } from '@t3-oss/env-nextjs';
-import { z } from 'zod';
-
-export const env = createEnv({
-  server: {
-    NODE_ENV: z.enum(['development', 'test', 'production']).optional(),
-    GITHUB_APP_ID: z.string().min(1),
-    GITHUB_APP_PRIVATE_KEY: z.string().min(1),
-    GITHUB_APP_CLIENT_ID: z.string().min(1),
-    GITHUB_APP_CLIENT_SECRET: z.string().min(1),
-    FIGMA_APP_CLIENT_ID: z.string().min(1),
-    FIGMA_APP_CLIENT_SECRET: z.string().min(1),
-    POSTGRES_URL: z.string().min(1),
-  },
-  client: {
-    NEXT_PUBLIC_SUPABASE_ANON_KEY: z.string().min(1),
-    NEXT_PUBLIC_SUPABASE_URL: z.string().url(),
-    NEXT_PUBLIC_VERCEL_ENV: z
-      .enum(['development', 'preview', 'production'])
-      .optional(),
-    NEXT_PUBLIC_VERCEL_URL: z.string().min(1).optional(),
-  },
-  experimental__runtimeEnv: {
-    NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
-    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
-    NEXT_PUBLIC_VERCEL_ENV: process.env.NEXT_PUBLIC_VERCEL_ENV,
-    NEXT_PUBLIC_VERCEL_URL: process.env.NEXT_PUBLIC_VERCEL_URL,
-  },
-});
+import { clientEnv } from './env/client';
 
 const pageUrl = (() => {
-  switch (env.NEXT_PUBLIC_VERCEL_ENV) {
+  switch (clientEnv.VERCEL_ENV) {
     case 'production':
       return 'https://designsystemproject.pro';
     case 'preview':
-      return `https://${env.NEXT_PUBLIC_VERCEL_URL}`;
+      return `https://${clientEnv.VERCEL_URL}`;
     default:
       return 'http://localhost:3000';
   }
 })();
 
 export const config = {
-  environment: env.NODE_ENV,
   pageUrl,
-  supabaseUrl: env.NEXT_PUBLIC_SUPABASE_URL,
-  supabaseAnonKey: env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
   FIGMA_KEY: 'figma.key',
-  github: {
-    appId: env.GITHUB_APP_ID,
-    appPrivateKey: Buffer.from(env.GITHUB_APP_PRIVATE_KEY, 'base64').toString(
-      'ascii'
-    ),
-    appClientId: env.GITHUB_APP_CLIENT_ID,
-    appClientSecret: env.GITHUB_APP_CLIENT_SECRET,
-  },
-  databaseUrl: env.NEXT_PUBLIC_SUPABASE_URL,
-  figma: {
-    appClientId: env.FIGMA_APP_CLIENT_ID,
-    appClientSecret: env.FIGMA_APP_CLIENT_SECRET,
-    redirectUri: `${pageUrl}/integrations/providers/figma/callback`,
-  },
+  figmaRedirectUri: `${pageUrl}/integrations/providers/figma/callback`,
   gitTokensPath: 'packages/generator/tokens',
 } as const;
diff --git a/apps/dashboard/src/env/client.ts b/apps/dashboard/src/env/client.ts
@@ -0,0 +1,18 @@
+/* eslint-disable no-restricted-properties */
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
+import { vercel } from '@t3-oss/env-core/presets';
+
+export const clientEnv = createEnv({
+  extends: [vercel()],
+  client: {
+    NEXT_PUBLIC_SUPABASE_ANON_KEY: z.string().min(1),
+    NEXT_PUBLIC_SUPABASE_URL: z.string().url(),
+    NEXT_PUBLIC_POSTHOG_KEY: z.string().min(1),
+  },
+  runtimeEnv: {
+    NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
+    NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
+  },
+});
diff --git a/apps/dashboard/src/env/server.ts b/apps/dashboard/src/env/server.ts
@@ -0,0 +1,18 @@
+/* eslint-disable no-restricted-properties */
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
+
+export const serverEnv = createEnv({
+  isServer: typeof window === 'undefined',
+  server: {
+    NODE_ENV: z.enum(['development', 'test', 'production']).optional(),
+    GITHUB_APP_ID: z.string().min(1),
+    GITHUB_APP_PRIVATE_KEY: z.string().min(1),
+    GITHUB_APP_CLIENT_ID: z.string().min(1),
+    GITHUB_APP_CLIENT_SECRET: z.string().min(1),
+    FIGMA_APP_CLIENT_ID: z.string().min(1),
+    FIGMA_APP_CLIENT_SECRET: z.string().min(1),
+    POSTGRES_URL: z.string().min(1),
+  },
+  experimental__runtimeEnv: process.env,
+});
diff --git a/apps/dashboard/src/lib/analytics/provider.tsx b/apps/dashboard/src/lib/analytics/provider.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { clientEnv } from '@/env/client';
+import posthog from 'posthog-js';
+import { PostHogProvider } from 'posthog-js/react';
+
+if (typeof window !== 'undefined') {
+  posthog.init(clientEnv.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host: '/_proxy/posthog/ingest',
+    ui_host: 'https://eu.posthog.com',
+    person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
+  });
+}
+
+interface AnalyticsProviderProps {
+  children: React.ReactNode;
+}
+export function AnalyticsProvider({ children }: AnalyticsProviderProps) {
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}
diff --git a/apps/dashboard/src/lib/auth/middleware.ts b/apps/dashboard/src/lib/auth/middleware.ts
@@ -1,14 +1,14 @@
 import { NextResponse } from 'next/server';
 import type { MiddlewareFactory } from '../middleware';
-import { config } from '@/config';
 import { createMiddlewareClient } from '@ds-project/auth/middleware';
+import { clientEnv } from '@/env/client';
 
 export const authenticationMiddleware: MiddlewareFactory =
   (middleware) =>
   async (request, event, response = NextResponse.next({ request })) => {
     const supabase = createMiddlewareClient(request, response, {
-      supabaseAnonKey: config.supabaseAnonKey,
-      supabaseUrl: config.supabaseUrl,
+      supabaseAnonKey: clientEnv.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+      supabaseUrl: clientEnv.NEXT_PUBLIC_SUPABASE_URL,
     });
 
     const {

diff --git a/apps/dashboard/src/lib/figma/figma.ts b/apps/dashboard/src/lib/figma/figma.ts
@@ -16,6 +16,7 @@ import {
 import { database } from '@ds-project/database/client';
 import { cache } from 'react';
 import { api } from '@ds-project/api/rsc';
+import { serverEnv } from '@/env/server';
 
 class Figma {
   private apiUrl = 'https://api.figma.com';
@@ -47,7 +48,7 @@ class Figma {
       headers: {
         'Content-Type': 'application/x-www-form-urlencoded',
       },
-      body: `client_id=${encodeURIComponent(config.figma.appClientId)}&client_secret=${encodeURIComponent(config.figma.appClientSecret)}&redirect_uri=${encodeURIComponent(config.figma.redirectUri)}&code=${encodeURIComponent(code)}&grant_type=authorization_code`,
+      body: `client_id=${encodeURIComponent(serverEnv.FIGMA_APP_CLIENT_ID)}&client_secret=${encodeURIComponent(serverEnv.FIGMA_APP_CLIENT_SECRET)}&redirect_uri=${encodeURIComponent(config.figmaRedirectUri)}&code=${encodeURIComponent(code)}&grant_type=authorization_code`,
     });
 
     if (!result.ok) {
@@ -86,7 +87,7 @@ class Figma {
       headers: {
         'Content-Type': 'application/x-www-form-urlencoded',
       },
-      body: `client_id=${encodeURIComponent(config.figma.appClientId)}&client_secret=${encodeURIComponent(config.figma.appClientSecret)}&redirect_uri=${encodeURIComponent(config.figma.redirectUri)}&refresh_token=${encodeURIComponent(integration.data.refreshToken)}`,
+      body: `client_id=${encodeURIComponent(serverEnv.FIGMA_APP_CLIENT_ID)}&client_secret=${encodeURIComponent(serverEnv.FIGMA_APP_CLIENT_SECRET)}&redirect_uri=${encodeURIComponent(config.figmaRedirectUri)}&refresh_token=${encodeURIComponent(integration.data.refreshToken)}`,
     });
 
     if (!result.ok) {
@@ -241,7 +242,7 @@ class Figma {
         }
       )
     ) {
-      return `${this.url}/oauth?client_id=${config.figma.appClientId}&redirect_uri=${config.figma.redirectUri}&scope=files:read,file_variables:read,file_variables:write&state=${state}&response_type=code`;
+      return `${this.url}/oauth?client_id=${serverEnv.FIGMA_APP_CLIENT_ID}&redirect_uri=${config.figmaRedirectUri}&scope=files:read,file_variables:read,file_variables:write&state=${state}&response_type=code`;
     }
 
     return null;

diff --git a/apps/dashboard/src/lib/middleware/figma/middleware.ts b/apps/dashboard/src/lib/middleware/figma/middleware.ts
@@ -2,10 +2,11 @@ import 'server-only';
 
 import { kv } from '@vercel/kv';
 import { NextResponse } from 'next/server';
-import { config } from '@/config';
 import type { KVCredentials, KVCredentialsRead } from '@/types/kv-types';
 import type { MiddlewareFactory } from '../compose';
 import { createMiddlewareClient } from '@ds-project/auth/middleware';
+import { clientEnv } from '@/env/client';
+import { config } from '@/config';
 
 export const figmaMiddleware: MiddlewareFactory =
   (middleware) =>
@@ -26,8 +27,8 @@ export const figmaMiddleware: MiddlewareFactory =
       );
 
       const supabase = createMiddlewareClient(request, response, {
-        supabaseAnonKey: config.supabaseAnonKey,
-        supabaseUrl: config.supabaseUrl,
+        supabaseAnonKey: clientEnv.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+        supabaseUrl: clientEnv.NEXT_PUBLIC_SUPABASE_URL,
       });
       const {
         data: { session },
@@ -83,8 +84,8 @@ export const figmaMiddleware: MiddlewareFactory =
     console.log('🔐 Figma: Figma key detected. Finishing authentication...');
 
     const supabase = createMiddlewareClient(request, response, {
-      supabaseAnonKey: config.supabaseAnonKey,
-      supabaseUrl: config.supabaseUrl,
+      supabaseAnonKey: clientEnv.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+      supabaseUrl: clientEnv.NEXT_PUBLIC_SUPABASE_URL,
     });
     const {
       data: { session },