@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/SkeletonLoader.tsx

@@ -4,133 +4,152 @@
  * Shows animated placeholders while the app is loading.
  */
 
-import clsx from "clsx";
-
-interface SkeletonProps {
-  className?: string;
-}
-
-function Skeleton({ className }: SkeletonProps) {
-  return (
-    <div
-      className={clsx(
-        "animate-pulse bg-[--bg-hover] rounded",
-        className
-      )}
-    />
-  );
-}
+import { Skeleton, Loading } from '@fragments/ui';
 
 /**
  * Full app skeleton shown during initial load
  */
 export function AppSkeleton() {
   return (
-    <div className="flex h-screen bg-[--bg-primary]">
+    <div style={{ display: 'flex', height: '100vh', backgroundColor: 'var(--bg-primary)' }}>
       {/* Sidebar skeleton */}
-      <div className="w-60 border-r border-[--border] bg-[--bg-secondary] flex flex-col">
+      <div style={{
+        width: '240px',
+        borderRight: '1px solid var(--border)',
+        backgroundColor: 'var(--bg-secondary)',
+        display: 'flex',
+        flexDirection: 'column',
+      }}>
         {/* Header */}
-        <div className="flex items-center justify-between px-4 py-2 border-b border-[--border]">
-          <Skeleton className="w-20 h-5" />
-          <Skeleton className="w-6 h-6 rounded-md" />
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '8px 16px',
+          borderBottom: '1px solid var(--border)',
+        }}>
+          <Skeleton variant="text" style={{ width: '80px' }} />
+          <Skeleton variant="circular" style={{ width: '24px', height: '24px' }} />
         </div>
 
         {/* Search */}
-        <div className="px-3 py-3">
-          <Skeleton className="w-full h-8 rounded-md" />
+        <div style={{ padding: '12px' }}>
+          <Skeleton variant="rectangular" style={{ width: '100%', height: '32px', borderRadius: '6px' }} />
         </div>
 
         {/* Component list */}
-        <div className="flex-1 px-2 space-y-4 overflow-hidden">
+        <div style={{ flex: 1, padding: '0 8px', overflow: 'hidden' }}>
           {/* Category 1 */}
-          <div>
-            <Skeleton className="w-16 h-3 mx-2 mb-2" />
-            <div className="space-y-1">
-              <Skeleton className="w-full h-7 rounded-md" />
-              <Skeleton className="w-full h-7 rounded-md" />
-              <Skeleton className="w-3/4 h-7 rounded-md" />
+          <div style={{ marginBottom: '16px' }}>
+            <Skeleton variant="text" style={{ width: '64px', margin: '0 8px 8px' }} />
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              <Skeleton variant="rectangular" style={{ width: '100%', height: '28px', borderRadius: '6px' }} />
+              <Skeleton variant="rectangular" style={{ width: '100%', height: '28px', borderRadius: '6px' }} />
+              <Skeleton variant="rectangular" style={{ width: '75%', height: '28px', borderRadius: '6px' }} />
             </div>
           </div>
 
           {/* Category 2 */}
-          <div>
-            <Skeleton className="w-20 h-3 mx-2 mb-2" />
-            <div className="space-y-1">
-              <Skeleton className="w-full h-7 rounded-md" />
-              <Skeleton className="w-5/6 h-7 rounded-md" />
-              <Skeleton className="w-full h-7 rounded-md" />
-              <Skeleton className="w-2/3 h-7 rounded-md" />
+          <div style={{ marginBottom: '16px' }}>
+            <Skeleton variant="text" style={{ width: '80px', margin: '0 8px 8px' }} />
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              <Skeleton variant="rectangular" style={{ width: '100%', height: '28px', borderRadius: '6px' }} />
+              <Skeleton variant="rectangular" style={{ width: '83%', height: '28px', borderRadius: '6px' }} />
+              <Skeleton variant="rectangular" style={{ width: '100%', height: '28px', borderRadius: '6px' }} />
+              <Skeleton variant="rectangular" style={{ width: '66%', height: '28px', borderRadius: '6px' }} />
             </div>
           </div>
 
           {/* Category 3 */}
           <div>
