@nextsparkjs/core 0.1.0-beta.2 → 0.1.0-beta.4

package/templates/contents/themes/default/blocks/pricing-table/schema.ts

@@ -1,50 +0,0 @@
-import { z } from 'zod'
-import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
-
-/**
- * Pricing Plan Item Schema
- * Individual pricing plan in the table
- */
-const planItemSchema = z.object({
-  name: z.string().min(1, 'Plan name is required').max(50),
-  price: z.string().min(1, 'Price is required').max(50),
-  period: z.string().max(50).optional(),
-  description: z.string().max(200).optional(),
-  features: z.string().optional(), // Newline-separated features
-  ctaText: z.string().max(50).optional(),
-  ctaUrl: z.string().optional(),
-  isPopular: z.boolean().default(false),
-  isDisabled: z.boolean().default(false),
-})
-
-export type PlanItem = z.infer<typeof planItemSchema>
-
-/**
- * Pricing Table Block Schema
- *
- * Extends base schema with:
- * - title: Section title (from base)
- * - subtitle: Section description (from base content field)
- * - plans: Array of pricing plans
- * - columns: Grid layout option (2, 3, 4 columns)
- * - highlightPopular: Whether to highlight popular plan
- *
- * Note: Uses base schema title, content, backgroundColor, className, id
- */
-export const pricingTableSpecificSchema = z.object({
-  // Content: array of pricing plans
-  plans: z.array(planItemSchema)
-    .min(1, 'At least one plan is required')
-    .max(4, 'Maximum 4 plans allowed'),
-
-  // Design: column layout and highlighting
-  columns: z.enum(['2', '3', '4']).default('3'),
-  highlightPopular: z.boolean().default(true),
-})
-
-/**
- * Complete Pricing Table Block Schema
- */
-export const schema = baseBlockSchema.merge(pricingTableSpecificSchema)
-
-export type PricingTableBlockProps = z.infer<typeof schema>

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

