@dazl/addons 1.8.0 → 1.10.0

package/dist/addons.json

@@ -14,6 +14,62 @@
     "homepage": "https://www.ag-grid.com/",
     "exampleUsagePrompt": "Implement a data grid using AG Grid to display and manage tabular data with sorting, filtering, and pagination features."
   },
+  "anthropic": {
+    "id": "anthropic",
+    "displayName": "Anthropic",
+    "description": "Integration with Anthropic AI services (Claude Opus, Sonnet, and Haiku) for advanced language modeling, coding, and reasoning capabilities",
+    "dependencies": [
+      "@anthropic-ai/sdk"
+    ],
+    "envInstructionsMd": "# API Key Creation\n\nGo to https://console.anthropic.com/ to sign up and create a new Anthropic API key.\n",
+    "tags": [
+      "ai",
+      "ml",
+      "claude",
+      "api",
+      "integration",
+      "llm",
+      "anthropic"
+    ],
+    "environmentVariables": [
+      {
+        "name": "ANTHROPIC_API_KEY",
+        "description": "API key for accessing Anthropic AI services (Claude)"
+      }
+    ],
+    "homepage": "https://docs.anthropic.com",
+    "exampleUsagePrompt": "Use the Anthropic Messages API with the latest Claude models to analyze a chunk of text or generate a response."
+  },
+  "customerio": {
+    "id": "customerio",
+    "displayName": "Customer.io",
+    "description": "Send transactional and behavioral messages via the Customer.io API — track events, manage customers, and trigger campaigns",
+    "dependencies": [
+      "customerio-node"
+    ],
+    "envInstructionsMd": "# Customer.io API Credentials\n\n1. Log in to [customer.io](https://customer.io) and go to **Settings → API Credentials**.\n2. Copy your **Site ID** and **API Key**.\n3. Paste them into the `CUSTOMERIO_SITE_ID` and `CUSTOMERIO_API_KEY` inputs:\n",
+    "tags": [
+      "email",
+      "sms",
+      "messaging",
+      "crm",
+      "api",
+      "integration",
+      "automation"
+    ],
+    "environmentVariables": [
+      {
+        "name": "CUSTOMERIO_SITE_ID",
+        "description": "Customer.io Site ID from your workspace API credentials"
+      },
+      {
+        "name": "CUSTOMERIO_API_KEY",
+        "description": "Customer.io API Key from your workspace API credentials"
+      }
+    ],
+    "homepage": "https://customer.io/docs/api/",
+    "exampleUsagePrompt": "Track a user sign-up event in Customer.io and set their email and name attributes."
+  },
   "deck-gl": {
     "id": "deck-gl",
     "displayName": "Deck.gl",
@@ -32,6 +88,32 @@
     "homepage": "https://deck.gl/",
     "exampleUsagePrompt": "Create a Deck.gl visualization that displays a 3D scatter plot of geographical data points with varying elevations and colors based on a dataset of city populations."
   },
+  "github": {
+    "id": "github",
+    "displayName": "GitHub (Octokit)",
+    "description": "Interact with the GitHub REST and GraphQL APIs via the official Octokit SDK — manage repos, issues, pull requests, and more",
+    "dependencies": [
+      "@octokit/rest"
+    ],
+    "envInstructionsMd": "# GitHub Token\n\n1. Go to [github.com/settings/tokens](https://github.com/settings/tokens).\n2. Click **Generate new token (classic)** or create a **Fine-grained token**.\n3. Select the required scopes for your use case (e.g. `repo`, `read:user`).\n4. Copy the generated token and add paste it in the `GITHUB_TOKEN` input:\n",
+    "tags": [
+      "github",
+      "git",
+      "api",
+      "integration",
+      "repos",
+      "issues",
+      "pull-requests"
+    ],
+    "environmentVariables": [
+      {
+        "name": "GITHUB_TOKEN",
+        "description": "GitHub personal access token or app installation token"
+      }
+    ],
+    "homepage": "https://github.com/octokit/rest.js",
+    "exampleUsagePrompt": "Use the GitHub API to list all open pull requests in a repository and display their titles and authors."
+  },
   "google-ai": {
     "id": "google-ai",
     "displayName": "Google AI",
@@ -57,6 +139,32 @@
     "homepage": "https://ai.google.dev/gemini-api/docs",
     "exampleUsagePrompt": "Use the Google AI Gemini API to generate a text summary of a given article."
   },
