@djangocfg/layouts 1.4.21 → 1.4.23

package/README.md

@@ -1,6 +1,6 @@
 # @djangocfg/layouts
 
-Pre-built layouts, auth, and snippets for Next.js + Tailwind CSS.
+Pre-built layouts, auth, analytics, and snippets for Next.js + Tailwind CSS.
 
 **Part of [DjangoCFG](https://djangocfg.com)** — modern Django framework for production-ready SaaS applications.
 
@@ -45,6 +45,61 @@ import { AuthDialog } from '@djangocfg/layouts/snippets';
 | `useAuthGuard` | Route protection hook |
 | `authMiddleware` | Next.js middleware |
 
+## Analytics
+
+Google Analytics integration via `react-ga4`. Auto-tracks pageviews and user sessions.
+
+### Setup
+
+Add tracking ID to your config:
+
+```tsx
+// appLayoutConfig.ts
+export const appLayoutConfig: AppLayoutConfig = {
+  // ...
+  analytics: {
+    googleTrackingId: 'G-XXXXXXXXXX',
+  },
+};
+```
+
+Analytics is automatically initialized by `AppLayout`. Works only in production (`NODE_ENV === 'production'`).
+
+### Usage
+
+```tsx
+import { useAnalytics, Analytics, AnalyticsEvent, AnalyticsCategory } from '@djangocfg/layouts';
+
+// In React components - auto-tracks pageviews
+const { event, isEnabled } = useAnalytics();
+
+event(AnalyticsEvent.THEME_CHANGE, {
+  category: AnalyticsCategory.ENGAGEMENT,
+  label: 'dark',
+});
+
+// Outside React (utilities, handlers)
+Analytics.event('button_click', { category: 'engagement', label: 'signup' });
+Analytics.setUser('user-123');
+```
+
+### Predefined Events
+
+| Category | Events |
+|----------|--------|
+| **Auth** | `AUTH_OTP_REQUEST`, `AUTH_LOGIN_SUCCESS`, `AUTH_OTP_VERIFY_FAIL`, `AUTH_LOGOUT`, `AUTH_SESSION_EXPIRED`, `AUTH_TOKEN_REFRESH` |
+| **Error** | `ERROR_BOUNDARY`, `ERROR_API`, `ERROR_VALIDATION`, `ERROR_NETWORK` |
+| **Navigation** | `NAV_ADMIN_ENTER`, `NAV_DASHBOARD_ENTER`, `NAV_PAGE_VIEW` |
+| **Engagement** | `THEME_CHANGE`, `SIDEBAR_TOGGLE`, `MOBILE_MENU_OPEN` |
+
+### Auto-tracking
+
+Built-in tracking for:
+- **Page views** - on every route change
+- **User ID** - automatically set when user is authenticated
+- **Auth events** - login, logout, OTP, session expiry
+- **Errors** - React ErrorBoundary errors
+
 ## Snippets
 
 ```tsx
@@ -60,6 +115,7 @@ import { ContactPage, VideoPlayer, Breadcrumbs } from '@djangocfg/layouts/snippe
 | `VideoPlayer` | Vidstack video player |
 | `Breadcrumbs` | Navigation breadcrumbs |
 | `Chat` | Chat widget |
+| `AnalyticsProvider` | Analytics wrapper component |
 
 ### ContactPage
 
@@ -75,25 +131,29 @@ import { ContactPage, VideoPlayer, Breadcrumbs } from '@djangocfg/layouts/snippe
 />
 ```
 
-**Defaults:**
-- API: `http://localhost:8000` (dev) / `https://api.reforms.ai` (prod)
-- Email: `markolofsen@gmail.com`
-- Calendly: `https://calendly.com/markolofsen/meeting`
-
 **Features:**
 - localStorage draft saving
 - Success state with icon
 - Zod validation from `@djangocfg/api`
 
+## Validation
+
+Error tracking and validation utilities.
+
+```tsx
+import { ValidationErrorConfig, CORSErrorConfig, NetworkErrorConfig } from '@djangocfg/layouts';
+```
+
 ## Exports
 
 | Path | Content |
 |------|---------|
-| `@djangocfg/layouts` | Main exports |
+| `@djangocfg/layouts` | Main exports (all modules) |
 | `@djangocfg/layouts/layouts` | Layout components |
 | `@djangocfg/layouts/auth` | Auth context & hooks |
-| `@djangocfg/layouts/snippets` | Reusable components |
+| `@djangocfg/layouts/snippets` | Reusable components + Analytics |
 | `@djangocfg/layouts/utils` | Utilities |
+| `@djangocfg/layouts/types` | TypeScript types |
 | `@djangocfg/layouts/styles` | CSS |
 
 ## Requirements
@@ -101,3 +161,4 @@ import { ContactPage, VideoPlayer, Breadcrumbs } from '@djangocfg/layouts/snippe
 - Next.js >= 15
 - React >= 19
 - Tailwind CSS >= 4
+- react-ga4 (bundled)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.4.21",
+  "version": "1.4.23",
   "description": "Pre-built dashboard layouts, authentication pages, and admin templates for Next.js applications with Tailwind CSS",
   "keywords": [
     "layouts",
@@ -85,9 +85,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.4.21",
-    "@djangocfg/og-image": "^1.4.21",
-    "@djangocfg/ui": "^1.4.21",
+    "@djangocfg/api": "^1.4.23",
+    "@djangocfg/og-image": "^1.4.23",
+    "@djangocfg/ui": "^1.4.23",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -105,10 +105,11 @@
   "dependencies": {
     "@vidstack/react": "^0.6.15",
     "maverick.js": "0.37.0",
+    "react-ga4": "^2.1.0",
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.4.21",
+    "@djangocfg/typescript-config": "^1.4.23",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/auth/context/AuthContext.tsx

@@ -9,6 +9,7 @@ import { useLocalStorage } from '@djangocfg/ui/hooks';
 import { getCachedProfile, clearProfileCache } from '../hooks/useProfileCache';
 
 import { authLogger } from '../../utils/logger';
+import { Analytics, AnalyticsEvent, AnalyticsCategory } from '../../snippets/Analytics';
 import type { AuthConfig, AuthContextType, AuthProviderProps, UserProfile } from './types';
 
 // Default routes
@@ -287,6 +288,13 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
         });
 
         const channelName = channel === 'phone' ? 'phone number' : 'email address';
+
+        // Track OTP request
+        Analytics.event(AnalyticsEvent.AUTH_OTP_REQUEST, {
+          category: AnalyticsCategory.AUTH,
+          label: channel || 'email',
+        });
+
         return {
           success: true,
           message: result.message || `OTP code sent to your ${channelName}`,
@@ -336,6 +344,17 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
         // Small delay to ensure profile state is updated
         await new Promise(resolve => setTimeout(resolve, 200));
 
+        // Track successful login
+        Analytics.event(AnalyticsEvent.AUTH_LOGIN_SUCCESS, {
+          category: AnalyticsCategory.AUTH,
+          label: channel || 'email',
+        });
+
+        // Set user ID for future tracking
+        if (result.user?.id) {
+          Analytics.setUser(String(result.user.id));
+        }
+
         // Handle redirect logic here
         const defaultCallback = config?.routes?.defaultCallback || defaultRoutes.defaultCallback;
 
@@ -353,6 +372,13 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
         };
       } catch (error) {
         authLogger.error('Verify OTP error:', error);
+
+        // Track failed verification
+        Analytics.event(AnalyticsEvent.AUTH_OTP_VERIFY_FAIL, {
+          category: AnalyticsCategory.AUTH,
+          label: channel || 'email',
+        });
+
         return {
           success: false,
           message: 'Failed to verify OTP',
@@ -367,6 +393,12 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
       const refreshTokenValue = api.getRefreshToken();
       if (!refreshTokenValue) {
         clearAuthState('refreshToken:noToken');
+
+        // Track session expired
+        Analytics.event(AnalyticsEvent.AUTH_SESSION_EXPIRED, {
+          category: AnalyticsCategory.AUTH,
+        });
+
         return {
           success: false,
           message: 'No refresh token available',
@@ -374,7 +406,12 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
       }
 
       await accounts.refreshToken(refreshTokenValue);
-      
+
+      // Track successful refresh
+      Analytics.event(AnalyticsEvent.AUTH_TOKEN_REFRESH, {
+        category: AnalyticsCategory.AUTH,
+      });
+
       return {
         success: true,
         message: 'Token refreshed',
@@ -382,6 +419,12 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
     } catch (error) {
       authLogger.error('Refresh token error:', error);
       clearAuthState('refreshToken:error');
+
+      // Track refresh failure
+      Analytics.event(AnalyticsEvent.AUTH_TOKEN_REFRESH_FAIL, {
+        category: AnalyticsCategory.AUTH,
+      });
+
       return {
         success: false,
         message: 'Error refreshing token',
@@ -402,6 +445,18 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
   }, [setRedirectUrl]);
 
   const logout = useCallback(async (): Promise<void> => {
+    const performLogout = () => {
+      // Track logout
+      Analytics.event(AnalyticsEvent.AUTH_LOGOUT, {
+        category: AnalyticsCategory.AUTH,
+      });
+
+      accounts.logout(); // Clear tokens and profile
+      setInitialized(true);
+      setIsLoading(false);
+      pushToDefaultAuthCallbackUrl();
+    };
+
     // Use config.onConfirm if provided, otherwise use a simple confirm
     if (configRef.current?.onConfirm) {
       const { confirmed } = await configRef.current.onConfirm({
@@ -412,19 +467,13 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
         color: 'error',
       });
       if (confirmed) {
-        accounts.logout(); // Clear tokens and profile
-        setInitialized(true);
-        setIsLoading(false);
-        pushToDefaultAuthCallbackUrl();
+        performLogout();
       }
     } else {
       // Fallback to browser confirm
       const confirmed = window.confirm('Are you sure you want to logout?');
       if (confirmed) {
-        accounts.logout(); // Clear tokens and profile
-        setInitialized(true);
-        setIsLoading(false);
-        pushToDefaultAuthCallbackUrl();
+        performLogout();
       }
     }
   }, [accounts, pushToDefaultAuthCallbackUrl]);

package/src/index.ts

@@ -13,7 +13,7 @@ export * from './layouts';
 // Types
 export * from './types';
 
-// Snippets - Reusable UI components
+// Snippets - Reusable UI components (includes Analytics)
 export * from './snippets';
 
 // Validation error tracking

package/src/layouts/AppLayout/AppLayout.tsx

@@ -30,6 +30,7 @@ import dynamic from 'next/dynamic';
 import { AppContextProvider } from './context';
 import { CoreProviders } from './providers';
 import { Seo, PageProgress, ErrorBoundary, UpdateNotifier } from './components';
+import { AnalyticsProvider } from '../../snippets/Analytics';
 import { PublicLayout } from './layouts/PublicLayout';
 import { PrivateLayout } from './layouts/PrivateLayout';
 import { AuthLayout } from './layouts/AuthLayout';
@@ -301,23 +302,25 @@ export function AppLayout({ children, config, component, pageProps, fontFamily,
 
   const appContent = (
     <AppContextProvider config={config} showUpdateNotifier={showUpdateNotifier}>
-      {/* SEO Meta Tags */}
-      <Seo
-        pageConfig={finalPageConfig}
-        icons={config.app.icons}
-        siteUrl={config.app.siteUrl}
-      />
+      <AnalyticsProvider>
+        {/* SEO Meta Tags */}
+        <Seo
+          pageConfig={finalPageConfig}
+          icons={config.app.icons}
+          siteUrl={config.app.siteUrl}
+        />
 
-      {/* Update Notifier */}
-      <UpdateNotifier enabled={showUpdateNotifier} currentVersion={packageJson.version} />
+        {/* Update Notifier */}
+        <UpdateNotifier enabled={showUpdateNotifier} currentVersion={packageJson.version} />
 
-      {/* Loading Progress Bar */}
-      <PageProgress />
+        {/* Loading Progress Bar */}
+        <PageProgress />
 
-      {/* Smart Layout Router */}
-      <LayoutRouter component={component} config={config}>
-        {children}
-      </LayoutRouter>
+        {/* Smart Layout Router */}
+        <LayoutRouter component={component} config={config}>
+          {children}
+        </LayoutRouter>
+      </AnalyticsProvider>
     </AppContextProvider>
   );
 

package/src/layouts/AppLayout/components/ErrorBoundary.tsx

@@ -12,6 +12,7 @@ import React, { Component, ReactNode } from 'react';
 import { ErrorLayout } from '../../ErrorLayout';
 import { Bug } from 'lucide-react';
 import logger from '../../../utils/logger';
+import { Analytics, AnalyticsEvent, AnalyticsCategory } from '../../../snippets/Analytics';
 
 interface ErrorBoundaryProps {
   children: ReactNode;
@@ -50,6 +51,14 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
     logger.error('ErrorBoundary caught error:', error);
     logger.error('Error info:', errorInfo);
 
+    // Track error in analytics
+    Analytics.event(AnalyticsEvent.ERROR_BOUNDARY, {
+      category: AnalyticsCategory.ERROR,
+      label: error.message,
+      error_name: error.name,
+      component_stack: errorInfo.componentStack?.slice(0, 500), // Limit size
+    });
+
     // Call optional callback
     this.props.onError?.(error, errorInfo);
 

package/src/layouts/AppLayout/layouts/PublicLayout/components/Footer.tsx

@@ -147,10 +147,10 @@ export function Footer() {
               )}
             </div>
 
-            {/* Right Column - Footer Menu Sections */}
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 flex-1">
+            {/* Right Column - Footer Menu Sections (max 4 columns, rest wraps) */}
+            <div className="flex flex-wrap gap-8 flex-1">
               {footer.menuSections.map((section) => (
-                <div key={section.title}>
+                <div key={section.title} className="flex-1 basis-[calc(25%-1.5rem)] min-w-[140px] max-w-[200px]">
                   <h3 className="text-sm font-semibold text-foreground mb-3">
                     {section.title}
                   </h3>

package/src/layouts/AppLayout/types/config.ts

@@ -70,4 +70,10 @@ export interface AppLayoutConfig {
     /** Enable phone authentication (default: false) */
     enablePhoneAuth?: boolean;
   };
+
+  /** Analytics configuration */
+  analytics?: {
+    /** Google Analytics Tracking ID (e.g., 'G-XXXXXXXXXX' or 'UA-XXXXXXXXX-X') */
+    googleTrackingId?: string;
+  };
 }

package/src/snippets/Analytics/AnalyticsProvider.tsx

@@ -0,0 +1,29 @@
+/**
+ * AnalyticsProvider Component
+ *
+ * Initializes Google Analytics and auto-tracks pageviews.
+ * Must be placed inside AppContextProvider and AuthProvider.
+ */
+
+'use client';
+
+import { ReactNode } from 'react';
+import { useAnalytics } from './useAnalytics';
+
+interface AnalyticsProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Analytics Provider that initializes tracking
+ * Automatically:
+ * - Initializes GA4 with tracking ID from config
+ * - Sets user ID when authenticated
+ * - Tracks page views on route changes
+ */
+export function AnalyticsProvider({ children }: AnalyticsProviderProps) {
+  useAnalytics(); // Initialize and auto-track
+  return <>{children}</>;
+}
+
+export default AnalyticsProvider;

package/src/snippets/Analytics/events.ts

@@ -0,0 +1,55 @@
+/**
+ * Analytics Events Constants
+ *
+ * Predefined event names and categories for consistent tracking
+ * across the entire application.
+ */
+
+/**
+ * Event Categories
+ */
+export const AnalyticsCategory = {
+  AUTH: 'auth',
+  ERROR: 'error',
+  NAVIGATION: 'navigation',
+  ENGAGEMENT: 'engagement',
+  USER: 'user',
+} as const;
+
+/**
+ * Predefined Event Names
+ */
+export const AnalyticsEvent = {
+  // Auth Events
+  AUTH_OTP_REQUEST: 'auth_otp_request',
+  AUTH_OTP_VERIFY_SUCCESS: 'auth_otp_verify_success',
+  AUTH_OTP_VERIFY_FAIL: 'auth_otp_verify_fail',
+  AUTH_LOGIN_SUCCESS: 'auth_login_success',
+  AUTH_LOGOUT: 'auth_logout',
+  AUTH_SESSION_EXPIRED: 'auth_session_expired',
+  AUTH_TOKEN_REFRESH: 'auth_token_refresh',
+  AUTH_TOKEN_REFRESH_FAIL: 'auth_token_refresh_fail',
+
+  // Error Events
+  ERROR_BOUNDARY: 'error_boundary',
+  ERROR_API: 'error_api',
+  ERROR_VALIDATION: 'error_validation',
+  ERROR_NETWORK: 'error_network',
+
+  // Navigation Events
+  NAV_ADMIN_ENTER: 'nav_admin_enter',
+  NAV_DASHBOARD_ENTER: 'nav_dashboard_enter',
+  NAV_PAGE_VIEW: 'nav_page_view',
+
+  // Engagement Events
+  THEME_CHANGE: 'theme_change',
+  SIDEBAR_TOGGLE: 'sidebar_toggle',
+  MOBILE_MENU_OPEN: 'mobile_menu_open',
+
+  // User Events
+  USER_PROFILE_VIEW: 'user_profile_view',
+  USER_PROFILE_UPDATE: 'user_profile_update',
+} as const;
+
+export type AnalyticsCategoryType = typeof AnalyticsCategory[keyof typeof AnalyticsCategory];
+export type AnalyticsEventType = typeof AnalyticsEvent[keyof typeof AnalyticsEvent];

package/src/snippets/Analytics/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Analytics Module
+ *
+ * Google Analytics integration with react-ga4
+ */
+
+export { useAnalytics, Analytics } from './useAnalytics';
+export { AnalyticsProvider } from './AnalyticsProvider';
+export { AnalyticsEvent, AnalyticsCategory } from './events';
+export type { AnalyticsEventType, AnalyticsCategoryType } from './events';

package/src/snippets/Analytics/useAnalytics.ts

@@ -0,0 +1,150 @@
+/**
+ * useAnalytics Hook
+ *
+ * Provides Google Analytics tracking via react-ga4
+ * Automatically tracks page views on route changes
+ * Only works in production mode
+ */
+
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import ReactGA from 'react-ga4';
+import { useAppContext } from '../../layouts/AppLayout/context';
+import { useAuth } from '../../auth';
+
+// Check if we're in production
+const isProduction = process.env.NODE_ENV === 'production';
+
+// Tracking state
+let isInitialized = false;
+let currentTrackingId: string | undefined;
+
+/**
+ * Analytics utility object for standalone usage (outside React components)
+ *
+ * @example
+ * ```ts
+ * import { Analytics } from '@djangocfg/layouts';
+ *
+ * // In an event handler or utility function
+ * Analytics.event('button_click', { category: 'engagement', label: 'signup' });
+ * ```
+ */
+export const Analytics = {
+  /**
+   * Initialize Google Analytics (called automatically by useAnalytics hook)
+   */
+  init: (trackingId: string) => {
+    if (!isProduction || !trackingId || isInitialized) return;
+    ReactGA.initialize(trackingId);
+    isInitialized = true;
+    currentTrackingId = trackingId;
+  },
+
+  /**
+   * Check if Analytics is enabled and initialized
+   */
+  isEnabled: () => isProduction && isInitialized,
+
+  /**
+   * Track a page view
+   */
+  pageview: (path: string) => {
+    if (!Analytics.isEnabled()) return;
+    ReactGA.send({ hitType: 'pageview', page: path });
+  },
+
+  /**
+   * Track a custom event
+   * @param name - Event name (action)
+   * @param params - Optional event parameters
+   */
+  event: (name: string, params: Record<string, any> = {}) => {
+    if (!Analytics.isEnabled()) return;
+    ReactGA.event(name, params);
+  },
+
+  /**
+   * Set user ID for tracking
+   */
+  setUser: (userId: string) => {
+    if (!Analytics.isEnabled()) return;
+    ReactGA.set({ user_id: userId });
+  },
+
+  /**
+   * Set custom dimensions/metrics
+   */
+  set: (fieldsObject: Record<string, any>) => {
+    if (!Analytics.isEnabled()) return;
+    ReactGA.set(fieldsObject);
+  },
+};
+
+/**
+ * Hook for Google Analytics tracking via react-ga4
+ *
+ * Automatically initializes GA and tracks page views on route changes
+ * Only works in production mode (NODE_ENV === 'production')
+ *
+ * @example
+ * ```tsx
+ * // Just call the hook - it auto-tracks pageviews
+ * useAnalytics();
+ *
+ * // Or use the returned methods for custom tracking
+ * const { event, isEnabled } = useAnalytics();
+ * event('button_click', { category: 'engagement', label: 'signup' });
+ * ```
+ */
+export function useAnalytics() {
+  const router = useRouter();
+  const { config } = useAppContext();
+  const { user, isAuthenticated } = useAuth();
+
+  const trackingId = config.analytics?.googleTrackingId;
+  const isEnabled = isProduction && Boolean(trackingId);
+
+  // Initialize GA4
+  useEffect(() => {
+    if (!isEnabled || !trackingId) return;
+    Analytics.init(trackingId);
+  }, [isEnabled, trackingId]);
+
+  // Auto-set user ID when authenticated
+  useEffect(() => {
+    if (!isEnabled || !isAuthenticated || !user?.id) return;
+    Analytics.setUser(String(user.id));
+  }, [isEnabled, isAuthenticated, user?.id]);
+
+  // Auto-track page views on route change
+  useEffect(() => {
+    if (!isEnabled) return;
+
+    // Track initial page view
+    Analytics.pageview(window.location.pathname + window.location.search);
+
+    // Track on route change
+    const handleRouteChange = (url: string) => {
+      Analytics.pageview(url);
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events, isEnabled]);
+
+  return {
+    isEnabled,
+    trackingId,
+    pageview: Analytics.pageview,
+    event: Analytics.event,
+    setUser: Analytics.setUser,
+    set: Analytics.set,
+  };
+}
+
+export default useAnalytics;

package/src/snippets/ContactForm/ContactPage.tsx

@@ -98,27 +98,20 @@ export function ContactPage({
   return (
     <div className={className}>
       {/* Header */}
-      <div className="text-center mb-12">
-        <h1 className="text-4xl md:text-5xl font-bold mb-4">
-          {typeof title === 'string' ? (
-            title
-          ) : (
-            title
-          )}
+      <div className="text-center mb-8 md:mb-12">
+        <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
+          {title}
         </h1>
-        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+        <p className="text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto px-4">
           {subtitle}
         </p>
       </div>
 
       {/* Content Grid */}
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-        {/* Contact Form */}
         <div className="lg:col-span-2">
           <ContactForm apiUrl={apiUrl} onSuccess={onSuccess} />
         </div>
-
-        {/* Contact Info */}
         <div>
           <ContactInfo
             details={contactDetails}

package/src/snippets/index.ts

@@ -9,3 +9,4 @@ export * from './Breadcrumbs';
 export * from './AuthDialog';
 export * from './VideoPlayer';
 export * from './ContactForm';
+export * from './Analytics';