@snowcone-app/ui 0.1.42 → 0.2.0

package/src/personalization/PersonalizationBridge.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+/**
+ * PersonalizationBridge — rendered inside SnowconeCanvas overlay (EditorProvider context).
+ * Syncs external personalization values into canvas elements.
+ *
+ * INTERNAL: Not exported from the package. Used by PersonalizationProvider only.
+ *
+ * Text fields: finds elements by name, calls setText().
+ * Color fields: finds all elements matching the original color, updates them.
+ * Image fields: uses useImageBinding to update image by name.
+ *
+ * Key design: effects depend ONLY on the input value (text string / hex color).
+ * Callbacks and element arrays are accessed via refs to avoid effect churn from
+ * the canvas re-rendering after each update.
+ */
+
+import { useRef, useEffect } from "react";
+import { useEditor, useCommands, useImageBinding } from "@snowcone-app/canvas";
+import type { ImageFitMode } from "@snowcone-app/canvas";
+import type {
+  PersonalizationField,
+  PersonalizationValues,
+} from "./types";
+import { normalizeHex, isValidImageUrl, useDebouncedValue } from "./utils";
+
+// ---------------------------------------------------------------------------
+// TextBinder — syncs a single text personalization value into canvas
+// ---------------------------------------------------------------------------
+
+function TextBinder({ name, value }: { name: string; value: string }) {
+  const { elements } = useEditor();
+  const { executeElementUpdate } = useCommands();
+
+  const elementsRef = useRef(elements);
+  elementsRef.current = elements;
+  const executeRef = useRef(executeElementUpdate);
+  executeRef.current = executeElementUpdate;
+
+  const hasUserInput = useRef(false);
+
+  useEffect(() => {
+    if (value == null) return;
+    // Skip initial empty value to preserve the designer's original text
+    if (value === "" && !hasUserInput.current) return;
+    hasUserInput.current = true;
+
+    const currentElements = elementsRef.current;
+    const exec = executeRef.current;
+
+    for (const el of currentElements) {
+      if (el.name !== name) continue;
+      if (!("setText" in el) || typeof (el as any).setText !== "function")
+        continue;
+      const cloned = el.clone();
+      (cloned as any).setText(value);
+      exec(el, cloned);
+    }
+  }, [value, name, elements.length]); // Re-run when elements become available
+
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// ColorBinder — updates all elements matching originalColor to newColor
+// ---------------------------------------------------------------------------
+
+function ColorBinder({
+  originalColor,
+  newColor,
+}: {
+  originalColor: string;
+  newColor: string;
+}) {
+  const { elements } = useEditor();
+  const { executeElementUpdate } = useCommands();
+
+  const elementsRef = useRef(elements);
+  elementsRef.current = elements;
+  const executeRef = useRef(executeElementUpdate);
+  executeRef.current = executeElementUpdate;
+
+  const appliedColorRef = useRef(normalizeHex(originalColor));
+
+  useEffect(() => {
+    const normalizedNew = normalizeHex(newColor);
+    if (normalizedNew === appliedColorRef.current) return;
+
+    const matchColor = appliedColorRef.current;
+    const currentElements = elementsRef.current;
+    const exec = executeRef.current;
+
+    for (const el of currentElements) {
+      let needsUpdate = false;
+      const cloned = el.clone();
+
+      // Text elements: check .color
+      if ("color" in el && typeof (el as any).color === "string") {
+        if (normalizeHex((el as any).color) === matchColor) {
+          if (typeof (cloned as any).setColor === "function") {
+            (cloned as any).setColor(newColor);
+          } else {
+            (cloned as any).color = newColor;
+          }
+          needsUpdate = true;
+        }
+      }
+
+      // Shape/Path elements: check transformData.fillColor
+      if (
+        normalizeHex((el as any).transformData?.fillColor ?? "") === matchColor
+      ) {
+        (cloned as any).transformData = {
+          ...(cloned as any).transformData,
+          fillColor: newColor,
+        };
+        needsUpdate = true;
+      }
+
+      // Path elements: check transformData.strokeColor
+      if (
+        normalizeHex((el as any).transformData?.strokeColor ?? "") ===
+        matchColor
+      ) {
+        (cloned as any).transformData = {
+          ...(cloned as any).transformData,
+          strokeColor: newColor,
+        };
+        needsUpdate = true;
+      }
+
+      // Stroke color
+      if (
+        (el as any).stroke?.enabled &&
+        normalizeHex((el as any).stroke?.color ?? "") === matchColor
+      ) {
+        (cloned as any).stroke = {
+          ...(cloned as any).stroke,
+          color: newColor,
+        };
+        needsUpdate = true;
+      }
+
+      if (needsUpdate) {
+        exec(el, cloned);
+      }
+    }
+
+    appliedColorRef.current = normalizedNew;
+  }, [newColor, elements.length]); // Re-run when elements become available
+
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// ImageBinder — uses useImageBinding hook from @snowcone-app/canvas
+// ---------------------------------------------------------------------------
+
+function ImageBinder({
+  name,
+  value,
+  fit = "cover",
+}: {
+  name: string;
+  value: string;
+  fit?: "cover" | "contain";
+}) {
+  const { setImageUrl } = useImageBinding(name, {
+    fit: fit as ImageFitMode,
+  });
+  const hasUserInput = useRef(false);
+  const debouncedValue = useDebouncedValue(value, 500);
+
+  const setImageUrlRef = useRef(setImageUrl);
+  setImageUrlRef.current = setImageUrl;
+
+  useEffect(() => {
+    if (debouncedValue == null) return;
+    if (debouncedValue === "" && !hasUserInput.current) return;
+    hasUserInput.current = true;
+    if (debouncedValue !== "" && !isValidImageUrl(debouncedValue)) return;
+
+    setImageUrlRef.current(debouncedValue);
+  }, [debouncedValue]);
+
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// PersonalizationBridge — maps personalization fields to binder components
+// ---------------------------------------------------------------------------
+
+export function PersonalizationBridge({
+  fields,
+  values,
+}: {
+  fields: PersonalizationField[];
+  values: PersonalizationValues;
+}) {
+  return (
+    <>
+      {fields.map((field) => {
+        if (field.type === "text") {
+          return (
+            <TextBinder
+              key={`text-${field.name}`}
+              name={field.name}
+              value={values[field.name] ?? ""}
+            />
+          );
+        }
+        if (field.type === "color") {
+          return (
+            <ColorBinder
+              key={`color-${field.color}`}
+              originalColor={field.color}
+              newColor={values[field.color] ?? field.color}
+            />
+          );
+        }
+        if (field.type === "image") {
+          return (
+            <ImageBinder
+              key={`image-${field.name}`}
+              name={field.name}
+              value={values[field.name] ?? ""}
+              fit={field.fit ?? "cover"}
+            />
+          );
+        }
+        return null;
+      })}
+    </>
+  );
+}

package/src/personalization/PersonalizationContext.ts

@@ -0,0 +1,29 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import type { PersonalizationField, PersonalizationValues } from "./types";
+
+export interface PersonalizationContextValue {
+  /** Personalization field definitions */
+  fields: PersonalizationField[];
+  /** Current buyer input values */
+  personValues: PersonalizationValues;
+  /** Update a field value (text by name, color by original hex) */
+  updateField: (key: string, value: string) => void;
+  /** Whether the buyer has interacted with any field */
+  isActive: boolean;
+  /** Whether a canvas export is in progress */
+  isExporting: boolean;
+  /** Latest exported blob URLs keyed by artboard/placement name */
+  exportedBlobUrls: Record<string, string>;
+  /** Increments each time a canvas export completes (blob ready to send) */
+  exportCount: number;
+  /** Reset all values to initial state */
+  reset: () => void;
+}
+
+export const PersonalizationContext = createContext<PersonalizationContextValue | null>(null);
+
+export function usePersonalizationContext(): PersonalizationContextValue | null {
+  return useContext(PersonalizationContext);
+}

package/src/personalization/PersonalizationInputs.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+/**
+ * PersonalizationInputs — auto-renders input controls from personalization field config.
+ *
+ * Consumes usePersonalization() internally — no prop drilling needed.
+ * Renders text inputs, color pickers, and image URL inputs based on field type.
+ *
+ * @example
+ * ```tsx
+ * <PersonalizationProvider fields={fields} canvasElements={elements}>
+ *   <PersonalizationInputs className="space-y-3" />
+ * </PersonalizationProvider>
+ * ```
+ */
+
+import React from "react";
+import { usePersonalization } from "./usePersonalization";
+import { scrollInputAboveKeyboard } from "./utils";
+import type { PersonalizationField } from "./types";
+
+interface PersonalizationInputsProps {
+  /** CSS class for the container */
+  className?: string;
+  /** CSS class for each input */
+  inputClassName?: string;
+  /** Called when any input receives focus (for keyboard handling) */
+  onInputFocus?: () => void;
+  /** Called when any input loses focus */
+  onInputBlur?: () => void;
+  /** Enable iOS keyboard scroll behavior (default: true) */
+  autoScrollOnFocus?: boolean;
+}
+
+export function PersonalizationInputs({
+  className,
+  inputClassName = "w-full px-4 py-3 rounded-lg border text-base text-foreground placeholder:text-muted-foreground bg-white/50 outline-none focus:ring-2 focus:ring-foreground/20",
+  onInputFocus,
+  onInputBlur,
+  autoScrollOnFocus = true,
+}: PersonalizationInputsProps) {
+  const { fields, personValues, updateField } = usePersonalization();
+
+  const textFields = fields.filter(
+    (f): f is Extract<PersonalizationField, { type: "text" }> =>
+      f.type === "text"
+  );
+  const colorFields = fields.filter(
+    (f): f is Extract<PersonalizationField, { type: "color" }> =>
+      f.type === "color"
+  );
+  const imageFields = fields.filter(
+    (f): f is Extract<PersonalizationField, { type: "image" }> =>
+      f.type === "image"
+  );
+
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    onInputFocus?.();
+    if (autoScrollOnFocus) {
+      scrollInputAboveKeyboard(e.target as HTMLElement);
+    }
+  };
+
+  return (
+    <div className={className || "flex flex-col gap-3"}>
+      {/* Text fields */}
+      {textFields.map((field) => (
+        <input
+          key={`text-${field.name}`}
+          type="text"
+          placeholder={field.placeholder || field.label}
+          value={personValues[field.name] ?? ""}
+          onChange={(e) => updateField(field.name, e.target.value)}
+          onFocus={handleFocus}
+          onBlur={onInputBlur}
+          className={inputClassName}
+          style={{ borderColor: "rgba(0,0,0,0.15)" }}
+        />
+      ))}
+
+      {/* Color fields */}
+      {colorFields.map((field) => (
+        <div key={`color-${field.color}`} className="flex items-center gap-3">
+          <input
+            type="color"
+            defaultValue={field.color}
+            className="w-10 h-10 rounded-lg border-0 cursor-pointer"
+            onChange={(e) => updateField(field.color, e.target.value)}
+          />
+          <span className="text-base text-muted-foreground">{field.label}</span>
+        </div>
+      ))}
+
+      {/* Image fields */}
+      {imageFields.map((field) => (
+        <input
+          key={`image-${field.name}`}
+          type="text"
+          placeholder={field.placeholder || `${field.label} URL`}
+          value={personValues[field.name] ?? ""}
+          onChange={(e) => updateField(field.name, e.target.value)}
+          onFocus={handleFocus}
+          onBlur={onInputBlur}
+          className={inputClassName}
+          style={{ borderColor: "rgba(0,0,0,0.15)" }}
+        />
+      ))}
+    </div>
+  );
+}