@hanzo/insights-react 1.8.1 → 1.9.1

package/src/context/__tests__/{PostHogProvider.test.tsx → InsightsProvider.test.tsx}

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { render, act } from '@testing-library/react'
-import { PostHogProvider, PostHog } from '..'
-import posthogJs from '@hanzo/insights'
+import { InsightsProvider, Insights } from '..'
+import insightsJs from '@hanzo/insights'
 
-// Mock posthog-js
+// Mock insights-js
 jest.mock('@hanzo/insights', () => ({
     __esModule: true,
     default: {
@@ -13,21 +13,21 @@ jest.mock('@hanzo/insights', () => ({
     },
 }))
 
-describe('PostHogProvider component', () => {
+describe('InsightsProvider component', () => {
     it('should render children components', () => {
-        const posthog = {} as unknown as PostHog
+        const insights = {} as unknown as Insights
         const { getByText } = render(
-            <PostHogProvider client={posthog}>
+            <InsightsProvider client={insights}>
                 <div>Test</div>
-            </PostHogProvider>
+            </InsightsProvider>
         )
         expect(getByText('Test')).toBeTruthy()
     })
 
     describe('when using apiKey initialization', () => {
         const apiKey = 'test-api-key'
-        const initialOptions = { api_host: 'https://app.posthog.com' }
-        const updatedOptions = { api_host: 'https://eu.posthog.com' }
+        const initialOptions = { api_host: 'https://app.insights.hanzo.ai' }
+        const updatedOptions = { api_host: 'https://eu.insights.com' }
 
         beforeEach(() => {
             jest.clearAllMocks()
@@ -35,49 +35,49 @@ describe('PostHogProvider component', () => {
 
         it('should call set_config when options change', () => {
             const { rerender } = render(
-                <PostHogProvider apiKey={apiKey} options={initialOptions}>
+                <InsightsProvider apiKey={apiKey} options={initialOptions}>
                     <div>Test</div>
-                </PostHogProvider>
+                </InsightsProvider>
             )
 
             // First render should initialize
-            expect(posthogJs.init).toHaveBeenCalledWith(apiKey, initialOptions)
+            expect(insightsJs.init).toHaveBeenCalledWith(apiKey, initialOptions)
 
             // Rerender with new options
             act(() => {
                 rerender(
-                    <PostHogProvider apiKey={apiKey} options={updatedOptions}>
+                    <InsightsProvider apiKey={apiKey} options={updatedOptions}>
                         <div>Test</div>
-                    </PostHogProvider>
+                    </InsightsProvider>
                 )
             })
 
             // Should call set_config with new options
-            expect(posthogJs.set_config).toHaveBeenCalledWith(updatedOptions)
+            expect(insightsJs.set_config).toHaveBeenCalledWith(updatedOptions)
         })
 
         it('should NOT call set_config when we pass new options that are the same as the previous options', () => {
             const { rerender } = render(
-                <PostHogProvider apiKey={apiKey} options={initialOptions}>
+                <InsightsProvider apiKey={apiKey} options={initialOptions}>
                     <div>Test</div>
-                </PostHogProvider>
+                </InsightsProvider>
             )
 
             // First render should initialize
-            expect(posthogJs.init).toHaveBeenCalledWith(apiKey, initialOptions)
+            expect(insightsJs.init).toHaveBeenCalledWith(apiKey, initialOptions)
 
             // Rerender with new options
             const sameOptionsButDifferentReference = { ...initialOptions }
             act(() => {
                 rerender(
-                    <PostHogProvider apiKey={apiKey} options={sameOptionsButDifferentReference}>
+                    <InsightsProvider apiKey={apiKey} options={sameOptionsButDifferentReference}>
                         <div>Test</div>
-                    </PostHogProvider>
+                    </InsightsProvider>
                 )
             })
 
             // Should NOT call set_config
-            expect(posthogJs.set_config).not.toHaveBeenCalled()
+            expect(insightsJs.set_config).not.toHaveBeenCalled()
         })
 
         it('should warn when attempting to change apiKey', () => {
@@ -85,47 +85,47 @@ describe('PostHogProvider component', () => {
             const newApiKey = 'different-api-key'
 
             const { rerender } = render(
-                <PostHogProvider apiKey={apiKey} options={initialOptions}>
+                <InsightsProvider apiKey={apiKey} options={initialOptions}>
                     <div>Test</div>
-                </PostHogProvider>
+                </InsightsProvider>
             )
 
             // First render should initialize
-            expect(posthogJs.init).toHaveBeenCalledWith(apiKey, initialOptions)
+            expect(insightsJs.init).toHaveBeenCalledWith(apiKey, initialOptions)
 
             // Rerender with new apiKey
             act(() => {
                 rerender(
-                    <PostHogProvider apiKey={newApiKey} options={initialOptions}>
+                    <InsightsProvider apiKey={newApiKey} options={initialOptions}>
                         <div>Test</div>
-                    </PostHogProvider>
+                    </InsightsProvider>
                 )
             })
 
             // Should warn about apiKey change
             expect(consoleSpy).toHaveBeenCalledWith(
-                expect.stringContaining('You have provided a different `apiKey` to `PostHogProvider`')
+                expect.stringContaining('You have provided a different `apiKey` to `InsightsProvider`')
             )
 
             consoleSpy.mockRestore()
         })
 
-        it('warns if posthogJs has been loaded elsewhere', () => {
-            ;(posthogJs as any).__loaded = true
+        it('warns if insightsJs has been loaded elsewhere', () => {
+            ;(insightsJs as any).__loaded = true
 
             const consoleSpy = jest.spyOn(console, 'warn').mockImplementation()
             render(
-                <PostHogProvider apiKey={apiKey} options={initialOptions}>
+                <InsightsProvider apiKey={apiKey} options={initialOptions}>
                     <div>Test</div>
-                </PostHogProvider>
+                </InsightsProvider>
             )
 
             expect(consoleSpy).toHaveBeenCalledWith(
-                expect.stringContaining('`posthog` was already loaded elsewhere. This may cause issues.')
+                expect.stringContaining('`insights` was already loaded elsewhere. This may cause issues.')
             )
 
             consoleSpy.mockRestore()
-            ;(posthogJs as any).__loaded = false
+            ;(insightsJs as any).__loaded = false
         })
     })
 })

package/src/context/index.ts

@@ -1,2 +1,2 @@
-export * from './PostHogContext'
-export * from './PostHogProvider'
+export * from './InsightsContext'
+export * from './InsightsProvider'

package/src/helpers/error-helpers.ts

@@ -1,9 +1,9 @@
 import type { ErrorInfo } from 'react'
-import { PostHog } from '../context'
+import { Insights } from '../context'
 import { CaptureResult } from '@hanzo/insights'
 
 export const setupReactErrorHandler = (
-    client: PostHog,
+    client: Insights,
     callback?: (event: CaptureResult | undefined, error: any, errorInfo: ErrorInfo) => void
 ) => {
     return (error: any, errorInfo: ErrorInfo): void => {

package/src/hooks/__tests__/featureFlags.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { renderHook, act } from '@testing-library/react'
-import { PostHogProvider, PostHog } from '../../context'
+import { InsightsProvider, Insights } from '../../context'
 import { isUndefined } from '../../utils/type-utils'
 import {
     useFeatureFlagPayload,
@@ -30,11 +30,11 @@ const FEATURE_FLAG_PAYLOADS: Record<string, any> = {
 }
 
 describe('feature flag hooks', () => {
-    let posthog: PostHog
+    let insights: Insights
     let renderProvider: React.FC<{ children: React.ReactNode }>
 
     beforeEach(() => {
-        posthog = {
+        insights = {
             isFeatureEnabled: (flag: string) => !!FEATURE_FLAG_STATUS[flag],
             getFeatureFlag: (flag: string) => FEATURE_FLAG_STATUS[flag],
             getFeatureFlagPayload: (flag: string) => FEATURE_FLAG_PAYLOADS[flag],
@@ -63,11 +63,11 @@ describe('feature flag hooks', () => {
             featureFlags: {
                 getFlags: () => ACTIVE_FEATURE_FLAGS,
                 hasLoadedFlags: true,
-            } as unknown as PostHog['featureFlags'],
-        } as unknown as PostHog
+            } as unknown as Insights['featureFlags'],
+        } as unknown as Insights
 
         // eslint-disable-next-line react/display-name
-        renderProvider = ({ children }) => <PostHogProvider client={posthog}>{children}</PostHogProvider>
+        renderProvider = ({ children }) => <InsightsProvider client={insights}>{children}</InsightsProvider>
     })
 
     it.each([
@@ -132,12 +132,12 @@ describe('feature flag hooks', () => {
                     },
                     featureFlags: {
                         hasLoadedFlags: false,
-                    } as unknown as PostHog['featureFlags'],
-                } as unknown as PostHog
+                    } as unknown as Insights['featureFlags'],
+                } as unknown as Insights
 
                 // eslint-disable-next-line react/display-name
                 const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-                    <PostHogProvider client={client}>{children}</PostHogProvider>
+                    <InsightsProvider client={client}>{children}</InsightsProvider>
                 )
 
                 return wrapper
@@ -211,12 +211,12 @@ describe('feature flag hooks', () => {
                     },
                     featureFlags: {
                         hasLoadedFlags: true,
-                    } as unknown as PostHog['featureFlags'],
-                } as unknown as PostHog
+                    } as unknown as Insights['featureFlags'],
+                } as unknown as Insights
 
                 // eslint-disable-next-line react/display-name
                 const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-                    <PostHogProvider client={client}>{children}</PostHogProvider>
+                    <InsightsProvider client={client}>{children}</InsightsProvider>
                 )
 
                 const { result } = renderHook(() => useFeatureFlagResult('flag'), { wrapper })
@@ -254,12 +254,12 @@ describe('feature flag hooks', () => {
                     onFeatureFlags: () => unsubscribe,
                     featureFlags: {
                         hasLoadedFlags: true,
-                    } as unknown as PostHog['featureFlags'],
-                } as unknown as PostHog
+                    } as unknown as Insights['featureFlags'],
+                } as unknown as Insights
 
                 // eslint-disable-next-line react/display-name
                 const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-                    <PostHogProvider client={client}>{children}</PostHogProvider>
+                    <InsightsProvider client={client}>{children}</InsightsProvider>
                 )
 
                 const { unmount } = renderHook(() => useFeatureFlagResult('flag'), { wrapper })

package/src/hooks/__tests__/useInsights.test.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { renderHook } from '@testing-library/react'
+import { InsightsProvider, Insights } from '../../context'
+import { useInsights } from '..'
+
+jest.useFakeTimers()
+
+const insights = { insights_client: true } as unknown as Insights
+
+describe('useInsights hook', () => {
+    it('should return the client', () => {
+        const { result } = renderHook(() => useInsights(), {
+            wrapper: ({ children }: { children: React.ReactNode }) => (
+                <InsightsProvider client={insights}>{children}</InsightsProvider>
+            ),
+        })
+        expect(result.current).toEqual(insights)
+    })
+})

package/src/hooks/__tests__/useThumbSurvey.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { renderHook, act } from '@testing-library/react'
-import { PostHogProvider, PostHog } from '../../context'
+import { InsightsProvider, Insights } from '../../context'
 import { useThumbSurvey } from '../useThumbSurvey'
 import { SurveyEventName, SurveyEventProperties } from '@hanzo/insights'
 import { isUndefined } from '../../utils/type-utils'
@@ -8,7 +8,7 @@ import { isUndefined } from '../../utils/type-utils'
 jest.useFakeTimers()
 
 describe('useThumbSurvey hook', () => {
-    let posthog: PostHog
+    let insights: Insights
     let captureMock: jest.Mock
     let displaySurveyMock: jest.Mock
     let wrapper: React.FC<{ children: React.ReactNode }>
@@ -17,13 +17,13 @@ describe('useThumbSurvey hook', () => {
         captureMock = jest.fn()
         displaySurveyMock = jest.fn()
 
-        posthog = {
+        insights = {
             capture: captureMock,
-            get_session_replay_url: () => 'https://app.posthog.com/replay/123',
+            get_session_replay_url: () => 'https://app.insights.hanzo.ai/replay/123',
             surveys: { displaySurvey: displaySurveyMock },
-        } as unknown as PostHog
+        } as unknown as Insights
 
-        wrapper = ({ children }) => <PostHogProvider client={posthog}>{children}</PostHogProvider>
+        wrapper = ({ children }) => <InsightsProvider client={insights}>{children}</InsightsProvider>
     })
 
     describe('survey shown tracking', () => {
@@ -57,7 +57,7 @@ describe('useThumbSurvey hook', () => {
             expect(captureMock).toHaveBeenCalledTimes(1)
             expect(captureMock).toHaveBeenCalledWith(SurveyEventName.SHOWN, {
                 [SurveyEventProperties.SURVEY_ID]: 'test-survey',
-                sessionRecordingUrl: 'https://app.posthog.com/replay/123',
+                sessionRecordingUrl: 'https://app.insights.hanzo.ai/replay/123',
             })
         })
     })

package/src/hooks/index.ts

@@ -3,4 +3,4 @@ export * from './useFeatureFlagPayload'
 export * from './useFeatureFlagResult'
 export * from './useActiveFeatureFlags'
 export * from './useFeatureFlagVariantKey'
-export * from './usePostHog'
+export * from './useInsights'

package/src/hooks/useActiveFeatureFlags.ts

@@ -1,8 +1,8 @@
 import { useContext, useEffect, useState } from 'react'
-import { PostHogContext } from '../context'
+import { InsightsContext } from '../context'
 
 export function useActiveFeatureFlags(): string[] {
-    const { client, bootstrap } = useContext(PostHogContext)
+    const { client, bootstrap } = useContext(InsightsContext)
 
     const [featureFlags, setFeatureFlags] = useState<string[]>(() => client.featureFlags.getFlags())
 

package/src/hooks/useFeatureFlagEnabled.ts

@@ -1,9 +1,9 @@
 import { useContext, useEffect, useState } from 'react'
-import { PostHogContext } from '../context'
+import { InsightsContext } from '../context'
 import { isUndefined } from '../utils/type-utils'
 
 export function useFeatureFlagEnabled(flag: string): boolean | undefined {
-    const { client, bootstrap } = useContext(PostHogContext)
+    const { client, bootstrap } = useContext(InsightsContext)
 
     const [featureEnabled, setFeatureEnabled] = useState<boolean | undefined>(() => client.isFeatureEnabled(flag))
 

package/src/hooks/useFeatureFlagPayload.ts

@@ -1,9 +1,9 @@
 import { JsonType } from '@hanzo/insights'
 import { useContext, useEffect, useState } from 'react'
-import { PostHogContext } from '../context'
+import { InsightsContext } from '../context'
 
 export function useFeatureFlagPayload(flag: string): JsonType {
-    const { client, bootstrap } = useContext(PostHogContext)
+    const { client, bootstrap } = useContext(InsightsContext)
 
     const [featureFlagPayload, setFeatureFlagPayload] = useState<JsonType>(() => client.getFeatureFlagPayload(flag))
 

package/src/hooks/useFeatureFlagResult.ts

@@ -1,10 +1,10 @@
 import { FeatureFlagResult } from '@hanzo/insights'
 import { useContext, useEffect, useState } from 'react'
-import { PostHogContext } from '../context'
+import { InsightsContext } from '../context'
 import { isUndefined } from '../utils/type-utils'
 
 export function useFeatureFlagResult(flag: string): FeatureFlagResult | undefined {
-    const { client, bootstrap } = useContext(PostHogContext)
+    const { client, bootstrap } = useContext(InsightsContext)
 
     const [result, setResult] = useState<FeatureFlagResult | undefined>(() => client.getFeatureFlagResult(flag))
 

package/src/hooks/useFeatureFlagVariantKey.ts

@@ -1,8 +1,8 @@
 import { useContext, useEffect, useState } from 'react'
-import { PostHogContext } from '../context'
+import { InsightsContext } from '../context'
 
 export function useFeatureFlagVariantKey(flag: string): string | boolean | undefined {
-    const { client, bootstrap } = useContext(PostHogContext)
+    const { client, bootstrap } = useContext(InsightsContext)
 
     const [featureFlagVariantKey, setFeatureFlagVariantKey] = useState<string | boolean | undefined>(() =>
         client.getFeatureFlag(flag)

package/src/hooks/useInsights.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react'
+import { Insights, InsightsContext } from '../context'
+
+export const useInsights = (): Insights => {
+    const { client } = useContext(InsightsContext)
+    return client
+}

package/src/hooks/useThumbSurvey.ts

@@ -1,9 +1,9 @@
 import { useState, useCallback, useRef, useMemo, type RefCallback, useEffect } from 'react'
-import { usePostHog } from './usePostHog'
+import { useInsights } from './useInsights'
 import { DisplaySurveyType, SurveyEventName, SurveyEventProperties, SurveyPosition } from '@hanzo/insights'
 
 export interface UseThumbSurveyOptions {
-    /** ID of the target PostHog survey */
+    /** ID of the target Insights survey */
     surveyId: string
     /** Configure the position of the pop-up for followup questions, if applicable. Defaults to SurveyPosition.NextToTrigger */
     displayPosition?: SurveyPosition
@@ -32,11 +32,11 @@ const TRIGGER_ATTR = 'data-ph-thumb-survey-trigger'
  * Convenience hook for managing a "thumb" (1-2 rating scale) survey.
  *
  * Pre-requisites:
- * 1) Ensure surveys are not disabled in your PostHog config (`disable_surveys: false`)
- * 2) Ensure surveys are enabled in your PostHog project (Settings > Surveys > Enable surveys)
+ * 1) Ensure surveys are not disabled in your Insights config (`disable_surveys: false`)
+ * 2) Ensure surveys are enabled in your Insights project (Settings > Surveys > Enable surveys)
  *
  * How-to:
- * 1) Create an API survey in PostHog (New survey > Presentation > API)
+ * 1) Create an API survey in Insights (New survey > Presentation > API)
  * 2) Set the first question to a thumb rating scale (Question type: Rating -> Display type: Emoji -> Scale: 1-2 (thumbs up/down))
  * 3) Set the thumb question to "Automatically submit on selection"
  * 4) Optionally add follow-up questions
@@ -77,7 +77,7 @@ export function useThumbSurvey({
     onResponse,
     disableAutoShownTracking,
 }: UseThumbSurveyOptions): UseThumbSurveyResult {
-    const posthog = usePostHog()
+    const insights = useInsights()
     const [responded, setResponded] = useState<'up' | 'down' | null>(null)
     const [instanceId] = useState(() => Math.random().toString(36).slice(2, 9))
     const triggerValue = useMemo(() => `${surveyId}-${instanceId}`, [surveyId, instanceId])
@@ -100,14 +100,14 @@ export function useThumbSurvey({
     const respondedRef = useRef(false)
 
     const trackShown = useCallback(() => {
-        if (shownRef.current || !posthog) return
+        if (shownRef.current || !insights) return
         shownRef.current = true
-        posthog.capture(SurveyEventName.SHOWN, {
+        insights.capture(SurveyEventName.SHOWN, {
             [SurveyEventProperties.SURVEY_ID]: surveyId,
-            sessionRecordingUrl: posthog.get_session_replay_url?.(),
+            sessionRecordingUrl: insights.get_session_replay_url?.(),
             ...properties,
         })
-    }, [posthog, surveyId, properties])
+    }, [insights, surveyId, properties])
 
     useEffect(() => {
         if (!disableAutoShownTracking) {
@@ -117,13 +117,13 @@ export function useThumbSurvey({
 
     const respond = useCallback(
         (value: 'up' | 'down') => {
-            if (!posthog?.surveys || respondedRef.current) return
+            if (!insights?.surveys || respondedRef.current) return
             respondedRef.current = true
 
             setResponded(value)
             onResponse?.(value)
 
-            posthog.surveys.displaySurvey(surveyId, {
+            insights.surveys.displaySurvey(surveyId, {
                 displayType: DisplaySurveyType.Popover,
                 ignoreConditions: true,
                 ignoreDelay: true,
@@ -134,7 +134,7 @@ export function useThumbSurvey({
                 skipShownEvent: true,
             })
         },
-        [posthog, surveyId, displayPosition, properties, onResponse, triggerValue]
+        [insights, surveyId, displayPosition, properties, onResponse, triggerValue]
     )
 
     return {

package/src/utils/type-utils.ts

@@ -2,7 +2,7 @@
 // fails on only one very rare and deliberate custom object:
 // let bomb = { toString : undefined, valueOf: function(o) { return "function BOMBA!"; }};
 export const isFunction = function (f: any): f is (...args: any[]) => any {
-    // eslint-disable-next-line posthog-js/no-direct-function-check
+    // eslint-disable-next-line @hanzo/insights/no-direct-function-check
     return typeof f === 'function'
 }
 
@@ -11,6 +11,6 @@ export const isUndefined = function (x: unknown): x is undefined {
 }
 
 export const isNull = function (x: unknown): x is null {
-    // eslint-disable-next-line posthog-js/no-direct-null-check
+    // eslint-disable-next-line @hanzo/insights/no-direct-null-check
     return x === null
 }

package/surveys/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "@posthog/react-surveys",
+    "name": "@hanzo/react-surveys",
     "private": true,
     "main": "../dist/umd/surveys/index.js",
     "module": "../dist/esm/surveys/index.js",

package/src/context/PostHogContext.ts

@@ -1,9 +0,0 @@
-import posthogJs, { BootstrapConfig } from '@hanzo/insights'
-import { createContext } from 'react'
-
-export type PostHog = typeof posthogJs
-
-export const PostHogContext = createContext<{ client: PostHog; bootstrap?: BootstrapConfig }>({
-    client: posthogJs,
-    bootstrap: undefined,
-})