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

package/templates/contents/themes/default/blocks/timeline/fields.ts

@@ -1,147 +0,0 @@
-import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
-import {
-  baseContentFields,
-  baseDesignFields,
-  baseAdvancedFields,
-} from '@nextsparkjs/core/types/blocks'
-
-/**
- * Timeline Block Field Definitions
- *
- * Organized into 3 tabs:
- * - Content: title (from base), subtitle, items array
- * - Design: backgroundColor (from base), layout, alternating, showConnector, variant
- * - Advanced: className, id (from base)
- */
-
-// Timeline-specific content fields
-const timelineContentFields: FieldDefinition[] = [
-  {
-    name: 'subtitle',
-    label: 'Subtitle',
-    type: 'textarea',
-    tab: 'content',
-    required: false,
-    placeholder: 'A brief description of the timeline...',
-    helpText: 'Optional section description displayed below the title',
-    rows: 2,
-  },
-  {
-    name: 'items',
-    label: 'Timeline Items',
-    type: 'array',
-    tab: 'content',
-    required: true,
-    description: 'Events or steps to display in the timeline',
-    helpText: 'Add up to 20 timeline items with date, title, description, and optional icon',
-    minItems: 1,
-    maxItems: 20,
-    itemFields: [
-      {
-        name: 'date',
-        label: 'Date / Step',
-        type: 'text',
-        tab: 'content',
-        required: true,
-        placeholder: '2024, Step 1, Q1 2024',
-        helpText: 'Date, step number, or time period label',
-      },
-      {
-        name: 'title',
-        label: 'Title',
-        type: 'text',
-        tab: 'content',
-        required: true,
-        placeholder: 'Event or milestone title',
-        maxLength: 100,
-      },
-      {
-        name: 'description',
-        label: 'Description',
-        type: 'textarea',
-        tab: 'content',
-        required: false,
-        placeholder: 'Describe this event or step...',
-        rows: 3,
-      },
-      {
-        name: 'icon',
-        label: 'Icon Name (optional)',
-        type: 'text',
-        tab: 'content',
-        required: false,
-        placeholder: 'Rocket, Check, Star, Calendar',
-        helpText: 'Lucide icon name (optional)',
-      },
-    ],
-  },
-]
-
-// Timeline-specific design fields
-const timelineDesignFields: FieldDefinition[] = [
-  {
-    name: 'layout',
-    label: 'Layout Direction',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'vertical',
-    description: 'Timeline orientation',
-    helpText: 'Horizontal layout becomes vertical on mobile',
-    options: [
-      { label: 'Vertical', value: 'vertical' },
-      { label: 'Horizontal', value: 'horizontal' },
-    ],
-  },
-  {
-    name: 'alternating',
-    label: 'Alternating Sides',
-    type: 'checkbox',
-    tab: 'design',
-    required: false,
-    default: true,
-    helpText: 'Alternate items between left and right (vertical layout only)',
-  },
-  {
-    name: 'showConnector',
-    label: 'Show Connector Line',
-    type: 'checkbox',
-    tab: 'design',
-    required: false,
-    default: true,
-    helpText: 'Display line connecting timeline items',
-  },
-  {
-    name: 'variant',
-    label: 'Visual Style',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'default',
-    description: 'Timeline item appearance',
-    options: [
-      { label: 'Default', value: 'default' },
-      { label: 'Minimal', value: 'minimal' },
-      { label: 'Cards', value: 'cards' },
-    ],
-  },
-]
-
-/**
- * Complete field definitions organized by tab
- */
-export const fieldDefinitions: FieldDefinition[] = [
-  // Content tab: base fields + timeline-specific
-  ...baseContentFields,
-  ...timelineContentFields,
-
-  // Design tab: base fields + timeline-specific
-  ...baseDesignFields,
-  ...timelineDesignFields,
-
-  // Advanced tab: base fields only
-  ...baseAdvancedFields,
-]
-
-// Alias for compatibility
-export const fields = fieldDefinitions

