@faskai/ui-commons 0.0.0-alpha.1

package/README.md

@@ -0,0 +1,80 @@
+# Fask UI Commons
+
+A minimal package containing common UI components and utilities shared between Fask applications:
+
+* @/fask-web-app-v2 (B2C) is hosted at fask.ai
+* @/fask-biz-landing (B2B landing) is at fask.ai/business
+* @/powpal-web-app (B2B dashboard) is at biz.fask.ai
+
+## Installation
+
+```bash
+yarn add @faskai/ui-commons@0.0.0-alpha.01
+```
+
+## Usage
+
+### GTM Provider
+
+```tsx
+import { GTMProvider } from '@faskai/ui-commons';
+
+function App() {
+  return (
+    <GTMProvider gtmId="GTM-K62S389H">
+      {/* Your app content */}
+    </GTMProvider>
+  );
+}
+```
+
+### Tracking Events
+
+```tsx
+import { trackEvent, trackConversion, trackLinkedInConversion } from '@faskai/ui-commons';
+
+// Track custom events
+trackEvent('button_click', { button_name: 'signup' });
+
+// Track Google Ads conversions
+trackConversion('AW-17123441126', 'DshBCLKT8s4aEObzi-U_');
+
+// Track LinkedIn conversions
+trackLinkedInConversion('123456789');
+```
+
+## Development
+
+```bash
+# Install dependencies
+yarn install
+
+# Build the package
+yarn build
+
+# Watch for changes
+yarn dev
+```
+
+## Publishing
+
+```bash
+# Build and publish to npm
+yarn build
+yarn publish
+```
+
+## Adding New Components
+
+1. Create your component in `src/components/`
+2. Export it from `src/index.ts`
+3. Build the package with `yarn build`
+4. The component will be available in all consuming projects
+
+## Current Components
+
+- **GTMProvider**: Google Tag Manager integration
+- **trackEvent**: Custom event tracking
+- **trackConversion**: Google Ads conversion tracking
+- **trackLinkedInConversion**: LinkedIn Ads conversion tracking
+- **trackLinkedInLead**: LinkedIn lead tracking

package/dist/components/gtm/gtm-provider.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+declare global {
+    interface Window {
+        dataLayer: any[];
+        gtag: (...args: any[]) => void;
+    }
+}
+interface GTMProviderProps {
+    gtmId: string;
+    children: ReactNode;
+    environment?: 'development' | 'production';
+}
+export declare function GTMProvider({ gtmId, children, environment }: GTMProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function trackEvent(eventName: string, parameters?: Record<string, any>): void;
+export declare function trackConversion(conversionId: string, conversionLabel?: string, value?: number): void;
+export declare function trackLinkedInConversion(conversionId: string, value?: number): void;
+export declare function trackLinkedInLead(): void;
+export {};

package/dist/components/gtm/gtm-provider.js

@@ -0,0 +1,72 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+export function GTMProvider({ gtmId, children, environment = 'production' }) {
+    useEffect(() => {
+        // Initialize dataLayer
+        window.dataLayer = window.dataLayer || [];
+        // Load GTM script
+        const script = document.createElement('script');
+        script.innerHTML = `
+      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+      })(window,document,'script','dataLayer','${gtmId}');
+    `;
+        document.head.appendChild(script);
+        // Add noscript iframe
+        const noscript = document.createElement('noscript');
+        const iframe = document.createElement('iframe');
+        iframe.src = `https://www.googletagmanager.com/ns.html?id=${gtmId}`;
+        iframe.height = '0';
+        iframe.width = '0';
+        iframe.style.display = 'none';
+        iframe.style.visibility = 'hidden';
+        noscript.appendChild(iframe);
+        document.body.insertBefore(noscript, document.body.firstChild);
+        return () => {
+            // Cleanup
+            if (script.parentNode) {
+                script.parentNode.removeChild(script);
+            }
+            if (noscript.parentNode) {
+                noscript.parentNode.removeChild(noscript);
+            }
+        };
+    }, [gtmId]);
+    return _jsx(_Fragment, { children: children });
+}
+// Helper function to track custom events
+export function trackEvent(eventName, parameters) {
+    if (typeof window !== 'undefined' && window.dataLayer) {
+        window.dataLayer.push({
+            event: eventName,
+            ...parameters,
+        });
+    }
+}
+// Helper function to track conversions
+export function trackConversion(conversionId, conversionLabel, value) {
+    if (typeof window !== 'undefined' && window.gtag) {
+        window.gtag('event', 'conversion', {
+            send_to: conversionLabel ? `${conversionId}/${conversionLabel}` : conversionId,
+            value: value,
+        });
+    }
+}
+// Helper function to track LinkedIn conversions
+export function trackLinkedInConversion(conversionId, value) {
+    trackEvent('linkedin_conversion', {
+        conversion_id: conversionId,
+        value: value,
+    });
+}
+// Helper function to track LinkedIn leads
+export function trackLinkedInLead() {
+    if (typeof window !== 'undefined') {
+        trackEvent('linkedin_lead', {
+            page_location: window.location.href,
+            page_title: document.title,
+        });
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { GTMProvider, trackConversion, trackEvent, trackLinkedInConversion, trackLinkedInLead } from './components/gtm/gtm-provider';

package/dist/index.js

@@ -0,0 +1 @@
+export { GTMProvider, trackConversion, trackEvent, trackLinkedInConversion, trackLinkedInLead } from './components/gtm/gtm-provider';

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@faskai/ui-commons",
+  "author": "Fask AI <arko@fask.ai>",
+  "version": "0.0.0-alpha.01",
+  "description": "Common UI components and utilities for Fask applications",
+  "private": false,
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "browser": "dist/index.esm.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "clean": "rm -rf dist",
+    "prepare": "yarn build"
+  },
+  "peerDependencies": {
+    "next": "^14.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "packageManager": "yarn@1.22.22"
+}