+  "google-analytics": {
+    "id": "google-analytics",
+    "displayName": "Google Analytics (GA4)",
+    "description": "Google Analytics 4 (GA4) integration using the official gtag.js script for pageview tracking, custom event logging, and user engagement monitoring in React applications",
+    "files": {
+      "app/components/ui/google-analytics/google-analytics.tsx": "import { useEffect } from \"react\";\n\ndeclare global {\n  interface Window {\n    dataLayer: unknown[];\n    gtag: (...args: unknown[]) => void;\n  }\n}\n\nexport interface GoogleAnalyticsProps {\n  /**\n   * Google Analytics 4 Measurement ID (usually starts with \"G-\").\n   */\n  measurementId: string;\n  /**\n   * Set to false to skip tracking the initial pageview on mount.\n   * Default is true.\n   */\n  trackPageview?: boolean;\n}\n\n/**\n * Loads the official Google Analytics gtag.js script and bootstraps GA4.\n * Safe to call multiple times - the script is only injected once per measurement ID.\n */\nexport function initGA(measurementId: string): void {\n  if (typeof window === \"undefined\" || !measurementId) return;\n\n  const scriptId = `ga-gtag-${measurementId}`;\n  if (document.getElementById(scriptId)) return;\n\n  window.dataLayer = window.dataLayer || [];\n  window.gtag = function gtag() {\n    // eslint-disable-next-line prefer-rest-params\n    window.dataLayer.push(arguments);\n  };\n  window.gtag(\"js\", new Date());\n  window.gtag(\"config\", measurementId, { send_page_view: false });\n\n  const script = document.createElement(\"script\");\n  script.id = scriptId;\n  script.async = true;\n  script.src = `https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(measurementId)}`;\n  document.head.appendChild(script);\n}\n\n/**\n * GoogleAnalytics Component\n *\n * Place this component once near the root of your app to load the official\n * gtag.js script and initialize GA4 on the client.\n */\nexport function GoogleAnalytics({ measurementId, trackPageview = true }: GoogleAnalyticsProps) {\n  useEffect(() => {\n    initGA(measurementId);\n    if (trackPageview) {\n      trackPageView(window.location.pathname + window.location.search);\n    }\n  }, [measurementId, trackPageview]);\n\n  return null;\n}\n\n// Global cache to prevent consecutive duplicate pageview tracking\nlet lastTrackedPath: string | null = null;\n\n/**\n * Track a page view programmatically (useful for client-side routing).\n */\nexport function trackPageView(path: string, title?: string) {\n  if (typeof window === \"undefined\" || typeof window.gtag !== \"function\") return;\n\n  if (lastTrackedPath === path) return;\n  lastTrackedPath = path;\n\n  window.gtag(\"event\", \"page_view\", {\n    page_path: path,\n    page_title: title || document.title,\n  });\n}\n\n/**\n * Track a custom GA4 event (e.g. button clicks, form submissions).\n */\nexport function trackEvent(action: string, params?: Record<string, unknown>) {\n  if (typeof window === \"undefined\" || typeof window.gtag !== \"function\") return;\n  window.gtag(\"event\", action, params);\n}\n"
+    },
+    "envInstructionsMd": "# Google Analytics Setup\n\n1. Sign in or create an account on [Google Analytics](https://analytics.google.com/).\n2. Head to **Admin** -> **Data Streams** (under Data Collection and Modification).\n3. Select your web data stream (or create a new web stream if needed).\n4. Copy your **Measurement ID** (it typically starts with `G-`, e.g., `G-1234567890`).\n5. Add this Measurement ID to your environment configuration (e.g., your `.env` file):\n\n```env\nGA_MEASUREMENT_ID=G-1234567890\n```\n",
+    "tags": [
+      "analytics",
+      "google",
+      "ga4",
+      "gtag",
+      "tracking",
+      "metrics",
+      "marketing"
+    ],
+    "environmentVariables": [
+      {
+        "name": "GA_MEASUREMENT_ID",
+        "description": "Google Analytics 4 Measurement ID (usually starts with 'G-')"
+      }
+    ],
+    "homepage": "https://developers.google.com/analytics/devguides/collection/ga4",
+    "exampleUsagePrompt": "Integrate Google Analytics 4 in my React application to track page views and custom button clicks."
+  },
   "gsap": {
     "id": "gsap",
     "displayName": "GSAP",
@@ -109,6 +217,34 @@
     "homepage": "https://lexical.dev/",
     "exampleUsagePrompt": "Set up a basic text editor using Lexical to provide rich text editing capabilities."
   },