package/templates/contents/themes/default/blocks/timeline/index.ts

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

package/templates/contents/themes/default/blocks/timeline/schema.ts

@@ -1,49 +0,0 @@
-import { z } from 'zod'
-import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
-
-/**
- * Timeline Item Schema
- * Individual event/step in the timeline
- */
-const timelineItemSchema = z.object({
-  date: z.string().min(1, 'Date or step is required'),
-  title: z.string().min(1, 'Title is required').max(100),
-  description: z.string().optional().default(''),
-  icon: z.string().optional().default(''),
-})
-
-export type TimelineItem = z.infer<typeof timelineItemSchema>
-
-/**
- * Timeline Block Schema
- *
- * Extends base schema with:
- * - subtitle: Section description (in addition to title)
- * - items: Array of timeline items (date, title, description, icon)
- * - layout: Vertical or horizontal direction
- * - alternating: Alternate items left/right (vertical only)
- * - showConnector: Show connecting line between items
- * - variant: Visual style (default, minimal, cards)
- *
- * Note: Uses base schema title, backgroundColor, className, id
- */
-export const timelineSpecificSchema = z.object({
-  // Content fields
-  subtitle: z.string().optional().default(''),
-  items: z.array(timelineItemSchema)
-    .min(1, 'At least one timeline item is required')
-    .max(20, 'Maximum 20 timeline items allowed'),
-
-  // Design fields
-  layout: z.enum(['vertical', 'horizontal']).default('vertical'),
-  alternating: z.boolean().default(true),
-  showConnector: z.boolean().default(true),
-  variant: z.enum(['default', 'minimal', 'cards']).default('default'),
-})
-
-/**
- * Complete Timeline Block Schema
- */
-export const schema = baseBlockSchema.merge(timelineSpecificSchema)
-
-export type TimelineBlockProps = z.infer<typeof schema>

package/templates/contents/themes/default/blocks/video-hero/component.tsx

