create-nextblock 0.0.1

package/templates/nextblock-template/app/cms/blocks/components/BlockTypeCard.tsx

@@ -0,0 +1,58 @@
+// app/cms/blocks/components/BlockTypeCard.tsx
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from "@nextblock-cms/ui";
+import {
+  FileText,
+  Heading,
+  Image,
+  SquareMousePointer,
+  LayoutGrid,
+  SquarePlay,
+  Columns3,
+  LayoutTemplate,
+  NotebookPen,
+  Package,
+  type LucideProps,
+} from 'lucide-react';
+
+const iconMap: { [key: string]: React.FC<LucideProps> } = {
+  FileText,
+  Heading,
+  Image,
+  SquareMousePointer,
+  LayoutGrid,
+  SquarePlay,
+  Columns3,
+  LayoutTemplate,
+  NotebookPen,
+};
+
+interface BlockTypeCardProps {
+  icon?: string;
+  name: string;
+  description?: string;
+  onClick: () => void;
+}
+
+const BlockTypeCard: React.FC<BlockTypeCardProps> = ({ icon, name, description, onClick }) => {
+  const IconComponent = icon && iconMap[icon] ? iconMap[icon] : Package;
+
+  return (
+    <Card
+      onClick={onClick}
+      className="cursor-pointer hover:shadow-lg hover:border-primary transition-all duration-200 ease-in-out"
+    >
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">{name}</CardTitle>
+        {IconComponent && <IconComponent className="h-4 w-4 text-muted-foreground" />}
+      </CardHeader>
+      <CardContent>
+        <p className="text-xs text-muted-foreground">
+          {description || 'No description available.'}
+        </p>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default BlockTypeCard;

package/templates/nextblock-template/app/cms/blocks/components/BlockTypeSelector.tsx

@@ -0,0 +1,62 @@
+// app/cms/blocks/components/BlockTypeSelector.tsx
+"use client";
+
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@nextblock-cms/ui";
+import { blockRegistry, BlockType } from '@/lib/blocks/blockRegistry';
+import BlockTypeCard from './BlockTypeCard';
+
+interface BlockTypeSelectorProps {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onSelectBlockType: (blockType: BlockType) => void;
+  allowedBlockTypes?: BlockType[];
+}
+
+const BlockTypeSelector: React.FC<BlockTypeSelectorProps> = ({
+  isOpen,
+  onOpenChange,
+  onSelectBlockType,
+  allowedBlockTypes,
+}) => {
+  const handleSelect = (blockType: BlockType) => {
+    onSelectBlockType(blockType);
+    onOpenChange(false);
+  };
+
+  const blockDefs = Object.values(blockRegistry).filter(
+    (blockDef) => !allowedBlockTypes || allowedBlockTypes.includes(blockDef.type)
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[625px]">
+        <DialogHeader>
+          <DialogTitle>Add a New Block</DialogTitle>
+          <DialogDescription>
+            Choose a block type from the options below to add it to the page.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 py-4">
+          {blockDefs.map((blockDef) => (
+            <BlockTypeCard
+              key={blockDef.type}
+              name={blockDef.label}
+              description={blockDef.documentation?.description}
+              icon={blockDef.icon}
+              onClick={() => handleSelect(blockDef.type)}
+            />
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default BlockTypeSelector;

package/templates/nextblock-template/app/cms/blocks/components/ColumnEditor.tsx

@@ -0,0 +1,276 @@
+// app/cms/blocks/components/ColumnEditor.tsx
+"use client";
+
+import React, { useState, lazy } from 'react';
+import { cn } from '@nextblock-cms/utils';
+import { Button } from '@nextblock-cms/ui';
+import { PlusCircle, Trash2, Edit2, GripVertical } from "lucide-react";
+import type { SectionBlockContent } from '@/lib/blocks/blockRegistry';
+import { availableBlockTypes, getBlockDefinition, getInitialContent, BlockType } from '@/lib/blocks/blockRegistry';
+import { useDroppable } from "@dnd-kit/core";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { BlockEditorModal } from './BlockEditorModal';
+import { ConfirmationDialog } from '@nextblock-cms/ui';
+import BlockTypeSelector from './BlockTypeSelector';
+
+
+type ColumnBlock = SectionBlockContent['column_blocks'][0][0];
+
+// Sortable block item component for column blocks
+interface SortableColumnBlockProps {
+  block: ColumnBlock;
+  index: number;
+  columnIndex: number;
+  onEdit: () => void;
+  onDelete: () => void;
+  blockType: 'section' | 'hero';
+  onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+function SortableColumnBlock({ block, index, columnIndex, onEdit, onDelete, blockType, onClick }: SortableColumnBlockProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: `${blockType}-column-${columnIndex}-block-${index}`,
+    data: {
+      type: 'block',
+      blockType,
+      columnIndex,
+      blockIndex: index,
+      block
+    }
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const blockDefinition = getBlockDefinition(block.block_type);
+  const blockLabel = blockDefinition?.label || block.block_type;
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      onClick={onClick}
+     {...attributes}
+     {...listeners}
+     className={cn(
+       "group relative p-2 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-900 shadow-sm",
+       "cursor-pointer hover:border-primary"
+     )}
+   >
+     <div className="flex items-center justify-between mb-1">
+       <div className="flex items-center gap-2">
+         <GripVertical className="h-3 w-3 text-gray-400" />
+         <span className="text-xs font-medium text-gray-600 dark:text-gray-300 capitalize">
+           {blockLabel}
+         </span>
+       </div>
+        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <Button variant="ghost" size="sm" onClick={onEdit} className="h-6 w-6 p-0" title="Edit block">
+            <Edit2 className="h-3 w-3" />
+          </Button>
+          <Button variant="ghost" size="sm" onClick={onDelete} className="h-6 w-6 p-0 text-red-600 hover:text-red-700" title="Delete block">
+            <Trash2 className="h-3 w-3" />
+          </Button>
+        </div>
+      </div>
+      <div className="text-xs text-gray-500 dark:text-gray-400">
+        {block.block_type === 'text' && (
+          <div dangerouslySetInnerHTML={{ __html: (block.content.html_content || 'Empty text').substring(0, 50) + (block.content.html_content && block.content.html_content.length > 50 ? '...' : '') }} />
+        )}
+        {block.block_type === 'heading' && (
+          <div>H{block.content.level || 1}: {(block.content.text_content || 'Empty heading').substring(0, 30) + (block.content.text_content && block.content.text_content.length > 30 ? '...' : '')}</div>
+        )}
+        {block.block_type === 'image' && (
+          <div>Image: {block.content.alt_text || block.content.media_id ? 'Image selected' : 'No image selected'}</div>
+        )}
+        {block.block_type === 'button' && (
+          <div>Button: {block.content.text || 'No text'} → {block.content.url || '#'}</div>
+        )}
+        {block.block_type === 'video_embed' && (
+          <div>Video: {block.content.title || block.content.url || 'No URL set'}</div>
+        )}
+        {block.block_type === 'posts_grid' && (
+          <div>Posts Grid: {block.content.columns || 3} cols, {block.content.postsPerPage || 12} posts</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Column editor component
+export interface ColumnEditorProps {
+  columnIndex: number;
+  blocks: ColumnBlock[];
+  onBlocksChange: (newBlocks: ColumnBlock[]) => void;
+  blockType: 'section' | 'hero';
+}
+
+type EditingBlock = ColumnBlock & { index: number };
+
+export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, blockType }: ColumnEditorProps) {
+  const [editingBlock, setEditingBlock] = useState<EditingBlock | null>(null);
+  const [isBlockSelectorOpen, setIsBlockSelectorOpen] = useState(false);
+  const [LazyEditor, setLazyEditor] = useState<React.LazyExoticComponent<React.ComponentType<any>> | null>(null);
+  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+  const [blockToDeleteIndex, setBlockToDeleteIndex] = useState<number | null>(null);
+
+  const { setNodeRef: setDroppableNodeRef, isOver } = useDroppable({
+    id: `${blockType}-column-droppable-${columnIndex}`,
+  });
+
+  const handleAddBlock = (selectedBlockType: BlockType) => {
+    if (!selectedBlockType) return;
+    const initialContent = getInitialContent(selectedBlockType);
+    const newBlock: ColumnBlock = {
+      block_type: selectedBlockType,
+      content: initialContent || {},
+      temp_id: `temp-${Date.now()}-${Math.random()}`
+    };
+    onBlocksChange([...blocks, newBlock]);
+  };
+
+  const handleSelectBlockType = (selectedBlockType: BlockType) => {
+    handleAddBlock(selectedBlockType);
+    setIsBlockSelectorOpen(false);
+  };
+
+  const handleCardClick = (e: React.MouseEvent<HTMLDivElement>, block: ColumnBlock, index: number) => {
+    // Ignore clicks on buttons to prevent conflicts with drag/delete/edit icons.
+    if ((e.target as HTMLElement).closest('button')) {
+      return;
+    }
+    // Call the existing function to open the modal for this block.
+    handleStartEdit(block, index);
+  };
+
+  const handleDeleteBlock = (index: number) => {
+    setBlockToDeleteIndex(index);
+    setIsConfirmOpen(true);
+  };
+
+  const confirmDelete = () => {
+    if (blockToDeleteIndex === null) return;
+    const newBlocks = blocks.filter((_, i) => i !== blockToDeleteIndex);
+    onBlocksChange(newBlocks);
+    setIsConfirmOpen(false);
+    setBlockToDeleteIndex(null);
+  };
+
+  const handleStartEdit = (block: ColumnBlock, index: number) => {
+    const blockDef = getBlockDefinition(block.block_type);
+    if (blockDef && blockDef.editorComponentFilename) {
+      const Editor = lazy(() => import(`../editors/${blockDef.editorComponentFilename.replace(/\.tsx$/, '')}`));
+      setLazyEditor(Editor);
+      setEditingBlock({ ...block, index });
+    } else {
+      console.error(`No editor component found for block type: ${block.block_type}`);
+    }
+  };
+
+  const handleSave = (newContent: any) => {
+    if (editingBlock === null) return;
+
+    const updatedBlocks = [...blocks];
+    updatedBlocks[editingBlock.index] = {
+      ...updatedBlocks[editingBlock.index],
+      content: newContent,
+    };
+    onBlocksChange(updatedBlocks);
+    setEditingBlock(null);
+    setLazyEditor(null);
+  };
+
+  return (
+    <div className="border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800/50 flex flex-col">
+      <div className="p-3 border-b border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Column {columnIndex + 1}
+            </h4>
+            <span className="text-xs text-gray-500 bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">
+              {blocks.length} block{blocks.length !== 1 ? 's' : ''}
+            </span>
+          </div>
+        </div>
+        <div className="mt-2">
+          <Button onClick={() => setIsBlockSelectorOpen(true)} size="sm" className="w-full h-8">
+            <PlusCircle className="h-3 w-3 mr-2" />
+            Add Block
+          </Button>
+        </div>
+      </div>
+      <div className="p-3 flex-grow">
+        {blocks.length === 0 ? (
+          <div
+            ref={setDroppableNodeRef}
+            className={`h-full flex items-center justify-center text-xs text-gray-500 border-2 border-dashed rounded-lg transition-colors ${
+              isOver ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-gray-600'
+            }`}
+          >
+            Drag block here
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {blocks.map((block, index) => (
+              <div key={`${blockType}-column-${columnIndex}-block-${index}`}>
+                <SortableColumnBlock
+                  block={block}
+                  index={index}
+                  columnIndex={columnIndex}
+                  blockType={blockType}
+                  onEdit={() => handleStartEdit(block, index)}
+                  onDelete={() => handleDeleteBlock(index)}
+                  onClick={(e) => handleCardClick(e, block, index)}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      {editingBlock && LazyEditor && (
+        <BlockEditorModal
+          isOpen={!!editingBlock}
+          onClose={() => {
+            setEditingBlock(null);
+            setLazyEditor(null);
+          }}
+          onSave={handleSave}
+          block={{
+            type: editingBlock.block_type,
+            content: editingBlock.content,
+          }}
+          EditorComponent={LazyEditor}
+        />
+      )}
+      <ConfirmationDialog
+        isOpen={isConfirmOpen}
+        onOpenChange={setIsConfirmOpen}
+        onConfirm={confirmDelete}
+        title="Are you sure?"
+        description="This action cannot be undone. This will permanently delete the block."
+        confirmText="Delete"
+        isDestructive={true}
+      />
+      <BlockTypeSelector
+        isOpen={isBlockSelectorOpen}
+        onOpenChange={setIsBlockSelectorOpen}
+        onSelectBlockType={handleSelectBlockType}
+        allowedBlockTypes={availableBlockTypes.filter(
+          (type) => type !== 'section' && type !== 'hero'
+        )}
+      />
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/blocks/components/DeleteBlockButtonClient.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import { Trash2 } from "lucide-react";
+
+import { Button } from "@nextblock-cms/ui";
+import { ConfirmationDialog } from "@nextblock-cms/ui";
+
+interface Props {
+  blockId: number;
+  blockTitle: string;
+  onDelete: (blockId: number) => void;
+}
+
+export function DeleteBlockButtonClient({
+  blockId,
+  blockTitle,
+  onDelete,
+}: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleDelete = () => {
+    onDelete(blockId);
+  };
+
+  return (
+    <>
+      <Button
+        variant="destructive"
+        size="icon"
+        onClick={() => setIsOpen(true)}
+        aria-label={`Delete block ${blockTitle}`}
+      >
+        <Trash2 className="h-4 w-4" />
+      </Button>
+      <ConfirmationDialog
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        title={`Delete ${blockTitle}`}
+        description={`Are you sure you want to delete the block "${blockTitle}"? This action cannot be undone.`}
+        onConfirm={handleDelete}
+        confirmText="Delete"
+        isDestructive={true}
+      />
+    </>
+  );
+}

package/templates/nextblock-template/app/cms/blocks/components/EditableBlock.tsx

@@ -0,0 +1,182 @@
+// app/cms/blocks/components/EditableBlock.tsx
+"use client";
+
+import React, { useState, Suspense, useMemo, lazy, LazyExoticComponent, ComponentType } from 'react';
+import type { Database } from "@nextblock-cms/db";
+import PostsGridBlockEditor from '../editors/PostsGridBlockEditor';
+
+type Block = Database['public']['Tables']['blocks']['Row'];
+import { Button } from "@nextblock-cms/ui";
+import { GripVertical, Edit2 } from "lucide-react";
+import { getBlockDefinition, blockRegistry, BlockType } from "@/lib/blocks/blockRegistry";
+import { BlockEditorModal } from './BlockEditorModal';
+import { DeleteBlockButtonClient } from './DeleteBlockButtonClient';
+import { cn } from '@nextblock-cms/utils';
+
+export interface EditableBlockProps {
+  block: Block;
+  onDelete: (blockId: number) => void;
+  onContentChange: (blockId: number, newContent: Record<string, any>) => void;
+  dragHandleProps?: Record<string, any>;
+  onEditNestedBlock?: (parentBlockId: string, columnIndex: number, blockIndexInColumn: number) => void;
+  className?: string;
+}
+
+export default function EditableBlock({
+  block,
+  onDelete,
+  onContentChange,
+  dragHandleProps,
+  onEditNestedBlock,
+  className,
+}: EditableBlockProps) {
+  void onEditNestedBlock;
+  // Move all hooks to the top before any conditional returns
+  const [isConfigPanelOpen, setIsConfigPanelOpen] = useState(false);
+  const [editingBlock, setEditingBlock] = useState<Block | null>(null);
+  const [LazyEditor, setLazyEditor] = useState<LazyExoticComponent<ComponentType<any>> | null>(null);
+
+  const SectionEditor = useMemo(() => {
+    if (block?.block_type === 'section' || block?.block_type === 'hero') {
+      const editorFilename = blockRegistry[block.block_type as BlockType]?.editorComponentFilename;
+      if (editorFilename) {
+        return lazy(() => import(`../editors/${editorFilename}`));
+      }
+    }
+    return null;
+  }, [block?.block_type]);
+
+  // Add a guard for undefined block prop after hooks
+  if (!block) {
+    // Or some other placeholder/error display
+    return <div className="p-4 border rounded-lg bg-card shadow text-red-500">Error: Block data is missing in EditableBlock.</div>;
+  }
+
+
+
+  const handleEditClick = () => {
+    if (block.block_type === 'section' || block.block_type === 'hero') {
+      setIsConfigPanelOpen(prev => !prev);
+    } else {
+      const editorFilename = blockRegistry[block.block_type as BlockType]?.editorComponentFilename;
+      if (block.block_type === 'posts_grid') {
+        const LazifiedPostsGridEditor = lazy(() => Promise.resolve({ default: PostsGridBlockEditor }));
+        setLazyEditor(LazifiedPostsGridEditor);
+        setEditingBlock(block);
+      }
+      else if (editorFilename) {
+        const Editor = lazy(() => import(`../editors/${editorFilename}`));
+        setLazyEditor(Editor);
+        setEditingBlock(block);
+      }
+    }
+  };
+
+  const handleCardClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    // If the element that was clicked, or any of its parents up to the card, is a button,
+    // then we should ignore the click on the card. This lets the button's own onClick handle the event.
+    if ((e.target as HTMLElement).closest('button')) {
+      return;
+    }
+
+    // If the click was on the card's background (not a button), and it's an editable block type,
+    // then trigger the edit handler.
+    if (block.block_type !== 'section' && block.block_type !== 'hero') {
+      handleEditClick();
+    }
+  };
+
+  const renderPreview = () => {
+    // Safe access to block_type for preview
+    const currentBlockType = block && block.block_type;
+    if (!currentBlockType) {
+      return <div className="text-red-500">Error: Block type missing for preview.</div>;
+    }
+
+    const blockDefinition = getBlockDefinition(currentBlockType as BlockType);
+    const blockLabel = blockDefinition?.label || currentBlockType;
+
+    // Default preview for other block types
+    return (
+      <div
+        className="py-4 flex flex-col items-center justify-center space-y-2 min-h-[80px] border border-dashed rounded-md bg-muted/20 cursor-pointer hover:border-primary"
+        onClick={handleCardClick}
+      >
+        <div className="text-center">
+          <p className="text-sm font-medium text-muted-foreground">{blockLabel}</p>
+          <p className="text-xs text-muted-foreground">Click edit to modify content</p>
+        </div>
+        {/* This button is for non-section blocks which are not yet implemented for inline editing */}
+        <Button variant="outline" size="sm" onClick={(e) => {
+          e.stopPropagation();
+          handleEditClick();
+        }}>
+          Edit Block
+        </Button>
+      </div>
+    );
+  };
+
+  const isSection = block?.block_type === 'section' || block?.block_type === 'hero';
+  const blockDefinition = getBlockDefinition(block.block_type as BlockType);
+
+  return (
+    <div
+      className={cn(
+        "p-4 border rounded-lg bg-card shadow",
+        className
+      )}
+    >
+      <div className="flex justify-between items-center mb-2 pb-2 border-b">
+        <div className="flex items-center gap-2">
+          <button {...dragHandleProps} className="p-1 rounded-md hover:bg-muted cursor-grab" aria-label="Drag to reorder">
+            <GripVertical className="h-5 w-5" />
+          </button>
+          <h3 className="font-semibold">{blockDefinition?.label || block.block_type}</h3>
+        </div>
+        <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleEditClick();
+              }}
+              aria-label={isSection ? "Toggle Section Config" : "Edit block"}
+            >
+              <Edit2 className="h-4 w-4 text-muted-foreground" />
+            </Button>
+          <DeleteBlockButtonClient
+            blockId={block.id}
+            blockTitle={blockDefinition?.label || block.block_type}
+            onDelete={() => onDelete(block.id)}
+          />
+        </div>
+      </div>
+      {isSection ? (
+        <div className="mt-2 min-h-[200px]">
+          <Suspense fallback={<div className="flex justify-center items-center h-full"><p>Loading Editor...</p></div>}>
+            {SectionEditor && <SectionEditor block={block} content={block.content || {}} onChange={(newContent: Record<string, any>) => onContentChange(block.id, newContent)} blockType={block.block_type as 'section' | 'hero'} isConfigPanelOpen={isConfigPanelOpen} />}
+          </Suspense>
+        </div>
+      ) : renderPreview()}
+
+      {editingBlock && LazyEditor && (
+        <BlockEditorModal
+          isOpen={!!editingBlock}
+          block={{...editingBlock, type: editingBlock.block_type as BlockType}}
+          EditorComponent={LazyEditor}
+          onClose={() => {
+            setEditingBlock(null);
+            setLazyEditor(null);
+          }}
+          onSave={(newContent: any) => {
+            onContentChange(block.id, newContent);
+            setEditingBlock(null);
+            setLazyEditor(null);
+          }}
+        />
+      )}
+    </div>
+  );
+}