@@ -1,135 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-import { Button } from '@nextsparkjs/core/components/ui/button'
-import { Check } from 'lucide-react'
-import { cn } from '@nextsparkjs/core/lib/utils'
-import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
-import { sel } from '../../lib/selectors'
-import type { SplitContentBlockProps, BulletPoint } from './schema'
-
-/**
- * Split Content Block Component
- *
- * Props from 3-tab structure:
- * - Content: subtitle, title, content, image, imageAlt, bulletPoints, cta
- * - Design: backgroundColor, imagePosition, imageStyle, verticalAlign
- * - Advanced: className, id
- */
-export function SplitContentBlock({
-  // Content props
-  subtitle,
-  title,
-  content,
-  image,
-  imageAlt,
-  bulletPoints,
-  cta,
-  // Design props
-  backgroundColor,
-  imagePosition = 'left',
-  imageStyle = 'rounded',
-  verticalAlign = 'center',
-  // Advanced props
-  className,
-  id,
-}: SplitContentBlockProps) {
-  // Safe fallback for bulletPoints array
-  const safeBulletPoints = bulletPoints ?? []
-
-  // Build section classes with background and custom className
-  const sectionClasses = buildSectionClasses(
-    'py-16 px-4 md:py-24',
-    { backgroundColor, className }
-  )
-
-  // Image style classes
-  const imageStyleClasses = {
-    square: '',
-    rounded: 'rounded-lg',
-    circle: 'rounded-full',
-  }
-
-  // Vertical alignment classes
-  const alignmentClasses = {
-    top: 'items-start',
-    center: 'items-center',
-    bottom: 'items-end',
-  }
-
-  // Grid order classes based on image position
-  const imageOrderClass = imagePosition === 'right' ? 'lg:order-2' : 'lg:order-1'
-  const contentOrderClass = imagePosition === 'right' ? 'lg:order-1' : 'lg:order-2'
-
-  return (
-    <section id={id} className={sectionClasses} data-cy={sel('blocks.splitContent.container')}>
-      <div className="container mx-auto max-w-7xl">
-        <div className={cn('grid gap-8 lg:grid-cols-2 lg:gap-12', alignmentClasses[verticalAlign as 'top' | 'center' | 'bottom'])}>
-          {/* Image Column */}
-          <div className={cn('relative', imageOrderClass)}>
-            <div className="relative aspect-[4/3] w-full overflow-hidden">
-              <Image
-                src={image}
-                alt={imageAlt || title || 'Split content image'}
-                fill
-                className={cn('object-cover', imageStyleClasses[imageStyle as 'square' | 'rounded' | 'circle'])}
-                sizes="(max-width: 768px) 100vw, 50vw"
-              />
-            </div>
-          </div>
-
-          {/* Content Column */}
-          <div className={cn('flex flex-col justify-center', contentOrderClass)}>
-            {subtitle && (
-              <p className="mb-2 text-sm font-medium uppercase tracking-wide text-primary">
-                {subtitle}
-              </p>
-            )}
-
-            {title && (
-              <h2 className="mb-4 text-3xl font-bold md:text-4xl lg:text-5xl">
-                {title}
-              </h2>
-            )}
-
-            {content && (
-              <p className="mb-6 text-lg text-muted-foreground">
-                {content}
-              </p>
-            )}
-
-            {/* Bullet Points */}
-            {safeBulletPoints.length > 0 && (
-              <ul className="mb-6 space-y-3">
-                {safeBulletPoints.map((point: BulletPoint, index: number) => (
-                  <li key={index} className="flex items-start gap-3">
-                    <Check className="mt-1 h-5 w-5 flex-shrink-0 text-primary" />
-                    <span className="text-base">{point.text}</span>
-                  </li>
-                ))}
-              </ul>
-            )}
-
-            {/* CTA Button */}
-            {cta && cta.text && cta.link && (
-              <div className="mt-2">
-                <Button
-                  asChild
-                  size="lg"
-                  variant={cta.variant || 'default'}
-                >
-                  <a
-                    href={cta.link}
-                    target={cta.target}
-                    rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
-                  >
-                    {cta.text}
-                  </a>
-                </Button>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}

package/templates/contents/themes/default/blocks/split-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: 'split-content',
-  name: 'Split Content',
-  description: 'A two-column section with image on one side and text content on the other, with option to reverse the order',
-  category: 'content',
-  icon: 'LayoutGrid',
-  thumbnail: '/theme/blocks/split-content/thumbnail.png',
-  scope: ['pages', 'posts']
-}

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

@@ -1,38 +0,0 @@
-import type { BlockExample } from '@nextsparkjs/core/types/blocks'
-
-export const examples: BlockExample[] = [
-  {
-    name: 'Image Left',
-    description: 'Split layout with image on left',
-    props: {
-      title: 'Built for Teams',
-      content: 'Collaborate seamlessly with powerful tools designed for modern workplaces. Share ideas, track progress, and achieve more together.',
-      imageUrl: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800',
-      imageAlt: 'Team collaboration',
-      imagePosition: 'left',
-      cta: {
-        text: 'Learn More',
-        link: '/features',
-        target: '_self',
-      },
-      backgroundColor: 'white',
-    },
-  },
-  {
-    name: 'Image Right',
-    description: 'Split layout with image on right',
-    props: {
-      title: 'Analytics That Matter',
-      content: 'Make data-driven decisions with comprehensive analytics and reporting. Gain insights into user behavior, track key metrics, and optimize your strategy.',
-      imageUrl: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800',
-      imageAlt: 'Analytics dashboard',
-      imagePosition: 'right',
-      cta: {
-        text: 'View Dashboard',
-        link: '/analytics',
-        target: '_self',
-      },
-      backgroundColor: 'gray-50',
-    },
-  },
-]

package/templates/contents/themes/default/blocks/split-content/fields.ts

@@ -1,198 +0,0 @@
-import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
-import {
-  baseDesignFields,
-  baseAdvancedFields,
-} from '@nextsparkjs/core/types/blocks'
-
-/**
- * Split Content Block Field Definitions
- *
- * Organized into 3 tabs:
- * - Content: subtitle, title, content, image, imageAlt, bulletPoints, cta
- * - Design: backgroundColor (from base) + imagePosition, imageStyle, verticalAlign
- * - Advanced: className, id (from base)
- */
-
-// Split Content specific content fields
-const splitContentFields: FieldDefinition[] = [
-  {
-    name: 'subtitle',
-    label: 'Subtitle',
-    type: 'text',
-    tab: 'content',
-    required: false,
-    placeholder: 'Eyebrow text',
-    helpText: 'Optional label or eyebrow text above the title',
-  },
-  {
-    name: 'title',
-    label: 'Title',
-    type: 'text',
-    tab: 'content',
-    required: false,
-    placeholder: 'Main headline',
-    helpText: 'Main section headline',
-  },
-  {
-    name: 'content',
-    label: 'Content',
-    type: 'textarea',
-    tab: 'content',
-    required: false,
-    placeholder: 'Main description text...',
-    helpText: 'Main text content/description',
-    rows: 4,
-  },
-  {
-    name: 'image',
-    label: 'Image',
-    type: 'image',
-    tab: 'content',
-    required: true,
-    helpText: 'Featured image (recommended: 800x600px minimum)',
-  },
-  {
-    name: 'imageAlt',
-    label: 'Image Alt Text',
-    type: 'text',
-    tab: 'content',
-    required: false,
-    placeholder: 'Describe the image',
-    helpText: 'Alternative text for accessibility',
-  },
-  {
-    name: 'bulletPoints',
-    label: 'Bullet Points',
-    type: 'array',
-    tab: 'content',
-    required: false,
-    description: 'Optional list of bullet points',
-    helpText: 'Add up to 10 bullet points',
-    maxItems: 10,
-    itemFields: [
-      {
-        name: 'text',
-        label: 'Bullet Point',
-        type: 'text',
-        tab: 'content',
-        required: true,
-        placeholder: 'Bullet point text',
-        maxLength: 200,
-      },
-    ],
-  },
-  {
-    name: 'cta',
-    label: 'Call to Action',
-    type: 'text',
-    tab: 'content',
-    required: false,
-    description: 'Optional CTA button',
-    helpText: 'Configure button text, link, target, and variant',
-  },
-  {
-    name: 'cta.text',
-    label: 'CTA Text',
-    type: 'text',
-    tab: 'content',
-    required: false,
-    placeholder: 'Get Started',
-  },
-  {
-    name: 'cta.link',
-    label: 'CTA Link',
-    type: 'url',
-    tab: 'content',
-    required: false,
-    placeholder: 'https://example.com or /path',
-  },
-  {
-    name: 'cta.target',
-    label: 'CTA Target',
-    type: 'select',
-    tab: 'content',
-    required: false,
-    default: '_self',
-    options: [
-      { label: 'Same Window', value: '_self' },
-      { label: 'New Window', value: '_blank' },
-    ],
-  },
-  {
-    name: 'cta.variant',
-    label: 'CTA Variant',
-    type: 'select',
-    tab: 'content',
-    required: false,
-    default: 'default',
-    helpText: 'Button style variant',
-    options: [
-      { label: 'Default', value: 'default' },
-      { label: 'Outline', value: 'outline' },
-      { label: 'Secondary', value: 'secondary' },
-    ],
-  },
-]
-
-// Split Content specific design fields
-const splitContentDesignFields: FieldDefinition[] = [
-  {
-    name: 'imagePosition',
-    label: 'Image Position',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'left',
-    description: 'Position of the image in the layout',
-    options: [
-      { label: 'Left', value: 'left' },
-      { label: 'Right', value: 'right' },
-    ],
-  },
-  {
-    name: 'imageStyle',
-    label: 'Image Style',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'rounded',
-    description: 'Image corner style',
-    options: [
-      { label: 'Square', value: 'square' },
-      { label: 'Rounded', value: 'rounded' },
-      { label: 'Circle', value: 'circle' },
-    ],
-  },
-  {
-    name: 'verticalAlign',
-    label: 'Vertical Alignment',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'center',
-    description: 'Vertical alignment of content',
-    options: [
-      { label: 'Top', value: 'top' },
-      { label: 'Center', value: 'center' },
-      { label: 'Bottom', value: 'bottom' },
-    ],
-  },
-]
-
-/**
- * Complete field definitions organized by tab
- */
-export const fieldDefinitions: FieldDefinition[] = [
-  // Content tab: split-content specific fields
-  ...splitContentFields,
-
-  // Design tab: base fields + split-content specific
-  ...baseDesignFields,
-  ...splitContentDesignFields,
-
-  // Advanced tab: base fields only
-  ...baseAdvancedFields,
-]
-
-// Alias for compatibility
-export const fields = fieldDefinitions

package/templates/contents/themes/default/blocks/split-content/index.ts

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

package/templates/contents/themes/default/blocks/split-content/schema.ts

@@ -1,67 +0,0 @@
-import { z } from 'zod'
-import {
-  baseBlockSchema,
-  ctaSchema,
-  type BaseBlockProps,
-} from '@nextsparkjs/core/types/blocks'
-
-/**
- * Bullet Point Schema
- * Individual bullet point item
- */
-const bulletPointSchema = z.object({
-  text: z.string().min(1, 'Bullet point text is required').max(200),
-})
-
-export type BulletPoint = z.infer<typeof bulletPointSchema>
-
-/**
- * CTA with Variant Schema
- * Extends base CTA with variant option
- */
-const ctaWithVariantSchema = ctaSchema.extend({
-  variant: z.enum(['default', 'outline', 'secondary']).default('default'),
-})
-
-export type CTAWithVariant = z.infer<typeof ctaWithVariantSchema>
-
-/**
- * Split Content Block Schema
- *
- * Extends base schema with:
- * - subtitle: Optional eyebrow/label above title
- * - image: Featured image URL (required)
- * - imageAlt: Image alt text for accessibility
- * - cta: CTA button with variant option
- * - bulletPoints: Optional list of bullet points
- * - imagePosition: Image position (left/right)
- * - imageStyle: Image corner style (square/rounded/circle)
- * - verticalAlign: Vertical content alignment
- *
- * Note: Uses base schema title, content, backgroundColor, className, id
- */
-export const splitContentSpecificSchema = z.object({
-  // Content fields
-  subtitle: z.string().optional(),
-  image: z.string().url('Must be a valid image URL').min(1, 'Image is required'),
-  imageAlt: z.string().optional(),
-  cta: ctaWithVariantSchema.optional(),
-  bulletPoints: z.array(bulletPointSchema).max(10, 'Maximum 10 bullet points allowed').optional(),
-
-  // Design fields
-  imagePosition: z.enum(['left', 'right']).default('left'),
-  imageStyle: z.enum(['square', 'rounded', 'circle']).default('rounded'),
-  verticalAlign: z.enum(['top', 'center', 'bottom']).default('center'),
-})
-
-/**
- * Complete Split Content Block Schema
- */
-export const schema = baseBlockSchema
-  .omit({ cta: true }) // Remove base cta
-  .merge(splitContentSpecificSchema)
-
-export type SplitContentBlockProps = z.infer<typeof schema>
-
-// Also export for type-only imports
-export type { BaseBlockProps }

package/templates/contents/themes/default/blocks/stats-counter/component.tsx

@@ -1,124 +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 { StatsCounterBlockProps, StatItem } from './schema'
-
-/**
- * Stats Counter Block Component
- *
- * Props from 3-tab structure:
- * - Content: title, content, cta, stats
- * - Design: backgroundColor, columns, variant, size
- * - Advanced: className, id
- */
-export function StatsCounterBlock({
-  // Base content props
-  title,
-  content,
-  cta,
-  // Stats-specific content
-  stats,
-  // Base design props
-  backgroundColor,
-  // Stats-specific design
-  columns = '4',
-  variant = 'default',
-  size = 'md',
-  // Base advanced props
-  className,
-  id,
-}: StatsCounterBlockProps) {
-  // Safely handle stats array
-  const safeStats = Array.isArray(stats) ? stats : []
-
-  // Build column classes based on columns prop
-  const columnClasses: Record<string, string> = {
-    '2': 'sm:grid-cols-2',
-    '3': 'sm:grid-cols-2 lg:grid-cols-3',
-    '4': 'sm:grid-cols-2 lg:grid-cols-4',
-  }
-
-  // Size classes for numbers
-  const sizeClasses: Record<string, string> = {
-    sm: 'text-3xl md:text-4xl',
-    md: 'text-4xl md:text-5xl',
-    lg: 'text-5xl md:text-6xl lg:text-7xl',
-  }
-
-  // Variant-specific stat item classes
-  const getStatItemClasses = () => {
-    const baseClasses = 'flex flex-col items-center text-center'
-
-    switch (variant) {
-      case 'cards':
-        return cn(baseClasses, 'p-6 rounded-lg border bg-card shadow-sm')
-      case 'minimal':
-        return cn(baseClasses, 'p-4')
-      default:
-        return cn(baseClasses, 'p-6')
-    }
-  }
-
-  // Build section classes with background and custom className
-  const sectionClasses = buildSectionClasses(
-    'py-16 px-4 md:py-24',
-    { backgroundColor, className }
-  )
-
-  return (
-    <section id={id} className={sectionClasses} data-cy={sel('blocks.statsCounter.container')}>
-      <div className="container mx-auto max-w-6xl">
-        {/* Section Header */}
-        {(title || content) && (
-          <div className="mb-12 text-center">
-            {title && (
-              <h2 className="mb-4 text-4xl font-bold md:text-5xl">
-                {title}
-              </h2>
-            )}
-            {content && (
-              <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
-                {content}
-              </p>
-            )}
-          </div>
-        )}
-
-        {/* Stats Grid */}
-        <div className={cn('grid gap-8', columnClasses[columns] || columnClasses['4'])}>
-          {safeStats.map((stat: StatItem, index: number) => (
-            <div key={index} className={getStatItemClasses()}>
-              <div className={cn('font-bold mb-2', sizeClasses[size] || sizeClasses['md'])}>
-                {stat.prefix && (
-                  <span className="text-primary">{stat.prefix}</span>
-                )}
-                {stat.value}
-                {stat.suffix && (
-                  <span className="text-primary">{stat.suffix}</span>
-                )}
-              </div>
-              <div className="text-sm md:text-base text-muted-foreground font-medium">
-                {stat.label}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Optional CTA */}
-        {cta && (
-          <div className="mt-12 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-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
-            >
-              {cta.text}
-            </a>
-          </div>
-        )}
-      </div>
-    </section>
-  )
-}

package/templates/contents/themes/default/blocks/stats-counter/config.ts

@@ -1,11 +0,0 @@
-import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
-
-export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
-  slug: 'stats-counter',
-  name: 'Stats Counter',
-  description: 'A section displaying key metrics/statistics with large numbers and labels (e.g., "10,000+ Customers", "99% Uptime")',
-  category: 'stats',
-  icon: 'TrendingUp',
-  thumbnail: '/theme/blocks/stats-counter/thumbnail.png',
-  scope: ['pages', 'posts']
-}