-            <Skeleton className="w-24 h-3 mx-2 mb-2" />
-            <div className="space-y-1">
-              <Skeleton className="w-4/5 h-7 rounded-md" />
-              <Skeleton className="w-full h-7 rounded-md" />
+            <Skeleton variant="text" style={{ width: '96px', margin: '0 8px 8px' }} />
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              <Skeleton variant="rectangular" style={{ width: '80%', height: '28px', borderRadius: '6px' }} />
+              <Skeleton variant="rectangular" style={{ width: '100%', height: '28px', borderRadius: '6px' }} />
             </div>
           </div>
         </div>
 
         {/* Footer */}
-        <div className="px-4 py-3 border-t border-[--border-subtle]">
-          <Skeleton className="w-24 h-3" />
+        <div style={{ padding: '12px 16px', borderTop: '1px solid var(--border-subtle)' }}>
+          <Skeleton variant="text" style={{ width: '96px' }} />
         </div>
       </div>
 
       {/* Main content skeleton */}
-      <div className="flex-1 flex flex-col">
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
         {/* Toolbar */}
-        <div className="flex items-center justify-between px-4 py-2 border-b border-[--border] bg-[--bg-secondary]">
-          <div className="flex items-center gap-3">
-            <Skeleton className="w-24 h-5" />
-            <Skeleton className="w-16 h-4" />
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '8px 16px',
+          borderBottom: '1px solid var(--border)',
+          backgroundColor: 'var(--bg-secondary)',
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            <Skeleton variant="text" style={{ width: '96px', height: '20px' }} />
+            <Skeleton variant="text" style={{ width: '64px', height: '16px' }} />
           </div>
-          <div className="flex items-center gap-2">
-            <Skeleton className="w-16 h-7 rounded" />
-            <Skeleton className="w-24 h-7 rounded" />
-            <Skeleton className="w-20 h-7 rounded" />
-            <Skeleton className="w-6 h-6 rounded" />
-            <Skeleton className="w-6 h-6 rounded" />
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <Skeleton variant="rectangular" style={{ width: '64px', height: '28px', borderRadius: '4px' }} />
+            <Skeleton variant="rectangular" style={{ width: '96px', height: '28px', borderRadius: '4px' }} />
+            <Skeleton variant="rectangular" style={{ width: '80px', height: '28px', borderRadius: '4px' }} />
+            <Skeleton variant="circular" style={{ width: '24px', height: '24px' }} />
+            <Skeleton variant="circular" style={{ width: '24px', height: '24px' }} />
           </div>
         </div>
 
         {/* Variant tabs */}
