create-nextblock 0.2.78 → 0.8.0

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

@@ -1,5 +1,8 @@
-import { z } from 'zod';
-import { TestimonialBlockConfig, TestimonialBlockContent } from '../../components/blocks/TestimonialBlock';
+import { z } from '../zod-config';
+import { TestimonialBlockConfig, TestimonialBlockContent } from '../../components/blocks/TestimonialBlock';
+import { ProductGridBlockSchema, ProductGridBlockContent, FeaturedProductBlockSchema, FeaturedProductBlockContent, CartBlockSchema, CartBlockContent, CheckoutBlockSchema, CheckoutBlockContent, ProductDetailsBlockSchema, ProductDetailsBlockContent } from './ecommerce-block-schemas';
+import { availableBlockTypes, type BlockType } from './blockTypes';
+export { availableBlockTypes, type BlockType } from './blockTypes';
 
 /**
  * Block Registry System
@@ -9,13 +12,7 @@ import { TestimonialBlockConfig, TestimonialBlockContent } from '../../component
  * their initial content, editor components, renderer components, and Zod schemas.
  */
 
-/**
- * Available block types - defined here as the source of truth
- */
-export const availableBlockTypes = ["text", "heading", "image", "button", "posts_grid", "video_embed", "section", "hero", "form", "testimonial"] as const;
-export type BlockType = (typeof availableBlockTypes)[number];
-
-// --- Zod Schemas & Inferred Types ---
+// --- Zod Schemas & Inferred Types ---
 
 export const TextBlockSchema = z.object({
   html_content: z.string().describe('Raw HTML content for the text block'),
@@ -98,10 +95,15 @@ const BackgroundSchema = z.object({
 
 const BlockInColumnSchema = z.object({
   block_type: z.enum(availableBlockTypes),
-  content: z.record(z.any()),
+  content: z.record(z.string(), z.any()),
   temp_id: z.string().optional(),
 });
 
+const SlideSchema = z.object({
+  background: BackgroundSchema,
+  column_blocks: z.array(z.array(BlockInColumnSchema)),
+});
+
 export const SectionBlockSchema = z.object({
   container_type: z.enum(['full-width', 'container', 'container-sm', 'container-lg', 'container-xl']),
   background: BackgroundSchema,
@@ -117,11 +119,15 @@ export const SectionBlockSchema = z.object({
   }),
   vertical_alignment: z.enum(['start', 'center', 'end', 'stretch']).optional(),
   column_blocks: z.array(z.array(BlockInColumnSchema)),
+  is_hero: z.boolean().optional(),
+  slider: z.boolean().optional(),
+  autoplay: z.boolean().optional(),
+  timeframe: z.number().optional(),
+  slides: z.array(SlideSchema).optional(),
 });
 export type SectionBlockContent = z.infer<typeof SectionBlockSchema>;
 
-export const HeroBlockSchema = SectionBlockSchema;
-export type HeroBlockContent = z.infer<typeof HeroBlockSchema>;
+
 
 // Form helpers
 export const FormFieldOptionSchema = z.object({
@@ -145,6 +151,8 @@ export const FormBlockSchema = z.object({
   submit_button_text: z.string(),
   success_message: z.string(),
   fields: z.array(FormFieldSchema),
+  botProtectionProvider: z.enum(['none', 'turnstile', 'recaptcha']).optional().default('none'),
+  botProtectionSiteKey: z.string().optional(),
 });
 export type FormBlockContent = z.infer<typeof FormBlockSchema>;
 
@@ -380,7 +388,12 @@ export const blockRegistry: Record<BlockType, BlockDefinition> = {
         [{ block_type: "text", content: { html_content: "<p>Column 1</p>" } }],
         [{ block_type: "text", content: { html_content: "<p>Column 2</p>" } }],
         [{ block_type: "text", content: { html_content: "<p>Column 3</p>" } }]
-      ]
+      ],
+      is_hero: false,
+      slider: false,
+      autoplay: false,
+      timeframe: 5,
+      slides: []
     } as SectionBlockContent,
     editorComponentFilename: "SectionBlockEditor.tsx",
     rendererComponentFilename: "SectionBlockRenderer.tsx",
@@ -407,34 +420,6 @@ export const blockRegistry: Record<BlockType, BlockDefinition> = {
     },
   },
 
-  hero: {
-    type: "hero",
-    label: "Hero Section",
-    icon: "LayoutTemplate",
-    initialContent: {
-      container_type: 'container',
-      background: { type: "none" },
-      responsive_columns: { mobile: 1, tablet: 1, desktop: 2 },
-      column_gap: 'lg',
-      padding: { top: 'xl', bottom: 'xl' },
-      column_blocks: [
-        [
-          { block_type: "heading", content: { level: 1, text_content: "Hero Title" }, temp_id: `block-${Date.now()}-1` },
-          { block_type: "text", content: { html_content: "<p>Hero description goes here. Explain the value proposition.</p>" }, temp_id: `block-${Date.now()}-2` },
-          { block_type: "button", content: { text: "Call to Action", url: "#" }, temp_id: `block-${Date.now()}-3` },
-        ],
-        [],
-      ],
-    } as HeroBlockContent,
-    editorComponentFilename: "SectionBlockEditor.tsx", // Reusing section editor
-    rendererComponentFilename: "HeroBlockRenderer.tsx", // Specific renderer for hero
-    schema: HeroBlockSchema,
-    documentation: {
-      description: 'A specialized hero section for the top of a page, with prioritized images and pre-populated content.',
-      useCases: ['Main page hero/banner', 'Introductory section with a strong call to action'],
-      notes: ['This block reuses the Section editor but has a different renderer for optimized image loading.'],
-    },
-  },
   
   form: {
     type: "form",
@@ -445,6 +430,8 @@ export const blockRegistry: Record<BlockType, BlockDefinition> = {
       submit_button_text: "Submit",
       success_message: "Thank you for your submission!",
       fields: [],
+      botProtectionProvider: "none",
+      botProtectionSiteKey: "",
     } as FormBlockContent,
     editorComponentFilename: "FormBlockEditor.tsx",
     rendererComponentFilename: "FormBlockRenderer.tsx",
@@ -473,6 +460,76 @@ export const blockRegistry: Record<BlockType, BlockDefinition> = {
       useCases: ['Social proof', 'Customer reviews'],
     }
   } as BlockDefinition<TestimonialBlockContent>,
+
+  "product_grid": {
+    type: "product_grid",
+    label: "Product Grid",
+    icon: "ShoppingBag", // Lucide icon
+    initialContent: { type: 'latest', limit: 6 } as ProductGridBlockContent,
+    editorComponentFilename: "ProductGridBlockEditor.tsx", // Assuming standard naming
+    rendererComponentFilename: "ProductGridBlockRenderer.tsx", // Assuming mapping to ProductGridBlock.tsx handled by renderer map not shown here, or we need to ensure the renderer map uses the file we created. The prompt implies creating the file in `lib/blocks` serves as the component. I will assume the system maps it.
+    schema: ProductGridBlockSchema,
+    documentation: {
+        description: 'Displays a grid of products.',
+        useCases: ['Homepage featured products', 'Category pages']
+    }
+  },
+
+  "featured_product": {
+    type: "featured_product",
+    label: "Featured Product",
+    icon: "Star",
+    initialContent: { productId: '', showBackground: false } as FeaturedProductBlockContent,
+    editorComponentFilename: "FeaturedProductBlockEditor.tsx",
+    rendererComponentFilename: "FeaturedProductBlockRenderer.tsx", 
+    schema: FeaturedProductBlockSchema,
+    documentation: {
+        description: 'Highlights a specific product with a detailed view.',
+        useCases: ['Product spotlight', 'Special offers']
+    }
+  },
+
+  "cart": {
+    type: "cart",
+    label: "Cart",
+    icon: "ShoppingCart",
+    initialContent: {} as CartBlockContent,
+    editorComponentFilename: "CartBlockEditor.tsx",
+    rendererComponentFilename: "CartBlockRenderer.tsx",
+    schema: CartBlockSchema,
+    documentation: {
+        description: 'Displays the shopping cart.',
+        useCases: ['Cart page']
+    }
+  },
+
+  "checkout": {
+    type: "checkout",
+    label: "Checkout",
+    icon: "CreditCard",
+    initialContent: {} as CheckoutBlockContent,
+    editorComponentFilename: "CheckoutBlockEditor.tsx",
+    rendererComponentFilename: "CheckoutBlockRenderer.tsx",
+    schema: CheckoutBlockSchema,
+    documentation: {
+        description: 'Displays the checkout form.',
+        useCases: ['Checkout page']
+    }
+  },
+
+  "product_details": {
+    type: "product_details",
+    label: "Product Details",
+    icon: "Tag",
+    initialContent: {} as ProductDetailsBlockContent,
+    editorComponentFilename: "ProductDetailsBlockEditor.tsx",
+    rendererComponentFilename: "ProductDetailsBlockRenderer.tsx",
+    schema: ProductDetailsBlockSchema,
+    documentation: {
+        description: 'Displays product details (Title, Price, Add to Cart) using context.',
+        useCases: ['Product Template Page']
+    }
+  },
 };
 
 
@@ -482,8 +539,11 @@ export const blockRegistry: Record<BlockType, BlockDefinition> = {
  * @param blockType - The type of block to get the definition for
  * @returns The block definition or undefined if not found
  */
-export function getBlockDefinition(blockType: BlockType): BlockDefinition | undefined {
-  return blockRegistry[blockType];
+export function getBlockDefinition(blockType: string): BlockDefinition | undefined {
+  if (blockType in blockRegistry) {
+    return blockRegistry[blockType as BlockType];
+  }
+  return undefined;
 }
 
 /**
@@ -492,8 +552,11 @@ export function getBlockDefinition(blockType: BlockType): BlockDefinition | unde
  * @param blockType - The type of block to get initial content for
  * @returns The initial content object or undefined if block type not found
  */
-export function getInitialContent(blockType: BlockType): object | undefined {
-  return blockRegistry[blockType]?.initialContent;
+export function getInitialContent(blockType: string): object | undefined {
+  if (blockType in blockRegistry) {
+    return blockRegistry[blockType as BlockType]?.initialContent;
+  }
+  return {};
 }
 
 /**
@@ -502,8 +565,14 @@ export function getInitialContent(blockType: BlockType): object | undefined {
  * @param blockType - The type of block to get the label for
  * @returns The user-friendly label or undefined if block type not found
  */
-export function getBlockLabel(blockType: BlockType): string | undefined {
-  return blockRegistry[blockType]?.label;
+export function getBlockLabel(blockType: string): string | undefined {
+  if (blockType in blockRegistry) {
+    return blockRegistry[blockType as BlockType]?.label;
+  }
+  return blockType
+    .split(/[-_]+/)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
 }
 
 /**
@@ -512,8 +581,8 @@ export function getBlockLabel(blockType: BlockType): string | undefined {
  * @param blockType - The block type to validate
  * @returns True if the block type exists in the registry
  */
-export function isValidBlockType(blockType: string): blockType is BlockType {
-  return blockType in blockRegistry;
+export function isValidBlockType(blockType: string): boolean {
+  return blockType in blockRegistry || /^[a-z0-9_-]+$/.test(blockType);
 }
 
 /**
@@ -522,8 +591,11 @@ export function isValidBlockType(blockType: string): blockType is BlockType {
  * @param blockType - The type of block to get the schema for
  * @returns The Zod schema object or undefined if not found
  */
-export function getBlockSchema(blockType: BlockType): z.ZodType<any> | undefined {
-  return blockRegistry[blockType]?.schema;
+export function getBlockSchema(blockType: string): z.ZodType<any> | undefined {
+  if (blockType in blockRegistry) {
+    return blockRegistry[blockType as BlockType]?.schema;
+  }
+  return z.record(z.string(), z.any());
 }
 
 /**
@@ -532,8 +604,13 @@ export function getBlockSchema(blockType: BlockType): z.ZodType<any> | undefined
  * @param blockType - The type of block to get documentation for
  * @returns The documentation object or undefined if not found
  */
-export function getBlockDocumentation(blockType: BlockType): BlockDefinition['documentation'] | undefined {
-  return blockRegistry[blockType]?.documentation;
+export function getBlockDocumentation(blockType: string): BlockDefinition['documentation'] | undefined {
+  if (blockType in blockRegistry) {
+    return blockRegistry[blockType as BlockType]?.documentation;
+  }
+  return {
+    description: "Custom user-defined block layout component",
+  };
 }
 
 /**
@@ -549,10 +626,15 @@ export type AllBlockContent =
   | ({ type: "button" } & ButtonBlockContent)
   | ({ type: "posts_grid" } & PostsGridBlockContent)
   | ({ type: "section" } & SectionBlockContent)
-  | ({ type: "hero" } & HeroBlockContent)
+
   | ({ type: "video_embed" } & VideoEmbedBlockContent)
   | ({ type: "form" } & FormBlockContent)
-  | ({ type: "testimonial" } & TestimonialBlockContent);
+  | ({ type: "testimonial" } & TestimonialBlockContent)
+  | ({ type: "product_grid" } & ProductGridBlockContent)
+  | ({ type: "featured_product" } & FeaturedProductBlockContent)
+  | ({ type: "cart" } & CartBlockContent)
+  | ({ type: "checkout" } & CheckoutBlockContent)
+  | ({ type: "product_details" } & ProductDetailsBlockContent);
 
 /**
 * Validate block content against its schema
@@ -581,7 +663,7 @@ export function validateBlockContent(
     return { isValid: true, errors: [], warnings: [] };
   } else {
     // Format Zod errors
-    const errors = result.error.errors.map(e => {
+    const errors = result.error.issues.map(e => {
       const path = e.path.join('.');
       return path ? `${path}: ${e.message}` : e.message;
     });

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

@@ -0,0 +1,18 @@
+export const availableBlockTypes = [
+  "text",
+  "heading",
+  "image",
+  "button",
+  "posts_grid",
+  "video_embed",
+  "section",
+  "form",
+  "testimonial",
+  "product_grid",
+  "featured_product",
+  "cart",
+  "checkout",
+  "product_details",
+] as const;
+
+export type BlockType = (typeof availableBlockTypes)[number];

package/templates/nextblock-template/lib/blocks/ecommerce-block-schemas.ts

@@ -0,0 +1,31 @@
+import { z } from '../zod-config';
+
+// Product Grid Block Schema
+export const ProductGridBlockSchema = z.object({
+  type: z.enum(['latest', 'category']).default('latest'),
+  categoryId: z.string().optional(),
+  limit: z.number().min(1).max(20).default(6),
+  title: z.string().optional(),
+});
+export type ProductGridBlockContent = z.infer<typeof ProductGridBlockSchema>;
+
+// Featured Product Block Schema
+export const FeaturedProductBlockSchema = z.object({
+  productId: z.string().min(1, 'Product is required'),
+  showBackground: z.boolean().default(false),
+  imagePosition: z.enum(['left', 'right']).default('left'),
+});
+export type FeaturedProductBlockContent = z.infer<typeof FeaturedProductBlockSchema>;
+
+// Cart Block Schema
+export const CartBlockSchema = z.object({});
+export type CartBlockContent = z.infer<typeof CartBlockSchema>;
+
+// Checkout Block Schema
+export const CheckoutBlockSchema = z.object({});
+export type CheckoutBlockContent = z.infer<typeof CheckoutBlockSchema>;
+
+// Product Details Block Schema (Context Aware)
+export const ProductDetailsBlockSchema = z.object({});
+export type ProductDetailsBlockContent = z.infer<typeof ProductDetailsBlockSchema>;
+

package/templates/nextblock-template/lib/cms-transfer/csv.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  getCsvHeaders,
+  getTemplateCsv,
+  majorToMinor,
+  makeUniqueSku,
+  makeUniqueSlug,
+  minorToMajor,
+  normalizeBlocksFromFields,
+  parseCsv,
+  stringifyCsv,
+} from "./csv";
+
+describe("cms transfer csv helpers", () => {
+  it("builds templates with the expected content columns", () => {
+    expect(getCsvHeaders("pages")).toContain("blocks_json");
+    expect(getCsvHeaders("products")).toContain("description_html");
+    expect(getCsvHeaders("products")).toContain("description_blocks_json");
+    expect(getTemplateCsv("products")).toContain("EXAMPLE-SKU");
+  });
+
+  it("round-trips JSON columns through CSV escaping", () => {
+    const csv = stringifyCsv(
+      [
+        {
+          language_code: "en",
+          title: "Landing",
+          blocks_json: JSON.stringify([
+            { block_type: "text", content: { html_content: "<p>Hello, world</p>" }, order: 0 },
+          ]),
+        },
+      ],
+      ["language_code", "title", "blocks_json"]
+    );
+
+    const parsed = parseCsv(csv);
+
+    expect(parsed.errors).toEqual([]);
+    expect(parsed.rows[0].blocks_json).toContain("html_content");
+    expect(JSON.parse(parsed.rows[0].blocks_json)).toHaveLength(1);
+  });
+
+  it("converts plain HTML into a text block fallback", () => {
+    const errors: Array<{ row: number; message: string }> = [];
+    const blocks = normalizeBlocksFromFields({
+      html: "<p>Imported description</p>",
+      languageId: 1,
+      rowNumber: 2,
+      errors,
+    });
+
+    expect(errors).toEqual([]);
+    expect(blocks).toEqual([
+      {
+        language_id: 1,
+        block_type: "text",
+        content: { html_content: "<p>Imported description</p>" },
+        order: 0,
+      },
+    ]);
+  });
+
+  it("generates unique slugs and SKUs for create-new imports", () => {
+    expect(makeUniqueSlug("Example Page", new Set(["example-page"]))).toBe(
+      "example-page-copy"
+    );
+    expect(makeUniqueSku("sku-1", new Set(["SKU-1", "SKU-1-COPY"]))).toBe(
+      "SKU-1-COPY-2"
+    );
+  });
+
+  it("converts product prices between major and minor units", () => {
+    expect(majorToMinor(19.99)).toBe(1999);
+    expect(minorToMajor(1999)).toBe(19.99);
+  });
+});