@fragments-sdk/cli 0.2.2

package/src/viewer/components/MultiViewportPreview.tsx

@@ -0,0 +1,429 @@
+// @ts-nocheck
+/**
+ * Multi-Viewport Preview - Show component at multiple sizes simultaneously
+ *
+ * Displays the component at mobile, tablet, and desktop widths
+ * with proper device mockups and horizontal scrolling.
+ */
+
+import { useState, type ReactNode } from "react";
+import { ErrorBoundary } from "./ErrorBoundary.js";
+import { IsolatedPreviewFrame } from "./IsolatedPreviewFrame.js";
+import { ChevronDownIcon } from "./Icons.js";
+import { getBackgroundStyle, type BackgroundOption } from "./PreviewToolbar.js";
+
+interface ViewportConfig {
+  name: string;
+  width: number;
+  height: number;
+  type: "mobile" | "tablet" | "desktop";
+}
+
+interface MobilePreset {
+  name: string;
+  width: number;
+  height: number;
+}
+
+const MOBILE_PRESETS: MobilePreset[] = [
+  { name: "iPhone SE", width: 375, height: 667 },
+  { name: "iPhone 14", width: 390, height: 844 },
+  { name: "iPhone 14 Pro Max", width: 430, height: 932 },
+  { name: "Pixel 7", width: 412, height: 915 },
+  { name: "Galaxy S21", width: 360, height: 800 },
+];
+
+const DEFAULT_VIEWPORTS: ViewportConfig[] = [
+  { name: "Mobile", width: 375, height: 667, type: "mobile" },
+  { name: "Tablet", width: 768, height: 1024, type: "tablet" },
+  { name: "Desktop", width: 1280, height: 800, type: "desktop" },
+];
+
+interface MultiViewportPreviewProps {
+  /** Component name for error boundary */
+  componentName: string;
+  /** Segment path for iframe rendering */
+  segmentPath: string;
+  /** Variant name for iframe rendering */
+  variantName: string;
+  /** Render function that returns the component (fallback) */
+  renderContent: () => ReactNode;
+  /** Preview theme */
+  previewTheme: "light" | "dark";
+  /** Background option for preview */
+  background: BackgroundOption;
+  /** Base zoom level (used for scaling if needed) */
+  zoom: number;
+  /** Whether to use iframe isolation */
+  useIframeIsolation?: boolean;
+}
+
+export function MultiViewportPreview({
+  componentName,
+  segmentPath,
+  variantName,
+  renderContent,
+  previewTheme,
+  background,
+  zoom,
+  useIframeIsolation = true,
+}: MultiViewportPreviewProps) {
+  const [selectedMobile, setSelectedMobile] = useState<MobilePreset>(MOBILE_PRESETS[0]);
+  const [showMobileDropdown, setShowMobileDropdown] = useState(false);
+
+  // Build viewports with selected mobile preset
+  const viewports: ViewportConfig[] = [
+    { name: "Mobile", width: selectedMobile.width, height: selectedMobile.height, type: "mobile" },
+    { name: "Tablet", width: 768, height: 1024, type: "tablet" },
+    { name: "Desktop", width: 1280, height: 800, type: "desktop" },
+  ];
+
+  return (
+    <div className="h-full flex flex-col bg-gray-100 dark:bg-gray-900">
+      {/* Header */}
+      <div className="flex-shrink-0 px-4 py-3 border-b border-[--border] bg-[--bg-secondary] flex items-center justify-center gap-8">
+        {/* Mobile with dropdown */}
+        <div className="relative">
+          <button
+            onClick={() => setShowMobileDropdown(!showMobileDropdown)}
+            className="flex items-center gap-2 text-sm hover:bg-[--bg-hover] px-2 py-1 rounded transition-colors"
+          >
+            <span className="text-lg">📱</span>
+            <span className="font-medium text-secondary">Mobile</span>
+            <span className="text-xs text-tertiary">({selectedMobile.width}px)</span>
+            <ChevronDownIcon className="w-3 h-3 text-tertiary" />
+          </button>
+
+          {showMobileDropdown && (
+            <>
+              <div
+                className="fixed inset-0 z-10"
+                onClick={() => setShowMobileDropdown(false)}
+              />
+              <div className="absolute top-full left-0 mt-1 z-20 bg-[--bg-elevated] border border-[--border] rounded-lg shadow-lg py-1 min-w-[180px]">
+                {MOBILE_PRESETS.map((preset) => (
+                  <button
+                    key={preset.name}
+                    onClick={() => {
+                      setSelectedMobile(preset);
+                      setShowMobileDropdown(false);
+                    }}
+                    className={`w-full px-3 py-1.5 text-left text-xs hover:bg-[--bg-hover] transition-colors flex items-center justify-between ${
+                      selectedMobile.name === preset.name ? 'text-blue-500' : 'text-secondary'
+                    }`}
+                  >
+                    <span>{preset.name}</span>
+                    <span className="text-tertiary">{preset.width}×{preset.height}</span>
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Tablet */}
+        <div className="flex items-center gap-2 text-sm">
+          <span className="text-lg">📱</span>
+          <span className="font-medium text-secondary">Tablet</span>
+          <span className="text-xs text-tertiary">(768px)</span>
+        </div>
+
+        {/* Desktop */}
+        <div className="flex items-center gap-2 text-sm">
+          <span className="text-lg">🖥️</span>
+          <span className="font-medium text-secondary">Desktop</span>
+          <span className="text-xs text-tertiary">(1280px)</span>
+        </div>
+      </div>
+
+      {/* Viewport panels with horizontal scroll */}
+      <div className="flex-1 overflow-x-auto overflow-y-auto">
+        <div className="flex gap-8 p-8 min-w-max">
+          {viewports.map((vp) => (
+            <ViewportPanel
+              key={`${vp.name}-${vp.width}`}
+              viewport={vp}
+              componentName={componentName}
+              segmentPath={segmentPath}
+              variantName={variantName}
+              renderContent={renderContent}
+              previewTheme={previewTheme}
+              background={background}
+              useIframeIsolation={useIframeIsolation}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface ViewportPanelProps {
+  viewport: ViewportConfig;
+  componentName: string;
+  segmentPath: string;
+  variantName: string;
+  renderContent: () => ReactNode;
+  previewTheme: "light" | "dark";
+  background: BackgroundOption;
+  useIframeIsolation: boolean;
+}
+
+function ViewportPanel({
+  viewport,
+  componentName,
+  segmentPath,
+  variantName,
+  renderContent,
+  previewTheme,
+  background,
+  useIframeIsolation,
+}: ViewportPanelProps) {
+  if (viewport.type === "desktop") {
+    return (
+      <DesktopMockup
+        width={viewport.width}
+        height={viewport.height}
+        label={viewport.name}
+        previewTheme={previewTheme}
+        background={background}
+        componentName={componentName}
+        segmentPath={segmentPath}
+        variantName={variantName}
+        renderContent={renderContent}
+        useIframeIsolation={useIframeIsolation}
+      />
+    );
+  }
+
+  return (
+    <DeviceMockup
+      type={viewport.type}
+      width={viewport.width}
+      height={viewport.height}
+      label={viewport.name}
+      previewTheme={previewTheme}
+      background={background}
+      componentName={componentName}
+      segmentPath={segmentPath}
+      variantName={variantName}
+      renderContent={renderContent}
+      useIframeIsolation={useIframeIsolation}
+    />
+  );
+}
+
+interface DeviceMockupProps {
+  type: "mobile" | "tablet";
+  width: number;
+  height: number;
+  label: string;
+  previewTheme: "light" | "dark";
+  background: BackgroundOption;
+  componentName: string;
+  segmentPath: string;
+  variantName: string;
+  renderContent: () => ReactNode;
+  useIframeIsolation: boolean;
+}
+
+function DeviceMockup({
+  type,
+  width,
+  height,
+  label,
+  previewTheme,
+  background,
+  componentName,
+  segmentPath,
+  variantName,
+  renderContent,
+  useIframeIsolation,
+}: DeviceMockupProps) {
+  const isMobile = type === "mobile";
+  const frameWidth = width + 24; // Add bezel width
+  const screenHeight = height;
+  const backgroundStyle = getBackgroundStyle(background);
+
+  return (
+    <div className="flex flex-col items-center">
+      {/* Label */}
+      <div className="mb-3 text-sm font-medium text-tertiary">
+        {label}
+      </div>
+
+      {/* Device frame */}
+      <div
+        className="relative flex-shrink-0"
+        style={{ width: `${frameWidth}px` }}
+      >
+        <div
+          className="relative rounded-[40px] bg-[#1a1a1a] p-3 shadow-2xl"
+          style={{
+            boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1)",
+          }}
+        >
+          {/* Side buttons (mobile only) */}
+          {isMobile && (
+            <>
+              <div className="absolute -left-[3px] top-24 w-[3px] h-8 bg-[#2a2a2a] rounded-l" />
+              <div className="absolute -left-[3px] top-36 w-[3px] h-12 bg-[#2a2a2a] rounded-l" />
+              <div className="absolute -left-[3px] top-52 w-[3px] h-12 bg-[#2a2a2a] rounded-l" />
+              <div className="absolute -right-[3px] top-32 w-[3px] h-16 bg-[#2a2a2a] rounded-r" />
+            </>
+          )}
+
+          {/* Screen container */}
+          <div
+            className="relative rounded-[32px] overflow-hidden bg-white"
+            style={{ height: `${screenHeight}px`, width: `${width}px` }}
+          >
+            {/* Notch (mobile) or Camera (tablet) */}
+            {isMobile ? (
+              <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[120px] h-[30px] bg-[#1a1a1a] rounded-b-2xl z-10 flex items-center justify-center gap-2">
+                <div className="w-2 h-2 rounded-full bg-[#2a2a2a]" />
+                <div className="w-12 h-1.5 rounded-full bg-[#2a2a2a]" />
+              </div>
+            ) : (
+              <div className="absolute top-2 left-1/2 -translate-x-1/2 w-3 h-3 rounded-full bg-[#2a2a2a] z-10" />
+            )}
+
+            {/* Screen content */}
+            <div
+              className="w-full h-full overflow-hidden"
+              data-theme={previewTheme}
+            >
+              {useIframeIsolation ? (
+                <IsolatedPreviewFrame
+                  segmentPath={segmentPath}
+                  variantName={variantName}
+                  theme={previewTheme}
+                  width="100%"
+                  height="100%"
+                  minHeight={screenHeight}
+                />
+              ) : (
+                <div className={isMobile ? "pt-10 px-4 pb-4" : "pt-6 px-4 pb-4"}>
+                  <ErrorBoundary
+                    componentName={componentName}
+                    fallback={
+                      <div className="text-xs text-red-500 p-2">
+                        Error rendering at {width}px
+                      </div>
+                    }
+                  >
+                    {renderContent()}
+                  </ErrorBoundary>
+                </div>
+              )}
+            </div>
+
+            {/* Home indicator */}
+            <div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-[100px] h-1 bg-black/20 rounded-full z-10" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface DesktopMockupProps {
+  width: number;
+  height: number;
+  label: string;
+  previewTheme: "light" | "dark";
+  background: BackgroundOption;
+  componentName: string;
+  segmentPath: string;
+  variantName: string;
+  renderContent: () => ReactNode;
+  useIframeIsolation: boolean;
+}
+
+function DesktopMockup({
+  width,
+  height,
+  label,
+  previewTheme,
+  background,
+  componentName,
+  segmentPath,
+  variantName,
+  renderContent,
+  useIframeIsolation,
+}: DesktopMockupProps) {
+  const backgroundStyle = getBackgroundStyle(background);
+
+  return (
+    <div className="flex flex-col items-center">
+      {/* Label */}
+      <div className="mb-3 text-sm font-medium text-tertiary">
+        {label}
+      </div>
+
+      {/* Monitor frame */}
+      <div className="flex flex-col items-center">
+        {/* Screen */}
+        <div
+          className="relative bg-[#1a1a1a] rounded-lg p-2 shadow-2xl"
+          style={{
+            boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1)",
+          }}
+        >
+          {/* Browser chrome */}
+          <div className="flex items-center gap-2 px-3 py-2 bg-[#2a2a2a] rounded-t-md">
+            <div className="flex items-center gap-1.5">
+              <div className="w-3 h-3 rounded-full bg-[#ff5f57]" />
+              <div className="w-3 h-3 rounded-full bg-[#ffbd2e]" />
+              <div className="w-3 h-3 rounded-full bg-[#28ca41]" />
+            </div>
+            <div className="flex-1 mx-4">
+              <div className="h-6 bg-[#3a3a3a] rounded-md flex items-center justify-center px-3">
+                <span className="text-xs text-gray-400 truncate">
+                  localhost:6006 — {width}px
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Screen content */}
+          <div
+            className="overflow-hidden"
+            style={{ width: `${width}px`, height: `${height}px`, ...backgroundStyle }}
+            data-theme={previewTheme}
+          >
+            {useIframeIsolation ? (
+              <IsolatedPreviewFrame
+                segmentPath={segmentPath}
+                variantName={variantName}
+                theme={previewTheme}
+                width="100%"
+                height="100%"
+                minHeight={height}
+              />
+            ) : (
+              <div className="p-6">
+                <ErrorBoundary
+                  componentName={componentName}
+                  fallback={
+                    <div className="text-xs text-red-500 p-2">
+                      Error rendering at {width}px
+                    </div>
+                  }
+                >
+                  {renderContent()}
+                </ErrorBoundary>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Monitor stand */}
+        <div className="w-20 h-4 bg-gradient-to-b from-[#2a2a2a] to-[#1a1a1a] rounded-b-sm" />
+        <div className="w-32 h-2 bg-[#1a1a1a] rounded-full shadow-lg" />
+      </div>
+    </div>
+  );
+}
+
+export { DEFAULT_VIEWPORTS as VIEWPORTS, MOBILE_PRESETS };