create-nextblock 0.0.1

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

@@ -0,0 +1,120 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from 'react';
+import { Editor } from '@tiptap/react';
+import Image from 'next/image';
+import { Image as ImageIconLucide, Search, CheckCircle } from 'lucide-react';
+import { Button } from '@nextblock-cms/ui';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+  DialogClose,
+} from '@nextblock-cms/ui';
+import { Input } from '@nextblock-cms/ui';
+import type { Database } from '@nextblock-cms/db';
+import { createClient as createBrowserClient } from '@nextblock-cms/db';
+
+type Media = Database['public']['Tables']['media']['Row'];
+
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+
+interface MediaLibraryModalProps {
+  editor: Editor | null;
+}
+
+export const MediaLibraryModal = ({ editor }: MediaLibraryModalProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [mediaLibrary, setMediaLibrary] = useState<Media[]>([]);
+  const [isLoadingMedia, setIsLoadingMedia] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const supabase = createBrowserClient();
+
+  const fetchLibrary = useCallback(async () => {
+    if (!isModalOpen) return;
+    setIsLoadingMedia(true);
+    let query = supabase.from('media').select('*').order('created_at', { ascending: false }).limit(20);
+    if (searchTerm) {
+      query = query.ilike('file_name', `%${searchTerm}%`);
+    }
+    const { data, error } = await query;
+    if (data) setMediaLibrary(data);
+    else console.error("Error fetching media library:", error);
+    setIsLoadingMedia(false);
+  }, [isModalOpen, searchTerm, supabase]);
+
+  useEffect(() => {
+    fetchLibrary();
+  }, [fetchLibrary]);
+
+  const handleSelectMedia = (mediaItem: Media) => {
+    if (editor && mediaItem.file_type?.startsWith("image/")) {
+      const imageUrl = `${R2_BASE_URL}/${mediaItem.object_key}`;
+      editor.chain().focus().insertContent(`<img src="${imageUrl}" alt="${mediaItem.description || mediaItem.file_name}" />`).run();
+    }
+    setIsModalOpen(false);
+  };
+
+  return (
+    <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+      <DialogTrigger asChild>
+        <Button type="button" variant="ghost" size="icon" title="Add Image" disabled={!editor?.isEditable}>
+          <ImageIconLucide className="h-4 w-4" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[650px] md:max-w-[800px] lg:max-w-[1000px] max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Select Image from Media Library</DialogTitle>
+        </DialogHeader>
+        <div className="relative mb-4">
+          <Input
+            type="search"
+            placeholder="Search media by name..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="pl-10"
+          />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        </div>
+        {isLoadingMedia ? (
+          <div className="flex-grow flex items-center justify-center"><p>Loading media...</p></div>
+        ) : mediaLibrary.length === 0 ? (
+          <div className="flex-grow flex items-center justify-center"><p>No media found.</p></div>
+        ) : (
+          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3 overflow-y-auto flex-grow pr-2">
+            {mediaLibrary.filter(m => m.file_type?.startsWith("image/")).map((media) => (
+              <button
+                key={media.id}
+                type="button"
+                className="relative aspect-square border rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+                onClick={() => handleSelectMedia(media)}
+              >
+                <Image
+                  src={`${R2_BASE_URL}/${media.object_key}`}
+                  alt={media.description || media.file_name}
+                  width={200}
+                  height={200}
+                  className="h-full w-full object-cover"
+                />
+                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity flex items-center justify-center">
+                  <CheckCircle className="h-8 w-8 text-white" />
+                </div>
+                 <p className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 truncate text-center">
+                    {media.file_name}
+                </p>
+              </button>
+            ))}
+          </div>
+        )}
+        <DialogFooter className="mt-4">
+          <DialogClose asChild>
+            <Button type="button" variant="outline">Cancel</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,133 @@
+// app/cms/blocks/components/SectionConfigPanel.tsx
+"use client";
+
+import React from 'react';
+import { Label } from "@nextblock-cms/ui";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@nextblock-cms/ui";
+import type { SectionBlockContent } from "@/lib/blocks/blockRegistry";
+import BackgroundSelector from './BackgroundSelector';
+
+interface SectionConfigPanelProps {
+  content: Partial<SectionBlockContent>;
+  onChange: (newContent: Partial<SectionBlockContent>) => void;
+}
+
+export default function SectionConfigPanel({ content, onChange }: SectionConfigPanelProps) {
+  const handleContainerTypeChange = (value: SectionBlockContent['container_type']) => {
+    onChange({
+      ...content,
+      container_type: value
+    });
+  };
+
+  const handleColumnGapChange = (value: SectionBlockContent['column_gap']) => {
+    onChange({
+      ...content,
+      column_gap: value
+    });
+  };
+
+  const handleDesktopColumnsChange = (value: string) => {
+    const desktopColumns = parseInt(value) as 1 | 2 | 3 | 4;
+    const currentBlocks = content.column_blocks || [];
+    let newColumnBlocks = [...currentBlocks];
+
+    if (desktopColumns < currentBlocks.length) {
+      newColumnBlocks = currentBlocks.slice(0, desktopColumns);
+    } else if (desktopColumns > currentBlocks.length) {
+      const columnsToAdd = desktopColumns - currentBlocks.length;
+      for (let i = 0; i < columnsToAdd; i++) {
+        newColumnBlocks.push([{
+          block_type: "text",
+          content: { html_content: `<p>New Column ${currentBlocks.length + i + 1}</p>` },
+          temp_id: `new-${Date.now()}-${i}`
+        }]);
+      }
+    }
+
+    onChange({
+      ...content,
+      responsive_columns: {
+        ...(content.responsive_columns || { mobile: 1, tablet: 2, desktop: 3 }),
+        desktop: desktopColumns,
+      },
+      column_blocks: newColumnBlocks,
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Section Configuration</h3>
+      </div>
+      
+      <>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {/* Container Type */}
+          <div className="space-y-2">
+            <Label htmlFor="container-type">Container Type</Label>
+            <Select value={content.container_type} onValueChange={handleContainerTypeChange}>
+              <SelectTrigger id="container-type">
+                <SelectValue placeholder="Select container type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="full-width">Full Width</SelectItem>
+                <SelectItem value="container">Container</SelectItem>
+                <SelectItem value="container-sm">Container Small</SelectItem>
+                <SelectItem value="container-lg">Container Large</SelectItem>
+                <SelectItem value="container-xl">Container XL</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Desktop Columns */}
+          <div className="space-y-2">
+            <Label htmlFor="desktop-columns">Desktop Columns</Label>
+            <Select value={content.responsive_columns?.desktop?.toString()} onValueChange={handleDesktopColumnsChange}>
+              <SelectTrigger id="desktop-columns">
+                <SelectValue placeholder="Select columns" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">1 Column</SelectItem>
+                <SelectItem value="2">2 Columns</SelectItem>
+                <SelectItem value="3">3 Columns</SelectItem>
+                <SelectItem value="4">4 Columns</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Column Gap */}
+          <div className="space-y-2">
+            <Label htmlFor="column-gap">Column Gap</Label>
+            <Select value={content.column_gap} onValueChange={handleColumnGapChange}>
+              <SelectTrigger id="column-gap">
+                <SelectValue placeholder="Select gap" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">None</SelectItem>
+                <SelectItem value="sm">Small</SelectItem>
+                <SelectItem value="md">Medium</SelectItem>
+                <SelectItem value="lg">Large</SelectItem>
+                <SelectItem value="xl">Extra Large</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {/* Background Configuration */}
+        <div className="space-y-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+          <h4 className="text-md font-medium text-gray-900 dark:text-gray-100">Background</h4>
+          <BackgroundSelector
+            background={content.background || { type: 'none' }}
+            onChange={(newBackground) => {
+              onChange({
+                ...content,
+                background: newBackground,
+              });
+            }}
+          />
+        </div>
+      </>
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+// app/cms/blocks/components/SortableBlockItem.tsx
+"use client";
+
+import React from 'react';
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+import EditableBlock, { EditableBlockProps } from "./EditableBlock"; // Import the actual component and its props
+
+// interface SortableBlockItemProps extends EditableBlockProps {
+//   // No new props needed specifically for SortableBlockItem itself,
+//   // as it passes through all props to EditableBlock
+// }
+
+export function SortableBlockItem(props: EditableBlockProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: props.block.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 100 : 'auto', // Ensure dragging item is on top
+    opacity: isDragging ? 0.8 : 1,
+  };
+
+  // Pass the drag handle props (attributes and listeners) to the EditableBlock
+  // The EditableBlock component should then spread these onto its drag handle element.
+  // If EditableBlock doesn't have a specific handle, spread them on its root.
+  return (
+    <div ref={setNodeRef} style={style}>
+      {/*
+        Pass attributes and listeners to the element you want to be the drag handle.
+        If the whole block is draggable, pass it to the root of EditableBlock.
+        If there's a specific handle icon, pass it to that.
+        Here, we pass it as a prop, assuming EditableBlock will use it.
+      */}
+      <EditableBlock {...props} dragHandleProps={{...attributes, ...listeners}} />
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/blocks/editors/ButtonBlockEditor.tsx

@@ -0,0 +1,85 @@
+// app/cms/blocks/editors/ButtonBlockEditor.tsx
+"use client";
+
+import React from 'react'; // Added React import for JSX
+import { Label } from "@nextblock-cms/ui";
+import { Input } from "@nextblock-cms/ui";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@nextblock-cms/ui";
+import { BlockEditorProps } from '../components/BlockEditorModal';
+
+export type ButtonBlockContent = {
+    text?: string;
+    url?: string;
+    variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'link';
+    size?: 'default' | 'sm' | 'lg';
+};
+
+const buttonVariants: ButtonBlockContent['variant'][] = ['default', 'outline', 'secondary', 'ghost', 'link'];
+const buttonSizes: ButtonBlockContent['size'][] = ['default', 'sm', 'lg'];
+
+
+export default function ButtonBlockEditor({ content, onChange }: BlockEditorProps<Partial<ButtonBlockContent>>) {
+
+  const handleChange = (field: keyof ButtonBlockContent, value: string) => {
+    // Ensure that when variant or size is cleared, it's set to undefined or a valid default, not an empty string if your type doesn't allow it.
+    // However, the Select component's onValueChange will provide valid values from the list or an empty string if placeholder is re-selected (which shouldn't happen here).
+    onChange({ ...content, [field]: value });
+  };
+
+  return (
+    <div className="space-y-3 p-3 border-t mt-2">
+      <div>
+        <Label htmlFor="btn-text">Button Text</Label>
+        <Input
+          id="btn-text"
+          value={content.text || ""}
+          onChange={(e) => handleChange('text', e.target.value)}
+          placeholder="Learn More"
+          className="mt-1"
+        />
+      </div>
+      <div>
+        <Label htmlFor="btn-url">Button URL</Label>
+        <Input
+          id="btn-url"
+          value={content.url || ""}
+          onChange={(e) => handleChange('url', e.target.value)}
+          placeholder="/contact-us or https://example.com"
+          className="mt-1"
+        />
+      </div>
+      <div>
+        <Label htmlFor="btn-variant">Variant</Label>
+        <Select
+          value={content.variant || "default"}
+          onValueChange={(val: string) => handleChange('variant', val)}
+        >
+          <SelectTrigger id="btn-variant" className="mt-1">
+            <SelectValue placeholder="Select variant" />
+          </SelectTrigger>
+          <SelectContent>
+            {buttonVariants.filter((v): v is Exclude<ButtonBlockContent['variant'], undefined> => v !== undefined).map(v => (
+              <SelectItem key={v} value={v}>{v.charAt(0).toUpperCase() + v.slice(1)}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div>
+        <Label htmlFor="btn-size">Size</Label>
+        <Select
+          value={content.size || "default"}
+          onValueChange={(val: string) => handleChange('size', val)}
+        >
+          <SelectTrigger id="btn-size" className="mt-1">
+            <SelectValue placeholder="Select size" />
+          </SelectTrigger>
+          <SelectContent>
+            {buttonSizes.filter((s): s is Exclude<ButtonBlockContent['size'], undefined> => s !== undefined).map(s => (
+              <SelectItem key={s} value={s}>{s.toUpperCase()}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/blocks/editors/FormBlockEditor.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import React, { useState } from 'react';
+import { DndContext, closestCenter, DragEndEvent } from '@dnd-kit/core';
+import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical, PlusCircle, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
+import { Button } from '@nextblock-cms/ui';
+import { Input } from '@nextblock-cms/ui';
+import { Label } from '@nextblock-cms/ui';
+import { Checkbox } from '@nextblock-cms/ui';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nextblock-cms/ui';
+import { BlockEditorProps } from '@/app/cms/blocks/components/BlockEditorModal';
+import type { FormBlockContent, FormField, FormFieldOption } from '@/lib/blocks/blockRegistry';
+
+// Sub-component for a single editable form field in the editor
+const SortableFormField = ({ field, index, onUpdate, onDelete }: { field: FormField, index: number, onUpdate: (index: number, field: FormField) => void, onDelete: (index: number) => void }) => {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: field.temp_id });
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const handleFieldChange = (prop: keyof FormField, value: unknown) => {
+    onUpdate(index, { ...field, [prop]: value });
+  };
+
+  const handleOptionChange = (optionIndex: number, prop: keyof FormFieldOption, value: string) => {
+    const newOptions = [...(field.options || [])];
+    newOptions[optionIndex] = { ...newOptions[optionIndex], [prop]: value };
+    handleFieldChange('options', newOptions);
+  };
+
+  const addOption = () => {
+    const newOptions = [...(field.options || []), { label: `Option ${ (field.options?.length || 0) + 1}`, value: `option-${ (field.options?.length || 0) + 1}` }];
+    handleFieldChange('options', newOptions);
+  };
+
+  const removeOption = (optionIndex: number) => {
+    const newOptions = field.options?.filter((_, i) => i !== optionIndex);
+    handleFieldChange('options', newOptions);
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} className="p-3 border rounded bg-background shadow-sm">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="sm" {...attributes} {...listeners} className="cursor-grab p-1"><GripVertical className="h-4 w-4" /></Button>
+          <span className="font-medium text-sm">{field.label || `Field ${index + 1}`} ({field.field_type})</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="icon" onClick={() => setIsExpanded(!isExpanded)} className="h-8 w-8">{isExpanded ? <ChevronUp/> : <ChevronDown/>}</Button>
+          <Button variant="destructive" size="icon" onClick={() => onDelete(index)} className="h-8 w-8"><Trash2 className="h-4 w-4" /></Button>
+        </div>
+      </div>
+      {isExpanded && (
+        <div className="mt-4 space-y-4 p-3 border-t">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label>Field Type</Label>
+              <Select value={field.field_type} onValueChange={(value) => handleFieldChange('field_type', value)}>
+                <SelectTrigger><SelectValue/></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="text">Text</SelectItem>
+                  <SelectItem value="email">Email</SelectItem>
+                  <SelectItem value="textarea">Text Area</SelectItem>
+                  <SelectItem value="select">Select</SelectItem>
+                  <SelectItem value="radio">Radio Buttons</SelectItem>
+                  <SelectItem value="checkbox">Checkbox</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+             <div>
+                <Label>Label</Label>
+                <Input value={field.label} onChange={(e) => handleFieldChange('label', e.target.value)} />
+             </div>
+          </div>
+           <div>
+              <Label>Placeholder</Label>
+              <Input value={field.placeholder || ''} onChange={(e) => handleFieldChange('placeholder', e.target.value)} />
+           </div>
+          <div className="flex items-center gap-2">
+            <Checkbox id={`required-${field.temp_id}`} checked={field.is_required} onCheckedChange={(checked) => handleFieldChange('is_required', checked)} />
+            <Label htmlFor={`required-${field.temp_id}`}>Required</Label>
+          </div>
+          {(field.field_type === 'select' || field.field_type === 'radio') && (
+            <div className="space-y-2">
+              <Label>Options</Label>
+              {field.options?.map((option, optIndex) => (
+                <div key={optIndex} className="flex items-center gap-2">
+                  <Input value={option.label} placeholder="Label" onChange={(e) => handleOptionChange(optIndex, 'label', e.target.value)} />
+                  <Input value={option.value} placeholder="Value" onChange={(e) => handleOptionChange(optIndex, 'value', e.target.value)} />
+                  <Button variant="ghost" size="icon" onClick={() => removeOption(optIndex)}><Trash2 className="h-4 w-4" /></Button>
+                </div>
+              ))}
+              <Button variant="outline" size="sm" onClick={addOption}><PlusCircle className="h-4 w-4 mr-2" />Add Option</Button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default function FormBlockEditor({ content, onChange }: BlockEditorProps<Partial<FormBlockContent>>) {
+  const [fields, setFields] = useState<FormField[]>(content.fields || []);
+
+  const handleMainSettingChange = (prop: keyof FormBlockContent, value: string) => {
+    onChange({ ...content, fields, [prop]: value });
+  };
+
+  const addNewField = () => {
+    const newField: FormField = {
+      temp_id: `field-${Date.now()}`,
+      field_type: 'text',
+      label: `New Field ${fields.length + 1}`,
+      is_required: false,
+    };
+    const newFields = [...fields, newField];
+    setFields(newFields);
+    onChange({ ...content, fields: newFields });
+  };
+
+  const updateField = (index: number, updatedField: FormField) => {
+    const newFields = [...fields];
+    newFields[index] = updatedField;
+    setFields(newFields);
+    onChange({ ...content, fields: newFields });
+  };
+
+  const deleteField = (index: number) => {
+    const newFields = fields.filter((_, i) => i !== index);
+    setFields(newFields);
+    onChange({ ...content, fields: newFields });
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = fields.findIndex(f => f.temp_id === active.id);
+      const newIndex = fields.findIndex(f => f.temp_id === over.id);
+      const newFields = arrayMove(fields, oldIndex, newIndex);
+      setFields(newFields);
+      onChange({ ...content, fields: newFields });
+    }
+  };
+
+  return (
+    <div className="space-y-6 p-4 border-t mt-2">
+        <h3 className="text-lg font-medium">Form Settings</h3>
+        <div className="space-y-4 p-3 border rounded">
+             <div>
+                <Label>Recipient Email</Label>
+                <Input value={content.recipient_email || ''} onChange={(e) => handleMainSettingChange('recipient_email', e.target.value)} placeholder="submissions@example.com"/>
+                <p className="text-xs text-muted-foreground mt-1">The address where form submissions will be sent.</p>
+             </div>
+              <div>
+                <Label>Submit Button Text</Label>
+                <Input value={content.submit_button_text || ''} onChange={(e) => handleMainSettingChange('submit_button_text', e.target.value)} />
+             </div>
+              <div>
+                <Label>Success Message</Label>
+                <Input value={content.success_message || ''} onChange={(e) => handleMainSettingChange('success_message', e.target.value)} />
+             </div>
+        </div>
+
+        <h3 className="text-lg font-medium">Form Fields</h3>
+         <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+            <SortableContext items={fields.map(f => f.temp_id)} strategy={verticalListSortingStrategy}>
+              <div className="space-y-3">
+                {fields.map((field, index) => (
+                  <SortableFormField key={field.temp_id} index={index} field={field} onUpdate={updateField} onDelete={deleteField} />
+                ))}
+              </div>
+            </SortableContext>
+         </DndContext>
+        <Button variant="outline" onClick={addNewField}><PlusCircle className="h-4 w-4 mr-2" />Add Field</Button>
+    </div>
+  );
+}