@@ -1,270 +0,0 @@
-import React from 'react'
-import { Button } from '@nextsparkjs/core/components/ui/button'
-import { cn } from '@nextsparkjs/core/lib/utils'
-import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
-import { sel } from '../../lib/selectors'
-import type { VideoHeroBlockProps } from './schema'
-
-/**
- * Video Hero Block Component
- *
- * Props from 3-tab structure:
- * - Content: title, content (subtitle), cta, videoUrl, videoThumbnail
- * - Design: backgroundColor, layout, autoplay, overlayOpacity
- * - Advanced: className, id
- */
-
-/**
- * Extract video ID from YouTube or Vimeo URL
- */
-function parseVideoUrl(url: string): { platform: 'youtube' | 'vimeo' | null; videoId: string | null } {
-  // YouTube patterns
-  const youtubePatterns = [
-    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]+)/,
-    /youtube\.com\/watch\?.*v=([a-zA-Z0-9_-]+)/,
-  ]
-
-  for (const pattern of youtubePatterns) {
-    const match = url.match(pattern)
-    if (match) {
-      return { platform: 'youtube', videoId: match[1] }
-    }
-  }
-
-  // Vimeo pattern
-  const vimeoPattern = /vimeo\.com\/(\d+)/
-  const vimeoMatch = url.match(vimeoPattern)
-  if (vimeoMatch) {
-    return { platform: 'vimeo', videoId: vimeoMatch[1] }
-  }
-
-  return { platform: null, videoId: null }
-}
-
-/**
- * Get embed URL for video
- */
-function getEmbedUrl(videoUrl: string, autoplay: boolean): string | null {
-  const { platform, videoId } = parseVideoUrl(videoUrl)
-
-  if (!platform || !videoId) return null
-
-  if (platform === 'youtube') {
-    const params = new URLSearchParams({
-      autoplay: autoplay ? '1' : '0',
-      mute: autoplay ? '1' : '0', // Mute if autoplay (browser requirement)
-      rel: '0', // Don't show related videos
-      modestbranding: '1', // Minimal YouTube branding
-    })
-    return `https://www.youtube.com/embed/${videoId}?${params.toString()}`
-  }
-
-  if (platform === 'vimeo') {
-    const params = new URLSearchParams({
-      autoplay: autoplay ? '1' : '0',
-      muted: autoplay ? '1' : '0',
-      title: '0',
-      byline: '0',
-      portrait: '0',
-    })
-    return `https://player.vimeo.com/video/${videoId}?${params.toString()}`
-  }
-
-  return null
-}
-
-export function VideoHeroBlock({
-  // Base content props
-  title,
-  content,
-  cta,
-  // Video-specific content
-  videoUrl,
-  videoThumbnail,
-  // Base design props
-  backgroundColor,
-  // Video-specific design
-  layout = 'inline',
-  autoplay = false,
-  overlayOpacity = '40',
-  // Base advanced props
-  className,
-  id,
-}: VideoHeroBlockProps) {
-  const embedUrl = getEmbedUrl(videoUrl, autoplay)
-
-  // Build base section classes
-  const baseSectionClasses = buildSectionClasses(
-    cn('relative overflow-hidden'),
-    { backgroundColor, className }
-  )
-
-  // Overlay opacity class for background layout
-  const overlayClass = overlayOpacity === '0'
-    ? 'bg-transparent'
-    : `bg-black/${overlayOpacity}`
-
-  // Video container with 16:9 aspect ratio
-  const VideoEmbed = () => {
-    if (!embedUrl) {
-      return (
-        <div className="flex items-center justify-center bg-gray-200 text-gray-600 p-8 rounded-lg">
-          <p>Invalid video URL. Please provide a valid YouTube or Vimeo link.</p>
-        </div>
-      )
-    }
-
-    return (
-      <div className="relative w-full pb-[56.25%]">
-        <iframe
-          src={embedUrl}
-          className="absolute inset-0 w-full h-full"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowFullScreen
-          title={title || 'Video'}
-        />
-      </div>
-    )
-  }
-
-  // LAYOUT: Background (fullscreen video with overlay)
-  if (layout === 'background') {
-    return (
-      <section
-        id={id}
-        className={cn(baseSectionClasses, 'min-h-[600px] flex items-center justify-center')}
-        data-cy={sel('blocks.videoHero.container')}
-      >
-        {/* Background Video */}
-        <div className="absolute inset-0 z-0">
-          {embedUrl ? (
-            <iframe
-              src={embedUrl}
-              className="absolute inset-0 w-full h-full object-cover"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              title={title || 'Background Video'}
-            />
-          ) : null}
-          <div className={cn('absolute inset-0', overlayClass)} />
-        </div>
-
-        {/* Content Overlay */}
-        <div className="container relative z-10 mx-auto max-w-4xl text-center px-4 py-20 text-white">
-          {title && (
-            <h1 className="mb-6 text-5xl font-bold leading-tight md:text-6xl lg:text-7xl">
-              {title}
-            </h1>
-          )}
-
-          {content && (
-            <p className="mb-8 text-xl md:text-2xl opacity-90">
-              {content}
-            </p>
-          )}
-
-          {cta && (
-            <Button asChild size="lg" className="text-lg px-8 py-6">
-              <a
-                href={cta.link}
-                target={cta.target}
-                rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
-              >
-                {cta.text}
-              </a>
-            </Button>
-          )}
-        </div>
-      </section>
-    )
-  }
-
-  // LAYOUT: Side-by-side (text left, video right)
-  if (layout === 'side-by-side') {
-    return (
-      <section
-        id={id}
-        className={cn(baseSectionClasses, 'py-16 px-4')}
-        data-cy={sel('blocks.videoHero.container')}
-      >
-        <div className="container mx-auto">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
-            {/* Text Content */}
-            <div className="space-y-6">
-              {title && (
-                <h1 className="text-4xl font-bold leading-tight md:text-5xl lg:text-6xl">
-                  {title}
-                </h1>
-              )}
-
-              {content && (
-                <p className="text-lg md:text-xl text-gray-600">
-                  {content}
-                </p>
-              )}
-
-              {cta && (
-                <Button asChild size="lg" className="text-lg px-8 py-6">
-                  <a
-                    href={cta.link}
-                    target={cta.target}
-                    rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
-                  >
-                    {cta.text}
-                  </a>
-                </Button>
-              )}
-            </div>
-
-            {/* Video */}
-            <div>
-              <VideoEmbed />
-            </div>
-          </div>
-        </div>
-      </section>
-    )
-  }
-
-  // LAYOUT: Inline (default - text above, video below)
-  return (
-    <section
-      id={id}
-      className={cn(baseSectionClasses, 'py-16 px-4')}
-      data-cy="block-video-hero"
-    >
-      <div className="container mx-auto max-w-5xl">
-        {/* Text Content */}
-        <div className="text-center mb-10 space-y-6">
-          {title && (
-            <h1 className="text-4xl font-bold leading-tight md:text-5xl lg:text-6xl">
-              {title}
-            </h1>
-          )}
-
-          {content && (
-            <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
-              {content}
-            </p>
-          )}
-
-          {cta && (
-            <Button asChild size="lg" className="text-lg px-8 py-6">
-              <a
-                href={cta.link}
-                target={cta.target}
-                rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
-              >
-                {cta.text}
-              </a>
-            </Button>
-          )}
-        </div>
-
-        {/* Video */}
-        <div className="max-w-4xl mx-auto">
-          <VideoEmbed />
-        </div>
-      </div>
-    </section>
-  )
-}

