create-nextblock 0.2.78 → 0.8.0

package/templates/nextblock-template/scripts/verify-custom-block-definitions.ts

@@ -0,0 +1,188 @@
+/* eslint-disable @nx/enforce-module-boundaries */
+import dotenv from 'dotenv';
+import { createClient } from '@supabase/supabase-js';
+
+import type { Database, Json } from '@nextblock-cms/db';
+import {
+  buildCustomBlockCopySlug,
+  customBlockDefinitionCreateSchema,
+  customBlockDefinitionRowSchema,
+  type CustomBlockDefinition,
+} from '../../../schemas/custom-blocks';
+
+dotenv.config({ path: '.env.local' });
+
+function toJson(value: unknown): Json {
+  return JSON.parse(JSON.stringify(value)) as Json;
+}
+
+const testimonialCardInput = {
+  description:
+    'Intricate customer testimonial card with quote copy, R2 portrait media, author metadata, and a live customer relation.',
+  fields: [
+    {
+      key: 'quote',
+      label: 'Quote',
+      required: true,
+      type: 'rich-text',
+    },
+    {
+      key: 'portrait',
+      label: 'Portrait',
+      required: true,
+      type: 'image_r2',
+    },
+    {
+      key: 'author_name',
+      label: 'Author Name',
+      required: true,
+      type: 'text',
+    },
+    {
+      display_column: 'full_name',
+      key: 'customer',
+      label: 'Customer',
+      table: 'profiles',
+      type: 'db_relation',
+      value_column: 'id',
+    },
+  ],
+  layout_schema: {
+    children: [
+      {
+        as: 'figure',
+        children: [
+          {
+            as: 'blockquote',
+            className: 'text-lg font-medium leading-8 text-slate-900',
+            field_key: 'quote',
+            type: 'field_render',
+          },
+          {
+            as: 'div',
+            children: [
+              {
+                as: 'img',
+                className: 'h-14 w-14 rounded-full object-cover',
+                field_key: 'portrait',
+                type: 'field_render',
+              },
+              {
+                as: 'p',
+                className: 'text-sm font-semibold text-slate-950',
+                field_key: 'author_name',
+                type: 'field_render',
+              },
+              {
+                as: 'span',
+                className: 'text-xs text-slate-500',
+                field_key: 'customer',
+                type: 'field_render',
+              },
+            ],
+            className: 'mt-6 flex items-center gap-4',
+            type: 'container',
+          },
+        ],
+        className: 'rounded-lg border border-slate-200 bg-white p-6 shadow-sm',
+        type: 'container',
+      },
+    ],
+    className: 'mx-auto max-w-xl',
+    type: 'container',
+  },
+  name: 'Intricate Testimonial Card',
+  slug: 'intricate-testimonial-card',
+};
+
+function createMockRecord(id: string, input: unknown): CustomBlockDefinition {
+  const { id: _ignoredId, ...definitionInput } =
+    input && typeof input === 'object' ? (input as Record<string, unknown>) : { id: undefined };
+
+  void _ignoredId;
+
+  return customBlockDefinitionRowSchema.parse({
+    ...customBlockDefinitionCreateSchema.parse(definitionInput),
+    id,
+  });
+}
+
+async function runDryRun() {
+  const inserted = createMockRecord('11111111-1111-4111-8111-111111111111', testimonialCardInput);
+  const duplicateSlug = buildCustomBlockCopySlug(inserted.slug, [inserted.slug]);
+  const duplicated = createMockRecord('22222222-2222-4222-8222-222222222222', {
+    ...inserted,
+    is_original: false,
+    name: `${inserted.name} Copy`,
+    slug: duplicateSlug,
+  });
+
+  console.log('Custom block definition verification dry run succeeded.');
+  console.log(JSON.stringify({ duplicated, inserted, mode: 'dry-run' }, null, 2));
+}
+
+async function runLive() {
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+
+  if (!supabaseUrl || !serviceRoleKey) {
+    throw new Error('NEXT_PUBLIC_SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY are required for --live.');
+  }
+
+  const supabase = createClient<Database>(supabaseUrl, serviceRoleKey, {
+    auth: {
+      autoRefreshToken: false,
+      persistSession: false,
+    },
+  });
+  const suffix = new Date().toISOString().replace(/[-:.TZ]/g, '').slice(0, 14);
+  const input = customBlockDefinitionCreateSchema.parse({
+    ...testimonialCardInput,
+    slug: `${testimonialCardInput.slug}-${suffix}`,
+  });
+
+  const { data: inserted, error: insertError } = await supabase
+    .from('custom_block_definitions')
+    .insert({
+      description: input.description,
+      fields: toJson(input.fields),
+      is_original: input.is_original,
+      layout_schema: toJson(input.layout_schema),
+      name: input.name,
+      slug: input.slug,
+    })
+    .select('id, slug, name, description, fields, layout_schema, is_original')
+    .single();
+
+  if (insertError || !inserted) {
+    throw new Error(`Insert failed: ${insertError?.message ?? 'No row returned.'}`);
+  }
+
+  const { data: duplicated, error: duplicateError } = await supabase.rpc('duplicate_block_definition', {
+    target_id: inserted.id,
+  });
+
+  if (duplicateError || !duplicated) {
+    throw new Error(`Duplicate failed: ${duplicateError?.message ?? 'No row returned.'}`);
+  }
+
+  console.log('Custom block definition live verification succeeded.');
+  console.log(
+    JSON.stringify(
+      {
+        duplicated: customBlockDefinitionRowSchema.parse(duplicated),
+        inserted: customBlockDefinitionRowSchema.parse(inserted),
+        mode: 'live',
+      },
+      null,
+      2
+    )
+  );
+}
+
+const live = process.argv.includes('--live');
+
+(live ? runLive() : runDryRun()).catch((error) => {
+  console.error(error instanceof Error ? error.message : error);
+  process.exitCode = 1;
+});

