@nextsparkjs/core 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/templates/contents/themes/default/blocks/jumbotron/schema.ts

@@ -1,55 +0,0 @@
-import { z } from 'zod'
-import { baseBlockSchema, ctaSchema } from '@nextsparkjs/core/types/blocks'
-
-/**
- * Primary CTA Schema for Jumbotron
- * Extends standard CTA with variant options
- */
-const primaryCtaSchema = ctaSchema.extend({
-  variant: z.enum(['default', 'outline', 'secondary']).default('default'),
-})
-
-/**
- * Secondary CTA Schema for Jumbotron
- * Uses same structure as primary CTA
- */
-const secondaryCtaSchema = ctaSchema.extend({
-  variant: z.enum(['default', 'outline', 'secondary']).default('outline'),
-})
-
-export type PrimaryCta = z.infer<typeof primaryCtaSchema>
-export type SecondaryCta = z.infer<typeof secondaryCtaSchema>
-
-/**
- * Jumbotron Block Schema
- *
- * Extends base schema with:
- * - subtitle: Supporting text/description (separate from content)
- * - primaryCta: Primary CTA button with variant
- * - secondaryCta: Optional secondary CTA button with variant
- * - fullscreen: Toggle for 100vh height
- * - backgroundImage: Optional background image
- * - textColor: Light/dark for contrast
- * - textAlign: Content alignment (center, left, right)
- *
- * Note: Uses base schema title, backgroundColor, className, id
- */
-export const jumbotronSpecificSchema = z.object({
-  // Content fields
-  subtitle: z.string().optional(),
-  primaryCta: primaryCtaSchema.optional(),
-  secondaryCta: secondaryCtaSchema.optional(),
-
-  // Design fields
-  fullscreen: z.boolean().default(false),
-  backgroundImage: z.string().url('Must be a valid URL').optional(),
-  textColor: z.enum(['light', 'dark']).default('light'),
-  textAlign: z.enum(['center', 'left', 'right']).default('center'),
-})
-
-/**
- * Complete Jumbotron Block Schema
- */
-export const schema = baseBlockSchema.merge(jumbotronSpecificSchema)
-
-export type JumbotronBlockProps = z.infer<typeof schema>

package/dist/templates/contents/themes/default/blocks/logo-cloud/component.tsx

