chore(docs): replace va by posthog (#4123)

apps/docs/.env.example

@@ -16,4 +16,8 @@ NEXT_PUBLIC_PREVIEW=true/false
 
 ## Featurebase
 NEXT_PUBLIC_FB_FEEDBACK_ORG=
-NEXT_PUBLIC_FB_FEEDBACK_URL=
+NEXT_PUBLIC_FB_FEEDBACK_URL=
+
+# PostHog
+NEXT_PUBLIC_POSTHOG_KEY=your-posthog-key
+NEXT_PUBLIC_POSTHOG_HOST=your-posthog-host

apps/docs/app/providers.tsx

@@ -1,10 +1,17 @@
 "use client";
 
+import type {ReactNode} from "react";
+
 import * as React from "react";
 import {NextUIProvider} from "@nextui-org/react";
 import {ThemeProvider as NextThemesProvider} from "next-themes";
 import {ThemeProviderProps} from "next-themes/dist/types";
 import {useRouter} from "next/navigation";
+import {useEffect} from "react";
+import posthog from "posthog-js";
+import {PostHogProvider} from "posthog-js/react";
+
+import {__PROD__} from "@/utils";
 
 export interface ProvidersProps {
   children: React.ReactNode;
@@ -14,9 +21,29 @@ export interface ProvidersProps {
 export function Providers({children, themeProps}: ProvidersProps) {
   const router = useRouter();
 
+  const ProviderWrapper = ({children}: {children: ReactNode}) => {
+    useEffect(() => {
+      if (typeof window !== "undefined") {
+        posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+          api_host: "/ingest",
+          person_profiles: "identified_only",
+          ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+        });
+      }
+    }, []);
+
+    if (__PROD__) {
+      return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+    }
+
+    return children;
+  };
+
   return (
-    <NextUIProvider navigate={router.push}>
-      <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
-    </NextUIProvider>
+    <ProviderWrapper>
+      <NextUIProvider navigate={router.push}>
+        <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
+      </NextUIProvider>
+    </ProviderWrapper>
   );
 }

apps/docs/components/blog-post.tsx

@@ -6,15 +6,17 @@ import Balancer from "react-wrap-balancer";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";
 import {AnimatePresence, motion} from "framer-motion";
+import {usePostHog} from "posthog-js/react";
 
 import {useIsMounted} from "@/hooks/use-is-mounted";
-import {trackEvent} from "@/utils/va";
 
 const BlogPostCard = (post: BlogPost) => {
   const isMounted = useIsMounted();
 
+  const posthog = usePostHog();
+
   const handlePress = () => {
-    trackEvent("BlogPostCard - Selection", {
+    posthog.capture("BlogPostCard - Selection", {
       name: post.title,
       action: "click",
       category: "blog",

apps/docs/components/cmdk.tsx

@@ -15,6 +15,7 @@ import {isAppleDevice, isWebKit} from "@react-aria/utils";
 import {create} from "zustand";
 import {intersectionBy, isEmpty} from "lodash";
 import {writeStorage, useLocalStorage} from "@rehooks/local-storage";
+import {usePostHog} from "posthog-js/react";
 
 import {
   DocumentCodeBoldIcon,
@@ -25,7 +26,6 @@ import {
 
 import searchData from "@/config/search-meta.json";
 import {useUpdateEffect} from "@/hooks/use-update-effect";
-import {trackEvent} from "@/utils/va";
 
 const hideOnPaths = ["examples"];
 
@@ -139,6 +139,8 @@ export const Cmdk: FC<{}> = () => {
 
   const {isOpen, onClose, onOpen} = useCmdkStore();
 
+  const posthog = usePostHog();
+
   const [recentSearches] = useLocalStorage<SearchResultItem[]>(RECENT_SEARCHES_KEY);
 
   const addToRecentSearches = (item: SearchResultItem) => {
@@ -196,7 +198,7 @@ export const Cmdk: FC<{}> = () => {
 
       const matches = intersectionBy(...matchesForEachWord, "objectID").slice(0, MAX_RESULTS);
 
-      trackEvent("Cmdk - Search", {
+      posthog.capture("Cmdk - Search", {
         name: "cmdk - search",
         action: "search",
         category: "cmdk",
@@ -219,7 +221,7 @@ export const Cmdk: FC<{}> = () => {
         e.preventDefault();
         isOpen ? onClose() : onOpen();
 
-        trackEvent("Cmdk - Open/Close", {
+        posthog.capture("Cmdk - Open/Close", {
           name: "cmdk - open/close",
           action: "keydown",
           category: "cmdk",
@@ -241,7 +243,7 @@ export const Cmdk: FC<{}> = () => {
       router.push(item.url);
       addToRecentSearches(item);
 
-      trackEvent("Cmdk - ItemSelect", {
+      posthog.capture("Cmdk - ItemSelect", {
         name: item.content,
         action: "click",
         category: "cmdk",

apps/docs/components/demos/custom-button.tsx

@@ -2,11 +2,11 @@
 
 import {useRef} from "react";
 import {Button} from "@nextui-org/react";
-
-import {trackEvent} from "@/utils/va";
+import {usePostHog} from "posthog-js/react";
 
 export const CustomButton = () => {
   const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const posthog = usePostHog();
 
   const handleConfetti = async () => {
     const {clientWidth, clientHeight} = document.documentElement;
@@ -29,7 +29,7 @@ export const CustomButton = () => {
       },
     });
 
-    trackEvent("LandingPage - Confetti Button", {
+    posthog.capture("LandingPage - Confetti Button", {
       action: "press",
       category: "landing-page",
     });

apps/docs/components/docs/components/component-links.tsx

@@ -1,10 +1,10 @@
 import {Button, ButtonProps, Code, Link, Tooltip} from "@nextui-org/react";
 import {ReactNode} from "react";
 import Balancer from "react-wrap-balancer";
+import {usePostHog} from "posthog-js/react";
 
 import {GithubIcon, NpmIcon, AdobeIcon, StorybookIcon, NextJsIcon} from "@/components/icons";
 import {COMPONENT_PATH, COMPONENT_THEME_PATH} from "@/libs/github/constants";
-import {trackEvent} from "@/utils/va";
 
 export interface ComponentLinksProps {
   component: string;
@@ -26,10 +26,12 @@ const ButtonLink = ({
   href: string;
   tooltip?: string | ReactNode;
 }) => {
+  const posthog = usePostHog();
+
   const handlePress = () => {
     if (!href) return;
 
-    trackEvent("ComponentLinks - Click", {
+    posthog.capture("ComponentLinks - Click", {
       category: "docs",
       action: "click",
       data: href || "",

apps/docs/components/docs/pager.tsx

@@ -2,14 +2,14 @@
 
 import * as React from "react";
 import {Link} from "@nextui-org/react";
+import {usePostHog} from "posthog-js/react";
 import {useRouter} from "next/navigation";
 import {ChevronIcon} from "@nextui-org/shared-icons";
 
 import manifest from "@/config/routes.json";
 import {removeFromLast} from "@/utils";
 import {Route} from "@/libs/docs/page";
 import {useDocsRoute} from "@/hooks/use-docs-route";
-import {trackEvent} from "@/utils/va";
 
 export interface FooterNavProps {
   currentRoute?: Route;
@@ -20,8 +20,10 @@ export const DocsPager: React.FC<FooterNavProps> = ({currentRoute}) => {
 
   const {prevRoute, nextRoute} = useDocsRoute(manifest.routes, currentRoute);
 
+  const posthog = usePostHog();
+
   const handlePress = (path: string) => {
-    trackEvent("DocsPager - Click", {
+    posthog.capture("DocsPager - Click", {
       category: "docs",
       action: "click",
       data: path || "",

apps/docs/components/docs/sidebar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {FC, useEffect, useState} from "react";
+import {usePostHog} from "posthog-js/react";
 import {ChevronIcon} from "@nextui-org/shared-icons";
 import {CollectionBase, Expandable, MultipleSelection, Node, ItemProps} from "@react-types/shared";
 import {BaseItem} from "@nextui-org/aria-utils";
@@ -27,7 +28,6 @@ import {getRoutePaths} from "./utils";
 
 import {Route} from "@/libs/docs/page";
 import {TreeKeyboardDelegate} from "@/utils/tree-keyboard-delegate";
-import {trackEvent} from "@/utils/va";
 import {FbFeedbackButton} from "@/components/featurebase/fb-feedback-button";
 import {FbChangelogButton} from "@/components/featurebase/fb-changelog-button";
 import {FbRoadmapLink} from "@/components/featurebase/fb-roadmap-link";
@@ -66,6 +66,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
 
   const router = useRouter();
   const pathname = usePathname();
+  const posthog = usePostHog();
 
   const paths = item.props.path
     ? getRoutePaths(item.props.path, item.props?.tag)
@@ -109,7 +110,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       } else {
         router.push(paths.pathname);
 
-        trackEvent("SidebarDocs", {
+        posthog.capture("SidebarDocs", {
           category: "docs",
           action: "click",
           data: paths.pathname || "",

apps/docs/components/featurebase/fb-changelog-button.tsx

@@ -1,15 +1,16 @@
 "use client";
 
 import {useEffect} from "react";
-
-import {trackEvent} from "@/utils/va";
+import {usePostHog} from "posthog-js/react";
 
 type Props = {
   className?: string;
 };
 
 // ref: https://developers.featurebase.app/install/changelog-widget/install
 export const FbChangelogButton = ({className}: Props) => {
+  const posthog = usePostHog();
+
   useEffect(() => {
     const win = window as any;
 
@@ -31,7 +32,7 @@ export const FbChangelogButton = ({className}: Props) => {
   const fbButtonOnClick = () => {
     (window as any).Featurebase("manually_open_changelog_popup");
 
-    trackEvent("Featurebase - Changelog", {
+    posthog.capture("Featurebase - Changelog", {
       name: "featurebase-changelog",
       action: "press",
       category: "featurebase",

apps/docs/components/featurebase/fb-feedback-button.tsx

@@ -1,15 +1,16 @@
 "use client";
 
 import {useEffect} from "react";
-
-import {trackEvent} from "@/utils/va";
+import {usePostHog} from "posthog-js/react";
 
 type Props = {
   className?: string;
 };
 
 // ref: https://developers.featurebase.app/install/feedback-widget/setup
 export const FbFeedbackButton = ({className}: Props) => {
+  const posthog = usePostHog();
+
   useEffect(() => {
     const win = window as any;
 
@@ -27,7 +28,7 @@ export const FbFeedbackButton = ({className}: Props) => {
   }, []);
 
   const fbButtonOnClick = () => {
-    trackEvent("Featurebase - Feedback", {
+    posthog.capture("Featurebase - Feedback", {
       name: "featurebase-feedback",
       action: "press",
       category: "featurebase",

apps/docs/components/featurebase/fb-roadmap-link.tsx

@@ -1,20 +1,21 @@
 "use client";
 
 import NextLink from "next/link";
+import {usePostHog} from "posthog-js/react";
 import arrowRightUpIcon from "@iconify/icons-solar/arrow-right-up-linear";
 import {Icon} from "@iconify/react/dist/offline";
 import {clsx} from "@nextui-org/shared-utils";
 
-import {trackEvent} from "@/utils/va";
-
 type Props = {
   className?: string;
   innerClassName?: string;
 };
 
 export const FbRoadmapLink = ({className, innerClassName}: Props) => {
+  const posthog = usePostHog();
+
   const fbLinkOnClick = () => {
-    trackEvent("Featurebase - Roadmap", {
+    posthog.capture("Featurebase - Roadmap", {
       name: "featurebase-roadmap",
       action: "press",
       category: "featurebase",

apps/docs/components/figma-button.tsx

@@ -1,25 +1,28 @@
 "use client";
 
 import {Button, Link} from "@nextui-org/react";
+import {usePostHog} from "posthog-js/react";
 
-import {trackEvent} from "@/utils/va";
+export const FigmaButton = () => {
+  const posthog = usePostHog();
 
-export const FigmaButton = () => (
-  <Button
-    isExternal
-    showAnchorIcon
-    as={Link}
-    className="max-w-fit text-current"
-    color="default"
-    href="https://www.figma.com/community/file/1267584376234254760"
-    variant="bordered"
-    onPress={() => {
-      trackEvent("FigmaPage - Open Figma Link", {
-        action: "click",
-        category: "figma",
-      });
-    }}
-  >
-    Open in Figma
-  </Button>
-);
+  return (
+    <Button
+      isExternal
+      showAnchorIcon
+      as={Link}
+      className="max-w-fit text-current"
+      color="default"
+      href="https://www.figma.com/community/file/1267584376234254760"
+      variant="bordered"
+      onPress={() => {
+        posthog.capture("FigmaPage - Open Figma Link", {
+          action: "click",
+          category: "figma",
+        });
+      }}
+    >
+      Open in Figma
+    </Button>
+  );
+};