package/templates/nextblock-template/scripts/verify-dynamic-custom-block-extensions.ts

@@ -0,0 +1,123 @@
+import { JSDOM } from 'jsdom';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+
+import {
+  buildDynamicCustomBlockInsertContent,
+  createDynamicCustomBlockExtensions,
+  getDynamicCustomBlockNodeName,
+  type DynamicCustomBlockEditorDefinition,
+} from '../lib/editor/dynamic-extension-core';
+
+const dom = new JSDOM('<!doctype html><html><body></body></html>');
+(globalThis as any).window = dom.window;
+(globalThis as any).document = dom.window.document;
+Object.defineProperty(globalThis, 'navigator', {
+  value: dom.window.navigator,
+  configurable: true,
+  writable: true,
+});
+
+const testimonialDefinition: DynamicCustomBlockEditorDefinition = {
+  fields: [
+    { key: 'quote', label: 'Quote', required: false, type: 'rich-text' },
+    { key: 'author_name', label: 'Author Name', required: false, type: 'text' },
+    {
+      key: 'portrait',
+      label: 'Portrait',
+      required: false,
+      type: 'image_r2',
+    },
+    {
+      display_column: 'full_name',
+      key: 'customer',
+      label: 'Customer',
+      multiple: false,
+      required: false,
+      table: 'profiles',
+      type: 'db_relation',
+      value_column: 'id',
+    },
+  ],
+  id: '22222222-2222-4222-8222-222222222222',
+  layout_schema: {
+    children: [
+      {
+        children: [
+          { field_key: 'quote', type: 'field_render' },
+          {
+            children: [
+              { field_key: 'portrait', type: 'field_render' },
+              { field_key: 'author_name', type: 'field_render' },
+              { field_key: 'customer', type: 'field_render' },
+            ],
+            type: 'container',
+          },
+        ],
+        type: 'container',
+      },
+    ],
+    type: 'container',
+  },
+  name: 'Runtime Testimonial Card',
+  slug: 'runtime-testimonial-card',
+};
+
+const nodeName = getDynamicCustomBlockNodeName(testimonialDefinition.slug);
+const editor = new Editor({
+  content: {
+    content: [
+      {
+        content: [{ text: 'Fixed paragraph before the generated custom block.', type: 'text' }],
+        type: 'paragraph',
+      },
+      buildDynamicCustomBlockInsertContent(
+        testimonialDefinition,
+        {
+          author_name: 'Verification User',
+          customer: 'profile-verification',
+          portrait: {
+            object_key: 'custom-blocks/verification/portrait.webp',
+            url: '/custom-blocks/verification/portrait.webp',
+          },
+          quote: 'Generated schemas parse into Tiptap nodes.',
+        },
+        [
+          {
+            content: [{ text: 'Editable nested content is accepted inside the custom block.', type: 'text' }],
+            type: 'paragraph',
+          },
+        ]
+      ),
+    ],
+    type: 'doc',
+  },
+  extensions: [
+    StarterKit.configure({ undoRedo: false }),
+    ...createDynamicCustomBlockExtensions([testimonialDefinition]),
+  ],
+});
+
+const html = editor.getHTML();
+editor.commands.setContent(html, { emitUpdate: false });
+const parsed = editor.getJSON();
+
+console.log('[Milestone 3] Dynamic custom block extension verification');
+console.log(
+  JSON.stringify(
+    {
+      fixedNodeType: parsed.content?.[0]?.type,
+      generatedNodeType: parsed.content?.[1]?.type,
+      generatedAttrs: parsed.content?.[1]?.attrs,
+      hasNestedEditableContent: parsed.content?.[1]?.content?.[0]?.type === 'paragraph',
+      htmlContainsDataAttributes:
+        html.includes('data-nextblock-custom-block') &&
+        html.includes('data-field-author_name="Verification User"'),
+      nodeName,
+    },
+    null,
+    2
+  )
+);
+
+editor.destroy();