@@ -1,154 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-import { cn } from '@nextsparkjs/core/lib/utils'
-import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
-import { sel } from '../../lib/selectors'
-import type { LogoCloudBlockProps, LogoItem } from './schema'
-
-/**
- * Logo Cloud Block Component
- *
- * Props from 3-tab structure:
- * - Content: title, content, cta, logos
- * - Design: backgroundColor, layout, columns, grayscale, size
- * - Advanced: className, id
- */
-export function LogoCloudBlock({
-  // Base content props
-  title,
-  content,
-  cta,
-  // Logo Cloud-specific content
-  logos,
-  // Base design props
-  backgroundColor,
-  // Logo Cloud-specific design
-  layout = 'grid',
-  columns = '5',
-  grayscale = true,
-  size = 'md',
-  // Base advanced props
-  className,
-  id,
-}: LogoCloudBlockProps) {
-  // Ensure logos is an array
-  const safeLogos = Array.isArray(logos) ? logos : []
-
-  // Build layout classes based on layout prop
-  const layoutClasses: Record<string, string> = {
-    grid: 'grid',
-    row: 'flex flex-wrap',
-    'row-scroll': 'flex overflow-x-auto',
-  }
-
-  // Build column classes for grid layout
-  const columnClasses: Record<string, string> = {
-    '3': 'grid-cols-2 sm:grid-cols-3',
-    '4': 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4',
-    '5': 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',
-    '6': 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
-  }
-
-  // Build size classes for logo containers
-  const sizeClasses: Record<string, string> = {
-    sm: 'h-12 w-24',
-    md: 'h-16 w-32',
-    lg: 'h-20 w-40',
-  }
-
-  // Container classes based on layout
-  const containerClasses = cn(
-    layoutClasses[layout],
-    layout === 'grid' && cn('gap-8', columnClasses[columns]),
-    layout === 'row' && 'gap-6 justify-center items-center',
-    layout === 'row-scroll' && 'gap-6 overflow-x-auto pb-4',
-  )
-
-  // Build section classes with background and custom className
-  const sectionClasses = buildSectionClasses(
-    'py-12 px-4 md:py-16',
-    { backgroundColor, className }
-  )
-
-  return (
-    <section id={id} className={sectionClasses} data-cy={sel('blocks.logoCloud.container')}>
-      <div className="container mx-auto max-w-6xl">
-        {/* Section Header */}
-        {(title || content) && (
-          <div className="mb-10 text-center">
-            {title && (
-              <h2 className="mb-3 text-2xl font-semibold md:text-3xl">
-                {title}
-              </h2>
-            )}
-            {content && (
-              <p className="mx-auto max-w-2xl text-muted-foreground">
-                {content}
-              </p>
-            )}
-          </div>
-        )}
-
-        {/* Logos Container */}
-        <div className={containerClasses}>
-          {safeLogos.map((logo: LogoItem, index: number) => {
-            const LogoImage = (
-              <div
-                className={cn(
-                  'relative flex items-center justify-center transition-all duration-300',
-                  sizeClasses[size],
-                  grayscale && 'grayscale hover:grayscale-0 opacity-70 hover:opacity-100'
-                )}
-              >
-                <Image
-                  src={logo.image}
-                  alt={logo.alt}
-                  fill
-                  className="object-contain"
-                  sizes="(max-width: 768px) 50vw, (max-width: 1200px) 33vw, 20vw"
-                />
-              </div>
-            )
-
-            return (
-              <div
-                key={index}
-                className="flex items-center justify-center"
-              >
-                {logo.url ? (
-                  <a
-                    href={logo.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="block"
-                    data-cy={sel('blocks.logoCloud.link', { index: String(index) })}
-                  >
-                    {LogoImage}
-                  </a>
-                ) : (
-                  <div data-cy={sel('blocks.logoCloud.item', { index: String(index) })}>
-                    {LogoImage}
-                  </div>
-                )}
-              </div>
-            )
-          })}
-        </div>
-
-        {/* Optional CTA */}
-        {cta && (
-          <div className="mt-10 text-center">
-            <a
-              href={cta.link}
-              target={cta.target}
-              rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
-              className="inline-flex items-center justify-center rounded-md bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
-            >
-              {cta.text}
-            </a>
-          </div>
-        )}
-      </div>
-    </section>
-  )
-}

package/dist/templates/contents/themes/default/blocks/logo-cloud/config.ts

@@ -1,11 +0,0 @@
-import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
-
-export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
-  slug: 'logo-cloud',
-  name: 'Logo Cloud',
-  description: 'A section displaying client/partner logos in a grid or row layout ("Trusted by...", "As seen in...")',
-  category: 'content',
-  icon: 'Building2',
-  thumbnail: '/theme/blocks/logo-cloud/thumbnail.png',
-  scope: ['pages']
-}

package/dist/templates/contents/themes/default/blocks/logo-cloud/examples.ts