package/templates/contents/themes/default/blocks/video-hero/config.ts

@@ -1,11 +0,0 @@
-import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
-
-export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
-  slug: 'video-hero',
-  name: 'Video Hero',
-  description: 'A hero section with embedded video (YouTube/Vimeo) either as background or inline, with title, subtitle, and optional CTA',
-  category: 'hero',
-  icon: 'Video',
-  thumbnail: '/theme/blocks/video-hero/thumbnail.png',
-  scope: ['pages', 'posts']
-}

package/templates/contents/themes/default/blocks/video-hero/examples.ts

@@ -1,24 +0,0 @@
-import type { BlockExample } from '@nextsparkjs/core/types/blocks'
-
-export const examples: BlockExample[] = [
-  {
-    name: 'Default',
-    description: 'Video hero with poster image',
-    props: {
-      title: 'See Our Platform in Action',
-      content: 'Watch how leading teams are transforming their workflows with our powerful tools.',
-      videoUrl: 'https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
-      posterImage: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1920',
-      cta: {
-        text: 'Start Free Trial',
-        link: '/signup',
-        target: '_self',
-      },
-      backgroundColor: 'gray-900',
-      textColor: 'light',
-      autoplay: false,
-      muted: true,
-      loop: true,
-    },
-  },
-]

package/templates/contents/themes/default/blocks/video-hero/fields.ts

