@fragments-sdk/cli 0.9.0 → 0.10.0

package/src/viewer/components/ActionsPanel.tsx

@@ -8,7 +8,7 @@
 import { useState, useMemo } from "react";
 import type { ActionLog } from "../hooks/useActions.js";
 import { formatActionArg } from "../hooks/useActions.js";
-import { Button, Stack, Text, Badge, Input, Menu, Separator } from "@fragments-sdk/ui";
+import { Button, Stack, Text, Badge, Input, Menu, Separator, Box } from "@fragments-sdk/ui";
 import {
   TrashIcon,
   ChevronDownIcon,
@@ -93,14 +93,14 @@ export function ActionsPanel({ logs, onClear, componentName = 'Component', varia
   // No logs state
   if (logs.length === 0) {
     return (
-      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-        <div style={{ padding: '16px', borderBottom: '1px solid var(--border)' }}>
+      <Stack style={{ height: '100%' }}>
+        <Box padding="md" borderBottom>
           <Stack direction="row" align="center" gap="sm">
             <PlayIcon style={{ width: 16, height: 16 }} />
             <Text weight="medium">Actions</Text>
           </Stack>
-        </div>
-        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px', textAlign: 'center' }}>
+        </Box>
+        <Stack align="center" justify="center" style={{ flex: 1, padding: '32px', textAlign: 'center' }}>
           <div style={{ maxWidth: '28rem' }}>
             <div style={{ width: '48px', height: '48px', borderRadius: '9999px', background: 'var(--bg-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
               <PlayIcon style={{ width: 24, height: 24, color: 'var(--text-tertiary)' }} />
@@ -110,18 +110,18 @@ export function ActionsPanel({ logs, onClear, componentName = 'Component', varia
             </Text>
             <Text size="sm" color="tertiary">
               Interact with the component to see callback invocations here.
-              Actions like <code style={{ padding: '2px 4px', background: 'var(--bg-secondary)', borderRadius: '4px', fontSize: '12px' }}>onClick</code>, <code style={{ padding: '2px 4px', background: 'var(--bg-secondary)', borderRadius: '4px', fontSize: '12px' }}>onChange</code>, etc. will be logged automatically.
+              Actions like <Box as="code" padding="xs" background="secondary" rounded="sm" style={{ fontSize: '12px', display: 'inline' }}>onClick</Box>, <Box as="code" padding="xs" background="secondary" rounded="sm" style={{ fontSize: '12px', display: 'inline' }}>onChange</Box>, etc. will be logged automatically.
             </Text>
           </div>
-        </div>
-      </div>
+        </Stack>
+      </Stack>
     );
   }
 
   return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+    <Stack style={{ height: '100%' }}>
       {/* Header */}
-      <div style={{ padding: '12px', borderBottom: '1px solid var(--border)' }}>
+      <Box padding="sm" borderBottom>
         <Stack direction="row" align="center" justify="between" gap="sm">
           <Stack direction="row" align="center" gap="sm" style={{ flex: 1 }}>
             <Stack direction="row" align="center" gap="sm">
@@ -147,12 +147,14 @@ export function ActionsPanel({ logs, onClear, componentName = 'Component', varia
                 </Button>
               </Menu.Trigger>
               <Menu.Content>
-                <div style={{ padding: '6px 12px', fontSize: '12px', fontWeight: 500, color: 'var(--text-tertiary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
-                  Export as
-                </div>
+                <Box paddingX="sm" paddingY="xs">
+                  <Text size="xs" weight="medium" color="tertiary" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                    Export as
+                  </Text>
+                </Box>
 
                 {/* JSON */}
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 12px' }}>
+                <Stack direction="row" align="center" justify="between" style={{ padding: '6px 12px' }}>
                   <Text size="sm" color="secondary">JSON</Text>
                   <Stack direction="row" gap="xs">
                     <Menu.Item onSelect={() => handleExport('json', 'copy')}>
@@ -162,10 +164,10 @@ export function ActionsPanel({ logs, onClear, componentName = 'Component', varia
                       <DownloadIcon style={{ width: 14, height: 14 }} />
                     </Menu.Item>
                   </Stack>
-                </div>
+                </Stack>
 
                 {/* Jest */}
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 12px' }}>
+                <Stack direction="row" align="center" justify="between" style={{ padding: '6px 12px' }}>
                   <Text size="sm" color="secondary">Jest Assertions</Text>
                   <Stack direction="row" gap="xs">
                     <Menu.Item onSelect={() => handleExport('jest', 'copy')}>
@@ -175,10 +177,10 @@ export function ActionsPanel({ logs, onClear, componentName = 'Component', varia
                       <DownloadIcon style={{ width: 14, height: 14 }} />
                     </Menu.Item>
                   </Stack>
-                </div>
+                </Stack>
 
                 {/* Playwright */}
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 12px' }}>
+                <Stack direction="row" align="center" justify="between" style={{ padding: '6px 12px' }}>
                   <Text size="sm" color="secondary">Playwright Test</Text>
                   <Stack direction="row" gap="xs">
                     <Menu.Item onSelect={() => handleExport('playwright', 'copy')}>
@@ -188,14 +190,14 @@ export function ActionsPanel({ logs, onClear, componentName = 'Component', varia
                       <DownloadIcon style={{ width: 14, height: 14 }} />
                     </Menu.Item>
                   </Stack>
-                </div>
+                </Stack>
 
                 <Separator />
-                <div style={{ padding: '6px 12px' }}>
+                <Box paddingX="sm" paddingY="xs">
                   <Text size="xs" color="tertiary">
                     {logs.length} action{logs.length !== 1 ? 's' : ''} recorded
                   </Text>
-                </div>
+                </Box>
               </Menu.Content>
             </Menu>
 
@@ -209,14 +211,14 @@ export function ActionsPanel({ logs, onClear, componentName = 'Component', varia
             </Button>
           </Stack>
         </Stack>
-      </div>
+      </Box>
 
       {/* Log list */}
-      <div style={{ flex: 1, overflowY: 'auto' }}>
+      <Box overflow="auto" style={{ flex: 1 }}>
         {filteredLogs.length === 0 ? (
-          <div style={{ padding: '16px', textAlign: 'center' }}>
+          <Box padding="md" style={{ textAlign: 'center' }}>
             <Text size="sm" color="tertiary">No actions match "{filter}"</Text>
-          </div>
+          </Box>
         ) : (
           <div>
             {filteredLogs.map((log, index) => (
@@ -231,8 +233,8 @@ export function ActionsPanel({ logs, onClear, componentName = 'Component', varia
             ))}
           </div>
         )}
-      </div>
-    </div>
+      </Box>
+    </Stack>
   );
 }
 
@@ -311,7 +313,7 @@ function ActionLogItem({ log, isExpanded, onToggle, formatTime }: ActionLogItemP
       {/* Expanded args */}
       {isExpanded && hasArgs && (
         <div style={{ padding: '0 12px 12px 36px' }}>
-          <div style={{ background: 'var(--bg-secondary)', borderRadius: '8px', padding: '8px', overflowX: 'auto' }}>
+          <Box padding="sm" background="secondary" rounded="lg" overflow="auto">
             {log.args.map((arg, index) => (
               <div key={index} style={{ marginBottom: index < log.args.length - 1 ? '4px' : 0 }}>
                 <Text size="xs" color="tertiary" as="span">
@@ -322,7 +324,7 @@ function ActionLogItem({ log, isExpanded, onToggle, formatTime }: ActionLogItemP
                 </pre>
               </div>
             ))}
-          </div>
+          </Box>
         </div>
       )}
     </div>

package/src/viewer/components/AllVariantsPreview.tsx

@@ -0,0 +1,78 @@
+import type { ReactNode } from "react";
+import type { FragmentVariant } from "../../core/index.js";
+import type { useViewSettings } from "../hooks/useViewSettings.js";
+import type { useTheme } from "./ThemeProvider.js";
+import { Stack } from "@fragments-sdk/ui";
+import { VariantPreviewCard } from "@fragments-sdk/shared";
+import { PreviewArea } from "./PreviewArea.js";
+import { resolveDisplayedCode } from "./CodePanel.js";
+import { getVariantSectionId } from "./viewer-utils.js";
+
+interface AllVariantsPreviewProps {
+  componentName: string;
+  fragmentPath: string;
+  variants: FragmentVariant[];
+  focusedVariantIndex: number;
+  zoom: ReturnType<typeof useViewSettings>["zoom"];
+  viewport: ReturnType<typeof useViewSettings>["viewport"];
+  customSize: ReturnType<typeof useViewSettings>["customSize"];
+  previewTheme: ReturnType<typeof useTheme>["resolvedTheme"];
+  showComparison: boolean;
+  allFigmaUrls: string[];
+  fallbackFigmaUrl?: string;
+  onRetry: () => void;
+  renderVariantContent: (variant: FragmentVariant) => ReactNode;
+  previewKeyBase: string;
+}
+
+export function AllVariantsPreview({
+  componentName,
+  fragmentPath,
+  variants,
+  focusedVariantIndex,
+  zoom,
+  viewport,
+  customSize,
+  previewTheme,
+  showComparison,
+  allFigmaUrls,
+  fallbackFigmaUrl,
+  onRetry,
+  renderVariantContent,
+  previewKeyBase,
+}: AllVariantsPreviewProps) {
+  return (
+    <Stack gap="lg" style={{ padding: "20px" }}>
+      {variants.map((variant, index) => (
+        <VariantPreviewCard
+          key={variant.name}
+          name={variant.name}
+          description={variant.description}
+          code={resolveDisplayedCode(componentName, variant)}
+          id={getVariantSectionId(componentName, variant.name)}
+          highlight={index === focusedVariantIndex}
+        >
+          <PreviewArea
+            componentName={componentName}
+            fragmentPath={fragmentPath}
+            variant={variant}
+            variants={variants}
+            zoom={zoom}
+            viewport={viewport}
+            customSize={customSize}
+            previewTheme={previewTheme}
+            showMatrixView={false}
+            showMultiViewport={false}
+            showComparison={showComparison}
+            figmaUrl={variant.figma || fallbackFigmaUrl}
+            allFigmaUrls={allFigmaUrls}
+            onSelectVariant={() => {}}
+            onRetry={onRetry}
+            renderContent={() => renderVariantContent(variant)}
+            previewKey={`${previewKeyBase}-${index}`}
+          />
+        </VariantPreviewCard>
+      ))}
+    </Stack>
+  );
+}