@@ -1,34 +0,0 @@
-import type { BlockExample } from '@nextsparkjs/core/types/blocks'
-
-export const examples: BlockExample[] = [
-  {
-    name: 'Default',
-    description: 'Logo cloud showing trusted brands',
-    props: {
-      title: 'Trusted by Leading Companies',
-      backgroundColor: 'gray-50',
-      logos: [
-        {
-          name: 'Vercel',
-          imageUrl: 'https://assets.vercel.com/image/upload/front/favicon/vercel/180x180.png',
-          url: 'https://vercel.com',
-        },
-        {
-          name: 'Next.js',
-          imageUrl: 'https://assets.vercel.com/image/upload/v1662130559/nextjs/Icon_dark_background.png',
-          url: 'https://nextjs.org',
-        },
-        {
-          name: 'Supabase',
-          imageUrl: 'https://supabase.com/brand-assets/supabase-logo-icon.png',
-          url: 'https://supabase.com',
-        },
-        {
-          name: 'Stripe',
-          imageUrl: 'https://images.ctfassets.net/fzn2n1nzq965/HTTOloNPhisV9P4hlMPNA/cacf1bb88b9fc492dfad34378d844280/Stripe_icon_-_square.svg',
-          url: 'https://stripe.com',
-        },
-      ],
-    },
-  },
-]

package/dist/templates/contents/themes/default/blocks/logo-cloud/fields.ts

@@ -1,133 +0,0 @@
-import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
-import {
-  baseContentFields,
-  baseDesignFields,
-  baseAdvancedFields,
-} from '@nextsparkjs/core/types/blocks'
-
-/**
- * Logo Cloud Block Field Definitions
- *
- * Organized into 3 tabs:
- * - Content: title, content, cta (from base) + logos array
- * - Design: backgroundColor (from base) + layout, columns, grayscale, size
- * - Advanced: className, id (from base)
- */
-
-// Logo Cloud-specific content fields
-const logoCloudContentFields: FieldDefinition[] = [
-  {
-    name: 'logos',
-    label: 'Logos',
-    type: 'array',
-    tab: 'content',
-    required: true,
-    description: 'List of client/partner logos to display',
-    helpText: 'Add up to 20 logos with image, alt text, and optional link',
-    minItems: 1,
-    maxItems: 20,
-    itemFields: [
-      {
-        name: 'image',
-        label: 'Logo Image',
-        type: 'image',
-        tab: 'content',
-        required: true,
-        helpText: 'Logo image URL (recommended: transparent PNG, 200x100px)',
-      },
-      {
-        name: 'alt',
-        label: 'Alt Text',
-        type: 'text',
-        tab: 'content',
-        required: true,
-        placeholder: 'Company Name',
-        helpText: 'Descriptive alt text for accessibility',
-      },
-      {
-        name: 'url',
-        label: 'Link URL (Optional)',
-        type: 'url',
-        tab: 'content',
-        required: false,
-        placeholder: 'https://example.com',
-        helpText: 'Optional link when logo is clicked',
-      },
-    ],
-  },
-]
-
-// Logo Cloud-specific design fields
-const logoCloudDesignFields: FieldDefinition[] = [
-  {
-    name: 'layout',
-    label: 'Layout',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'grid',
-    description: 'Layout style for logos',
-    options: [
-      { label: 'Grid', value: 'grid' },
-      { label: 'Row (Wrap)', value: 'row' },
-      { label: 'Row (Scroll)', value: 'row-scroll' },
-    ],
-  },
-  {
-    name: 'columns',
-    label: 'Grid Columns',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: '5',
-    description: 'Number of columns in grid layout (desktop)',
-    options: [
-      { label: '3 Columns', value: '3' },
-      { label: '4 Columns', value: '4' },
-      { label: '5 Columns', value: '5' },
-      { label: '6 Columns', value: '6' },
-    ],
-  },
-  {
-    name: 'grayscale',
-    label: 'Grayscale Effect',
-    type: 'checkbox',
-    tab: 'design',
-    required: false,
-    default: true,
-    description: 'Show logos in grayscale (color on hover)',
-  },
-  {
-    name: 'size',
-    label: 'Logo Size',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'md',
-    description: 'Size of logos',
-    options: [
-      { label: 'Small', value: 'sm' },
-      { label: 'Medium', value: 'md' },
-      { label: 'Large', value: 'lg' },
-    ],
-  },
-]
-
-/**
- * Complete field definitions organized by tab
- */
-export const fieldDefinitions: FieldDefinition[] = [
-  // Content tab: base fields + logo-cloud-specific
-  ...baseContentFields,
-  ...logoCloudContentFields,
-
-  // Design tab: base fields + logo-cloud-specific
-  ...baseDesignFields,
-  ...logoCloudDesignFields,
-
-  // Advanced tab: base fields only
-  ...baseAdvancedFields,
-]
-
-// Alias for compatibility
-export const fields = fieldDefinitions