package/templates/nextblock-template/scripts/verify-dynamic-layout-engine.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import type { CustomBlockDefinition } from '@nextblock-cms/utils';
+
+import { DynamicLayoutEngine } from '../components/renderers/DynamicLayoutEngine';
+
+const definition: Pick<
+  CustomBlockDefinition,
+  'fields' | 'id' | 'layout_schema' | 'name' | 'slug'
+> = {
+  fields: [
+    { key: 'quote', label: 'Quote', required: false, type: 'rich-text' },
+    { key: 'author_name', label: 'Author Name', required: false, type: 'text' },
+    { key: 'portrait', label: 'Portrait', required: false, type: 'image_r2' },
+    {
+      display_column: 'full_name',
+      key: 'customer',
+      label: 'Customer',
+      multiple: false,
+      required: false,
+      table: 'profiles',
+      type: 'db_relation',
+      value_column: 'id',
+    },
+  ],
+  id: '44444444-4444-4444-8444-444444444444',
+  layout_schema: {
+    as: 'section',
+    children: [
+      {
+        as: 'div',
+        children: [
+          {
+            as: 'div',
+            children: [
+              {
+                as: 'figure',
+                children: [
+                  {
+                    as: 'img',
+                    className: 'h-20 w-20 rounded-full object-cover ring-2 ring-primary/20',
+                    field_key: 'portrait',
+                    type: 'field_render',
+                  },
+                ],
+                className: 'flex justify-center md:justify-start',
+                type: 'container',
+              },
+              {
+                as: 'div',
+                children: [
+                  {
+                    as: 'blockquote',
+                    className: 'text-xl font-semibold leading-relaxed text-foreground',
+                    field_key: 'quote',
+                    type: 'field_render',
+                  },
+                  {
+                    as: 'p',
+                    className: 'text-sm font-medium text-foreground',
+                    field_key: 'author_name',
+                    type: 'field_render',
+                  },
+                  {
+                    as: 'span',
+                    className: 'text-xs uppercase tracking-wide text-muted-foreground',
+                    field_key: 'customer',
+                    type: 'field_render',
+                  },
+                ],
+                className: 'flex flex-col gap-2',
+                type: 'container',
+              },
+            ],
+            className: 'grid gap-6 md:grid-cols-[auto_1fr] md:items-center',
+            type: 'container',
+          },
+        ],
+        className: 'mx-auto max-w-4xl rounded-lg border bg-background p-6 shadow-sm',
+        type: 'container',
+      },
+    ],
+    className: 'py-12',
+    type: 'container',
+  },
+  name: 'Milestone 4 Testimonial',
+  slug: 'milestone-4-testimonial',
+};
+
+const html = renderToStaticMarkup(
+  <DynamicLayoutEngine
+    definition={definition}
+    data={{
+      author_name: 'Milestone Validator',
+      customer: 'profile-milestone',
+      portrait: {
+        alt: 'Milestone validator portrait',
+        height: 160,
+        object_key: 'custom-blocks/milestone-4/portrait.webp',
+        url: '/custom-blocks/milestone-4/portrait.webp',
+        width: 160,
+      },
+      quote: '<p>Container to container to multi-column flex to fields rendered cleanly.</p>',
+      resolved_relations: {
+        customer: {
+          record: {
+            full_name: 'NextBlock Verification Customer',
+            id: 'profile-milestone',
+          },
+          table: 'profiles',
+          value: 'profile-milestone',
+        },
+      },
+    }}
+  />
+);
+
+console.log('[Milestone 4] Dynamic layout engine verification');
+console.log(
+  JSON.stringify(
+    {
+      containsImage: html.includes('custom-blocks/milestone-4/portrait.webp'),
+      containsNestedTailwind:
+        html.includes('grid gap-6 md:grid-cols-[auto_1fr] md:items-center') &&
+        html.includes('flex flex-col gap-2'),
+      containsResolvedRelation: html.includes('NextBlock Verification Customer'),
+      html,
+      warningCount: (html.match(/data-dynamic-layout-warning/g) ?? []).length,
+    },
+    null,
+    2
+  )
+);

