@cmssy/cli 0.22.4 → 9.1.0

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

@@ -1,164 +0,0 @@
-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,
-        layoutPositions: config.layoutPositions,
-      };
-      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

@@ -1,193 +0,0 @@
-/**
- * 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

@@ -1,232 +0,0 @@
-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>
-  );
-}