package/dist/templates/contents/themes/default/blocks/logo-cloud/index.ts

@@ -1,6 +0,0 @@
-export { config } from './config'
-export { schema } from './schema'
-export { fields } from './fields'
-export { LogoCloudBlock as Component } from './component'
-
-export type { LogoCloudBlockProps } from './schema'

package/dist/templates/contents/themes/default/blocks/logo-cloud/schema.ts

@@ -1,46 +0,0 @@
-import { z } from 'zod'
-import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
-
-/**
- * Logo Item Schema
- * Individual logo in the cloud
- */
-const logoItemSchema = z.object({
-  image: z.string().url('Must be a valid URL'),
-  alt: z.string().min(1, 'Alt text is required for accessibility'),
-  url: z.string().url('Must be a valid URL').optional(),
-})
-
-export type LogoItem = z.infer<typeof logoItemSchema>
-
-/**
- * Logo Cloud Block Schema
- *
- * Extends base schema with:
- * - logos: Array of logo items (image, alt, optional url)
- * - layout: Layout style (grid, row, row-scroll)
- * - columns: Grid columns (3, 4, 5, 6)
- * - grayscale: Show logos in grayscale with hover effect
- * - size: Logo size (sm, md, lg)
- *
- * Note: Uses base schema title, content, cta, backgroundColor, className, id
- */
-export const logoCloudSpecificSchema = z.object({
-  // Content: array of logo items
-  logos: z.array(logoItemSchema)
-    .min(1, 'At least one logo is required')
-    .max(20, 'Maximum 20 logos allowed'),
-
-  // Design: layout and styling
-  layout: z.enum(['grid', 'row', 'row-scroll']).default('grid'),
-  columns: z.enum(['3', '4', '5', '6']).default('5'),
-  grayscale: z.boolean().default(true),
-  size: z.enum(['sm', 'md', 'lg']).default('md'),
-})
-
-/**
- * Complete Logo Cloud Block Schema
- */
-export const schema = baseBlockSchema.merge(logoCloudSpecificSchema)
-
-export type LogoCloudBlockProps = z.infer<typeof schema>

package/dist/templates/contents/themes/default/blocks/post-content/component.tsx

