create-nextblock 0.2.45 → 0.2.47

package/templates/nextblock-template/app/cms/settings/languages/page.tsx

@@ -12,6 +12,7 @@ import {
   TableRow,
 } from "@nextblock-cms/ui";
 import { Badge } from "@nextblock-cms/ui";
+import { Alert, AlertTitle, AlertDescription } from "@nextblock-cms/ui";
 import { MoreHorizontal, PlusCircle, Edit3, Languages as LanguagesIcon, ShieldAlert } from "lucide-react";
 import {
   DropdownMenu,
@@ -66,9 +67,12 @@ export default async function CmsLanguagesListPage() {
       </div>
 
        {successMessage && (
-        <div className="mb-4 p-3 rounded-md text-sm bg-green-100 text-green-700 border border-green-200">
-          {decodeURIComponent(successMessage)}
-        </div>
+        <Alert variant="success" className="mb-4">
+          <AlertTitle>Success</AlertTitle>
+          <AlertDescription>
+            {decodeURIComponent(successMessage)}
+          </AlertDescription>
+        </Alert>
       )}
 
       {languages.length === 0 ? (
@@ -140,16 +144,14 @@ export default async function CmsLanguagesListPage() {
           </Table>
         </div>
       )}
-      <div className="mt-6 p-4 border border-amber-300 bg-amber-50 dark:bg-amber-900/30 rounded-lg">
-        <div className="flex items-start">
-            <ShieldAlert className="h-5 w-5 text-amber-600 dark:text-amber-400 mr-3 flex-shrink-0 mt-0.5" />
-            <div>
-                <h4 className="text-sm font-semibold text-amber-700 dark:text-amber-300">Important Note on Deleting Languages</h4>
-                <p className="text-xs text-amber-600 dark:text-amber-400 mt-1">
-                Deleting a language is a destructive action. All content (pages, posts, blocks, navigation items) specifically associated with that language will be permanently deleted due to database cascade rules. Please ensure this is intended before proceeding. You cannot delete the current default language if it is the only one.
-                </p>
-            </div>
-        </div>
+      <div className="mt-6">
+        <Alert variant="warning">
+          <ShieldAlert className="h-4 w-4" />
+          <AlertTitle>Important Note on Deleting Languages</AlertTitle>
+          <AlertDescription>
+            Deleting a language is a destructive action. All content (pages, posts, blocks, navigation items) specifically associated with that language will be permanently deleted due to database cascade rules. Please ensure this is intended before proceeding. You cannot delete the current default language if it is the only one.
+          </AlertDescription>
+        </Alert>
       </div>
     </div>
   );

package/templates/nextblock-template/app/cms/settings/logos/actions.ts

@@ -51,12 +51,11 @@ export async function deleteLogo(id: string) {
 
   if (error) {
     console.error('Error deleting logo:', error)
-    // Optionally, handle the error more gracefully
-    // redirect('/error?message=Could not delete logo')
-    return
+    return { success: false, error: error.message }
   }
 
   revalidatePath('/cms/settings/logos')
+  return { success: true }
 }
 
 export async function getLogos() {

package/templates/nextblock-template/app/cms/settings/logos/components/DeleteLogoButton.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { DropdownMenuItem } from "@nextblock-cms/ui";
+import { Trash2 } from "lucide-react";
+import { deleteLogo } from "../actions";
+import { useTransition, useState } from 'react';
+import { ConfirmationModal } from "@/app/cms/components/ConfirmationModal";
+import { toast } from 'react-hot-toast';
+
+interface DeleteLogoButtonProps {
+  logoId: string;
+}
+
+export default function DeleteLogoButton({ logoId }: DeleteLogoButtonProps) {
+  const [isPending, startTransition] = useTransition();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleDeleteConfirm = () => {
+    startTransition(async () => {
+      const result = await deleteLogo(logoId);
+      if (result?.error) {
+        toast.error(`Error: ${result.error}`);
+      } else {
+          toast.success("Logo deleted successfully");
+      }
+      setIsModalOpen(false);
+    });
+  };
+
+  return (
+    <>
+      <DropdownMenuItem
+        className="text-red-600 hover:!text-red-600 cursor-pointer hover:!bg-red-50 dark:hover:!bg-red-700/20"
+        onSelect={(e) => e.preventDefault()}
+        onClick={() => !isPending && setIsModalOpen(true)}
+        disabled={isPending}
+      >
+        <Trash2 className="mr-2 h-4 w-4" />
+        {isPending ? "Deleting..." : "Delete"}
+      </DropdownMenuItem>
+      <ConfirmationModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onConfirm={handleDeleteConfirm}
+        title="Delete Logo?"
+        description="This will permanently delete the logo. This action cannot be undone."
+      />
+    </>
+  );
+}

package/templates/nextblock-template/app/cms/settings/logos/components/LogoForm.tsx

@@ -6,9 +6,11 @@ import Image from 'next/image'
 import { Input } from '@nextblock-cms/ui'
 import { Label } from '@nextblock-cms/ui'
 import { Button } from '@nextblock-cms/ui'
+import { Alert, AlertDescription, Spinner } from '@nextblock-cms/ui'
 import type { Database } from '@nextblock-cms/db'
 import { ImageIcon, X as XIcon } from 'lucide-react'
 import MediaPickerDialog from '@/app/cms/media/components/MediaPickerDialog'
+import { useHotkeys } from '@/hooks/use-hotkeys'
 type Media = Database['public']['Tables']['media']['Row'];
 const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || ''
 
@@ -96,6 +98,8 @@ export default function LogoForm({ logo, action }: LogoFormProps) {
     })
   }
 
+  useHotkeys('ctrl+s', handleSave, [handleSave]);
+
   return (
     <div className="space-y-6">
       <div>
@@ -162,10 +166,18 @@ export default function LogoForm({ logo, action }: LogoFormProps) {
           onClick={handleSave}
           disabled={isPending || !logoDetails.name || !logoDetails.media_id}
         >
-          {isPending ? 'Saving...' : `${logo ? 'Update' : 'Create'} Logo`}
+          {isPending ? (
+            <>
+              <Spinner className="mr-2 h-4 w-4" /> Saving...
+            </>
+          ) : (
+            `${logo ? 'Update' : 'Create'} Logo`
+          )}
         </Button>
         {formError && (
-          <div className="text-red-500 text-sm">{formError}</div>
+          <Alert variant="destructive" className="py-2 px-4 w-auto inline-flex items-center">
+             <AlertDescription>{formError}</AlertDescription>
+          </Alert>
         )}
       </div>
     </div>

package/templates/nextblock-template/app/cms/settings/logos/page.tsx

@@ -17,8 +17,9 @@ import {
   DropdownMenuTrigger,
   DropdownMenuSeparator,
 } from '@nextblock-cms/ui'
-import { deleteLogo, getLogos } from './actions'
+import { getLogos } from './actions'
 import MediaImage from '@/app/cms/media/components/MediaImage'
+import DeleteLogoButton from './components/DeleteLogoButton'
 
 const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || ''
 
@@ -99,11 +100,7 @@ export default async function CmsLogosListPage() {
                           </Link>
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
-                        <form action={deleteLogo.bind(null, logo.id)}>
-                          <button type="submit" className="w-full text-left px-2 py-1.5 text-sm text-red-500">
-                            Delete
-                          </button>
-                        </form>
+                        <DeleteLogoButton logoId={logo.id} />
                       </DropdownMenuContent>
                     </DropdownMenu>
                   </TableCell>

package/templates/nextblock-template/app/cms/users/components/UserForm.tsx

@@ -1,9 +1,12 @@
 // app/cms/users/components/UserForm.tsx
 "use client";
 
-import { useEffect, useState, useTransition } from "react";
+import { useEffect, useState, useTransition, useRef } from "react";
+import { useHotkeys } from "@/hooks/use-hotkeys";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "@nextblock-cms/ui";
+import { Spinner, Alert, AlertDescription, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@nextblock-cms/ui";
+import { Info } from "lucide-react";
 import { Input } from "@nextblock-cms/ui";
 import { Label } from "@nextblock-cms/ui";
 import {
@@ -85,18 +88,15 @@ export default function UserForm({
 
   const userRoles: UserRole[] = ['USER', 'WRITER', 'ADMIN'];
 
+  const formRef = useRef<HTMLFormElement>(null);
+  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
+
   return (
-    <form onSubmit={handleSubmit} className="space-y-6">
+    <form ref={formRef} onSubmit={handleSubmit} className="space-y-6">
       {formMessage && (
-        <div
-          className={`p-3 rounded-md text-sm ${
-            formMessage.type === 'success'
-              ? 'bg-green-100 text-green-700 border border-green-200'
-              : 'bg-red-100 text-red-700 border border-red-200'
-          }`}
-        >
-          {formMessage.text}
-        </div>
+        <Alert variant={formMessage.type === 'success' ? 'success' : 'destructive'}>
+           <AlertDescription>{formMessage.text}</AlertDescription>
+        </Alert>
       )}
       <div>
         <Label htmlFor="email">Email (Read-only)</Label>
@@ -114,7 +114,21 @@ export default function UserForm({
       </div>
 
       <div>
-        <Label htmlFor="role">Role</Label>
+        <div className="flex items-center gap-2 mb-2">
+          <Label htmlFor="role">Role</Label>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Info className="h-4 w-4 text-muted-foreground opacity-70 cursor-pointer" />
+              </TooltipTrigger>
+              <TooltipContent className="max-w-xs">
+                <p><strong>ADMIN:</strong> Full access to settings and content.</p>
+                <p><strong>WRITER:</strong> Can create/edit content, no settings access.</p>
+                <p><strong>USER:</strong> Read-only access.</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
         <Select name="role" value={role} onValueChange={(value) => setRole(value as UserRole)} required>
           <SelectTrigger className="mt-1"><SelectValue placeholder="Select role" /></SelectTrigger>
           <SelectContent>
@@ -130,7 +144,13 @@ export default function UserForm({
           Cancel
         </Button>
         <Button type="submit" disabled={isPending || authLoading}>
-          {isPending ? "Saving..." : actionButtonText}
+          {isPending ? (
+            <>
+              <Spinner className="mr-2 h-4 w-4" /> Saving...
+            </>
+          ) : (
+            actionButtonText
+          )}
         </Button>
       </div>
     </form>

package/templates/nextblock-template/components/BlockRenderer.tsx

@@ -1,4 +1,4 @@
-// components/BlockRenderer.tsx
+ // components/BlockRenderer.tsx
 import React from "react";
 import dynamic from "next/dynamic";
 import type { Database } from "@nextblock-cms/db";
@@ -46,6 +46,19 @@ const DynamicBlockRenderer: React.FC<DynamicBlockRendererProps> = ({
     return <ClientTextBlockRenderer content={block.content as any} languageId={languageId} />;
   }
 
+  // Check if the block definition provides a direct component (e.g., from SDK plugins)
+  if (blockDefinition.RendererComponent) {
+    const RendererComponent = blockDefinition.RendererComponent;
+    return (
+      <RendererComponent
+        content={block.content}
+        languageId={languageId}
+        isInEditor={false} // Assuming public view
+        className="my-4"
+      />
+    );
+  }
+
   // Create dynamic component with proper SSR handling for other blocks
   const RendererComponent = dynamic(
     () => import(`./blocks/renderers/${blockDefinition.rendererComponentFilename}`),

package/templates/nextblock-template/components/blocks/TestimonialBlock.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { z } from 'zod';
+import { BlockConfig, BlockProps, BlockEditorProps } from '@nextblock-cms/sdk';
+import { Card, CardContent, Avatar, AvatarImage, AvatarFallback, Input, Label, Textarea } from '@nextblock-cms/ui';
+import { MessageSquareQuote } from 'lucide-react';
+
+// 1. Define the Schema
+export const TestimonialSchema = z.object({
+  quote: z.string().min(1).describe('The testimonial text'),
+  author_name: z.string().min(1).describe('The person who gave the testimonial'),
+  author_title: z.string().optional().describe('Job title or company'),
+  image_url: z.string().url().optional().or(z.literal('')).describe('Author profile image URL'),
+});
+
+// 2. Derive the Content Type
+export type TestimonialBlockContent = z.infer<typeof TestimonialSchema>;
+
+// 3. Create the Renderer Component
+const TestimonialBlockRenderer: React.FC<BlockProps<typeof TestimonialSchema>> = ({ content }) => {
+  return (
+    <div className="container m-8">
+    <Card className="h-full">
+      <CardContent className="pt-6 flex flex-col gap-4 h-full">
+        <MessageSquareQuote className="w-8 h-8 text-primary/40" />
+        
+        <blockquote className="flex-grow text-lg italic text-muted-foreground">
+          "{content.quote}"
+        </blockquote>
+
+        <div className="flex items-center gap-3 mt-4">
+          <Avatar>
+            {content.image_url && <AvatarImage src={content.image_url} alt={content.author_name} />}
+            <AvatarFallback>{content.author_name.slice(0, 2).toUpperCase()}</AvatarFallback>
+          </Avatar>
+          
+          <div>
+            <div className="font-semibold">{content.author_name}</div>
+            {content.author_title && (
+              <div className="text-sm text-muted-foreground">{content.author_title}</div>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+    </div>
+  );
+};
+
+// 4. Create the Editor Component
+const TestimonialBlockEditor: React.FC<BlockEditorProps<typeof TestimonialSchema>> = ({ content, onChange }) => {
+  const handleChange = (key: keyof TestimonialBlockContent, value: string) => {
+    onChange({
+      ...content,
+      [key]: value,
+    });
+  };
+
+  return (
+    <div className="space-y-4 p-1">
+      <div className="space-y-2">
+        <Label htmlFor="quote">Quote</Label>
+        <Textarea
+          id="quote"
+          value={content.quote}
+          onChange={(e) => handleChange('quote', e.target.value)}
+          placeholder="Enter the testimonial quote..."
+          rows={4}
+        />
+      </div>
+      
+      <div className="space-y-2">
+        <Label htmlFor="author_name">Author Name</Label>
+        <Input
+          id="author_name"
+          value={content.author_name}
+          onChange={(e) => handleChange('author_name', e.target.value)}
+          placeholder="John Doe"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="author_title">Author Title (Optional)</Label>
+        <Input
+          id="author_title"
+          value={content.author_title || ''}
+          onChange={(e) => handleChange('author_title', e.target.value)}
+          placeholder="CEO, Company Inc."
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="image_url">Author Image URL (Optional)</Label>
+        <div className="flex gap-2">
+            <Input
+            id="image_url"
+            value={content.image_url || ''}
+            onChange={(e) => handleChange('image_url', e.target.value)}
+            placeholder="https://example.com/image.jpg"
+            />
+        </div>
+        {content.image_url && (
+            <div className="mt-2 w-16 h-16 relative rounded-full overflow-hidden border">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={content.image_url} alt="Preview" className="w-full h-full object-cover" />
+            </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// 5. Export the Block Configuration
+export const TestimonialBlockConfig: BlockConfig<typeof TestimonialSchema> = {
+  type: 'testimonial',
+  label: 'Testimonial',
+  icon: MessageSquareQuote,
+  schema: TestimonialSchema,
+  initialContent: {
+    quote: "This product changed my life! The workflow is so much smoother now.",
+    author_name: "Jane Doe",
+    author_title: "CEO, TechCorp",
+    image_url: "",
+  },
+  RendererComponent: TestimonialBlockRenderer,
+  EditorComponent: TestimonialBlockEditor,
+};

package/templates/nextblock-template/docs/How to Create a Custom Block.md

@@ -0,0 +1,149 @@
+# How to Create a Custom Block with the NextBlock SDK
+
+Custom blocks allow you to extend the functionality of NextBlock CMS while ensuring type safety and seamless integration. The `@nextblock-cms/sdk` package provides the necessary tools and interfaces.
+
+## Step 1: Define the Schema (Zod)
+
+The schema defines the structure of your block's content. It is used for validation and to generate TypeScript types.
+
+```typescript
+import { z } from 'zod';
+
+export const MyBlockSchema = z.object({
+  title: z.string().min(1).describe('The main title'),
+  description: z.string().optional().describe('Optional description'),
+  isActive: z.boolean().default(true),
+});
+
+// Derive the content type from the schema
+export type MyBlockContent = z.infer<typeof MyBlockSchema>;
+```
+
+## Step 2: Define the Components (React/TS)
+
+Create the components that will render your block. Use the `BlockProps` interface to ensure your component receives the correct data.
+
+```typescript
+import React from 'react';
+import { BlockProps } from '@nextblock-cms/sdk';
+
+// The Renderer Component (Public View)
+const MyBlockRenderer: React.FC<BlockProps<typeof MyBlockSchema>> = ({ content }) => {
+  return (
+    <div className="my-block">
+      <h2>{content.title}</h2>
+      {content.description && <p>{content.description}</p>}
+    </div>
+  );
+};
+
+// The Editor Component (CMS View)
+// Currently, the CMS uses auto-generated forms based on the schema,
+// but you can provide a custom preview or editor here.
+const MyBlockEditor: React.FC<BlockProps<typeof MyBlockSchema>> = ({ content }) => {
+  return (
+    <div className="p-4 border">
+      Preview: {content.title}
+    </div>
+  );
+};
+```
+
+## Step 3: Create the Configuration
+
+Combine everything into a `BlockConfig` object. This object tells the CMS how to handle your block.
+
+```typescript
+import { BlockConfig } from '@nextblock-cms/sdk';
+import { Star } from 'lucide-react'; // Choose an icon
+
+export const MyBlockConfig: BlockConfig<typeof MyBlockSchema> = {
+  type: 'my_block', // Unique identifier
+  label: 'My Custom Block',
+  icon: Star,
+  schema: MyBlockSchema,
+  initialContent: {
+    title: 'Default Title',
+    isActive: true,
+  },
+  RendererComponent: MyBlockRenderer,
+  EditorComponent: MyBlockEditor,
+};
+```
+
+## Step 4: Building the Editor Component
+
+The Editor Component is responsible for the editing experience within the CMS. It receives `BlockEditorProps`, which includes the current content and an `onChange` handler.
+
+You should use the shared UI components from `@nextblock-cms/ui` (like `Input`, `Textarea`, `Button`, `Label`) to ensure a consistent look and feel with the rest of the Admin UI.
+
+```typescript
+import React from 'react';
+import { BlockEditorProps } from '@nextblock-cms/sdk';
+import { Input, Label, Textarea } from '@nextblock-cms/ui';
+
+const MyBlockEditor: React.FC<BlockEditorProps<typeof MyBlockSchema>> = ({ content, onChange }) => {
+
+  const handleChange = (key: keyof typeof content, value: any) => {
+    onChange({
+      ...content,
+      [key]: value,
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="title">Title</Label>
+        <Input
+          id="title"
+          value={content.title}
+          onChange={(e) => handleChange('title', e.target.value)}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="description">Description</Label>
+        <Textarea
+          id="description"
+          value={content.description || ''}
+          onChange={(e) => handleChange('description', e.target.value)}
+        />
+      </div>
+    </div>
+  );
+};
+```
+
+## Step 5: Register the Block
+
+To make your block available in the CMS, import it into the main registry file: `apps/nextblock/lib/blocks/blockRegistry.ts`.
+
+```typescript
+// apps/nextblock/lib/blocks/blockRegistry.ts
+import { MyBlockConfig } from '../../components/blocks/MyBlock';
+
+export const blockRegistry: Record<BlockType, BlockDefinition> = {
+  // ... existing blocks
+  [MyBlockConfig.type]: {
+    ...MyBlockConfig,
+    // ... any additional internal config if needed
+  } as BlockDefinition<MyBlockContent>,
+};
+```
+
+Once registered, your block will appear in the CMS block picker and render on the frontend.
+
+## Advanced Topic: Schema Evolution and Versioning
+
+Modifying a Zod schema after a block is in production can be dangerous. If you change the shape of the data (e.g., rename a field, remove a required field), existing blocks in the database may fail to validate or render, causing runtime errors.
+
+### Recommended Strategy: Versioning
+
+Instead of modifying the existing schema, create a new version of the block.
+
+1.  **Duplicate the Block**: Create a new block type, e.g., `my_block_v2`, with the updated schema and renderer.
+2.  **Register the New Block**: Add it to the registry. You can hide the old `my_block` from the picker if you want to prevent new usage, but keep the definition so existing blocks continue to work.
+3.  **Migration (Optional)**: You can write a utility to transform `my_block` data to `my_block_v2` format if you want to migrate content programmatically.
+
+While V1 of the SDK does not enforce a strict versioning system, treating your block schemas as immutable contracts is a best practice for stability.

package/templates/nextblock-template/hooks/use-hotkeys.ts

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+
+/**
+ * Hook to handle keyboard shortcuts.
+ * Currently optimized for 'ctrl+s' / 'meta+s'.
+ * 
+ * @param key The key combination to listen for (e.g. 'ctrl+s')
+ * @param callback The function to call when the key combination is pressed
+ * @param deps Dependencies array for the effect
+ */
+export function useHotkeys(key: string, callback: (event: KeyboardEvent) => void, deps: any[] = []) {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const isCtrl = event.ctrlKey || event.metaKey; // cmd on mac, ctrl on windows
+      const keyLower = event.key.toLowerCase();
+
+      // Check for ctrl+s / cmd+s
+      if ((key === 'ctrl+s' || key === 'meta+s') && isCtrl && keyLower === 's') {
+        event.preventDefault();
+        callback(event);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [key, ...deps]); // callback should be stable or included in deps if handled by caller
+}