cmssy-cli 0.21.0 → 0.24.1

package/dist/dev-ui-react/App.tsx

@@ -0,0 +1,164 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { BlocksList } from './components/BlocksList';
+import { Preview } from './components/Preview';
+import { Editor } from './components/Editor';
+import { useBlocks, useBlockConfig } from './hooks/useBlocks';
+import { Block } from './types';
+import './styles.css';
+
+export function App() {
+  const { blocks, loading: blocksLoading } = useBlocks();
+  const [selectedBlock, setSelectedBlock] = useState<Block | null>(null);
+  const [previewData, setPreviewData] = useState<Record<string, unknown>>({});
+  const [currentPage, setCurrentPage] = useState<string | undefined>();
+  const [isDirty, setIsDirty] = useState(false);
+  // Keep reference to complete config data for merging during save
+  const configDataRef = useRef<Record<string, unknown>>({});
+
+  const { config, loading: configLoading } = useBlockConfig(
+    selectedBlock?.name || null,
+    selectedBlock?.type || null
+  );
+
+  // Update selected block with loaded config
+  useEffect(() => {
+    if (selectedBlock && config) {
+      const updatedBlock: Block = {
+        ...selectedBlock,
+        schema: config.schema as Block['schema'],
+        pages: config.pages,
+        layoutSlots: config.layoutSlots,
+      };
+      setSelectedBlock(updatedBlock);
+
+      // Store complete config data in ref for merging during save
+      const configData = config.previewData || {};
+      configDataRef.current = configData;
+
+      // Set previewData from config (complete data)
+      setPreviewData(configData);
+
+      // Set first page for templates
+      if (config.pages && config.pages.length > 0) {
+        setCurrentPage(config.pages[0].slug);
+      }
+    }
+  }, [config, selectedBlock?.name]);
+
+  // Handle block selection
+  const handleSelectBlock = useCallback((block: Block) => {
+    setSelectedBlock(block);
+    setPreviewData({});
+    setCurrentPage(undefined);
+    setIsDirty(false);
+    configDataRef.current = {};
+
+    // Update URL based on type
+    const url = new URL(window.location.href);
+    url.searchParams.delete('block');
+    url.searchParams.delete('template');
+    if (block.type === 'template') {
+      url.searchParams.set('template', block.name);
+    } else {
+      url.searchParams.set('block', block.name);
+    }
+    window.history.replaceState({}, '', url.toString());
+  }, []);
+
+  // Handle preview data change - just update state, effect handles saving
+  const handlePreviewDataChange = useCallback(
+    (newData: Record<string, unknown>) => {
+      setPreviewData(newData);
+      setIsDirty(true);
+    },
+    []
+  );
+
+  // Debounced save effect - saves when data changes and is dirty
+  useEffect(() => {
+    // Don't save if loading, not dirty, no block selected, or config not loaded yet
+    // configDataRef must have data to prevent losing fields
+    if (configLoading || !isDirty || !selectedBlock || Object.keys(configDataRef.current).length === 0) {
+      return;
+    }
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(async () => {
+      try {
+        // Merge user edits with complete config data to never lose fields
+        const dataToSave = { ...configDataRef.current, ...previewData };
+
+        await fetch(`/api/preview/${selectedBlock.name}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(dataToSave),
+          signal: controller.signal,
+        });
+        setIsDirty(false);
+      } catch (error) {
+        if (error instanceof Error && error.name !== 'AbortError') {
+          console.error('Failed to save preview data:', error);
+        }
+      }
+    }, 500);
+
+    // Cleanup: cancel timeout and abort fetch on unmount or dependency change
+    return () => {
+      clearTimeout(timeoutId);
+      controller.abort();
+    };
+  }, [previewData, selectedBlock, configLoading, isDirty]);
+
+  // Handle template page navigation
+  const handleNavigateToPage = useCallback((pageSlug: string) => {
+    setCurrentPage(pageSlug);
+  }, []);
+
+  // Load block/template from URL on mount (runs once when blocks are loaded)
+  const urlLoadedRef = useRef(false);
+  useEffect(() => {
+    if (blocks.length === 0 || urlLoadedRef.current) return;
+
+    const params = new URLSearchParams(window.location.search);
+    const blockName = params.get('block');
+    const templateName = params.get('template');
+
+    if (templateName) {
+      const template = blocks.find((b) => b.name === templateName && b.type === 'template');
+      if (template) {
+        urlLoadedRef.current = true;
+        handleSelectBlock(template);
+      }
+    } else if (blockName) {
+      const block = blocks.find((b) => b.name === blockName);
+      if (block) {
+        urlLoadedRef.current = true;
+        handleSelectBlock(block);
+      }
+    }
+  }, [blocks, handleSelectBlock]);
+
+  return (
+    <div className="container">
+      <BlocksList
+        blocks={blocks}
+        selectedBlock={selectedBlock}
+        onSelectBlock={handleSelectBlock}
+        loading={blocksLoading}
+      />
+      <Preview
+        block={selectedBlock}
+        previewData={previewData}
+        currentPage={currentPage}
+        loading={configLoading}
+      />
+      <Editor
+        block={selectedBlock}
+        loading={configLoading}
+        previewData={previewData}
+        onPreviewDataChange={handlePreviewDataChange}
+        onNavigateToPage={handleNavigateToPage}
+      />
+    </div>
+  );
+}

package/dist/dev-ui-react/__tests__/previewData.test.ts

@@ -0,0 +1,193 @@
+/**
+ * Test for preview data merge behavior
+ * Run with: npx vitest run src/dev-ui-react/__tests__/previewData.test.ts
+ */
+
+import { describe, it, expect } from 'vitest';
+
+// Simulating the merge logic from App.tsx
+function mergeForSave(
+  configDataRef: Record<string, unknown>,
+  previewData: Record<string, unknown>
+): Record<string, unknown> {
+  return { ...configDataRef, ...previewData };
+}
+
+// Simulating mergeDefaultsWithPreview from dev.ts
+function mergeDefaultsWithPreview(
+  schema: Record<string, any>,
+  previewData: Record<string, unknown>
+): Record<string, unknown> {
+  const merged: Record<string, unknown> = { ...previewData };
+
+  for (const [key, field] of Object.entries(schema)) {
+    if (merged[key] === undefined || merged[key] === null) {
+      if (field.defaultValue !== undefined) {
+        merged[key] = field.defaultValue;
+      } else if (field.type === 'repeater') {
+        merged[key] = [];
+      }
+    }
+
+    if (field.type === 'repeater' && field.schema && Array.isArray(merged[key])) {
+      merged[key] = (merged[key] as any[]).map((item: any) => {
+        const mergedItem: Record<string, unknown> = { ...item };
+        for (const [nestedKey, nestedField] of Object.entries(field.schema as Record<string, any>)) {
+          if (mergedItem[nestedKey] === undefined && nestedField.defaultValue !== undefined) {
+            mergedItem[nestedKey] = nestedField.defaultValue;
+          }
+        }
+        return mergedItem;
+      });
+    }
+
+    if (field.type === 'media' && typeof merged[key] === 'string') {
+      merged[key] = { url: merged[key], alt: '' };
+    }
+  }
+
+  return merged;
+}
+
+describe('Preview Data Management', () => {
+  const mockSchema = {
+    badge: { type: 'singleLine', label: 'Badge', defaultValue: 'About Us' },
+    heading: { type: 'singleLine', label: 'Heading', defaultValue: 'Default Heading' },
+    values: {
+      type: 'repeater',
+      label: 'Values',
+      schema: {
+        title: { type: 'singleLine', defaultValue: 'Title' },
+        description: { type: 'multiLine', defaultValue: 'Description' },
+      },
+      defaultValue: [
+        { title: 'Value 1', description: 'Desc 1' },
+        { title: 'Value 2', description: 'Desc 2' },
+      ],
+    },
+    imageUrl: { type: 'media', label: 'Image', defaultValue: 'https://example.com/img.jpg' },
+  };
+
+  const completePreviewData = {
+    badge: 'About Us',
+    heading: 'Building the future',
+    values: [
+      { title: 'Innovation', description: 'We innovate' },
+      { title: 'Quality', description: 'We deliver quality' },
+    ],
+    imageUrl: { url: 'https://example.com/team.jpg', alt: 'Team' },
+  };
+
+  describe('mergeDefaultsWithPreview', () => {
+    it('should merge defaultValues into empty previewData', () => {
+      const result = mergeDefaultsWithPreview(mockSchema, {});
+
+      expect(result.badge).toBe('About Us');
+      expect(result.heading).toBe('Default Heading');
+      expect(result.values).toEqual([
+        { title: 'Value 1', description: 'Desc 1' },
+        { title: 'Value 2', description: 'Desc 2' },
+      ]);
+      expect(result.imageUrl).toEqual({ url: 'https://example.com/img.jpg', alt: '' });
+    });
+
+    it('should preserve existing previewData values over defaults', () => {
+      const result = mergeDefaultsWithPreview(mockSchema, { badge: 'Custom Badge' });
+
+      expect(result.badge).toBe('Custom Badge');
+      expect(result.heading).toBe('Default Heading'); // From default
+    });
+
+    it('should handle repeater arrays correctly', () => {
+      const result = mergeDefaultsWithPreview(mockSchema, {
+        values: [{ title: 'Custom' }], // Missing description
+      });
+
+      expect(result.values).toEqual([
+        { title: 'Custom', description: 'Description' }, // description from default
+      ]);
+    });
+
+    it('should convert string media to object', () => {
+      const result = mergeDefaultsWithPreview(mockSchema, {
+        imageUrl: 'https://custom.com/img.png',
+      });
+
+      expect(result.imageUrl).toEqual({ url: 'https://custom.com/img.png', alt: '' });
+    });
+  });
+
+  describe('mergeForSave', () => {
+    it('should merge configDataRef with previewData, previewData wins', () => {
+      const configDataRef = { ...completePreviewData };
+      const previewData = { badge: 'New Badge' };
+
+      const result = mergeForSave(configDataRef, previewData);
+
+      expect(result.badge).toBe('New Badge'); // User edit
+      expect(result.heading).toBe('Building the future'); // From config
+      expect(result.values).toEqual(completePreviewData.values); // From config
+      expect(result.imageUrl).toEqual(completePreviewData.imageUrl); // From config
+    });
+
+    it('should preserve all fields when user edits one field', () => {
+      const configDataRef = { ...completePreviewData };
+      const previewData = { ...completePreviewData, badge: 'Edited Badge' };
+
+      const result = mergeForSave(configDataRef, previewData);
+
+      expect(Object.keys(result)).toEqual(Object.keys(completePreviewData));
+      expect(result.badge).toBe('Edited Badge');
+      expect(result.values).toEqual(completePreviewData.values);
+    });
+
+    it('should NOT lose data when configDataRef is empty (BUG SCENARIO)', () => {
+      // This is the bug: if configDataRef is empty, we lose all data
+      const configDataRef = {}; // Bug: ref was not set
+      const previewData = { badge: 'New Badge' };
+
+      const result = mergeForSave(configDataRef, previewData);
+
+      // This will fail - demonstrating the bug
+      // If configDataRef is empty, we only get previewData
+      expect(Object.keys(result)).toEqual(['badge']);
+    });
+
+    it('should work correctly when configDataRef has complete data', () => {
+      const configDataRef = { ...completePreviewData };
+      const previewData = { badge: 'New Badge' };
+
+      const result = mergeForSave(configDataRef, previewData);
+
+      // With proper configDataRef, all data is preserved
+      expect(Object.keys(result).sort()).toEqual(Object.keys(completePreviewData).sort());
+    });
+  });
+
+  describe('Full flow simulation', () => {
+    it('should simulate complete user edit flow', () => {
+      // 1. Server loads preview.json and merges with schema defaults
+      const previewJsonContent = { heading: 'Only heading' };
+      const serverMerged = mergeDefaultsWithPreview(mockSchema, previewJsonContent);
+
+      expect(serverMerged.badge).toBe('About Us'); // From default
+      expect(serverMerged.heading).toBe('Only heading'); // From preview.json
+      expect(serverMerged.values).toBeDefined(); // From default
+
+      // 2. Frontend receives merged data and stores in configDataRef
+      const configDataRef = { ...serverMerged };
+
+      // 3. User edits badge
+      const previewData = { ...serverMerged, badge: 'Edited Badge' };
+
+      // 4. Save merges configDataRef with previewData
+      const dataToSave = mergeForSave(configDataRef, previewData);
+
+      // 5. All fields should be preserved
+      expect(dataToSave.badge).toBe('Edited Badge');
+      expect(dataToSave.heading).toBe('Only heading');
+      expect(dataToSave.values).toEqual(serverMerged.values);
+      expect(Object.keys(dataToSave).length).toBeGreaterThanOrEqual(4);
+    });
+  });
+});

package/dist/dev-ui-react/components/BlocksList.tsx

@@ -0,0 +1,232 @@
+import { useState, useMemo } from 'react';
+import { Block, Filters } from '../types';
+
+interface BlocksListProps {
+  blocks: Block[];
+  selectedBlock: Block | null;
+  onSelectBlock: (block: Block) => void;
+  loading: boolean;
+}
+
+export function BlocksList({ blocks, selectedBlock, onSelectBlock, loading }: BlocksListProps) {
+  const [filters, setFilters] = useState<Filters>({
+    search: '',
+    type: 'all',
+    category: '',
+    tags: [],
+  });
+  const [collapsed, setCollapsed] = useState(false);
+
+  // Extract unique categories and tags
+  const { categories, tags } = useMemo(() => {
+    const cats = new Set<string>();
+    const tgs = new Set<string>();
+
+    blocks.forEach((block) => {
+      if (block.category) cats.add(block.category);
+      block.tags?.forEach((tag) => tgs.add(tag));
+    });
+
+    return {
+      categories: Array.from(cats).sort(),
+      tags: Array.from(tgs).sort(),
+    };
+  }, [blocks]);
+
+  // Filter blocks
+  const filteredBlocks = useMemo(() => {
+    return blocks.filter((block) => {
+      // Search filter
+      if (filters.search) {
+        const search = filters.search.toLowerCase();
+        const matches =
+          block.name.toLowerCase().includes(search) ||
+          block.displayName.toLowerCase().includes(search) ||
+          block.description?.toLowerCase().includes(search);
+        if (!matches) return false;
+      }
+
+      // Type filter
+      if (filters.type !== 'all' && block.type !== filters.type) {
+        return false;
+      }
+
+      // Category filter
+      if (filters.category && block.category !== filters.category) {
+        return false;
+      }
+
+      // Tags filter
+      if (filters.tags.length > 0) {
+        const hasTag = filters.tags.some((tag) => block.tags?.includes(tag));
+        if (!hasTag) return false;
+      }
+
+      return true;
+    });
+  }, [blocks, filters]);
+
+  // Group by category
+  const groupedBlocks = useMemo(() => {
+    const grouped: Record<string, Block[]> = {};
+
+    filteredBlocks.forEach((block) => {
+      const cat = block.category || 'Uncategorized';
+      if (!grouped[cat]) grouped[cat] = [];
+      grouped[cat].push(block);
+    });
+
+    return Object.entries(grouped).sort(([a], [b]) => {
+      if (a === 'Uncategorized') return 1;
+      if (b === 'Uncategorized') return -1;
+      return a.localeCompare(b);
+    });
+  }, [filteredBlocks]);
+
+  const hasActiveFilters =
+    filters.search || filters.type !== 'all' || filters.category || filters.tags.length > 0;
+
+  const clearFilters = () => {
+    setFilters({ search: '', type: 'all', category: '', tags: [] });
+  };
+
+  if (collapsed) {
+    return (
+      <div className="blocks-panel collapsed">
+        <div className="blocks-header">
+          <button className="panel-toggle" onClick={() => setCollapsed(false)} title="Expand">
+            <span className="toggle-icon">☰</span>
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="blocks-panel">
+      <div className="blocks-header">
+        <div className="blocks-header-content">
+          <h1>Blocks</h1>
+          <p>
+            {hasActiveFilters
+              ? `${filteredBlocks.length} of ${blocks.length} items`
+              : `${blocks.length} items`}
+          </p>
+        </div>
+        <button className="panel-toggle" onClick={() => setCollapsed(true)} title="Collapse">
+          <span className="toggle-icon">☰</span>
+        </button>
+      </div>
+
+      <div className="blocks-filters">
+        <input
+          type="search"
+          className="search-input"
+          placeholder="Search blocks..."
+          value={filters.search}
+          onChange={(e) => setFilters((f) => ({ ...f, search: e.target.value }))}
+        />
+
+        <div className="filter-tabs">
+          {(['all', 'block', 'template'] as const).map((type) => (
+            <button
+              key={type}
+              className={`filter-tab ${filters.type === type ? 'active' : ''}`}
+              onClick={() => setFilters((f) => ({ ...f, type }))}
+            >
+              {type === 'all' ? 'All' : type === 'block' ? 'Blocks' : 'Templates'}
+            </button>
+          ))}
+        </div>
+
+        <select
+          className="filter-select"
+          value={filters.category}
+          onChange={(e) => setFilters((f) => ({ ...f, category: e.target.value }))}
+        >
+          <option value="">All Categories</option>
+          {categories.map((cat) => (
+            <option key={cat} value={cat}>
+              {cat}
+            </option>
+          ))}
+        </select>
+
+        {tags.length > 0 && (
+          <div className="tags-filter">
+            {tags.map((tag) => (
+              <button
+                key={tag}
+                className={`tag-chip ${filters.tags.includes(tag) ? 'active' : ''}`}
+                onClick={() =>
+                  setFilters((f) => ({
+                    ...f,
+                    tags: f.tags.includes(tag)
+                      ? f.tags.filter((t) => t !== tag)
+                      : [...f.tags, tag],
+                  }))
+                }
+              >
+                {tag}
+              </button>
+            ))}
+            {hasActiveFilters && (
+              <button className="clear-filters" onClick={clearFilters}>
+                Clear all
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="blocks-list">
+        {loading ? (
+          <div className="loading">
+            <div className="spinner" />
+            <span>Loading blocks...</span>
+          </div>
+        ) : filteredBlocks.length === 0 ? (
+          <div className="no-results">
+            <div className="no-results-icon">🔍</div>
+            <div>No items match your filters</div>
+            {hasActiveFilters && (
+              <button className="btn-clear" onClick={clearFilters}>
+                Clear filters
+              </button>
+            )}
+          </div>
+        ) : (
+          groupedBlocks.map(([category, categoryBlocks]) => (
+            <div key={category} className="block-category">
+              <div className="category-header">
+                {category}
+                <span className="category-count">{categoryBlocks.length}</span>
+              </div>
+              {categoryBlocks.map((block) => (
+                <div
+                  key={block.name}
+                  className={`block-item ${selectedBlock?.name === block.name ? 'active' : ''}`}
+                  onClick={() => onSelectBlock(block)}
+                >
+                  <div className="block-item-header">
+                    <div className="block-item-name">
+                      {block.displayName}
+                      {block.type === 'template' && (
+                        <span className="type-badge template">Template</span>
+                      )}
+                    </div>
+                    <span className="version-badge">v{block.version}</span>
+                  </div>
+                  <div className="block-item-footer">
+                    <span className="block-item-type">{block.category || 'Block'}</span>
+                    <span className="status-badge status-local">Local</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}