package/templates/nextblock-template/scripts/verify-milestone-2-custom-blocks.ts

@@ -0,0 +1,65 @@
+import { createClient as createSupabaseClient } from '@supabase/supabase-js';
+import type { Database } from '@nextblock-cms/db';
+
+import {
+  buildR2UploadObjectKey,
+  validateR2PresignedUploadPayload,
+} from '../lib/custom-block-r2-upload-shared';
+import { searchCustomBlockRelationRows } from '../lib/custom-block-relations';
+
+async function main() {
+  const uploadPayload = validateR2PresignedUploadPayload({
+    contentType: 'image/webp',
+    filename: 'Testimonial Portrait.webp',
+    folder: 'custom-blocks/testimonials',
+    size: 128_000,
+  });
+  const objectKey = buildR2UploadObjectKey(uploadPayload, {
+    nonce: 'verify',
+    now: new Date('2026-05-28T12:00:00.000Z'),
+  });
+
+  console.log('[Milestone 2] Mock R2 upload space');
+  console.log(
+    JSON.stringify(
+      {
+        headers: { 'Content-Type': uploadPayload.contentType },
+        method: 'PUT',
+        objectKey,
+        publicUrl: `/${objectKey}`,
+      },
+      null,
+      2
+    )
+  );
+
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseKey =
+    process.env.SUPABASE_SERVICE_ROLE_KEY ?? process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+  if (!supabaseUrl || !supabaseKey) {
+    console.log('[Milestone 2] Supabase env vars not present; skipping live relation lookup.');
+    return;
+  }
+
+  const supabase = createSupabaseClient<Database>(supabaseUrl, supabaseKey, {
+    auth: {
+      autoRefreshToken: false,
+      persistSession: false,
+    },
+  });
+
+  const relationResult = await searchCustomBlockRelationRows(supabase, {
+    limit: 3,
+    query: '',
+    table: 'pages',
+  });
+
+  console.log('[Milestone 2] Relation lookup sample');
+  console.log(JSON.stringify(relationResult, null, 2));
+}
+
+main().catch((error) => {
+  console.error('[Milestone 2] Verification failed:', error);
+  process.exitCode = 1;
+});

package/templates/nextblock-template/tailwind.config.js

@@ -3,6 +3,7 @@ const { join } = require('path');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  // eslint-disable-next-line @nx/enforce-module-boundaries
   presets: [require('../../libs/ui/tailwind.config.js')],
   content: (() => {
     const projectGlobs = [