@mission-studio/puck 1.0.0 → 1.0.1

package/dist/{chunk-ZZF2BIMW.mjs → chunk-SRFEJJIW.mjs}

@@ -158,6 +158,75 @@ function Paragraph({
   return /* @__PURE__ */ jsx2("p", { id, style, children: resolvedText });
 }
 
+// hooks/useGtmEvent.ts
+function useGtmEvent() {
+  return (eventName, data) => {
+    if (typeof window === "undefined") return;
+    if (typeof window.gtag !== "function") {
+      console.warn("GTM not initialized. Make sure @next/third-parties/google GoogleTagManager is added to your layout.");
+      return;
+    }
+    const eventData = {
+      event: eventName,
+      ...data && { value: data }
+    };
+    window.gtag("event", eventName, data || {});
+  };
+}
+
+// hooks/useUtmParams.ts
+import { useEffect, useState } from "react";
+function useUtmParams() {
+  const [utmParams, setUtmParams] = useState({});
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const urlParams = new URLSearchParams(window.location.search);
+    const source = urlParams.get("utm_source");
+    const medium = urlParams.get("utm_medium");
+    const campaign = urlParams.get("utm_campaign");
+    const content = urlParams.get("utm_content");
+    const term = urlParams.get("utm_term");
+    const params = {};
+    if (source) {
+      params.source = source;
+      sessionStorage.setItem("utm_source", source);
+    } else {
+      const stored = sessionStorage.getItem("utm_source");
+      if (stored) params.source = stored;
+    }
+    if (medium) {
+      params.medium = medium;
+      sessionStorage.setItem("utm_medium", medium);
+    } else {
+      const stored = sessionStorage.getItem("utm_medium");
+      if (stored) params.medium = stored;
+    }
+    if (campaign) {
+      params.campaign = campaign;
+      sessionStorage.setItem("utm_campaign", campaign);
+    } else {
+      const stored = sessionStorage.getItem("utm_campaign");
+      if (stored) params.campaign = stored;
+    }
+    if (content) {
+      params.content = content;
+      sessionStorage.setItem("utm_content", content);
+    } else {
+      const stored = sessionStorage.getItem("utm_content");
+      if (stored) params.content = stored;
+    }
+    if (term) {
+      params.term = term;
+      sessionStorage.setItem("utm_term", term);
+    } else {
+      const stored = sessionStorage.getItem("utm_term");
+      if (stored) params.term = stored;
+    }
+    setUtmParams(params);
+  }, []);
+  return utmParams;
+}
+
 // components/page/Button.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var sizeStyles = {