+  "mailchimp": {
+    "id": "mailchimp",
+    "displayName": "Mailchimp",
+    "description": "Manage email marketing with the Mailchimp Marketing API — add contacts, manage lists/audiences, and trigger campaigns",
+    "dependencies": [
+      "@mailchimp/mailchimp_marketing"
+    ],
+    "devDependencies": [
+      "@types/mailchimp__mailchimp_marketing"
+    ],
+    "envInstructionsMd": "# Mailchimp API Key\n\n1. Log in to [mailchimp.com](https://mailchimp.com) and go to **Account & Billing → Extras → API keys**.\n2. Click **Create A Key** and copy the generated key.\n3. Paste it into the `MAILCHIMP_API_KEY` input\n",
+    "tags": [
+      "email",
+      "marketing",
+      "newsletter",
+      "api",
+      "integration",
+      "contacts"
+    ],
+    "environmentVariables": [
+      {
+        "name": "MAILCHIMP_API_KEY",
+        "description": "Mailchimp API key (includes the data-center suffix, e.g. key-us1)"
+      }
+    ],
+    "homepage": "https://mailchimp.com/developer/marketing/api/",
+    "exampleUsagePrompt": "Add a new subscriber to a Mailchimp audience list using their email address and name."
+  },
   "mermaid": {
     "id": "mermaid",
     "displayName": "Mermaid",
@@ -126,6 +262,34 @@
     "homepage": "https://mermaid.js.org/",
     "exampleUsagePrompt": "Create a flowchart diagram using Mermaid syntax to illustrate the process of user authentication in a web application."
   },
+  "mixpanel": {
+    "id": "mixpanel",
+    "displayName": "Mixpanel",
+    "description": "Client-side product analytics tracking with Mixpanel — track events, identify users, and measure feature adoption",
+    "dependencies": [
+      "mixpanel-browser"
+    ],
+    "files": {
+      "app/lib/mixpanel.tsx": "import mixpanel from \"mixpanel-browser\";\nimport { useEffect } from \"react\";\n\nlet initialized = false;\n\n/**\n * Initialize the Mixpanel SDK. Safe to call multiple times — only runs once.\n */\nexport function initMixpanel(token: string): void {\n  if (typeof window === \"undefined\" || !token || initialized) return;\n  mixpanel.init(token, { track_pageview: false, persistence: \"localStorage\" });\n  initialized = true;\n}\n\nexport interface MixpanelProps {\n  /**\n   * Mixpanel project token (MIXPANEL_TOKEN).\n   */\n  token: string;\n  /**\n   * Set to true to automatically track a pageview on mount.\n   * Default is false.\n   */\n  trackPageview?: boolean;\n}\n\n/**\n * MixpanelProvider Component\n *\n * Place this once near the root of your app to initialize the Mixpanel SDK.\n */\nexport function MixpanelProvider({ token, trackPageview = false }: MixpanelProps) {\n  useEffect(() => {\n    initMixpanel(token);\n    if (trackPageview) {\n      trackPageView();\n    }\n  }, [token, trackPageview]);\n\n  return null;\n}\n\n/**\n * Track a page view event.\n */\nexport function trackPageView(properties?: Record<string, unknown>): void {\n  if (!initialized) return;\n  mixpanel.track_pageview(properties);\n}\n\n/**\n * Track a custom event.\n */\nexport function trackEvent(event: string, properties?: Record<string, unknown>): void {\n  if (!initialized) return;\n  mixpanel.track(event, properties);\n}\n\n/**\n * Identify a user by their unique ID and optionally set profile properties.\n */\nexport function identifyUser(userId: string, properties?: Record<string, unknown>): void {\n  if (!initialized) return;\n  mixpanel.identify(userId);\n  if (properties) {\n    mixpanel.people.set(properties);\n  }\n}\n\n/**\n * Reset the current identity (e.g. on logout).\n */\nexport function resetUser(): void {\n  if (!initialized) return;\n  mixpanel.reset();\n  initialized = false;\n}\n"
+    },
+    "envInstructionsMd": "# Mixpanel Token\n\n1. Go to [mixpanel.com](https://mixpanel.com) and open your project.\n2. Navigate to **Settings → Project Settings**.\n3. Copy the **Project Token** from the **Access Keys** section.\n4. Paste it into the `MIXPANEL_TOKEN` input\n",
+    "tags": [
+      "analytics",
+      "tracking",
+      "events",
+      "product-analytics",
+      "api",
+      "integration"
+    ],
+    "environmentVariables": [
+      {
+        "name": "MIXPANEL_TOKEN",
+        "description": "Mixpanel project token (found in Project Settings → Access Keys)"
+      }
+    ],
+    "homepage": "https://docs.mixpanel.com/docs/sdks/javascript",
+    "exampleUsagePrompt": "Initialize Mixpanel and track a button click event with properties like button name and page."
+  },
   "monaco-editor": {
     "id": "monaco-editor",
     "displayName": "Monaco Editor",
@@ -158,6 +322,33 @@
     "homepage": "https://motion.dev/",
     "exampleUsagePrompt": "Create smooth and interactive animations for the current page using the Motion library."
   },