-        <div className="px-4 py-2 border-b border-[--border] bg-[--bg-primary]">
-          <div className="flex items-center gap-2">
-            <Skeleton className="w-16 h-7 rounded-md" />
-            <Skeleton className="w-20 h-7 rounded-md" />
-            <Skeleton className="w-14 h-7 rounded-md" />
-            <Skeleton className="w-18 h-7 rounded-md" />
-            <Skeleton className="w-12 h-7 rounded-md" />
+        <div style={{
+          padding: '8px 16px',
+          borderBottom: '1px solid var(--border)',
+          backgroundColor: 'var(--bg-primary)',
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <Skeleton variant="rectangular" style={{ width: '64px', height: '28px', borderRadius: '6px' }} />
+            <Skeleton variant="rectangular" style={{ width: '80px', height: '28px', borderRadius: '6px' }} />
+            <Skeleton variant="rectangular" style={{ width: '56px', height: '28px', borderRadius: '6px' }} />
+            <Skeleton variant="rectangular" style={{ width: '72px', height: '28px', borderRadius: '6px' }} />
+            <Skeleton variant="rectangular" style={{ width: '48px', height: '28px', borderRadius: '6px' }} />
           </div>
         </div>
 
         {/* Preview area */}
-        <div className="flex-1 flex items-center justify-center p-8">
-          <Skeleton className="w-64 h-32 rounded-lg" />
+        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px' }}>
+          <Skeleton variant="rectangular" style={{ width: '256px', height: '128px', borderRadius: '8px' }} />
         </div>
 
         {/* Bottom panel */}
-        <div className="h-64 border-t border-[--border] bg-[--bg-secondary]">
-          <div className="flex items-center gap-1 px-4 h-10 border-b border-[--border-subtle]">
-            <Skeleton className="w-12 h-6 rounded" />
-            <Skeleton className="w-10 h-6 rounded" />
-            <Skeleton className="w-12 h-6 rounded" />
+        <div style={{
+          height: '256px',
+          borderTop: '1px solid var(--border)',
+          backgroundColor: 'var(--bg-secondary)',
+        }}>
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+            padding: '0 16px',
+            height: '40px',
+            borderBottom: '1px solid var(--border-subtle)',
+          }}>
+            <Skeleton variant="rectangular" style={{ width: '48px', height: '24px', borderRadius: '4px' }} />
+            <Skeleton variant="rectangular" style={{ width: '40px', height: '24px', borderRadius: '4px' }} />
+            <Skeleton variant="rectangular" style={{ width: '48px', height: '24px', borderRadius: '4px' }} />
           </div>
-          <div className="p-4 space-y-3">
-            <div className="flex items-center gap-4">
-              <Skeleton className="w-20 h-4" />
-              <Skeleton className="w-32 h-8 rounded" />
+          <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+              <Skeleton variant="text" style={{ width: '80px' }} />
+              <Skeleton variant="rectangular" style={{ width: '128px', height: '32px', borderRadius: '4px' }} />
             </div>
-            <div className="flex items-center gap-4">
-              <Skeleton className="w-16 h-4" />
-              <Skeleton className="w-24 h-8 rounded" />
+            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+              <Skeleton variant="text" style={{ width: '64px' }} />
+              <Skeleton variant="rectangular" style={{ width: '96px', height: '32px', borderRadius: '4px' }} />
             </div>
-            <div className="flex items-center gap-4">
-              <Skeleton className="w-24 h-4" />
-              <Skeleton className="w-20 h-8 rounded" />
+            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+              <Skeleton variant="text" style={{ width: '96px' }} />
+              <Skeleton variant="rectangular" style={{ width: '80px', height: '32px', borderRadius: '4px' }} />
             </div>
           </div>
         </div>
