cmssy-cli 0.21.0 → 0.24.1

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

@@ -0,0 +1,469 @@
+import { useState } from 'react';
+import { Block, FieldConfig } from '../types';
+
+interface EditorProps {
+  block: Block | null;
+  loading: boolean;
+  previewData: Record<string, unknown>;
+  onPreviewDataChange: (data: Record<string, unknown>) => void;
+  onNavigateToPage?: (pageSlug: string) => void;
+}
+
+export function Editor({
+  block,
+  loading,
+  previewData,
+  onPreviewDataChange,
+  onNavigateToPage,
+}: EditorProps) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  if (collapsed) {
+    return (
+      <div className="editor-panel collapsed">
+        <div className="editor-header">
+          <button className="panel-toggle" onClick={() => setCollapsed(false)} title="Expand">
+            <span className="toggle-icon">☰</span>
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const isTemplate = block?.type === 'template' && block.pages && block.pages.length > 0;
+
+  return (
+    <div className="editor-panel">
+      <div className="editor-header">
+        <button className="panel-toggle" onClick={() => setCollapsed(true)} title="Collapse">
+          <span className="toggle-icon">☰</span>
+        </button>
+        <div className="editor-header-content">
+          <h2>Properties</h2>
+          <p>{block?.name || 'No block selected'}</p>
+        </div>
+      </div>
+      <div className="editor-content">
+        {loading ? (
+          <div className="loading">
+            <div className="spinner" />
+            <span>Loading properties...</span>
+          </div>
+        ) : !block ? (
+          <div className="editor-empty">Select a block to edit its properties</div>
+        ) : isTemplate ? (
+          <TemplateEditor block={block} onNavigateToPage={onNavigateToPage} />
+        ) : block.schema ? (
+          <SchemaEditor
+            schema={block.schema}
+            data={previewData}
+            onChange={onPreviewDataChange}
+          />
+        ) : (
+          <div className="editor-empty">No schema defined for this block</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Template editor component
+function TemplateEditor({
+  block,
+  onNavigateToPage,
+}: {
+  block: Block;
+  onNavigateToPage?: (pageSlug: string) => void;
+}) {
+  const pages = block.pages || [];
+  const layoutSlots = block.layoutSlots || [];
+
+  return (
+    <div className="template-editor">
+      <div className="template-info">
+        <div className="template-info-badge">Template</div>
+        <p className="template-info-desc">{block.description || 'No description'}</p>
+      </div>
+
+      <div className="template-section">
+        <h4 className="template-section-title">Pages ({pages.length})</h4>
+        <div className="template-pages-list">
+          {pages.length === 0 ? (
+            <div className="editor-empty">No pages defined</div>
+          ) : (
+            pages.map((page) => (
+              <div
+                key={page.slug}
+                className="template-page-item"
+                onClick={() => onNavigateToPage?.(page.slug)}
+              >
+                <div className="template-page-header">
+                  <span className="template-page-name">{page.name}</span>
+                  <span className="template-page-blocks">{page.blocksCount} blocks</span>
+                </div>
+                <div className="template-page-slug">/{page.slug}</div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {layoutSlots.length > 0 && (
+        <div className="template-section">
+          <h4 className="template-section-title">Layout Slots</h4>
+          {layoutSlots.map((slot) => (
+            <div key={slot.slot} className="template-layout-slot">
+              <span className="slot-type">{slot.slot}</span>
+              <span className="slot-block">{slot.type}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="template-hint">
+        <p>Click on a page to preview it, or use the tabs in the preview header.</p>
+      </div>
+    </div>
+  );
+}
+
+// Schema-based field editor
+function SchemaEditor({
+  schema,
+  data,
+  onChange,
+  prefix = '',
+}: {
+  schema: Record<string, FieldConfig>;
+  data: Record<string, unknown>;
+  onChange: (data: Record<string, unknown>) => void;
+  prefix?: string;
+}) {
+  const updateField = (key: string, value: unknown) => {
+    const newData = { ...data, [key]: value };
+    onChange(newData);
+  };
+
+  return (
+    <>
+      {Object.entries(schema).map(([key, field]) => (
+        <FieldEditor
+          key={prefix + key}
+          fieldKey={key}
+          field={field}
+          value={data[key]}
+          onChange={(value) => updateField(key, value)}
+        />
+      ))}
+    </>
+  );
+}
+
+// Individual field editor
+function FieldEditor({
+  fieldKey,
+  field,
+  value,
+  onChange,
+}: {
+  fieldKey: string;
+  field: FieldConfig;
+  value: unknown;
+  onChange: (value: unknown) => void;
+}) {
+  const required = field.required ? <span className="field-required">*</span> : null;
+
+  // Boolean field
+  if (field.type === 'boolean') {
+    return (
+      <div className="field-group">
+        <label className="field-checkbox-label">
+          <input
+            type="checkbox"
+            checked={Boolean(value ?? field.defaultValue)}
+            onChange={(e) => onChange(e.target.checked)}
+          />
+          <span>{field.label}</span>
+        </label>
+        {field.helpText && <div className="field-help">{field.helpText}</div>}
+      </div>
+    );
+  }
+
+  // Text fields
+  if (field.type === 'singleLine' || field.type === 'text' || field.type === 'string') {
+    return (
+      <div className="field-group">
+        <label className="field-label">
+          {field.label}
+          {required}
+        </label>
+        <input
+          type="text"
+          className="field-input"
+          value={String(value ?? field.defaultValue ?? '')}
+          placeholder={field.placeholder}
+          onChange={(e) => onChange(e.target.value)}
+        />
+        {field.helpText && <div className="field-help">{field.helpText}</div>}
+      </div>
+    );
+  }
+
+  // Multiline text
+  if (field.type === 'multiLine' || field.type === 'richText') {
+    return (
+      <div className="field-group">
+        <label className="field-label">
+          {field.label}
+          {required}
+        </label>
+        <textarea
+          className="field-input field-textarea"
+          value={String(value ?? field.defaultValue ?? '')}
+          placeholder={field.placeholder}
+          onChange={(e) => onChange(e.target.value)}
+        />
+        {field.helpText && <div className="field-help">{field.helpText}</div>}
+      </div>
+    );
+  }
+
+  // Number field
+  if (field.type === 'number' || field.type === 'numeric') {
+    return (
+      <div className="field-group">
+        <label className="field-label">
+          {field.label}
+          {required}
+        </label>
+        <input
+          type="number"
+          className="field-input"
+          value={value !== undefined ? String(value) : String(field.defaultValue ?? '')}
+          placeholder={field.placeholder}
+          onChange={(e) => onChange(e.target.value ? parseFloat(e.target.value) : '')}
+        />
+        {field.helpText && <div className="field-help">{field.helpText}</div>}
+      </div>
+    );
+  }
+
+  // Date field
+  if (field.type === 'date') {
+    return (
+      <div className="field-group">
+        <label className="field-label">
+          {field.label}
+          {required}
+        </label>
+        <input
+          type="date"
+          className="field-input"
+          value={String(value ?? field.defaultValue ?? '')}
+          onChange={(e) => onChange(e.target.value)}
+        />
+        {field.helpText && <div className="field-help">{field.helpText}</div>}
+      </div>
+    );
+  }
+
+  // Link field
+  if (field.type === 'link') {
+    const linkValue = (value as { url?: string; text?: string; target?: string }) ?? {};
+    return (
+      <div className="field-group">
+        <label className="field-label">
+          {field.label}
+          {required}
+        </label>
+        <div className="link-field">
+          <input
+            type="url"
+            className="field-input"
+            placeholder="URL"
+            value={linkValue.url || ''}
+            onChange={(e) => onChange({ ...linkValue, url: e.target.value })}
+            style={{ marginBottom: 8 }}
+          />
+          <input
+            type="text"
+            className="field-input"
+            placeholder="Link text"
+            value={linkValue.text || ''}
+            onChange={(e) => onChange({ ...linkValue, text: e.target.value })}
+            style={{ marginBottom: 8 }}
+          />
+          <label className="field-checkbox-label">
+            <input
+              type="checkbox"
+              checked={linkValue.target === '_blank'}
+              onChange={(e) => onChange({ ...linkValue, target: e.target.checked ? '_blank' : '_self' })}
+            />
+            <span>Open in new tab</span>
+          </label>
+        </div>
+        {field.helpText && <div className="field-help">{field.helpText}</div>}
+      </div>
+    );
+  }
+
+  // Select field
+  if (field.type === 'select') {
+    return (
+      <div className="field-group">
+        <label className="field-label">
+          {field.label}
+          {required}
+        </label>
+        <select
+          className="field-input field-select"
+          value={String(value ?? field.defaultValue ?? '')}
+          onChange={(e) => onChange(e.target.value)}
+        >
+          <option value="">Select an option...</option>
+          {field.options?.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+        {field.helpText && <div className="field-help">{field.helpText}</div>}
+      </div>
+    );
+  }
+
+  // Color field
+  if (field.type === 'color') {
+    const colorValue = String(value ?? field.defaultValue ?? '#000000');
+    return (
+      <div className="field-group">
+        <label className="field-label">
+          {field.label}
+          {required}
+        </label>
+        <div className="color-field">
+          <input
+            type="color"
+            className="color-preview"
+            value={colorValue}
+            onChange={(e) => onChange(e.target.value)}
+          />
+          <input
+            type="text"
+            className="field-input color-input"
+            value={colorValue}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        </div>
+        {field.helpText && <div className="field-help">{field.helpText}</div>}
+      </div>
+    );
+  }
+
+  // Media field (simple URL string)
+  if (field.type === 'media') {
+    const mediaUrl = (value as string) || '';
+    return (
+      <div className="field-group">
+        <label className="field-label">
+          {field.label}
+          {required}
+        </label>
+        <div className="media-field">
+          <div className="media-preview">
+            {mediaUrl ? (
+              <img src={mediaUrl} alt={field.label} />
+            ) : (
+              <div className="media-placeholder">No image</div>
+            )}
+          </div>
+          <input
+            type="url"
+            className="field-input"
+            placeholder="Image URL"
+            value={mediaUrl}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        </div>
+        {field.helpText && <div className="field-help">{field.helpText}</div>}
+      </div>
+    );
+  }
+
+  // Repeater field
+  if (field.type === 'repeater' && field.schema) {
+    const items = (value as Record<string, unknown>[]) ?? [];
+    const minItems = field.minItems ?? 0;
+    const maxItems = field.maxItems ?? 999;
+
+    const addItem = () => {
+      const newItem: Record<string, unknown> = {};
+      Object.entries(field.schema!).forEach(([k, f]) => {
+        if (f.defaultValue !== undefined) newItem[k] = f.defaultValue;
+      });
+      onChange([...items, newItem]);
+    };
+
+    const removeItem = (index: number) => {
+      onChange(items.filter((_, i) => i !== index));
+    };
+
+    const updateItem = (index: number, newItemData: Record<string, unknown>) => {
+      const newItems = [...items];
+      newItems[index] = newItemData;
+      onChange(newItems);
+    };
+
+    return (
+      <div className="field-group">
+        <label className="field-label">
+          {field.label}
+          {required}
+        </label>
+        <div className="repeater-items">
+          {items.length === 0 ? (
+            <div style={{ padding: 12, color: '#999', textAlign: 'center' }}>No items yet</div>
+          ) : (
+            items.map((item, index) => (
+              <div key={index} className="repeater-item">
+                <div className="repeater-item-header">
+                  <div className="repeater-item-title">Item {index + 1}</div>
+                  {items.length > minItems && (
+                    <button
+                      type="button"
+                      className="repeater-item-remove"
+                      onClick={() => removeItem(index)}
+                    >
+                      Remove
+                    </button>
+                  )}
+                </div>
+                <SchemaEditor
+                  schema={field.schema!}
+                  data={item}
+                  onChange={(newData) => updateItem(index, newData)}
+                  prefix={`${fieldKey}.${index}.`}
+                />
+              </div>
+            ))
+          )}
+        </div>
+        {items.length < maxItems && (
+          <button type="button" className="repeater-add" onClick={addItem}>
+            + Add Item
+          </button>
+        )}
+        {field.helpText && <div className="field-help">{field.helpText}</div>}
+      </div>
+    );
+  }
+
+  // Fallback for unsupported types
+  return (
+    <div className="field-group">
+      <label className="field-label">{field.label}</label>
+      <div style={{ color: '#999', fontSize: 12 }}>Unsupported field type: {field.type}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,146 @@
+import { useRef, useEffect, memo } from 'react';
+import { Block } from '../types';
+
+interface PreviewProps {
+  block: Block | null;
+  previewData: Record<string, unknown>;
+  currentPage?: string;
+  loading?: boolean;
+}
+
+export const Preview = memo(function Preview({ block, previewData, currentPage, loading }: PreviewProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const iframeLoadedRef = useRef(false);
+  const lastSentDataRef = useRef<string>('');
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Send props to iframe with debounce to prevent flickering
+  useEffect(() => {
+    if (!iframeRef.current?.contentWindow || !iframeLoadedRef.current) {
+      return;
+    }
+
+    // Don't send if previewData is empty (initial state)
+    if (!previewData || Object.keys(previewData).length === 0) {
+      return;
+    }
+
+    // Don't send if data hasn't changed
+    const dataString = JSON.stringify(previewData);
+    if (dataString === lastSentDataRef.current) {
+      return;
+    }
+
+    // Clear previous debounce
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
+    // Debounce postMessage to reduce flickering
+    debounceRef.current = setTimeout(() => {
+      if (iframeRef.current?.contentWindow) {
+        lastSentDataRef.current = dataString;
+        iframeRef.current.contentWindow.postMessage(
+          { type: 'UPDATE_PROPS', props: previewData },
+          '*'
+        );
+      }
+    }, 150);
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [previewData]);
+
+  // Handle iframe load - mark as loaded but don't send data
+  // The iframe already has correct data from the server
+  const handleIframeLoad = () => {
+    iframeLoadedRef.current = true;
+    // Store current data as "sent" so we don't re-send it
+    if (previewData && Object.keys(previewData).length > 0) {
+      lastSentDataRef.current = JSON.stringify(previewData);
+    }
+  };
+
+  // Reset loaded state when URL changes
+  useEffect(() => {
+    iframeLoadedRef.current = false;
+    lastSentDataRef.current = '';
+  }, [block?.name, currentPage]);
+
+  if (!block) {
+    return (
+      <div className="preview-panel">
+        <div className="preview-header">
+          <div className="preview-info">
+            <div className="preview-title">Preview</div>
+          </div>
+        </div>
+        <div className="preview-content">
+          <div className="preview-empty">
+            <div className="preview-empty-icon">👈</div>
+            <p>Select a block to preview</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="preview-panel">
+        <div className="preview-header">
+          <div className="preview-info">
+            <div className="preview-title">{block.displayName}</div>
+          </div>
+        </div>
+        <div className="preview-content">
+          <div className="preview-empty">
+            <div className="spinner" />
+            <p>Loading preview...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Guard against invalid block name
+  if (!block.name || typeof block.name !== 'string') {
+    console.error('[Preview] Invalid block.name:', block.name, 'block:', block);
+    return null;
+  }
+
+  const isTemplate = block.type === 'template' && block.pages && block.pages.length > 0;
+  const previewUrl = isTemplate
+    ? `/preview/template/${block.name}/${currentPage || block.pages?.[0]?.slug || ''}`
+    : `/preview/${block.name}`;
+
+  return (
+    <div className="preview-panel">
+      <div className="preview-header">
+        <div className="preview-info">
+          <div className="preview-title">{block.displayName}</div>
+        </div>
+        <div className="preview-actions">
+          <div className="preview-badge">Ready</div>
+          <button className="btn-publish" onClick={() => window.openPublishModal?.()}>
+            Publish
+          </button>
+        </div>
+      </div>
+      <div className="preview-content">
+        <div className={`preview-iframe-wrapper ${isTemplate ? 'template-preview' : ''}`}>
+          <iframe
+            ref={iframeRef}
+            className="preview-iframe"
+            src={previewUrl}
+            key={previewUrl}
+            onLoad={handleIframeLoad}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});

package/dist/dev-ui-react/hooks/useBlocks.ts

@@ -0,0 +1,80 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Block } from '../types';
+
+export function useBlocks() {
+  const [blocks, setBlocks] = useState<Block[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadBlocks = useCallback(async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/blocks');
+      if (!response.ok) throw new Error('Failed to load blocks');
+      const data = await response.json();
+      setBlocks(data);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadBlocks();
+  }, [loadBlocks]);
+
+  return { blocks, loading, error, refresh: loadBlocks, setBlocks };
+}
+
+export function useBlockConfig(blockName: string | null, _blockType: string | null) {
+  const [config, setConfig] = useState<{
+    schema?: Record<string, unknown>;
+    previewData?: Record<string, unknown>;
+    pages?: Array<{ name: string; slug: string; blocksCount: number }>;
+    layoutSlots?: Array<{ slot: string; type: string }>;
+  } | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!blockName) {
+      setConfig(null);
+      return;
+    }
+
+    const loadConfig = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        // Load block config (includes pages/layoutSlots for templates)
+        const configResponse = await fetch(`/api/blocks/${blockName}/config`);
+        if (!configResponse.ok) throw new Error('Failed to load config');
+        const configData = await configResponse.json();
+
+        // Debug: log raw API response (remove after debugging)
+        console.log(`[useBlockConfig] Raw config for "${blockName}":`, configData);
+        console.log('[useBlockConfig] previewData from API:', configData.previewData);
+        console.log('[useBlockConfig] previewData keys:', Object.keys(configData.previewData || {}));
+        console.log('[useBlockConfig] previewData.values:', configData.previewData?.values);
+
+        setConfig({
+          schema: configData.schema,
+          previewData: configData.previewData,
+          pages: configData.pages,
+          layoutSlots: configData.layoutSlots,
+        });
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadConfig();
+  }, [blockName]);
+
+  return { config, loading, error };
+}