+  "openai": {
+    "id": "openai",
+    "displayName": "OpenAI",
+    "description": "Integration with OpenAI services (GPT models, DALL-E) for state-of-the-art text generation, reasoning, vision, and image creation",
+    "dependencies": [
+      "openai"
+    ],
+    "envInstructionsMd": "# API Key Creation\n\nGo to https://platform.openai.com/api-keys to create a new OpenAI API key.\n",
+    "tags": [
+      "ai",
+      "ml",
+      "gpt",
+      "openai",
+      "api",
+      "integration",
+      "llm",
+      "dall-e"
+    ],
+    "environmentVariables": [
+      {
+        "name": "OPENAI_API_KEY",
+        "description": "API key for accessing OpenAI services"
+      }
+    ],
+    "homepage": "https://platform.openai.com/docs",
+    "exampleUsagePrompt": "Use the OpenAI Responses API with the latest GPT models to reply to a user prompt, utilizing structured outputs, tools, or web search if needed."
+  },
   "react-leaflet": {
     "id": "react-leaflet",
     "displayName": "Leaflet",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dazl/addons",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "type": "module",
   "description": "Add-ons for Dazl",
   "exports": {
@@ -21,17 +21,18 @@
   "devDependencies": {
     "@types/mocha": "^10.0.10",
     "@types/node": "24",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "classnames": "^2.5.1",
-    "mocha": "12.0.0-beta-10",
-    "motion": "^12.35.2",
-    "prettier": "^3.8.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "mocha": "12.0.0-beta-9.4",
+    "motion": "^12.40.0",
+    "mixpanel-browser": "^2.80.0",
+    "prettier": "^3.8.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "react-image-gallery": "^2.1.2",
-    "typescript": "~5.9.3",
-    "zod": "^4.3.6"
+    "typescript": "~6.0.3",
+    "zod": "^4.4.3"
   },
   "repository": {
     "type": "git",
@@ -44,7 +45,7 @@
     "url": "https://github.com/dazl-dev/dazl-addons/issues"
   },
   "publishConfig": {
-    "access": "restricted"
+    "access": "public"
   },
   "files": [
     "dist",

package/src/globals.d.ts

@@ -4,3 +4,8 @@ declare module "*.module.css" {
   const classes: CSSModuleClasses;
   export default classes;
 }
+
+declare module "*.css" {
+  const classes: never;
+  export default classes;
+}