@@ -144,11 +163,8 @@ export function AppSkeleton() {
  */
 export function PreviewSkeleton() {
   return (
-    <div className="flex items-center justify-center p-8">
-      <div className="text-center space-y-3">
-        <div className="animate-spin w-8 h-8 border-2 border-[--border] border-t-[--color-accent] rounded-full mx-auto" />
-        <p className="text-sm text-tertiary">Loading component...</p>
-      </div>
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px' }}>
+      <Loading size="md" />
     </div>
   );
 }

package/src/viewer/components/StoryRenderer.tsx

@@ -26,7 +26,6 @@ export function StoryRenderer({ variant, children }: StoryRendererProps) {
   const hasLoaders = variant.loaders && variant.loaders.length > 0;
 
   useEffect(() => {
-    // Reset state when variant changes
     setLoadedData(null);
     setError(null);
 
@@ -39,14 +38,12 @@ export function StoryRenderer({ variant, children }: StoryRendererProps) {
 
     async function executeLoaders() {
       try {
-        // Execute all loaders in parallel
         const results = await Promise.all(
           variant.loaders!.map((loader) => loader())
         );
 
         if (cancelled) return;
 
-        // Merge all loaded data (later loaders override earlier ones)
         const merged = results.reduce(
           (acc, result) => ({ ...acc, ...result }),
           {}
@@ -71,22 +68,18 @@ export function StoryRenderer({ variant, children }: StoryRendererProps) {
     };
   }, [variant, hasLoaders]);
 
-  // If loading, pass null content with loading flag
   if (hasLoaders && isLoading) {
     return <>{children(null, true, null)}</>;
   }
 
-  // If error during loading, pass error
   if (error) {
     return <>{children(null, false, error)}</>;
   }
 
-  // Build render options with loaded data only
   const renderOptions = useMemo(() => ({
     loadedData: hasLoaders ? loadedData ?? undefined : undefined,
   }), [hasLoaders, loadedData]);
 
-  // Render the variant with options
   try {
     const content = variant.render(renderOptions);
     return <>{children(content, false, null)}</>;
@@ -101,15 +94,15 @@ export function StoryRenderer({ variant, children }: StoryRendererProps) {
  */
 export function LoaderIndicator() {
   return (
-    <div className="flex items-center gap-2 text-secondary text-sm">
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--text-secondary)', fontSize: '14px' }}>
       <svg
-        className="animate-spin h-4 w-4"
+        style={{ animation: 'spin 1s linear infinite', width: '16px', height: '16px' }}
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"
       >
         <circle
-          className="opacity-25"
+          style={{ opacity: 0.25 }}
           cx="12"
           cy="12"
           r="10"
@@ -117,7 +110,7 @@ export function LoaderIndicator() {
           strokeWidth="4"
         />
         <path
-          className="opacity-75"
+          style={{ opacity: 0.75 }}
           fill="currentColor"
           d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
         />

package/src/viewer/components/Toast.tsx

@@ -1,67 +1,3 @@
-import { useEffect, useState } from 'react';
-import { CheckIcon, WarningIcon, RefreshIcon } from './Icons.js';
-
-export interface ToastMessage {
-  id: string;
-  type: 'success' | 'error' | 'info';
-  message: string;
-  duration?: number;
-}
-
-interface ToastProps {
-  messages: ToastMessage[];
-  onDismiss: (id: string) => void;
-}
-
-export function Toast({ messages, onDismiss }: ToastProps) {
-  return (
-    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
-      {messages.map((toast) => (
-        <ToastItem key={toast.id} toast={toast} onDismiss={onDismiss} />
-      ))}
-    </div>
-  );
-}
-
-function ToastItem({ toast, onDismiss }: { toast: ToastMessage; onDismiss: (id: string) => void }) {
-  const [isVisible, setIsVisible] = useState(false);
-
-  useEffect(() => {
-    // Animate in
-    requestAnimationFrame(() => setIsVisible(true));
-
-    // Auto-dismiss
-    const timer = setTimeout(() => {
-      setIsVisible(false);
-      setTimeout(() => onDismiss(toast.id), 200);
-    }, toast.duration || 3000);
-
-    return () => clearTimeout(timer);
-  }, [toast.id, toast.duration, onDismiss]);
-
-  const iconMap = {
-    success: <CheckIcon className="w-4 h-4 text-emerald-500" />,
-    error: <WarningIcon className="w-4 h-4 text-red-500" />,
-    info: <RefreshIcon className="w-4 h-4 text-blue-500" />,
-  };
-
-  const bgMap = {
-    success: 'bg-emerald-500/10 border-emerald-500/20',
-    error: 'bg-red-500/10 border-red-500/20',
-    info: 'bg-blue-500/10 border-blue-500/20',
-  };
-
-  return (
-    <div
-      className={`
-        flex items-center gap-2 px-3 py-2 rounded-lg border backdrop-blur-sm
-        shadow-lg transition-all duration-200 ease-out
-        ${bgMap[toast.type]}
-        ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'}
-      `}
-    >
-      {iconMap[toast.type]}
-      <span className="text-sm text-primary font-medium">{toast.message}</span>
-    </div>
-  );
-}
+// Re-export Fragments UI Toast for use in the viewer
+export { ToastProvider, useToast } from '@fragments/ui';
+export type { ToastData as ToastMessage } from '@fragments/ui';