@fragments-sdk/cli 0.10.1 → 0.11.1

package/src/viewer/components/MultiViewportPreview.tsx

@@ -1,522 +0,0 @@
-// @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 { Box, Stack, Text, Button, Menu } from "@fragments-sdk/ui";
-import { ErrorBoundary } from "./ErrorBoundary.js";
-import { IsolatedPreviewFrame } from "./IsolatedPreviewFrame.js";
-import { ChevronDownIcon } from "./Icons.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;
-  /** Fragment path for iframe rendering */
-  fragmentPath: string;
-  /** Variant name for iframe rendering */
-  variantName: string;
-  /** Render function that returns the component (fallback) */
-  renderContent: () => ReactNode;
-  /** Preview theme */
-  previewTheme: "light" | "dark";
-  /** Base zoom level (used for scaling if needed) */
-  zoom: number;
-  /** Whether to use iframe isolation */
-  useIframeIsolation?: boolean;
-}
-
-export function MultiViewportPreview({
-  componentName,
-  fragmentPath,
-  variantName,
-  renderContent,
-  previewTheme,
-  zoom,
-  useIframeIsolation = true,
-}: MultiViewportPreviewProps) {
-  const [selectedMobile, setSelectedMobile] = useState<MobilePreset>(MOBILE_PRESETS[0]);
-
-  // 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 (
-    <Box height="100%" display="flex" style={{ flexDirection: 'column' }} background="primary">
-      {/* Header */}
-      <Box paddingX="md" paddingY="sm" borderBottom background="secondary" style={{ flexShrink: 0 }}>
-        <Stack direction="row" align="center" justify="center" gap="lg">
-          {/* Mobile with dropdown */}
-          <Menu>
-            <Menu.Trigger>
-              <Button variant="ghost" size="sm">
-                <span style={{ fontSize: 18 }}>📱</span>
-                <Text size="sm" weight="medium" color="secondary">Mobile</Text>
-                <Text size="xs" color="tertiary">({selectedMobile.width}px)</Text>
-                <ChevronDownIcon style={{ width: 12, height: 12 }} />
-              </Button>
-            </Menu.Trigger>
-            <Menu.Content>
-              {MOBILE_PRESETS.map((preset) => (
-                <Menu.Item
-                  key={preset.name}
-                  onClick={() => setSelectedMobile(preset)}
-                >
-                  <Stack direction="row" justify="between" style={{ width: '100%' }}>
-                    <Text size="xs">{preset.name}</Text>
-                    <Text size="xs" color="tertiary">{preset.width}×{preset.height}</Text>
-                  </Stack>
-                </Menu.Item>
-              ))}
-            </Menu.Content>
-          </Menu>
-
-          {/* Tablet */}
-          <Stack direction="row" align="center" gap="sm">
-            <span style={{ fontSize: 18 }}>📱</span>
-            <Text size="sm" weight="medium" color="secondary">Tablet</Text>
-            <Text size="xs" color="tertiary">(768px)</Text>
-          </Stack>
-
-          {/* Desktop */}
-          <Stack direction="row" align="center" gap="sm">
-            <span style={{ fontSize: 18 }}>🖥️</span>
-            <Text size="sm" weight="medium" color="secondary">Desktop</Text>
-            <Text size="xs" color="tertiary">(1280px)</Text>
-          </Stack>
-        </Stack>
-      </Box>
-
-      {/* Viewport panels with horizontal scroll */}
-      <Box overflow="auto" style={{ flex: 1 }}>
-        <Stack direction="row" gap="lg" style={{ padding: 32, minWidth: 'max-content' }}>
-          {viewports.map((vp) => (
-            <ViewportPanel
-              key={`${vp.name}-${vp.width}`}
-              viewport={vp}
-              componentName={componentName}
-              fragmentPath={fragmentPath}
-              variantName={variantName}
-              renderContent={renderContent}
-              previewTheme={previewTheme}
-              useIframeIsolation={useIframeIsolation}
-            />
-          ))}
-        </Stack>
-      </Box>
-    </Box>
-  );
-}
-
-interface ViewportPanelProps {
-  viewport: ViewportConfig;
-  componentName: string;
-  fragmentPath: string;
-  variantName: string;
-  renderContent: () => ReactNode;
-  previewTheme: "light" | "dark";
-  useIframeIsolation: boolean;
-}
-
-function ViewportPanel({
-  viewport,
-  componentName,
-  fragmentPath,
-  variantName,
-  renderContent,
-  previewTheme,
-  useIframeIsolation,
-}: ViewportPanelProps) {
-  if (viewport.type === "desktop") {
-    return (
-      <DesktopMockup
-        width={viewport.width}
-        height={viewport.height}
-        label={viewport.name}
-        previewTheme={previewTheme}
-        componentName={componentName}
-        fragmentPath={fragmentPath}
-        variantName={variantName}
-        renderContent={renderContent}
-        useIframeIsolation={useIframeIsolation}
-      />
-    );
-  }
-
-  return (
-    <DeviceMockup
-      type={viewport.type}
-      width={viewport.width}
-      height={viewport.height}
-      label={viewport.name}
-      previewTheme={previewTheme}
-      componentName={componentName}
-      fragmentPath={fragmentPath}
-      variantName={variantName}
-      renderContent={renderContent}
-      useIframeIsolation={useIframeIsolation}
-    />
-  );
-}
-
-interface DeviceMockupProps {
-  type: "mobile" | "tablet";
-  width: number;
-  height: number;
-  label: string;
-  previewTheme: "light" | "dark";
-  componentName: string;
-  fragmentPath: string;
-  variantName: string;
-  renderContent: () => ReactNode;
-  useIframeIsolation: boolean;
-}
-
-function DeviceMockup({
-  type,
-  width,
-  height,
-  label,
-  previewTheme,
-  componentName,
-  fragmentPath,
-  variantName,
-  renderContent,
-  useIframeIsolation,
-}: DeviceMockupProps) {
-  const isMobile = type === "mobile";
-  const frameWidth = width + 24; // Add bezel width
-  const screenHeight = height;
-
-  return (
-    <Stack align="center">
-      {/* Label */}
-      <Text size="sm" weight="medium" color="tertiary" style={{ marginBottom: 12 }}>
-        {label}
-      </Text>
-
-      {/* Device frame */}
-      <div
-        style={{
-          position: 'relative',
-          flexShrink: 0,
-          width: `${frameWidth}px`,
-        }}
-      >
-        <div
-          style={{
-            position: 'relative',
-            borderRadius: 40,
-            background: '#1a1a1a',
-            padding: 12,
-            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 style={{
-                position: 'absolute',
-                left: -3,
-                top: 96,
-                width: 3,
-                height: 32,
-                background: '#2a2a2a',
-                borderRadius: '4px 0 0 4px',
-              }} />
-              <div style={{
-                position: 'absolute',
-                left: -3,
-                top: 144,
-                width: 3,
-                height: 48,
-                background: '#2a2a2a',
-                borderRadius: '4px 0 0 4px',
-              }} />
-              <div style={{
-                position: 'absolute',
-                left: -3,
-                top: 208,
-                width: 3,
-                height: 48,
-                background: '#2a2a2a',
-                borderRadius: '4px 0 0 4px',
-              }} />
-              <div style={{
-                position: 'absolute',
-                right: -3,
-                top: 128,
-                width: 3,
-                height: 64,
-                background: '#2a2a2a',
-                borderRadius: '0 4px 4px 0',
-              }} />
-            </>
-          )}
-
-          {/* Screen container */}
-          <div
-            style={{
-              position: 'relative',
-              borderRadius: 32,
-              overflow: 'hidden',
-              background: '#ffffff',
-              height: `${screenHeight}px`,
-              width: `${width}px`,
-            }}
-          >
-            {/* Notch (mobile) or Camera (tablet) */}
-            {isMobile ? (
-              <div style={{
-                position: 'absolute',
-                top: 0,
-                left: '50%',
-                transform: 'translateX(-50%)',
-                width: 120,
-                height: 30,
-                background: '#1a1a1a',
-                borderRadius: '0 0 16px 16px',
-                zIndex: 10,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: 8,
-              }}>
-                <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#2a2a2a' }} />
-                <div style={{ width: 48, height: 6, borderRadius: 9999, background: '#2a2a2a' }} />
-              </div>
-            ) : (
-              <div style={{
-                position: 'absolute',
-                top: 8,
-                left: '50%',
-                transform: 'translateX(-50%)',
-                width: 12,
-                height: 12,
-                borderRadius: '50%',
-                background: '#2a2a2a',
-                zIndex: 10,
-              }} />
-            )}
-
-            {/* Screen content */}
-            <div
-              style={{ width: '100%', height: '100%', overflow: 'hidden' }}
-              data-theme={previewTheme}
-            >
-              {useIframeIsolation ? (
-                <IsolatedPreviewFrame
-                  fragmentPath={fragmentPath}
-                  variantName={variantName}
-                  theme={previewTheme}
-                  width="100%"
-                  height="100%"
-                  minHeight={screenHeight}
-                />
-              ) : (
-                <div style={{
-                  paddingTop: isMobile ? 40 : 24,
-                  paddingLeft: 16,
-                  paddingRight: 16,
-                  paddingBottom: 16,
-                }}>
-                  <ErrorBoundary
-                    componentName={componentName}
-                    fallback={
-                      <Text size="xs" color="tertiary" style={{ padding: 8 }}>
-                        Error rendering at {width}px
-                      </Text>
-                    }
-                  >
-                    {renderContent()}
-                  </ErrorBoundary>
-                </div>
-              )}
-            </div>
-
-            {/* Home indicator */}
-            <div style={{
-              position: 'absolute',
-              bottom: 8,
-              left: '50%',
-              transform: 'translateX(-50%)',
-              width: 100,
-              height: 4,
-              background: 'rgba(0,0,0,0.2)',
-              borderRadius: 9999,
-              zIndex: 10,
-            }} />
-          </div>
-        </div>
-      </div>
-    </Stack>
-  );
-}
-
-interface DesktopMockupProps {
-  width: number;
-  height: number;
-  label: string;
-  previewTheme: "light" | "dark";
-  componentName: string;
-  fragmentPath: string;
-  variantName: string;
-  renderContent: () => ReactNode;
-  useIframeIsolation: boolean;
-}
-
-function DesktopMockup({
-  width,
-  height,
-  label,
-  previewTheme,
-  componentName,
-  fragmentPath,
-  variantName,
-  renderContent,
-  useIframeIsolation,
-}: DesktopMockupProps) {
-  return (
-    <Stack align="center">
-      {/* Label */}
-      <Text size="sm" weight="medium" color="tertiary" style={{ marginBottom: 12 }}>
-        {label}
-      </Text>
-
-      {/* Monitor frame */}
-      <Stack align="center">
-        {/* Screen */}
-        <div
-          style={{
-            position: 'relative',
-            background: '#1a1a1a',
-            borderRadius: 8,
-            padding: 8,
-            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1)',
-          }}
-        >
-          {/* Browser chrome */}
-          <div style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 8,
-            padding: '8px 12px',
-            background: '#2a2a2a',
-            borderRadius: '6px 6px 0 0',
-          }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-              <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#ff5f57' }} />
-              <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#ffbd2e' }} />
-              <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#28ca41' }} />
-            </div>
-            <div style={{ flex: 1, margin: '0 16px' }}>
-              <div style={{
-                height: 24,
-                background: '#3a3a3a',
-                borderRadius: 6,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                padding: '0 12px',
-              }}>
-                <span style={{
-                  fontSize: 12,
-                  color: '#9ca3af',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                }}>
-                  localhost:6006 — {width}px
-                </span>
-              </div>
-            </div>
-          </div>
-
-          {/* Screen content */}
-          <div
-            style={{
-              overflow: 'hidden',
-              width: `${width}px`,
-              height: `${height}px`,
-            }}
-            data-theme={previewTheme}
-          >
-            {useIframeIsolation ? (
-              <IsolatedPreviewFrame
-                fragmentPath={fragmentPath}
-                variantName={variantName}
-                theme={previewTheme}
-                width="100%"
-                height="100%"
-                minHeight={height}
-              />
-            ) : (
-              <div style={{ padding: 24 }}>
-                <ErrorBoundary
-                  componentName={componentName}
-                  fallback={
-                    <Text size="xs" color="tertiary" style={{ padding: 8 }}>
-                      Error rendering at {width}px
-                    </Text>
-                  }
-                >
-                  {renderContent()}
-                </ErrorBoundary>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Monitor stand */}
-        <div style={{
-          width: 80,
-          height: 16,
-          background: 'linear-gradient(to bottom, #2a2a2a, #1a1a1a)',
-          borderRadius: '0 0 2px 2px',
-        }} />
-        <div style={{
-          width: 128,
-          height: 8,
-          background: '#1a1a1a',
-          borderRadius: 9999,
-          boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',
-        }} />
-      </Stack>
-    </Stack>
-  );
-}
-
-export { DEFAULT_VIEWPORTS as VIEWPORTS, MOBILE_PRESETS };

