create-nextblock 0.0.1

package/templates/nextblock-template/components/blocks/renderers/ButtonBlockRenderer.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import Link from "next/link";
+export type ButtonBlockContent = {
+    text?: string;
+    url?: string;
+    variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'link';
+    size?: 'default' | 'sm' | 'lg';
+};
+
+interface ButtonBlockRendererProps {
+  content: ButtonBlockContent;
+  languageId: number; // This prop seems unused
+}
+
+const ButtonBlockRenderer: React.FC<ButtonBlockRendererProps> = ({
+  content,
+  // languageId, // Unused
+}) => {
+  const baseClasses =
+    "inline-flex items-center justify-center rounded-md border 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:") ||
+    content.url?.startsWith("tel:");
+  const isAnchor = content.url?.startsWith("#");
+
+  const buttonText = content.text || "Button";
+  const buttonVariant = content.variant || "default";
+  const buttonSize = content.size || "default";
+
+  return (
+    <div className="my-6 text-center">
+      {/* 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(" ")}
+        >
+          {buttonText}
+        </Link>
+      ) : /* 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(" ")}
+        >
+          {buttonText}
+        </a>
+      ) : (
+        /* 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}
+        >
+          {buttonText}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ButtonBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/ClientTextBlockRenderer.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import React from "react";
+import parse, { HTMLReactParserOptions, Element } from 'html-react-parser';
+import AlertWidgetRenderer from "./inline/AlertWidgetRenderer";
+import CtaWidgetRenderer from "./inline/CtaWidgetRenderer";
+import type { TextBlockContent } from "./TextBlockRenderer";
+
+interface ClientTextBlockRendererProps {
+  content: TextBlockContent;
+  languageId: number;
+}
+
+const ClientTextBlockRenderer: React.FC<ClientTextBlockRendererProps> = ({ content, languageId }) => {
+  void languageId;
+  const options: HTMLReactParserOptions = {
+    replace: (domNode) => {
+      if (domNode instanceof Element && domNode.attribs) {
+        if (domNode.attribs['data-alert-widget'] !== undefined) {
+          const {
+            'data-type': type,
+            'data-title': title,
+            'data-message': message,
+            'data-align': align,
+            'data-size': size,
+            'data-text-align': textAlign,
+          } = domNode.attribs;
+          return (
+            <AlertWidgetRenderer
+              type={type as any}
+              title={title}
+              message={message}
+              align={align as any}
+              size={size as any}
+              textAlign={textAlign as any}
+            />
+          );
+        }
+
+        if (domNode.attribs['data-cta-widget'] !== undefined) {
+          const {
+            'data-text': text,
+            'data-url': url,
+            'data-style': style,
+            'data-size': size,
+            'data-text-align': textAlign,
+          } = domNode.attribs;
+          return (
+            <CtaWidgetRenderer
+              text={text}
+              url={url}
+              style={style as any}
+              size={size as any}
+              textAlign={textAlign as any}
+            />
+          );
+        }
+      }
+    },
+  };
+
+  return (
+    <div className="my-4 prose dark:prose-invert container mx-auto">
+      {parse(content.html_content || "", options)}
+    </div>
+  );
+};
+
+export default ClientTextBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/FormBlockRenderer.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React, { useActionState } from 'react';
+import { useFormStatus } from 'react-dom';
+import { handleFormSubmission } from '@/app/actions/formActions';
+import type { FormBlockContent, FormField } from '@/lib/blocks/blockRegistry';
+import { Input } from '@nextblock-cms/ui';
+import { Textarea } from '@nextblock-cms/ui';
+import { Label } from '@nextblock-cms/ui';
+import { Button } from '@nextblock-cms/ui';
+import { Checkbox } from '@nextblock-cms/ui';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nextblock-cms/ui';
+
+interface FormBlockRendererProps {
+  content: FormBlockContent;
+  languageId: number;
+}
+
+function SubmitButton({ text }: { text: string }) {
+  const { pending } = useFormStatus();
+  return <Button type="submit" disabled={pending}>{pending ? 'Submitting...' : text}</Button>;
+}
+
+const FormBlockRenderer: React.FC<FormBlockRendererProps> = ({ content }) => {
+  const [state, formAction] = useActionState(handleFormSubmission.bind(null, content.recipient_email), {
+    success: false,
+    message: '',
+  });
+
+  if (state.success) {
+    return <div className="p-4 rounded-md bg-green-100 text-green-800">{content.success_message}</div>;
+  }
+
+  return (
+    <form action={formAction} className="space-y-4 my-6 container mx-auto">
+      {content.fields.map((field: FormField) => (
+        <div key={field.temp_id} className="space-y-2">
+          <Label htmlFor={field.temp_id}>
+            {field.label} {field.is_required && <span className="text-red-500">*</span>}
+          </Label>
+          {renderField(field)}
+        </div>
+      ))}
+      {state.message && !state.success && (
+          <p className="text-sm text-red-600">{state.message}</p>
+      )}
+      <SubmitButton text={content.submit_button_text} />
+    </form>
+  );
+};
+
+const renderField = (field: FormField) => {
+    const commonProps = {
+        id: field.temp_id,
+        name: field.label.toLowerCase().replace(/\s+/g, '_'),
+        placeholder: field.placeholder || '',
+        required: field.is_required,
+    };
+
+    switch (field.field_type) {
+        case 'textarea':
+            return <Textarea {...commonProps} />;
+        case 'select':
+            return (
+                <Select name={commonProps.name} required={field.is_required}>
+                    <SelectTrigger id={commonProps.id}><SelectValue placeholder={field.placeholder || 'Select an option'} /></SelectTrigger>
+                    <SelectContent>
+                        {field.options?.map(opt => <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>)}
+                    </SelectContent>
+                </Select>
+            );
+        case 'radio':
+            return (
+                <div className="space-y-2">
+                    {field.options?.map(opt => (
+                        <div key={opt.value} className="flex items-center gap-2">
+                            <input type="radio" id={`${commonProps.id}-${opt.value}`} name={commonProps.name} value={opt.value} required={field.is_required} className="h-4 w-4"/>
+                            <Label htmlFor={`${commonProps.id}-${opt.value}`}>{opt.label}</Label>
+                        </div>
+                    ))}
+                </div>
+            );
+        case 'checkbox':
+             return (
+                <div className="flex items-center gap-2">
+                    <Checkbox id={commonProps.id} name={commonProps.name} required={field.is_required} />
+                    <Label htmlFor={commonProps.id} className="font-normal">{field.placeholder || "I agree"}</Label>
+                </div>
+             );
+        case 'email':
+            return <Input type="email" {...commonProps} />;
+        case 'text':
+        default:
+            return <Input type="text" {...commonProps} />;
+    }
+};
+
+export default FormBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/HeadingBlockRenderer.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import type { HeadingBlockContent } from "@/lib/blocks/blockRegistry";
+
+interface HeadingBlockRendererProps {
+  content: HeadingBlockContent;
+  languageId: number;
+}
+
+const HeadingBlockRenderer: React.FC<HeadingBlockRendererProps> = ({
+  content,
+  languageId,
+}) => {
+  void languageId;
+  // Ensure level is between 1 and 6, default to 2
+  const level =
+    typeof content.level === "number" &&
+    content.level >= 1 &&
+    content.level <= 6
+      ? content.level
+      : 2;
+  const Tag: React.ElementType = `h${level}`;
+  
+  let alignmentClass = "";
+  if (content.textAlign) {
+    alignmentClass = `text-${content.textAlign}`;
+  }
+
+  let colorClass = "";
+  if (content.textColor) {
+    colorClass = `text-${content.textColor}`;
+  }
+
+  const combinedClasses = `my-6 font-bold container mx-auto ${alignmentClass} ${colorClass}`.trim();
+  return (
+    <Tag className={combinedClasses}>
+      {content.text_content}
+    </Tag>
+  );
+};
+
+export default HeadingBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/HeroBlockRenderer.tsx

@@ -0,0 +1,240 @@
+// components/blocks/renderers/HeroBlockRenderer.tsx
+import React from "react";
+import type { SectionBlockContent, Gradient } from "../../../lib/blocks/blockRegistry";
+import Image from 'next/image';
+
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+
+interface SectionBlockRendererProps {
+  content: SectionBlockContent;
+  languageId: number;
+}
+
+// Container class mapping
+const containerClasses = {
+  'full-width': 'w-full',
+  'container': 'container mx-auto px-4',
+  'container-sm': 'container mx-auto px-4 max-w-screen-sm',
+  'container-lg': 'container mx-auto px-4 max-w-screen-lg',
+  'container-xl': 'container mx-auto px-4 max-w-screen-xl'
+};
+
+// Column grid classes
+const columnClasses = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-1 md:grid-cols-2',
+  3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+  4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
+};
+
+// Gap classes
+const gapClasses = {
+  none: 'gap-0',
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8'
+};
+
+// Padding classes
+const paddingClasses = {
+  none: '',
+  sm: 'py-2',
+  md: 'py-4',
+  lg: 'py-8',
+  xl: 'py-12'
+};
+
+// Background style generator
+function generateBackgroundStyles(background: SectionBlockContent['background']) {
+  const styles: React.CSSProperties = {};
+  let className = '';
+
+  if (background.min_height) {
+    styles.minHeight = background.min_height;
+  }
+
+  switch (background.type) {
+    case 'theme': {
+      // Theme-based backgrounds using CSS classes
+      const themeClasses = {
+        primary: 'bg-primary text-primary-foreground',
+        secondary: 'bg-secondary text-secondary-foreground',
+        muted: 'bg-muted text-muted-foreground',
+        accent: 'bg-accent text-accent-foreground',
+        destructive: 'bg-destructive text-destructive-foreground'
+      };
+      className = background.theme ? themeClasses[background.theme] || '' : '';
+      break;
+    }
+    
+    case 'solid':
+      styles.backgroundColor = background.solid_color;
+      break;
+    
+    case 'gradient':
+      if (background.gradient) {
+        const { type, direction, stops } = background.gradient;
+        const gradientStops = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');
+        styles.background = `${type}-gradient(${direction || 'to right'}, ${gradientStops})`;
+      }
+      break;
+    
+    case 'image':
+      if (background.image) {
+        const imageUrl = `${R2_BASE_URL}/${background.image.object_key}`;
+        styles.backgroundSize = background.image.size || 'cover';
+        styles.backgroundPosition = background.image.position || 'center';
+
+        let finalBackgroundImage = `url(${imageUrl})`;
+
+        if (background.image.overlay && background.image.overlay.gradient) {
+          const { type, direction, stops } = background.image.overlay.gradient;
+          const gradientStops = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');
+          const gradient = `${type}-gradient(${direction || 'to right'}, ${gradientStops})`;
+          finalBackgroundImage = `${gradient}, ${finalBackgroundImage}`;
+        }
+        
+        styles.backgroundImage = finalBackgroundImage;
+      }
+      break;
+    
+    default:
+      // No background
+      break;
+  }
+
+  return { styles, className };
+}
+
+function generateGradientString(gradient: Gradient) {
+  const { type, direction, stops } = gradient;
+  const gradientStops = stops.map((stop: { color: string; position: number }) => `${stop.color} ${stop.position}%`).join(', ');
+  return `${type}-gradient(${direction || 'to right'}, ${gradientStops})`;
+}
+
+// Static imports for critical hero block components
+import TextBlockRenderer from './TextBlockRenderer';
+import ImageBlockRenderer from './ImageBlockRenderer';
+import ButtonBlockRenderer from './ButtonBlockRenderer';
+import HeadingBlockRenderer from './HeadingBlockRenderer';
+
+// Static nested block renderer component for hero blocks (no dynamic imports)
+const StaticNestedBlockRenderer: React.FC<{
+  block: SectionBlockContent['column_blocks'][0][0];
+  languageId: number;
+}> = ({ block, languageId }) => {
+  // Use static imports for common hero block components to eliminate loading delays
+  switch (block.block_type) {
+    case 'text':
+      return (
+        <TextBlockRenderer
+          content={block.content as any}
+          languageId={languageId}
+        />
+      );
+    case 'heading':
+      return (
+        <HeadingBlockRenderer
+          content={block.content as any}
+          languageId={languageId}
+        />
+      );
+    case 'image':
+      return (
+        <ImageBlockRenderer
+          content={block.content as any}
+          languageId={languageId}
+          priority={true}
+        />
+      );
+    case 'button':
+      return (
+        <ButtonBlockRenderer
+          content={block.content as any}
+          languageId={languageId}
+        />
+      );
+    default:
+      // Fallback for unsupported block types in hero
+      return (
+        <div className="p-2 border rounded bg-destructive/10 text-destructive text-sm">
+          <strong>Unsupported hero block type:</strong> {block.block_type}
+        </div>
+      );
+  }
+};
+
+const HeroBlockRenderer: React.FC<SectionBlockRendererProps> = ({
+  content,
+  languageId,
+}) => {
+  const { styles, className: backgroundClassName } = generateBackgroundStyles(content.background);
+  
+  const backgroundImage = content.background.type === 'image' ? content.background.image : undefined;
+  
+  if (backgroundImage) {
+    delete styles.backgroundImage;
+  }
+
+  // Build CSS classes
+  const containerClass = containerClasses[content.container_type] || containerClasses.container;
+  const gridClass = columnClasses[content.responsive_columns.desktop] || columnClasses[3];
+  const gapClass = gapClasses[content.column_gap] || gapClasses.md;
+  const paddingTopClass = paddingClasses[content.padding.top] || paddingClasses.md;
+  const paddingBottomClass = paddingClasses[content.padding.bottom] || paddingClasses.md;
+
+  const imageProps = backgroundImage?.blur_data_url
+    ? {
+        placeholder: 'blur' as const,
+        blurDataURL: backgroundImage.blur_data_url,
+      }
+    : {};
+
+  return (
+    <section
+      className={`relative w-full flex items-center ${paddingTopClass} ${paddingBottomClass} ${backgroundClassName}`.trim()}
+      style={styles}
+    >
+      {backgroundImage && (
+        <Image
+          src={`${R2_BASE_URL}/${backgroundImage.object_key}`}
+          alt={backgroundImage.alt_text || 'Hero background image'}
+          fill
+          style={{
+            objectFit: backgroundImage.size || 'cover',
+            objectPosition: backgroundImage.position || 'center'
+          }}
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 100vw, 100vw"
+          priority={true}
+          fetchPriority="high"
+          quality={35}
+          {...imageProps}
+        />
+      )}
+      {backgroundImage?.overlay?.gradient && (
+        <div
+          className="absolute inset-0"
+          style={{ background: generateGradientString(backgroundImage.overlay.gradient) }}
+        />
+      )}
+      <div className={`${containerClass} relative`}>
+        <div className={`grid ${gridClass} ${gapClass}`}>
+          {content.column_blocks.map((columnBlocks, columnIndex) => (
+            <div key={`column-${columnIndex}`} className="min-h-0 space-y-4">
+              {(Array.isArray(columnBlocks) ? columnBlocks : []).map((block, blockIndex) => (
+                <StaticNestedBlockRenderer
+                  key={`${block.block_type}-${columnIndex}-${blockIndex}`}
+                  block={block}
+                  languageId={languageId}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/ImageBlockRenderer.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import Image from "next/image";
+
+export type ImageBlockContent = {
+    media_id: string | null;
+    object_key: string | null;
+    alt_text: string | null;
+    caption: string | null;
+    width: number | null;
+    height: number | null;
+    blur_data_url: string | null;
+};
+
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+
+interface ImageBlockRendererProps {
+  content: ImageBlockContent;
+  languageId: number;
+  priority?: boolean;
+}
+
+const ImageBlockRenderer: React.FC<ImageBlockRendererProps> = ({
+  content,
+  languageId,
+  priority = false,
+}) => {
+  void languageId;
+  if (!content.media_id || !content.object_key) {
+    return (
+      <div className="my-4 p-4 border rounded text-center text-muted-foreground italic">
+        (Image block: Media not selected or object_key missing)
+      </div>
+    );
+  }
+  
+  if (
+    typeof content.width !== "number" ||
+    typeof content.height !== "number" ||
+    content.width <= 0 ||
+    content.height <= 0
+  ) {
+    return (
+      <div className="my-4 p-4 border rounded text-center text-muted-foreground italic">
+        (Image block: Image dimensions are missing or invalid)
+      </div>
+    );
+  }
+
+  const displayImageUrl = `${R2_BASE_URL}/${content.object_key}`;
+  
+  return (
+    <div className="w-full">
+      <figure
+        className="my-6 text-center mx-auto max-w-full"
+        // Removed inline style: style={{ width: content.width }}
+      >
+        <Image
+          src={displayImageUrl}
+          alt={content.alt_text || ""}
+          width={content.width}
+          height={content.height}
+          sizes="(max-width: 768px) 100vw, (max-width: 1280px) 75vw, 66vw"
+          className="rounded-md border"
+          placeholder={content.blur_data_url ? "blur" : "empty"}
+          blurDataURL={content.blur_data_url || undefined}
+          priority={priority}
+          quality={60}
+        />
+        {content.caption && (
+          <figcaption className="text-sm text-muted-foreground mt-2">
+            {content.caption}
+          </figcaption>
+        )}
+      </figure>
+    </div>
+  );
+};
+
+export default ImageBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/PostsGridBlockRenderer.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import PostsGridBlock from "@/components/blocks/PostsGridBlock";
+import type { Database } from "@nextblock-cms/db";
+
+type Block = Database['public']['Tables']['blocks']['Row'];
+type PostsGridBlockContent = {
+    title?: string;
+    postsPerPage?: number;
+    columns?: number;
+    showPagination?: boolean;
+};
+
+interface PostsGridBlockRendererProps {
+  content: PostsGridBlockContent;
+  languageId: number;
+  block: Block;
+}
+
+const PostsGridBlockRenderer: React.FC<PostsGridBlockRendererProps> = ({
+  content,
+  languageId,
+  block,
+}) => {
+  void content;
+  return (
+    <PostsGridBlock
+      block={block}
+      languageId={languageId}
+    />
+  );
+};
+
+export default PostsGridBlockRenderer;