@@ -1,98 +0,0 @@
-import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
-import {
-  baseContentFields,
-  baseDesignFields,
-  baseAdvancedFields,
-} from '@nextsparkjs/core/types/blocks'
-
-/**
- * Video Hero Block Field Definitions
- *
- * Organized into 3 tabs:
- * - Content: title, content (subtitle), cta (from base) + videoUrl, videoThumbnail
- * - Design: backgroundColor (from base) + layout, autoplay, overlayOpacity
- * - Advanced: className, id (from base)
- */
-
-// Video Hero-specific content fields
-const videoHeroContentFields: FieldDefinition[] = [
-  {
-    name: 'videoUrl',
-    label: 'Video URL',
-    type: 'url',
-    tab: 'content',
-    required: true,
-    placeholder: 'https://www.youtube.com/watch?v=... or https://vimeo.com/...',
-    helpText: 'YouTube or Vimeo video URL',
-  },
-  {
-    name: 'videoThumbnail',
-    label: 'Custom Thumbnail',
-    type: 'image',
-    tab: 'content',
-    required: false,
-    helpText: 'Optional custom thumbnail shown before video plays (recommended: 1920x1080px)',
-  },
-]
-
-// Video Hero-specific design fields
-const videoHeroDesignFields: FieldDefinition[] = [
-  {
-    name: 'layout',
-    label: 'Video Layout',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'inline',
-    helpText: 'How the video is displayed',
-    options: [
-      { label: 'Inline (video centered with text above)', value: 'inline' },
-      { label: 'Background (video as fullscreen background)', value: 'background' },
-      { label: 'Side by Side (text left, video right)', value: 'side-by-side' },
-    ],
-  },
-  {
-    name: 'autoplay',
-    label: 'Autoplay Video',
-    type: 'checkbox',
-    tab: 'design',
-    required: false,
-    default: false,
-    checkboxLabel: 'Automatically play video when loaded (muted)',
-    helpText: 'Note: Most browsers require videos to be muted for autoplay',
-  },
-  {
-    name: 'overlayOpacity',
-    label: 'Overlay Opacity',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: '40',
-    helpText: 'Darkness of overlay for background layout (helps text readability)',
-    options: [
-      { label: 'None (0%)', value: '0' },
-      { label: 'Light (20%)', value: '20' },
-      { label: 'Medium (40%)', value: '40' },
-      { label: 'Dark (60%)', value: '60' },
-    ],
-  },
-]
-
-/**
- * Complete field definitions organized by tab
- */
-export const fieldDefinitions: FieldDefinition[] = [
-  // Content tab: base fields + video-specific
-  ...baseContentFields,
-  ...videoHeroContentFields,
-
-  // Design tab: base fields + video-specific
-  ...baseDesignFields,
-  ...videoHeroDesignFields,
-
-  // Advanced tab: base fields only
-  ...baseAdvancedFields,
-]
-
-// Alias for compatibility
-export const fields = fieldDefinitions

package/templates/contents/themes/default/blocks/video-hero/index.ts

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

package/templates/contents/themes/default/blocks/video-hero/schema.ts

@@ -1,39 +0,0 @@
-import { z } from 'zod'
-import {
-  baseBlockSchema,
-  type BaseBlockProps,
-} from '@nextsparkjs/core/types/blocks'
-
-/**
- * Video Hero Block Schema
- *
- * Extends base schema with video-specific fields:
- * - videoUrl: YouTube or Vimeo URL (required)
- * - videoThumbnail: Custom thumbnail image
- * - layout: How video is displayed (inline, background, side-by-side)
- * - autoplay: Auto-play video when loaded (muted)
- * - overlayOpacity: Opacity for background layout overlay
- *
- * Note: Uses base schema title, content (as subtitle), cta, backgroundColor, className, id
- */
-export const videoHeroSpecificSchema = z.object({
-  // Content fields
-  videoUrl: z.string().url('Must be a valid YouTube or Vimeo URL'),
-  videoThumbnail: z.string().url('Must be a valid URL').optional(),
-
-  // Design fields
-  layout: z.enum(['inline', 'background', 'side-by-side']).default('inline'),
-  autoplay: z.boolean().default(false),
-  overlayOpacity: z.enum(['0', '20', '40', '60']).default('40'),
-})
-
-/**
- * Complete Video Hero Block Schema
- * Combines base fields + video-hero-specific fields
- */
-export const schema = baseBlockSchema.merge(videoHeroSpecificSchema)
-
-export type VideoHeroBlockProps = z.infer<typeof schema>
-
-// Also export for type-only imports
-export type { BaseBlockProps }