npm package: @faskai/ui-commons
Description: Common UI components for Fask applications.
Author: Fask AI
Latest version: 0.0.0-alpha.28

# Fask UI Commons

A collection of reusable React components and data exports for Fask applications.

## Data Exports

### Beta Marketing Content

Centralized marketing content for Beta features and offers that can be used across different projects with client-specific styling.

#### betaMarketingFeatures

Array of feature objects with emoji, title, and description:

```tsx
import { betaMarketingFeatures } from '@faskai/ui-commons';

// Each feature contains:
// { emoji: string, title: string, description: string }
```

**Features included:**
- ⚡ **Fastest Voice** - Industry-leading response times
- 🧠 **Self-Learning** - Fine-tune with your data
- 👆 **Easiest Setup** - 1-click deployment worldwide
- 🌍 **Any Language** - Human-sounding in 100+ languages
- 🎥 **Truly Multi-Modal** - Voice, Video, and Text channels
- 📈 **Massively Scalable** - Unlimited concurrent calls and agents

#### betaOfferData

Beta launch offer content with structured data:

```tsx
import { betaOfferData } from '@faskai/ui-commons';

// Contains:
// - badge: "LIMITED TIME"
// - title: "🚀 Beta Launch Special"
// - description: string
// - callouts: Array<{emoji, title, description}>
// - cta: {text, url}
// - disclaimer: string
```

**Callouts included:**
- 💰 **50% OFF First Year** - Exclusive Beta pricing
- 🤝 **Priority Support** - Direct access to founders

#### Usage Example

```tsx
import { betaMarketingFeatures, betaOfferData } from '@faskai/ui-commons';

function BetaFeatures() {
  return (
    <section>
      {/* Features */}
      {betaMarketingFeatures.map((feature) => (
        <div key={feature.title}>
          <span>{feature.emoji}</span>
          <h3>{feature.title}</h3>
          <p>{feature.description}</p>
        </div>
      ))}
      
      {/* Beta Offer */}
      <div>
        <h2>{betaOfferData.title}</h2>
        <p>{betaOfferData.description}</p>
        {betaOfferData.callouts.map((callout) => (
          <div key={callout.title}>
            <span>{callout.emoji}</span>
            <h4>{callout.title}</h4>
            <p>{callout.description}</p>
          </div>
        ))}
        <a href={betaOfferData.cta.url}>{betaOfferData.cta.text}</a>
      </div>
    </section>
  );
}
```

## Components

### GTMProvider

Google Tag Manager integration for tracking and analytics.

```tsx
import { GTMProvider } from '@faskai/ui-commons';

function App() {
  return (
    <GTMProvider gtmId="GTM-K62S389H">
      {/* Your app content */}
    </GTMProvider>
  );
}
```

## Installation

```bash
npm install @faskai/ui-commons
# or
yarn add @faskai/ui-commons
```

## Dependencies

- React 18+
- No styling dependencies (bring your own CSS framework)

## License

Private - Fask AI

## 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
```

## Design Philosophy

This package follows a **data-driven approach**:

- **Content centralization**: Marketing copy and data managed in one place
- **Styling flexibility**: Each project implements its own design system
- **Type safety**: Full TypeScript support for all exports
- **Zero styling opinions**: No CSS dependencies or styling conflicts

## Adding New Data

1. Create your data export in `src/data/`
2. Export it from `src/index.ts`
3. Build the package with `yarn build`
4. Import and use in your client projects with custom styling

## Current Exports

- **GTMProvider**: Google Tag Manager integration
- **betaMarketingFeatures**: Beta feature content array
- **betaOfferData**: Beta offer structured data
- **trackEvent**: Custom event tracking
- **trackConversion**: Google Ads conversion tracking
- **trackLinkedInConversion**: LinkedIn Ads conversion tracking
- **trackLinkedInLead**: LinkedIn lead tracking