prev-cli 0.24.11 → 0.24.13

package/src/theme/previews/FlowPreview.tsx

@@ -0,0 +1,270 @@
+import React, { useState, useEffect } from 'react'
+import type { PreviewUnit, FlowDefinition } from '../../vite/preview-types'
+
+interface FlowPreviewProps {
+  unit: PreviewUnit
+}
+
+export function FlowPreview({ unit }: FlowPreviewProps) {
+  const [flow, setFlow] = useState<FlowDefinition | null>(null)
+  const [currentStep, setCurrentStep] = useState(0)
+  const [loading, setLoading] = useState(true)
+
+  // Load flow definition
+  useEffect(() => {
+    fetch(`/_preview-config/flows/${unit.name}`)
+      .then(res => res.json())
+      .then(data => {
+        setFlow(data)
+        setLoading(false)
+      })
+      .catch(() => setLoading(false))
+  }, [unit.name])
+
+  if (loading) {
+    return (
+      <div style={{
+        padding: '32px',
+        textAlign: 'center',
+        color: 'var(--fd-muted-foreground)',
+      }}>
+        Loading flow...
+      </div>
+    )
+  }
+
+  // Fix 3: Zero-step flow handling
+  if (!flow || flow.steps.length === 0) {
+    return (
+      <div style={{
+        padding: '32px',
+        textAlign: 'center',
+        color: 'oklch(0.65 0.15 85)', // yellow-ish warning color
+      }}>
+        <h2 style={{
+          margin: '0 0 8px 0',
+          fontSize: '18px',
+          fontWeight: 600,
+        }}>
+          {flow?.name || 'Flow'}
+        </h2>
+        <p style={{ margin: 0 }}>
+          {flow ? 'This flow has no steps defined.' : 'Failed to load flow definition.'}
+        </p>
+      </div>
+    )
+  }
+
+  const step = flow.steps[currentStep]
+  const totalSteps = flow.steps.length
+
+  // Build iframe URL for current step's screen
+  const iframeUrl = step
+    ? `/_preview-runtime?preview=screens/${step.screen}${step.state ? `&state=${step.state}` : ''}`
+    : ''
+
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      border: '1px solid var(--fd-border)',
+      borderRadius: '8px',
+      overflow: 'hidden',
+      backgroundColor: 'var(--fd-background)',
+    }}>
+      {/* Header */}
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '12px 16px',
+        backgroundColor: 'var(--fd-muted)',
+        borderBottom: '1px solid var(--fd-border)',
+      }}>
+        <div>
+          <h2 style={{
+            margin: 0,
+            fontSize: '18px',
+            fontWeight: 600,
+            color: 'var(--fd-foreground)',
+          }}>
+            {flow.name}
+          </h2>
+          {flow.description && (
+            <p style={{
+              margin: '4px 0 0 0',
+              fontSize: '14px',
+              color: 'var(--fd-muted-foreground)',
+            }}>
+              {flow.description}
+            </p>
+          )}
+        </div>
+        <span style={{
+          fontSize: '14px',
+          color: 'var(--fd-muted-foreground)',
+        }}>
+          Step {currentStep + 1} of {totalSteps}
+        </span>
+      </div>
+
+      {/* Preview area */}
+      <div style={{
+        padding: '24px',
+        backgroundColor: 'var(--fd-muted)',
+        display: 'flex',
+        justifyContent: 'center',
+        overflow: 'auto',
+      }}>
+        <div style={{
+          width: '100%',
+          maxWidth: '896px',
+          backgroundColor: 'var(--fd-background)',
+          boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+          borderRadius: '4px',
+          overflow: 'hidden',
+        }}>
+          <iframe
+            src={iframeUrl}
+            style={{
+              width: '100%',
+              height: '500px',
+              border: 'none',
+              display: 'block',
+            }}
+            title={`Flow: ${flow.name} - Step ${currentStep + 1}`}
+          />
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <div style={{
+        padding: '16px',
+        borderTop: '1px solid var(--fd-border)',
+        backgroundColor: 'var(--fd-muted)',
+      }}>
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          maxWidth: '896px',
+          margin: '0 auto',
+        }}>
+          {/* Previous button */}
+          <button
+            onClick={() => setCurrentStep(s => Math.max(0, s - 1))}
+            disabled={currentStep === 0}
+            style={{
+              padding: '8px 16px',
+              fontSize: '14px',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: currentStep === 0 ? 'not-allowed' : 'pointer',
+              backgroundColor: 'transparent',
+              color: currentStep === 0 ? 'var(--fd-muted-foreground)' : 'var(--fd-foreground)',
+              opacity: currentStep === 0 ? 0.5 : 1,
+              transition: 'background-color 0.15s',
+            }}
+            onMouseEnter={(e) => {
+              if (currentStep !== 0) {
+                e.currentTarget.style.backgroundColor = 'var(--fd-secondary)'
+              }
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = 'transparent'
+            }}
+          >
+            Previous
+          </button>
+
+          {/* Step dots */}
+          <div style={{
+            display: 'flex',
+            gap: '8px',
+          }}>
+            {flow.steps.map((_, i) => (
+              <button
+                key={i}
+                onClick={() => setCurrentStep(i)}
+                style={{
+                  width: '12px',
+                  height: '12px',
+                  padding: 0,
+                  border: 'none',
+                  borderRadius: '50%',
+                  cursor: 'pointer',
+                  backgroundColor: i === currentStep
+                    ? 'var(--fd-foreground)'
+                    : 'var(--fd-border)',
+                  transition: 'background-color 0.15s',
+                }}
+                title={`Step ${i + 1}`}
+              />
+            ))}
+          </div>
+
+          {/* Next button */}
+          <button
+            onClick={() => setCurrentStep(s => Math.min(totalSteps - 1, s + 1))}
+            disabled={currentStep === totalSteps - 1}
+            style={{
+              padding: '8px 16px',
+              fontSize: '14px',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: currentStep === totalSteps - 1 ? 'not-allowed' : 'pointer',
+              backgroundColor: 'transparent',
+              color: currentStep === totalSteps - 1 ? 'var(--fd-muted-foreground)' : 'var(--fd-foreground)',
+              opacity: currentStep === totalSteps - 1 ? 0.5 : 1,
+              transition: 'background-color 0.15s',
+            }}
+            onMouseEnter={(e) => {
+              if (currentStep !== totalSteps - 1) {
+                e.currentTarget.style.backgroundColor = 'var(--fd-secondary)'
+              }
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = 'transparent'
+            }}
+          >
+            Next
+          </button>
+        </div>
+
+        {/* Step info */}
+        {step && (step.note || step.trigger) && (
+          <div style={{
+            marginTop: '16px',
+            padding: '12px',
+            backgroundColor: 'var(--fd-background)',
+            borderRadius: '4px',
+            maxWidth: '896px',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+          }}>
+            {step.note && (
+              <p style={{
+                margin: 0,
+                fontSize: '14px',
+                color: 'var(--fd-foreground)',
+              }}>
+                <span style={{ marginRight: '8px' }}>Note:</span>
+                {step.note}
+              </p>
+            )}
+            {step.trigger && (
+              <p style={{
+                margin: step.note ? '8px 0 0 0' : 0,
+                fontSize: '14px',
+                color: 'var(--fd-muted-foreground)',
+              }}>
+                <span style={{ marginRight: '8px' }}>Trigger:</span>
+                {step.trigger}
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/theme/previews/PreviewRouter.tsx

@@ -0,0 +1,189 @@
+import React from 'react'
+import { previewUnits, getByType } from 'virtual:prev-previews'
+import { ComponentPreview } from './ComponentPreview'
+import { ScreenPreview } from './ScreenPreview'
+import { FlowPreview } from './FlowPreview'
+import { AtlasPreview } from './AtlasPreview'
+import type { PreviewUnit } from '../../vite/preview-types'
+
+interface PreviewRouterProps {
+  type: string
+  name: string
+}
+
+export function PreviewRouter({ type, name }: PreviewRouterProps) {
+  const unit = previewUnits.find(u => u.type === type && u.name === name)
+
+  if (!unit) {
+    return (
+      <div style={{
+        padding: '32px',
+        textAlign: 'center',
+      }}>
+        <h2 style={{
+          margin: '0 0 8px 0',
+          fontSize: '20px',
+          fontWeight: 600,
+          color: 'var(--fd-foreground)',
+        }}>
+          Preview not found
+        </h2>
+        <p style={{
+          margin: 0,
+          fontSize: '14px',
+          color: 'var(--fd-muted-foreground)',
+        }}>
+          No {type} named "{name}" found in previews/{type}s/{name}/
+        </p>
+      </div>
+    )
+  }
+
+  switch (unit.type) {
+    case 'component':
+      return <ComponentPreview unit={unit} />
+    case 'screen':
+      return <ScreenPreview unit={unit} />
+    case 'flow':
+      return <FlowPreview unit={unit} />
+    case 'atlas':
+      return <AtlasPreview unit={unit} />
+    default:
+      return (
+        <div style={{
+          padding: '32px',
+          textAlign: 'center',
+          color: 'var(--fd-muted-foreground)',
+        }}>
+          Unknown preview type: {unit.type}
+        </div>
+      )
+  }
+}
+
+// Preview list component for browsing
+export function PreviewList({ type }: { type?: string }) {
+  const units = type ? getByType(type) : previewUnits
+
+  const grouped = units.reduce((acc, unit) => {
+    const key = unit.type
+    if (!acc[key]) acc[key] = []
+    acc[key].push(unit)
+    return acc
+  }, {} as Record<string, PreviewUnit[]>)
+
+  if (units.length === 0) {
+    return (
+      <div style={{
+        padding: '32px',
+        textAlign: 'center',
+        color: 'var(--fd-muted-foreground)',
+      }}>
+        {type ? `No ${type} previews found` : 'No previews found'}
+      </div>
+    )
+  }
+
+  return (
+    <div style={{
+      padding: '24px',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '32px',
+    }}>
+      {Object.entries(grouped).map(([groupType, groupUnits]) => (
+        <div key={groupType}>
+          <h2 style={{
+            margin: '0 0 16px 0',
+            fontSize: '20px',
+            fontWeight: 600,
+            color: 'var(--fd-foreground)',
+            textTransform: 'capitalize',
+          }}>
+            {groupType}s
+          </h2>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+            gap: '16px',
+          }}>
+            {groupUnits.map(unit => (
+              <a
+                key={unit.route}
+                href={unit.route}
+                style={{
+                  display: 'block',
+                  padding: '16px',
+                  border: '1px solid var(--fd-border)',
+                  borderRadius: '8px',
+                  backgroundColor: 'var(--fd-background)',
+                  textDecoration: 'none',
+                  color: 'inherit',
+                  transition: 'border-color 0.15s, box-shadow 0.15s',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.borderColor = 'var(--fd-foreground)'
+                  e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.08)'
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.borderColor = 'var(--fd-border)'
+                  e.currentTarget.style.boxShadow = 'none'
+                }}
+              >
+                <h3 style={{
+                  margin: '0 0 4px 0',
+                  fontSize: '16px',
+                  fontWeight: 500,
+                  color: 'var(--fd-foreground)',
+                }}>
+                  {unit.config?.title || unit.name}
+                </h3>
+                {unit.config?.description && (
+                  <p style={{
+                    margin: '0 0 12px 0',
+                    fontSize: '14px',
+                    color: 'var(--fd-muted-foreground)',
+                    lineHeight: 1.5,
+                  }}>
+                    {unit.config.description}
+                  </p>
+                )}
+                {unit.config?.tags && unit.config.tags.length > 0 && (
+                  <div style={{
+                    display: 'flex',
+                    gap: '6px',
+                    flexWrap: 'wrap',
+                  }}>
+                    {unit.config.tags.slice(0, 3).map(tag => (
+                      <span
+                        key={tag}
+                        style={{
+                          padding: '2px 8px',
+                          fontSize: '12px',
+                          backgroundColor: 'var(--fd-secondary)',
+                          color: 'var(--fd-secondary-foreground)',
+                          borderRadius: '4px',
+                        }}
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                    {unit.config.tags.length > 3 && (
+                      <span style={{
+                        padding: '2px 8px',
+                        fontSize: '12px',
+                        color: 'var(--fd-muted-foreground)',
+                      }}>
+                        +{unit.config.tags.length - 3}
+                      </span>
+                    )}
+                  </div>
+                )}
+              </a>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}