package/src/viewer/components/NoVariantsMessage.tsx

@@ -1,59 +0,0 @@
-import type { FragmentDefinition } from "../../core/index.js";
-import { Stack, Text, Alert, EmptyState } from "@fragments-sdk/ui";
-import { LoadErrorMessage } from "./LoadErrorMessage.js";
-
-interface NoVariantsMessageProps {
-  fragment?: FragmentDefinition;
-}
-
-export function NoVariantsMessage({ fragment }: NoVariantsMessageProps) {
-  // Check for load error (missing dependencies, schema errors, etc.)
-  const loadError = (fragment as any)?._loadError;
-  if (loadError) {
-    return <LoadErrorMessage error={loadError} componentName={fragment?.meta?.name} />;
-  }
-
-  const skippedVariants = (fragment?._generated as any)?.skippedVariants;
-
-  if (!skippedVariants || skippedVariants.length === 0) {
-    return (
-      <EmptyState style={{ height: "100%" }}>
-        <EmptyState.Description>No variants defined</EmptyState.Description>
-      </EmptyState>
-    );
-  }
-
-  return (
-    <Stack align="center" justify="center" style={{ height: "100%", padding: "24px" }}>
-      <Alert variant="info">
-        <Alert.Body>
-          <Alert.Title>
-            {skippedVariants.length} variant{skippedVariants.length === 1 ? "" : "s"} skipped
-          </Alert.Title>
-          <Alert.Content>
-            <Stack direction="column" gap="sm">
-              <Text size="xs" color="secondary">
-                These variants couldn't be rendered because they use syntax the parser doesn't
-                support yet:
-              </Text>
-              <ul style={{ marginTop: "4px", marginLeft: "16px", listStyleType: "disc" }}>
-                {skippedVariants.map((sv: any, i: number) => (
-                  <li key={i}>
-                    <Text size="xs" color="secondary">
-                      <Text as="span" size="xs" weight="semibold">
-                        {sv.name}:
-                      </Text>{" "}
-                      <Text as="span" size="xs" color="tertiary">
-                        {sv.reason}
-                      </Text>
-                    </Text>
-                  </li>
-                ))}
-              </ul>
-            </Stack>
-          </Alert.Content>
-        </Alert.Body>
-      </Alert>
-    </Stack>
-  );
-}