create-nextblock 0.2.46 → 0.2.48

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/blocks/renderers/ButtonBlockRenderer.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 import Link from "next/link";
+import { Button } from "@nextblock-cms/ui";
+import { cn } from "@nextblock-cms/utils";
+
 export type ButtonBlockContent = {
     text?: string;
     url?: string;
     variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'link';
-    size?: 'default' | 'sm' | 'lg';
+    size?: 'default' | 'sm' | 'lg' | 'full';
+    position?: 'left' | 'center' | 'right';
 };
 
 interface ButtonBlockRendererProps {
@@ -14,25 +18,7 @@ interface ButtonBlockRendererProps {
 
 const ButtonBlockRenderer: React.FC<ButtonBlockRendererProps> = ({
   content,
-  // languageId, // Unused
 }) => {
-  const baseClasses =
-    "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
-  const variantClasses: Record<string, string> = {
-    default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-    outline:
-      "border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-    secondary:
-      "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-    ghost: "hover:bg-accent hover:text-accent-foreground",
-    link: "text-primary underline-offset-4 hover:underline",
-  };
-  const sizeClasses: Record<string, string> = {
-    default: "h-10 px-4 py-2",
-    sm: "h-9 rounded-md px-3",
-    lg: "h-11 rounded-md px-8",
-  };
-
   const isExternal =
     content.url?.startsWith("http") ||
     content.url?.startsWith("mailto:") ||
@@ -42,48 +28,54 @@ const ButtonBlockRenderer: React.FC<ButtonBlockRendererProps> = ({
   const buttonText = content.text || "Button";
   const buttonVariant = content.variant || "default";
   const buttonSize = content.size || "default";
+  const buttonPosition = content.position || "left";
+
+  const alignmentClasses = {
+      left: "justify-start text-left",
+      center: "justify-center text-center",
+      right: "justify-end text-right",
+  };
 
   return (
-    <div className="my-6 text-center">
+    <div className={cn("my-6 flex w-full", alignmentClasses[buttonPosition])}>
       {/* Case 1: Internal link (not external, not anchor, has URL) */}
       {!isExternal && !isAnchor && !!content.url ? (
-        <Link
-          href={content.url}
-          className={[
-            baseClasses,
-            variantClasses[buttonVariant],
-            sizeClasses[buttonSize],
-          ].join(" ")}
+        <Button
+            asChild
+            variant={buttonVariant}
+            size={buttonSize}
+            className={cn(content.variant === 'outline' && "text-foreground")}
         >
-          {buttonText}
-        </Link>
+            <Link href={content.url}>
+                {buttonText}
+            </Link>
+        </Button>
       ) : /* Case 2: External or Anchor link (has URL) */
       (isExternal || isAnchor) && !!content.url ? (
-        <a
-          href={content.url} // content.url is guaranteed by the condition
-          target={isExternal ? "_blank" : undefined}
-          rel={isExternal ? "noopener noreferrer" : undefined}
-          className={[
-            baseClasses,
-            variantClasses[buttonVariant],
-            sizeClasses[buttonSize],
-          ].join(" ")}
+        <Button
+            asChild
+            variant={buttonVariant}
+            size={buttonSize}
+            className={cn(content.variant === 'outline' && "text-foreground")}
         >
-          {buttonText}
-        </a>
+            <a
+            href={content.url}
+            target={isExternal ? "_blank" : undefined}
+            rel={isExternal ? "noopener noreferrer" : undefined}
+            >
+            {buttonText}
+            </a>
+        </Button>
       ) : (
         /* Case 3: No URL or other edge cases - render a plain or disabled button */
-        <button
-          type="button"
-          className={[
-            baseClasses,
-            variantClasses[buttonVariant],
-            sizeClasses[buttonSize],
-          ].join(" ")}
-          disabled={!content.url}
+        <Button
+            variant={buttonVariant}
+            size={buttonSize}
+            disabled={!content.url}
+            className={cn(content.variant === 'outline' && "text-foreground")}
         >
           {buttonText}
-        </button>
+        </Button>
       )}
     </div>
   );

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
+}

package/templates/nextblock-template/lib/blocks/blockRegistry.ts

@@ -44,7 +44,8 @@ export const ButtonBlockSchema = z.object({
   text: z.string().describe('The text displayed on the button'),
   url: z.string().describe('The URL the button links to'),
   variant: z.enum(['default', 'outline', 'secondary', 'ghost', 'link']).optional().describe('Visual style variant'),
-  size: z.enum(['default', 'sm', 'lg']).optional().describe('Size of the button'),
+  size: z.enum(['default', 'sm', 'lg', 'full']).optional().describe('Size of the button'),
+  position: z.enum(['left', 'center', 'right']).optional().describe('Button alignment'),
 });
 export type ButtonBlockContent = z.infer<typeof ButtonBlockSchema>;
 
@@ -281,7 +282,7 @@ export const blockRegistry: Record<BlockType, BlockDefinition> = {
     type: "button",
     label: "Button",
     icon: "SquareMousePointer",
-    initialContent: { text: "Click Me", url: "#", variant: "default", size: "default" } as ButtonBlockContent,
+    initialContent: { text: "Click Me", url: "#", variant: "default", size: "default", position: "left" } as ButtonBlockContent,
     editorComponentFilename: "ButtonBlockEditor.tsx",
     rendererComponentFilename: "ButtonBlockRenderer.tsx",
     schema: ButtonBlockSchema,

package/templates/nextblock-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextblock-cms/template",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "private": true,
   "scripts": {
     "dev": "next dev",