feat(analytics): Rename component.

app/layout.tsx

@@ -1,9 +1,9 @@
 import { draftMode } from 'next/headers';
 
 import { VercelToolbar } from '@vercel/toolbar/next';
+import { AnalyticsComponent } from 'components/analytics';
 import { graphql } from 'gql.tada';
 
-import { AnalyticsComponent } from '#/components/analytic';
 import { ContentfulPreviewProvider } from '#/components/contentful-preview-provider';
 
 import { graphqlClient } from '../lib/graphqlClient';

components/analytic/README.md → components/analytics/README.md

@@ -1,6 +1,6 @@
-# Analytic
+# Analytics
 
-Analytic solution is based on the [getanalytics.io](https://getanalytics.io/) library.
+Analytics solution is based on the [getanalytics.io](https://getanalytics.io/) library.
 The library provides three base API interfaces to sent tracking information:
 - `page()` - trigger page view. This will trigger page calls in any installed plugins
 - `identify()` - this will trigger identify calls in any installed plugins and will set user data in localStorage
@@ -9,7 +9,7 @@ The library provides three base API interfaces to sent tracking information:
 ## NextJS Integration
 
 We will provide integration with NextJS for three different cases: page view,
-component in view, click on target. See the `components/analytic/analytic.tsx`
+component in view, click on target. See the `components/analytics/analytics.tsx`
 file where we convey the global Analytics context and define a hook to track
 page view. Then go to the `app/layout.tsx` where we wrap all children components
 inside the analytics context.
@@ -33,12 +33,12 @@ inside UI components on demand.
 
 ## Type Safe Events
 
-We provide interfaces for each event in the `components/analytic/tracking-events.ts`.
+We provide interfaces for each event in the `components/analytics/tracking-events.ts`.
 Each event should be registered in the `EventsMap` interface and for each event
 data should be provided own interface that describes the event data modal and
 will be the value of type the registered event in the `EventsMap`
-Also that file provides a helper function `createAnalyticEvent()` that should be
-used to create any analytic event on the client level. This function will accept
+Also that file provides a helper function `createAnalyticsEvent()` that should be
+used to create any analytics event on the client level. This function will accept
 the event name string as the first argument and the event data object as the
 second argument and map given event name to the corresponding event data type.
 It will guarantee that all events will have correct data.

components/analytics/index.ts

@@ -0,0 +1 @@
+export * from './analytics';

components/analytic/tracking-events.ts → components/analytics/tracking-events.ts

@@ -18,7 +18,7 @@ interface duplexClickedProps extends duplexViewedProps {}
 export type EventName = keyof EventsMap;
 export type EventData<T extends keyof EventsMap> = EventsMap[T];
 
-export function createAnalyticEvent<T extends EventName>(eventName: T, eventData: EventData<T>) {
+export function createAnalyticsEvent<T extends EventName>(eventName: T, eventData: EventData<T>) {
   return {
     eventName,
     eventData,

components/duplex-ctf/duplex-ctf-client.tsx

@@ -3,30 +3,33 @@
 import { ResultOf } from 'gql.tada';
 import { useAnalytics } from 'use-analytics';
 
+import { createAnalyticsEvent } from '#/components/analytics/tracking-events';
+import { TrackInView } from '#/components/analytics/trackInView';
 import { RichTextCtf } from '#/components/rich-text-ctf';
 
-import { createAnalyticEvent } from '../analytic/tracking-events';
-import { TrackInView } from '../analytic/trackInView';
 import { useComponentPreview } from '../hooks/use-component-preview';
 import { getImageChildProps } from '../image-ctf';
 import { getPageLinkChildProps } from '../page';
 import { Duplex } from '../ui/duplex';
 import { ComponentDuplexFieldsFragment } from './duplex-ctf';
 
-// We can create analytic event typed data on top level
-// using createAnalyticEvent helper.
+// We can create analytics event typed data on top level
+// using createAnalyticsEvent helper.
 // It will us type-safely create event name and event data.
-const analyticInViewEvent = createAnalyticEvent('duplexViewed', {
+const analyticsInViewEvent = createAnalyticsEvent('duplexViewed', {
   category: 'duplexViewed',
   type: 'ctf',
 });
 
 // For the direct track() usage from hook we can destructure the object
-// returned from createAnalyticEvent helper to have separate values as props.
-const { eventName: analyticClickEventName, eventData: analyticClickEventData } = createAnalyticEvent('duplexClicked', {
-  category: 'duplexClicked',
-  type: 'ctf',
-});
+// returned from createAnalyticsEvent helper to have separate values as props.
+const { eventName: analyticsClickEventName, eventData: analyticsClickEventData } = createAnalyticsEvent(
+  'duplexClicked',
+  {
+    category: 'duplexClicked',
+    type: 'ctf',
+  }
+);
 
 export const DuplexCtfClient: React.FC<{
   data: ResultOf<typeof ComponentDuplexFieldsFragment>;
@@ -35,7 +38,7 @@ export const DuplexCtfClient: React.FC<{
   const { data, addAttributes } = useComponentPreview<typeof originalData>(originalData);
   const { track } = useAnalytics();
   return (
-    <TrackInView {...analyticInViewEvent}>
+    <TrackInView {...analyticsInViewEvent}>
       <Duplex
         headline={data.headline}
         bodyText={
@@ -64,7 +67,7 @@ export const DuplexCtfClient: React.FC<{
           })
         }
         colorPalette={data.colorPalette}
-        onClickAnalyticEvent={() => track(analyticClickEventName, analyticClickEventData)}
+        onClickAnalyticsEvent={() => track(analyticsClickEventName, analyticsClickEventData)}
       />
     </TrackInView>
   );

components/hero-banner-ctf/hero-banner-ctf-client.tsx

@@ -2,11 +2,11 @@
 
 import { ResultOf } from 'gql.tada';
 
+import { createAnalyticsEvent } from '#/components/analytics/tracking-events';
+import { TrackInView } from '#/components/analytics/trackInView';
 import { ComponentHeroBannerFieldsFragment } from '#/components/hero-banner-ctf/hero-banner-ctf';
 import { RichTextCtf } from '#/components/rich-text-ctf';
 
-import { createAnalyticEvent } from '../analytic/tracking-events';
-import { TrackInView } from '../analytic/trackInView';
 import { useComponentPreview } from '../hooks/use-component-preview';
 import { getImageChildProps } from '../image-ctf';
 import { getPageLinkChildProps } from '../page';
@@ -17,12 +17,12 @@ export const HeroBannerCtfClient: React.FC<{
 }> = (props) => {
   const { data: originalData } = props;
   const { data, addAttributes } = useComponentPreview<typeof originalData>(originalData);
-  // We use createAnalyticEvent helper to create typed event.
-  const analyticInViewEvent = createAnalyticEvent('heroBannerViewed', {
+  // We use createAnalyticsEvent helper to create typed event.
+  const analyticsInViewEvent = createAnalyticsEvent('heroBannerViewed', {
     category: 'duplexViewed',
   });
   return (
-    <TrackInView {...analyticInViewEvent}>
+    <TrackInView {...analyticsInViewEvent}>
       <HeroBanner
         headline={data.headline}
         bodyText={data.bodyText && <RichTextCtf {...data.bodyText} />}

components/ui/duplex/duplex.tsx

@@ -54,7 +54,7 @@ interface DuplexProps extends VariantProps<typeof layoutVariants>, VariantProps<
   cta?: LinkProps | null;
   colorPalette?: string | null;
   addAttributes?: (name: string) => object | null;
-  onClickAnalyticEvent?: () => void;
+  onClickAnalyticsEvent?: () => void;
 }
 
 export function Duplex(props: DuplexProps) {
@@ -67,7 +67,7 @@ export function Duplex(props: DuplexProps) {
     imageHeight,
     colorPalette,
     addAttributes = () => ({}), // Default to no-op.
-    onClickAnalyticEvent,
+    onClickAnalyticsEvent,
   } = props;
   const colorConfig = getColorConfigFromPalette(colorPalette || '');
 
@@ -102,7 +102,7 @@ export function Duplex(props: DuplexProps) {
                 {...addAttributes('ctaText')}
                 asChild
                 onClick={() => {
-                  onClickAnalyticEvent?.();
+                  onClickAnalyticsEvent?.();
                 }}
               >
                 <Link {...cta} />