@fragments-sdk/viewer 0.2.1

package/src/components/FigmaEmbed.tsx

@@ -0,0 +1,238 @@
+import { useRef, useEffect, useState, useMemo, useCallback } from "react";
+import { FigmaIcon } from "./Icons.js";
+import { Stack, Text, Button } from '@fragments-sdk/ui';
+
+interface FigmaEmbedProps {
+  /** Current Figma URL to display */
+  figmaUrl: string;
+  /** All Figma URLs for the current component (for preloading) */
+  allFigmaUrls?: string[];
+  zoom?: number;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface ParsedFigmaUrl {
+  fileKey: string;
+  nodeId?: string;
+  fullUrl: string;
+}
+
+/**
+ * Parse a Figma URL to extract file key and node ID.
+ */
+function parseFigmaUrl(figmaUrl: string): ParsedFigmaUrl | null {
+  try {
+    const urlPattern = /figma\.com\/(?:file|design)\/([^/]+)\/[^?]*(?:\?.*node-id=([^&]+))?/i;
+    const match = figmaUrl.match(urlPattern);
+
+    if (!match) return null;
+
+    const fileKey = match[1];
+    const nodeId = match[2] ? decodeURIComponent(match[2]) : undefined;
+
+    return { fileKey, nodeId, fullUrl: figmaUrl };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Build a Figma embed URL.
+ */
+function buildEmbedUrl(fileKey: string, nodeId?: string): string {
+  let embedUrl = `https://embed.figma.com/design/${fileKey}?embed-host=fragments`;
+
+  if (nodeId) {
+    const embedNodeId = nodeId.replace(/:/g, "-");
+    embedUrl += `&node-id=${embedNodeId}`;
+  }
+
+  embedUrl += "&hide-ui=1";
+  return embedUrl;
+}
+
+/**
+ * Get a unique key for a Figma URL (used for iframe identification)
+ */
+function getUrlKey(figmaUrl: string): string {
+  const parsed = parseFigmaUrl(figmaUrl);
+  if (!parsed) return figmaUrl;
+  return `${parsed.fileKey}:${parsed.nodeId || "default"}`;
+}
+
+/**
+ * FigmaEmbed component with iframe pooling for instant variant switching.
+ *
+ * Strategy: Pre-load iframes for ALL variants of the current component.
+ * When switching variants, we just show/hide the appropriate iframe.
+ * This makes switching instantaneous since iframes are already loaded.
+ *
+ * The design embed doesn't support postMessage navigation (only prototype
+ * embeds do), so this pooling approach is the only way to achieve instant
+ * switching.
+ */
+export function FigmaEmbed({ figmaUrl, allFigmaUrls, zoom = 100, className, style }: FigmaEmbedProps) {
+  // Track loaded iframes
+  const [loadedUrls, setLoadedUrls] = useState<Set<string>>(new Set());
+  const [error, setError] = useState<string | null>(null);
+
+  // Parse the current URL
+  const currentParsed = useMemo(() => parseFigmaUrl(figmaUrl), [figmaUrl]);
+  const currentKey = useMemo(() => getUrlKey(figmaUrl), [figmaUrl]);
+
+  // Get all URLs to preload (deduplicated)
+  const urlsToPreload = useMemo(() => {
+    const urls = allFigmaUrls && allFigmaUrls.length > 0 ? allFigmaUrls : [figmaUrl];
+    const uniqueUrls = new Map<string, string>();
+
+    for (const url of urls) {
+      const key = getUrlKey(url);
+      if (!uniqueUrls.has(key)) {
+        uniqueUrls.set(key, url);
+      }
+    }
+
+    return Array.from(uniqueUrls.entries()).map(([key, url]) => ({
+      key,
+      url,
+      parsed: parseFigmaUrl(url),
+    }));
+  }, [allFigmaUrls, figmaUrl]);
+
+  // Handle iframe load
+  const handleIframeLoad = useCallback((urlKey: string) => {
+    setLoadedUrls(prev => {
+      const next = new Set(prev);
+      next.add(urlKey);
+      return next;
+    });
+  }, []);
+
+  // Calculate zoom transform
+  const zoomStyle: React.CSSProperties = zoom !== 100
+    ? {
+        transform: `scale(${zoom / 100})`,
+        transformOrigin: "center",
+        width: `${100 / (zoom / 100)}%`,
+        height: `${100 / (zoom / 100)}%`,
+      }
+    : {};
+
+  // Check if current URL is loaded
+  const isCurrentLoaded = loadedUrls.has(currentKey);
+
+  // If we can't parse the URL, show error
+  if (!currentParsed) {
+    return (
+      <Stack className={className} align="center" justify="center" style={style}>
+        <Stack direction="column" align="center" gap="sm" style={{ color: 'var(--text-tertiary)', padding: '16px', textAlign: 'center' }}>
+          <FigmaIcon style={{ width: '24px', height: '24px' }} />
+          <Text size="xs">Unable to embed Figma design</Text>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => window.open(figmaUrl, "_blank", "noopener,noreferrer")}
+          >
+            Open in Figma
+          </Button>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  return (
+    <div className={className} style={{ ...style, position: "relative", overflow: "hidden" }}>
+      {/* Loading overlay - shows while current iframe is loading */}
+      {!isCurrentLoaded && (
+        <Stack align="center" justify="center" style={{ position: 'absolute', inset: 0, backgroundColor: 'var(--bg-secondary)', zIndex: 20 }}>
+          <Stack direction="column" align="center" gap="sm">
+            <FigmaIcon style={{ width: '20px', height: '20px', color: 'var(--text-tertiary)' }} />
+            <Text size="xs" color="tertiary">Loading Figma...</Text>
+          </Stack>
+        </Stack>
+      )}
+
+      {/* Error overlay */}
+      {error && (
+        <Stack align="center" justify="center" style={{ position: 'absolute', inset: 0, backgroundColor: 'var(--bg-secondary)', zIndex: 20 }}>
+          <Stack direction="column" align="center" gap="sm" style={{ color: 'var(--text-tertiary)' }}>
+            <FigmaIcon style={{ width: '24px', height: '24px' }} />
+            <Text size="xs">{error}</Text>
+          </Stack>
+        </Stack>
+      )}
+
+      {/*
+        Iframe pool: Pre-load all variant URLs as hidden iframes.
+        Only the current variant's iframe is visible (opacity: 1, z-index: 10).
+        Others are hidden (opacity: 0, z-index: 1) but stay loaded.
+
+        This approach works because:
+        1. Figma iframes stay active even when hidden
+        2. Switching just changes CSS visibility
+        3. No network requests when switching variants
+      */}
+      {urlsToPreload.map(({ key, parsed }) => {
+        if (!parsed) return null;
+
+        const embedUrl = buildEmbedUrl(parsed.fileKey, parsed.nodeId);
+        const isActive = key === currentKey;
+        const isLoaded = loadedUrls.has(key);
+
+        return (
+          <iframe
+            key={key}
+            src={embedUrl}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              width: '100%',
+              height: '100%',
+              border: 'none',
+              transition: 'opacity 150ms',
+              ...zoomStyle,
+              opacity: isActive && isLoaded ? 1 : 0,
+              zIndex: isActive ? 10 : 1,
+              pointerEvents: isActive ? "auto" : "none",
+            }}
+            onLoad={() => handleIframeLoad(key)}
+            onError={() => setError("Failed to load Figma embed")}
+            allowFullScreen
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * Hook to collect all Figma URLs from a fragment's variants.
+ * This enables the FigmaEmbed to preload all variant iframes.
+ */
+export function useAllFigmaUrls(
+  fragment: { meta: { figma?: string }; variants?: Array<{ figma?: string }> } | undefined
+): string[] {
+  return useMemo(() => {
+    if (!fragment) return [];
+
+    const urls: string[] = [];
+
+    // Add meta-level Figma URL
+    if (fragment.meta.figma) {
+      urls.push(fragment.meta.figma);
+    }
+
+    // Add variant-level Figma URLs
+    if (fragment.variants) {
+      for (const variant of fragment.variants) {
+        if (variant.figma) {
+          urls.push(variant.figma);
+        }
+      }
+    }
+
+    // Deduplicate
+    return [...new Set(urls)];
+  }, [fragment]);
+}