@@ -194,6 +263,8 @@ function Button({
 }) {
   const { resolveColor: resolveColor2 } = useTheme();
   const { getEntryValue } = useEntries();
+  const sendEvent = useGtmEvent();
+  const utm = useUtmParams();
   const resolvedText = (() => {
     if (!text) return "Button";
     if (typeof text === "string") return text;
@@ -205,6 +276,14 @@ function Button({
     }
     return "Button";
   })();
+  const handleClick = () => {
+    sendEvent("button_click", {
+      text: resolvedText,
+      href: href || void 0,
+      variant,
+      ...utm
+    });
+  };
   const resolvedColor = (() => {
     if (!color) return resolveColor2("primary");
     if (typeof color === "string") return { color, opacity: 100 };
@@ -278,11 +357,12 @@ function Button({
         target,
         style,
         rel: target === "_blank" ? "noopener noreferrer" : void 0,
+        onClick: handleClick,
         children: resolvedText
       }
     ) });
   }
-  return /* @__PURE__ */ jsx3("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx3("button", { id, type: "button", style, children: resolvedText }) });
+  return /* @__PURE__ */ jsx3("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx3("button", { id, type: "button", style, onClick: handleClick, children: resolvedText }) });
 }
 
 // components/page/Image.tsx
@@ -415,7 +495,7 @@ function Image({
 }
 
 // components/page/ImageCarousel.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
 import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var aspectRatioMap2 = {
   "16:9": "16 / 9",
@@ -442,7 +522,7 @@ function ImageCarousel({
   dotColor,
   id
 }) {
-  const [currentIndex, setCurrentIndex] = useState(0);
+  const [currentIndex, setCurrentIndex] = useState2(0);
   const { resolveColor: resolveColor2 } = useTheme();
   const resolvedArrowColor = (() => {
     if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
@@ -1606,7 +1686,7 @@ function Footer({
 }
 
 // components/page/Topbar.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import Link from "next/link";
 import { Menu, X } from "lucide-react";
 import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -1620,7 +1700,7 @@ function Topbar({
   puck
 }) {
   const DropZone = puck?.renderDropZone;
-  const [mobileMenuOpen, setMobileMenuOpen] = useState2(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState3(false);
   const renderLink = (item, index) => {
     const className = "hover:opacity-80 transition-opacity";
     if (item.linkType === "external") {
@@ -1686,7 +1766,7 @@ function Topbar({
 }
 
 // components/page/Popup.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { icons as icons4, X as X2 } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 function Icon2({ name, ...props }) {
@@ -1716,7 +1796,7 @@ function Popup({
   textLink = false,
   puck
 }) {
-  const [isOpen, setIsOpen] = useState3(false);
+  const [isOpen, setIsOpen] = useState4(false);
   const trigger = textLink ? /* @__PURE__ */ jsx20(
     "button",
     {
@@ -1777,6 +1857,8 @@ function Popup({
 export {
   Heading,
   Paragraph,
+  useGtmEvent,
+  useUtmParams,
   Button,
   Image,
   ImageCarousel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mission-studio/puck",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A collection of puck components and configurations for internal use at Mission Studio.",
   "repository": {
     "type": "git",
@@ -47,7 +47,8 @@
     "test:build": "yarn run build && jest __tests__/build.test.ts",
     "build:css": "tailwindcss -i ./styles.css -o ./dist/styles.css --minify",
     "build:js": "tsup --format cjs,esm --dts --clean",
-    "build": "yarn run build:js && yarn run build:css"
+    "build": "yarn run build:js && yarn run build:css",
+    "prepare": "husky"
   },
   "dependencies": {
     "@measured/puck": "^0.20.2",
@@ -82,16 +83,33 @@
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.13",
+    "@typescript-eslint/eslint-plugin": "^8.55.0",
+    "@typescript-eslint/parser": "^8.55.0",
     "autoprefixer": "^10.4.24",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "husky": "^9.1.7",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
+    "lint-staged": "^16.2.7",
     "next": "^16.1.6",
     "postcss": "^8.5.6",
+    "prettier": "^3.8.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwindcss": "^4.1.18",
     "ts-jest": "^29.4.6",
     "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.55.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "*.{json,css,md}": [
+      "prettier --write"
+    ]
   }
 }

package/dist/ResponsiveToggleField-CVhKzDAT.d.mts

@@ -1,183 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-type ColorValue = {
-    color: string;
-    opacity: number;
-};
-type CustomFieldProps<T> = {
-    value: T;
-    onChangeAction: (value: T) => void;
-    disabled?: boolean;
-    label: string;
-};
-
-type ThemeColors = {
-    primary: ColorValue;
-    secondary: ColorValue;
-    accent: ColorValue;
-    background: ColorValue;
-    foreground: ColorValue;
-    muted: ColorValue;
-};
-type ThemeTypography = {
-    fontFamily: {
-        heading: string;
-        body: string;
-    };
-    fontSize: {
-        base: string;
-        heading: string;
-    };
-    fontWeight: {
-        normal: number;
-        heading: number;
-    };
-};
-type ThemeSpacing = {
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-};
-type ThemeBorders = {
-    radiusSmall: number;
-    radiusMedium: number;
-    radiusLarge: number;
-};
-type ThemeShadows = {
-    small: string;
-    medium: string;
-    large: string;
-};
-type PageTheme = {
-    id: string;
-    name: string;
-    colors: ThemeColors;
-    typography: ThemeTypography;
-    spacing: ThemeSpacing;
-    borders: ThemeBorders;
-    shadows: ThemeShadows;
-};
-type ThemeColorKey = keyof ThemeColors;
-type ThemeSpacingKey = keyof ThemeSpacing;
-type ThemeBorderKey = keyof ThemeBorders;
-type ThemeShadowKey = keyof ThemeShadows;
-type ThemeableColorValue = {
-    useTheme: true;
-    themeKey: ThemeColorKey;
-} | {
-    useTheme: false;
-    value: ColorValue;
-};
-type ThemeableSpacingValue = {
-    useTheme: true;
-    themeKey: ThemeSpacingKey;
-} | {
-    useTheme: false;
-    value: number;
-};
-type ThemeableBorderRadiusValue = {
-    useTheme: true;
-    themeKey: ThemeBorderKey;
-} | {
-    useTheme: false;
-    value: number;
-};
-type ThemeableShadowValue = {
-    useTheme: true;
-    themeKey: ThemeShadowKey;
-} | {
-    useTheme: false;
-    value: string;
-};
-
-type ThemeContextValue = {
-    theme: PageTheme;
-    resolveColor: (key: ThemeColorKey) => ColorValue;
-    resolveSpacing: (key: ThemeSpacingKey) => number;
-    resolveBorderRadius: (key: ThemeBorderKey) => number;
-    resolveShadow: (key: ThemeShadowKey) => string;
-};
-declare function ThemeProvider({ theme, children, }: {
-    theme: PageTheme | null;
-    children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
-declare function useTheme(): ThemeContextValue;
-
-declare const DEFAULT_THEME: PageTheme;
-
-type BorderRadiusPreset = {
-    label: string;
-    value: number;
-};
-declare const borderRadiusScale: BorderRadiusPreset[];
-declare const getClosestBorderRadiusValue: (value: number) => number;
-declare const getBorderRadiusCSS: (value: number) => string;
-
-type ColorPreset = {
-    label: string;
-    value: string;
-};
-declare const neutralColors: ColorPreset[];
-declare const allColorPresets: ColorPreset[];
-
-type ShadowPreset = {
-    label: string;
-    value: string;
-    css: string;
-};
-declare const shadowPresets: ShadowPreset[];
-declare const getShadowCSS: (value: string) => string;
-
-type SpacingPreset = {
-    label: string;
-    value: number;
-};
-declare const spacingScale: SpacingPreset[];
-declare const getClosestSpacingValue: (value: number) => number;
-
-type FontFamilyPreset = {
-    label: string;
-    value: string;
-};
-type FontSizePreset = {
-    label: string;
-    value: string;
-    css: string;
-};
-type FontWeightPreset = {
-    label: string;
-    value: number;
-};
-declare const fontFamilies: FontFamilyPreset[];
-declare const fontSizes: FontSizePreset[];
-declare const fontWeights: FontWeightPreset[];
-declare const getFontSizeCSS: (value: string) => string;
-
-type EntryContent = Record<string, string | number | boolean | null>;
-type Entry = {
-    id: string;
-    venture_id: string;
-    name: string;
-    content: EntryContent;
-    created_at: string | null;
-    updated_at: string | null;
-};
-type EntryBoundValue<T> = {
-    useEntry: true;
-    entryName: string;
-    fieldKey: string;
-} | {
-    useEntry: false;
-    value: T;
-};
-
-type ResponsiveVisibility = {
-    mobile: boolean;
-    desktop: boolean;
-};
-declare function ResponsiveToggleField({ value, onChangeAction, disabled, label, }: CustomFieldProps<ResponsiveVisibility>): react_jsx_runtime.JSX.Element;
-
-export { getBorderRadiusCSS as A, type BorderRadiusPreset as B, type ColorValue as C, DEFAULT_THEME as D, type Entry as E, type FontFamilyPreset as F, getClosestBorderRadiusValue as G, getClosestSpacingValue as H, getFontSizeCSS as I, getShadowCSS as J, neutralColors as K, shadowPresets as L, spacingScale as M, useTheme as N, type PageTheme as P, type ResponsiveVisibility as R, type ShadowPreset as S, type ThemeableColorValue as T, type EntryBoundValue as a, type ThemeColorKey as b, type CustomFieldProps as c, type ColorPreset as d, type EntryContent as e, type FontSizePreset as f, type FontWeightPreset as g, ResponsiveToggleField as h, type SpacingPreset as i, type ThemeBorderKey as j, type ThemeBorders as k, type ThemeColors as l, ThemeProvider as m, type ThemeShadowKey as n, type ThemeShadows as o, type ThemeSpacing as p, type ThemeSpacingKey as q, type ThemeTypography as r, type ThemeableBorderRadiusValue as s, type ThemeableShadowValue as t, type ThemeableSpacingValue as u, allColorPresets as v, borderRadiusScale as w, fontFamilies as x, fontSizes as y, fontWeights as z };

package/dist/ResponsiveToggleField-CVhKzDAT.d.ts

@@ -1,183 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-type ColorValue = {
-    color: string;
-    opacity: number;
-};
-type CustomFieldProps<T> = {
-    value: T;
-    onChangeAction: (value: T) => void;
-    disabled?: boolean;
-    label: string;
-};
-
-type ThemeColors = {
-    primary: ColorValue;
-    secondary: ColorValue;
-    accent: ColorValue;
-    background: ColorValue;
-    foreground: ColorValue;
-    muted: ColorValue;
-};
-type ThemeTypography = {
-    fontFamily: {
-        heading: string;
-        body: string;
-    };
-    fontSize: {
-        base: string;
-        heading: string;
-    };
-    fontWeight: {
-        normal: number;
-        heading: number;
-    };
-};
-type ThemeSpacing = {
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-};
-type ThemeBorders = {
-    radiusSmall: number;
-    radiusMedium: number;
-    radiusLarge: number;
-};
-type ThemeShadows = {
-    small: string;
-    medium: string;
-    large: string;
-};
-type PageTheme = {
-    id: string;
-    name: string;
-    colors: ThemeColors;
-    typography: ThemeTypography;
-    spacing: ThemeSpacing;
-    borders: ThemeBorders;
-    shadows: ThemeShadows;
-};
-type ThemeColorKey = keyof ThemeColors;
-type ThemeSpacingKey = keyof ThemeSpacing;
-type ThemeBorderKey = keyof ThemeBorders;
-type ThemeShadowKey = keyof ThemeShadows;
-type ThemeableColorValue = {
-    useTheme: true;
-    themeKey: ThemeColorKey;
-} | {
-    useTheme: false;
-    value: ColorValue;
-};
-type ThemeableSpacingValue = {
-    useTheme: true;
-    themeKey: ThemeSpacingKey;
-} | {
-    useTheme: false;
-    value: number;
-};
-type ThemeableBorderRadiusValue = {
-    useTheme: true;
-    themeKey: ThemeBorderKey;
-} | {
-    useTheme: false;
-    value: number;
-};
-type ThemeableShadowValue = {
-    useTheme: true;
-    themeKey: ThemeShadowKey;
-} | {
-    useTheme: false;
-    value: string;
-};
-
-type ThemeContextValue = {
-    theme: PageTheme;
-    resolveColor: (key: ThemeColorKey) => ColorValue;
-    resolveSpacing: (key: ThemeSpacingKey) => number;
-    resolveBorderRadius: (key: ThemeBorderKey) => number;
-    resolveShadow: (key: ThemeShadowKey) => string;
-};
-declare function ThemeProvider({ theme, children, }: {
-    theme: PageTheme | null;
-    children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
-declare function useTheme(): ThemeContextValue;
-
-declare const DEFAULT_THEME: PageTheme;
-
-type BorderRadiusPreset = {
-    label: string;
-    value: number;
-};
-declare const borderRadiusScale: BorderRadiusPreset[];
-declare const getClosestBorderRadiusValue: (value: number) => number;
-declare const getBorderRadiusCSS: (value: number) => string;
-
-type ColorPreset = {
-    label: string;
-    value: string;
-};
-declare const neutralColors: ColorPreset[];
-declare const allColorPresets: ColorPreset[];
-
-type ShadowPreset = {
-    label: string;
-    value: string;
-    css: string;
-};
-declare const shadowPresets: ShadowPreset[];
-declare const getShadowCSS: (value: string) => string;
-
-type SpacingPreset = {
-    label: string;
-    value: number;
-};
-declare const spacingScale: SpacingPreset[];
-declare const getClosestSpacingValue: (value: number) => number;
-
-type FontFamilyPreset = {
-    label: string;
-    value: string;
-};
-type FontSizePreset = {
-    label: string;
-    value: string;
-    css: string;
-};
-type FontWeightPreset = {
-    label: string;
-    value: number;
-};
-declare const fontFamilies: FontFamilyPreset[];
-declare const fontSizes: FontSizePreset[];
-declare const fontWeights: FontWeightPreset[];
-declare const getFontSizeCSS: (value: string) => string;
-
-type EntryContent = Record<string, string | number | boolean | null>;
-type Entry = {
-    id: string;
-    venture_id: string;
-    name: string;
-    content: EntryContent;
-    created_at: string | null;
-    updated_at: string | null;
-};
-type EntryBoundValue<T> = {
-    useEntry: true;
-    entryName: string;
-    fieldKey: string;
-} | {
-    useEntry: false;
-    value: T;
-};
-
-type ResponsiveVisibility = {
-    mobile: boolean;
-    desktop: boolean;
-};
-declare function ResponsiveToggleField({ value, onChangeAction, disabled, label, }: CustomFieldProps<ResponsiveVisibility>): react_jsx_runtime.JSX.Element;
-
-export { getBorderRadiusCSS as A, type BorderRadiusPreset as B, type ColorValue as C, DEFAULT_THEME as D, type Entry as E, type FontFamilyPreset as F, getClosestBorderRadiusValue as G, getClosestSpacingValue as H, getFontSizeCSS as I, getShadowCSS as J, neutralColors as K, shadowPresets as L, spacingScale as M, useTheme as N, type PageTheme as P, type ResponsiveVisibility as R, type ShadowPreset as S, type ThemeableColorValue as T, type EntryBoundValue as a, type ThemeColorKey as b, type CustomFieldProps as c, type ColorPreset as d, type EntryContent as e, type FontSizePreset as f, type FontWeightPreset as g, ResponsiveToggleField as h, type SpacingPreset as i, type ThemeBorderKey as j, type ThemeBorders as k, type ThemeColors as l, ThemeProvider as m, type ThemeShadowKey as n, type ThemeShadows as o, type ThemeSpacing as p, type ThemeSpacingKey as q, type ThemeTypography as r, type ThemeableBorderRadiusValue as s, type ThemeableShadowValue as t, type ThemeableSpacingValue as u, allColorPresets as v, borderRadiusScale as w, fontFamilies as x, fontSizes as y, fontWeights as z };