@@ -1,197 +0,0 @@
-import React from 'react'
-import { cn } from '@nextsparkjs/core/lib/utils'
-import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
-import { sel } from '../../lib/selectors'
-import type { PostContentBlockProps } from './schema'
-
-/**
- * Post Content Block Component
- *
- * Beautiful editorial typography optimized for long-form reading.
- * Inspired by Medium, The New York Times, and other premium publishers.
- *
- * Props from 3-tab structure:
- * - Content: title, content (rich-text article body), cta
- * - Design: backgroundColor, drop cap, typography, dividers
- * - Advanced: className, id
- *
- * Features:
- * - Optimal reading width (680-900px)
- * - Beautiful line height (1.7-1.8) for readability
- * - Optional decorative drop cap
- * - Configurable typography scale
- * - Section dividers for visual breaks
- */
-export function PostContentBlock({
-  // Base content props
-  title,
-  content,
-  cta,
-  // Base design props
-  backgroundColor,
-  // Post-content-specific design
-  showDropCap = false,
-  dropCapStyle = 'serif',
-  maxWidth = 'narrow',
-  fontSize = 'medium',
-  lineHeight = 'relaxed',
-  paragraphSpacing = 'normal',
-  showDividers = false,
-  dividerStyle = 'line',
-  // Base advanced props
-  className,
-  id,
-}: PostContentBlockProps) {
-  // Max width classes for optimal reading
-  const maxWidthClasses: Record<string, string> = {
-    narrow: 'max-w-[680px]', // Optimal for reading
-    medium: 'max-w-[768px]',
-    wide: 'max-w-[900px]',
-  }
-
-  // Font size classes
-  const fontSizeClasses: Record<string, string> = {
-    small: 'text-base', // 16px
-    medium: 'text-lg', // 18px
-    large: 'text-xl', // 20px
-  }
-
-  // Line height classes
-  const lineHeightClasses: Record<string, string> = {
-    compact: 'leading-relaxed', // 1.6
-    normal: 'leading-loose', // 1.7
-    relaxed: 'leading-[1.8]', // 1.8
-  }
-
-  // Paragraph spacing classes
-  const paragraphSpacingClasses: Record<string, string> = {
-    tight: '[&_p]:mb-4',
-    normal: '[&_p]:mb-6',
-    loose: '[&_p]:mb-8',
-  }
-
-  // Drop cap style classes
-  const dropCapClasses: Record<string, string> = {
-    serif: 'font-serif',
-    'sans-serif': 'font-sans',
-    decorative: 'font-serif italic',
-  }
-
-  // Build section classes with background
-  const sectionClasses = buildSectionClasses(
-    'py-16 px-4 md:py-24',
-    { backgroundColor, className }
-  )
-
-  // Drop cap CSS (applied via first-letter pseudo-element)
-  const contentWithDropCap = showDropCap
-    ? `[&>p:first-of-type]:first-letter:float-left [&>p:first-of-type]:first-letter:text-7xl [&>p:first-of-type]:first-letter:font-bold [&>p:first-of-type]:first-letter:mr-3 [&>p:first-of-type]:first-letter:mt-1 [&>p:first-of-type]:first-letter:leading-none [&>p:first-of-type]:first-letter:${dropCapClasses[dropCapStyle]}`
-    : ''
-
-  // Divider component
-  const Divider = () => {
-    if (!showDividers) return null
-
-    const dividerContent: Record<string, React.ReactNode> = {
-      line: <hr className="border-t border-gray-300 dark:border-gray-700" />,
-      dots: (
-        <div className="text-center text-gray-400 dark:text-gray-600 text-2xl tracking-[0.5em]">
-          •••
-        </div>
-      ),
-      asterisks: (
-        <div className="text-center text-gray-400 dark:text-gray-600 text-xl tracking-widest">
-          * * *
-        </div>
-      ),
-    }
-
-    return (
-      <div className="my-12" data-cy={sel('blocks.postContent.divider')}>
-        {dividerContent[dividerStyle]}
-      </div>
-    )
-  }
-
-  return (
-    <section id={id} className={sectionClasses} data-cy={sel('blocks.postContent.container')}>
-      <div className="container mx-auto">
-        {/* Optional Section Title */}
-        {title && (
-          <div className={cn('mb-12 text-center', maxWidthClasses[maxWidth], 'mx-auto')}>
-            <h2 className="text-4xl font-bold md:text-5xl lg:text-6xl tracking-tight">
-              {title}
-            </h2>
-          </div>
-        )}
-
-        {/* Rich Text Article Content - Editorial Typography */}
-        <article
-          className={cn(
-            // Base typography
-            'prose prose-lg dark:prose-invert',
-            // Max width for optimal reading
-            maxWidthClasses[maxWidth],
-            'mx-auto',
-            // Font size
-            fontSizeClasses[fontSize],
-            // Line height
-            lineHeightClasses[lineHeight],
-            // Paragraph spacing
-            paragraphSpacingClasses[paragraphSpacing],
-            // Drop cap
-            contentWithDropCap,
-            // Enhanced prose styling for editorial content
-            'prose-headings:font-bold prose-headings:tracking-tight',
-            'prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6',
-            'prose-h3:text-2xl prose-h3:mt-10 prose-h3:mb-4',
-            'prose-h4:text-xl prose-h4:mt-8 prose-h4:mb-3',
-            // Links
-            'prose-a:text-primary prose-a:no-underline prose-a:font-medium hover:prose-a:underline',
-            // Blockquotes (pull quotes)
-            'prose-blockquote:border-l-4 prose-blockquote:border-primary',
-            'prose-blockquote:pl-6 prose-blockquote:italic',
-            'prose-blockquote:text-xl prose-blockquote:leading-relaxed',
-            'prose-blockquote:my-8',
-            // Lists
-            'prose-ul:my-6 prose-ol:my-6',
-            'prose-li:my-2',
-            // Images
-            'prose-img:rounded-lg prose-img:shadow-lg',
-            'prose-img:my-8',
-            // Code
-            'prose-code:bg-gray-100 dark:prose-code:bg-gray-800',
-            'prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded',
-            'prose-code:text-sm',
-            // Pre/code blocks
-            'prose-pre:bg-gray-900 prose-pre:text-gray-100',
-            'prose-pre:rounded-lg prose-pre:my-6',
-            // Strong/bold
-            'prose-strong:font-semibold prose-strong:text-gray-900 dark:prose-strong:text-gray-100',
-            // Em/italic
-            'prose-em:italic'
-          )}
-          dangerouslySetInnerHTML={{ __html: content }}
-        />
-
-        {/* Optional Divider after content */}
-        {showDividers && <Divider />}
-
-        {/* Optional CTA */}
-        {cta && (
-          <div className={cn('mt-12 text-center', maxWidthClasses[maxWidth], 'mx-auto')}>
-            <a
-              href={cta.link}
-              target={cta.target}
-              rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
-              className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg"
-              data-cy={sel('blocks.postContent.cta')}
-            >
-              {cta.text}
-            </a>
-          </div>
-        )}
-      </div>
-    </section>
-  )
-}

package/dist/templates/contents/themes/default/blocks/post-content/config.ts

@@ -1,11 +0,0 @@
-import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
-
-export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
-  slug: 'post-content',
-  name: 'Post Content',
-  description: 'A rich text content block designed for long-form blog posts with editorial styling similar to Medium. Features beautiful typography, proper spacing, and optional elements like drop caps, pull quotes, and images.',
-  category: 'content',
-  icon: 'FileText',
-  thumbnail: '/theme/blocks/post-content/thumbnail.png',
-  scope: ['posts']
-}

package/dist/templates/contents/themes/default/blocks/post-content/examples.ts

@@ -1,33 +0,0 @@
-import type { BlockExample } from '@nextsparkjs/core/types/blocks'
-
-export const examples: BlockExample[] = [
-  {
-    name: 'Default',
-    description: 'Standard blog post content',
-    props: {
-      content: `
-        <h2>Introduction</h2>
-        <p>This is a sample blog post demonstrating the post content block. It supports rich text formatting including headings, paragraphs, lists, and more.</p>
-
-        <h3>Key Features</h3>
-        <ul>
-          <li>Rich text editing with markdown support</li>
-          <li>Automatic table of contents generation</li>
-          <li>Code syntax highlighting</li>
-          <li>Image optimization</li>
-        </ul>
-
-        <h3>Getting Started</h3>
-        <p>To use this block, simply add it to your page and start writing. The editor supports all standard formatting options and will automatically handle styling to match your theme.</p>
-
-        <blockquote>
-          <p>"This platform has transformed how we create and manage content. The simplicity is unmatched." - Happy Customer</p>
-        </blockquote>
-
-        <p>Learn more by exploring our <a href="/docs">documentation</a> or reaching out to our support team.</p>
-      `,
-      backgroundColor: 'white',
-      maxWidth: '4xl',
-    },
-  },
-]