@nextsparkjs/core 0.1.0-beta.1 → 0.1.0-beta.11

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

@@ -1,105 +0,0 @@
-import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
-import {
-  baseContentFields,
-  baseDesignFields,
-  baseAdvancedFields,
-} from '@nextsparkjs/core/types/blocks'
-
-/**
- * Testimonials Block Field Definitions
- *
- * Organized into 3 tabs:
- * - Content: title, description, cta (from base) + items array
- * - Design: backgroundColor (from base) + columns
- * - Advanced: className, id (from base)
- */
-
-// Testimonials-specific content fields
-const testimonialsContentFields: FieldDefinition[] = [
-  {
-    name: 'items',
-    label: 'Testimonials',
-    type: 'array',
-    tab: 'content',
-    required: true,
-    description: 'Customer testimonials to display',
-    helpText: 'Add up to 6 testimonials',
-    minItems: 1,
-    maxItems: 6,
-    itemFields: [
-      {
-        name: 'quote',
-        label: 'Quote',
-        type: 'textarea',
-        tab: 'content',
-        required: true,
-        placeholder: 'This product changed my life...',
-        maxLength: 500,
-        rows: 3,
-      },
-      {
-        name: 'author',
-        label: 'Author Name',
-        type: 'text',
-        tab: 'content',
-        required: true,
-        placeholder: 'John Doe',
-        maxLength: 100,
-      },
-      {
-        name: 'role',
-        label: 'Role/Title',
-        type: 'text',
-        tab: 'content',
-        required: false,
-        placeholder: 'CEO at Company',
-        maxLength: 100,
-      },
-      {
-        name: 'avatar',
-        label: 'Avatar Image',
-        type: 'image',
-        tab: 'content',
-        required: false,
-        description: 'Profile picture of the person',
-        helpText: 'Recommended size: 100x100px',
-      },
-    ],
-  },
-]
-
-// Testimonials-specific design fields
-const testimonialsDesignFields: FieldDefinition[] = [
-  {
-    name: 'columns',
-    label: 'Grid Columns',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: '3',
-    description: 'Number of columns in the grid layout',
-    options: [
-      { label: '2 Columns', value: '2' },
-      { label: '3 Columns', value: '3' },
-    ],
-  },
-]
-
-/**
- * Complete field definitions organized by tab
- */
-export const fieldDefinitions: FieldDefinition[] = [
-  // Content tab: base fields + testimonials-specific
-  ...baseContentFields,
-  ...testimonialsContentFields,
-
-  // Design tab: base fields + testimonials-specific
-  ...baseDesignFields,
-  ...testimonialsDesignFields,
-
-  // Advanced tab: base fields only
-  ...baseAdvancedFields,
-]
-
-// Alias for compatibility
-export const fields = fieldDefinitions

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

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

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

@@ -1,41 +0,0 @@
-import { z } from 'zod'
-import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
-
-/**
- * Testimonial Item Schema
- * Individual testimonial entry
- */
-const testimonialItemSchema = z.object({
-  quote: z.string().min(1, 'Quote is required').max(500),
-  author: z.string().min(1, 'Author name is required').max(100),
-  role: z.string().max(100).optional(),
-  avatar: z.string().url('Must be a valid URL').optional(),
-})
-
-export type TestimonialItem = z.infer<typeof testimonialItemSchema>
-
-/**
- * Testimonials Block Schema
- *
- * Extends base schema with:
- * - items: Array of testimonial items
- * - columns: Grid layout option (2, 3 columns)
- *
- * Note: Uses base schema title, description, cta, backgroundColor, className, id
- */
-export const testimonialsSpecificSchema = z.object({
-  // Content: array of testimonials
-  items: z.array(testimonialItemSchema)
-    .min(1, 'At least one testimonial is required')
-    .max(6, 'Maximum 6 testimonials allowed'),
-
-  // Design: column layout
-  columns: z.enum(['2', '3']).default('3'),
-})
-
-/**
- * Complete Testimonials Block Schema
- */
-export const schema = baseBlockSchema.merge(testimonialsSpecificSchema)
-
-export type TestimonialsBlockProps = z.infer<typeof schema>

package/templates/contents/themes/default/blocks/testimonials/thumbnail.png

@@ -1 +0,0 @@
-Placeholder

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

@@ -1,97 +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 { TextContentBlockProps } from './schema'
-
-/**
- * Text Content Block Component
- *
- * Props from 3-tab structure:
- * - Content: title, content (rich-text), cta
- * - Design: backgroundColor, maxWidth, alignment
- * - Advanced: className, id
- *
- * Note: `content` is the main rich-text body of this block
- */
-export function TextContentBlock({
-  // Base content props
-  title,
-  content,
-  cta,
-  // Base design props
-  backgroundColor,
-  // Text-content-specific design
-  maxWidth = 'lg',
-  alignment = 'left',
-  // Base advanced props
-  className,
-  id,
-}: TextContentBlockProps) {
-  const maxWidthClasses: Record<string, string> = {
-    sm: 'max-w-2xl',
-    md: 'max-w-3xl',
-    lg: 'max-w-4xl',
-    xl: 'max-w-5xl',
-    full: 'max-w-none',
-  }
-
-  const alignmentClasses: Record<string, string> = {
-    left: 'text-left',
-    center: 'text-center mx-auto',
-    right: 'text-right ml-auto',
-  }
-
-  // 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.textContent.container')}>
-      <div className="container mx-auto">
-        {/* Optional Section Title */}
-        {title && (
-          <div className={cn(
-            'mb-8',
-            maxWidthClasses[maxWidth],
-            alignmentClasses[alignment]
-          )}>
-            <h2 className="text-3xl font-bold md:text-4xl">
-              {title}
-            </h2>
-          </div>
-        )}
-
-        {/* Rich Text Content */}
-        <div
-          className={cn(
-            'prose prose-lg dark:prose-invert',
-            maxWidthClasses[maxWidth],
-            alignmentClasses[alignment]
-          )}
-          dangerouslySetInnerHTML={{ __html: content }}
-        />
-
-        {/* Optional CTA */}
-        {cta && (
-          <div className={cn(
-            'mt-8',
-            maxWidthClasses[maxWidth],
-            alignmentClasses[alignment]
-          )}>
-            <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/text-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: 'text-content',
-  name: 'Text Content',
-  description: 'Rich text content block for paragraphs, lists, and formatted text',
-  category: 'content',
-  icon: 'FileText',
-  thumbnail: '/theme/blocks/text-content/thumbnail.png',
-  scope: ['pages']
-}

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

@@ -1,30 +0,0 @@
-import type { BlockExample } from '@nextsparkjs/core/types/blocks'
-
-export const examples: BlockExample[] = [
-  {
-    name: 'Default',
-    description: 'Standard text content block',
-    props: {
-      title: 'About Our Platform',
-      content: `
-        <p>We built this platform with one goal in mind: to make professional-grade tools accessible to teams of all sizes. Whether you're a startup or an enterprise, you deserve software that works as hard as you do.</p>
-
-        <p>Our journey started in 2020 when we recognized a gap in the market for intuitive, powerful collaboration tools. Today, we serve thousands of teams across 150+ countries, helping them streamline their workflows and achieve more.</p>
-
-        <h3>Our Mission</h3>
-        <p>To empower teams with technology that amplifies their capabilities without adding complexity. We believe the best tools are the ones you don't have to think about - they just work.</p>
-
-        <h3>Core Values</h3>
-        <ul>
-          <li><strong>Simplicity:</strong> Complex problems deserve simple solutions</li>
-          <li><strong>Reliability:</strong> Your work depends on us, we take that seriously</li>
-          <li><strong>Innovation:</strong> Constantly evolving to meet your needs</li>
-          <li><strong>Support:</strong> Real people, real help, real time</li>
-        </ul>
-      `,
-      backgroundColor: 'white',
-      maxWidth: '4xl',
-      textAlign: 'left',
-    },
-  },
-]

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

@@ -1,88 +0,0 @@
-import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
-import {
-  baseContentFields,
-  baseDesignFields,
-  baseAdvancedFields,
-} from '@nextsparkjs/core/types/blocks'
-
-/**
- * Text Content Block Field Definitions
- *
- * Organized into 3 tabs:
- * - Content: title, cta (from base) + content (rich-text, replaces base content)
- * - Design: backgroundColor (from base) + maxWidth, alignment
- * - Advanced: className, id (from base)
- *
- * Note: The `content` field is overridden with a rich-text version
- */
-
-// Filter out base content field (we'll replace it with rich-text version)
-const baseContentFieldsWithoutContent = baseContentFields.filter(
-  (field) => field.name !== 'content'
-)
-
-// Text-content-specific content fields (rich-text content)
-const textContentFields: FieldDefinition[] = [
-  {
-    name: 'content',
-    label: 'Content',
-    type: 'rich-text',
-    tab: 'content',
-    required: true,
-    placeholder: 'Enter your content here...',
-    helpText: 'Rich text content with formatting support',
-  },
-]
-
-// Text-content-specific design fields
-const textDesignFields: FieldDefinition[] = [
-  {
-    name: 'maxWidth',
-    label: 'Maximum Width',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'lg',
-    helpText: 'Maximum content width',
-    options: [
-      { label: 'Small (640px)', value: 'sm' },
-      { label: 'Medium (768px)', value: 'md' },
-      { label: 'Large (1024px)', value: 'lg' },
-      { label: 'Extra Large (1280px)', value: 'xl' },
-      { label: 'Full Width', value: 'full' },
-    ],
-  },
-  {
-    name: 'alignment',
-    label: 'Text Alignment',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'left',
-    helpText: 'Text alignment within the content area',
-    options: [
-      { label: 'Left', value: 'left' },
-      { label: 'Center', value: 'center' },
-      { label: 'Right', value: 'right' },
-    ],
-  },
-]
-
-/**
- * Complete field definitions organized by tab
- */
-export const fieldDefinitions: FieldDefinition[] = [
-  // Content tab: base fields (without content) + rich-text content
-  ...baseContentFieldsWithoutContent,
-  ...textContentFields,
-
-  // Design tab: base fields + text-specific
-  ...baseDesignFields,
-  ...textDesignFields,
-
-  // Advanced tab: base fields only
-  ...baseAdvancedFields,
-]
-
-// Alias for compatibility
-export const fields = fieldDefinitions

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

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

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

@@ -1,30 +0,0 @@
-import { z } from 'zod'
-import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
-
-/**
- * Text Content Block Schema
- *
- * Extends base schema with:
- * - content: Rich text/HTML content (overrides base content with required)
- * - maxWidth: Content width constraint
- * - alignment: Text alignment
- *
- * Note: Uses base schema title, cta, backgroundColor, className, id
- * The `content` field is overridden to be required and serves as rich-text body
- */
-export const textContentSpecificSchema = z.object({
-  // Content: rich text body (overrides base optional content)
-  content: z.string().min(1, 'Content is required'),
-
-  // Design: layout options
-  maxWidth: z.enum(['sm', 'md', 'lg', 'xl', 'full']).default('lg'),
-  alignment: z.enum(['left', 'center', 'right']).default('left'),
-})
-
-/**
- * Complete Text Content Block Schema
- * Note: textContentSpecificSchema.content overrides baseBlockSchema.content
- */
-export const schema = baseBlockSchema.merge(textContentSpecificSchema)
-
-export type TextContentBlockProps = z.infer<typeof schema>

package/templates/contents/themes/default/blocks/text-content/thumbnail.png

@@ -1 +0,0 @@
-Placeholder

package/templates/contents/themes/default/blocks/timeline/component.tsx

@@ -1,267 +0,0 @@
-import React from 'react'
-import * as Icons from 'lucide-react'
-import { cn } from '@nextsparkjs/core/lib/utils'
-import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
-import { sel } from '../../lib/selectors'
-import type { TimelineBlockProps, TimelineItem } from './schema'
-
-/**
- * Timeline Block Component
- *
- * Props from 3-tab structure:
- * - Content: title, subtitle, items
- * - Design: backgroundColor, layout, alternating, showConnector, variant
- * - Advanced: className, id
- */
-export function TimelineBlock({
-  // Base content props
-  title,
-  // Timeline-specific content
-  subtitle,
-  items,
-  // Base design props
-  backgroundColor,
-  // Timeline-specific design
-  layout = 'vertical',
-  alternating = true,
-  showConnector = true,
-  variant = 'default',
-  // Base advanced props
-  className,
-  id,
-}: TimelineBlockProps) {
-  // Build section classes with background and custom className
-  const sectionClasses = buildSectionClasses(
-    'py-16 px-4 md:py-24',
-    { backgroundColor, className }
-  )
-
-  // Safe items array
-  const safeItems = Array.isArray(items) ? items : []
-
-  return (
-    <section id={id} className={sectionClasses} data-cy={sel('blocks.timeline.container')}>
-      <div className="container mx-auto max-w-6xl">
-        {/* Section Header */}
-        {(title || subtitle) && (
-          <div className="mb-16 text-center">
-            {title && (
-              <h2 className="mb-4 text-4xl font-bold md:text-5xl">
-                {title}
-              </h2>
-            )}
-            {subtitle && (
-              <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
-                {subtitle}
-              </p>
-            )}
-          </div>
-        )}
-
-        {/* Timeline */}
-        {layout === 'vertical' ? (
-          <VerticalTimeline
-            items={safeItems}
-            alternating={alternating}
-            showConnector={showConnector}
-            variant={variant}
-          />
-        ) : (
-          <HorizontalTimeline
-            items={safeItems}
-            showConnector={showConnector}
-            variant={variant}
-          />
-        )}
-      </div>
-    </section>
-  )
-}
-
-/**
- * Vertical Timeline Layout
- */
-function VerticalTimeline({
-  items,
-  alternating,
-  showConnector,
-  variant,
-}: {
-  items: TimelineItem[]
-  alternating: boolean
-  showConnector: boolean
-  variant: 'default' | 'minimal' | 'cards'
-}) {
-  return (
-    <div className="relative">
-      {/* Connector Line */}
-      {showConnector && (
-        <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-border -translate-x-1/2 hidden md:block" />
-      )}
-      {showConnector && (
-        <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-border md:hidden" />
-      )}
-
-      {/* Timeline Items */}
-      <div className="space-y-12">
-        {items.map((item, index) => {
-          const isLeft = alternating && index % 2 === 0
-
-          return (
-            <div
-              key={index}
-              className={cn(
-                'relative flex items-center gap-8',
-                alternating ? 'md:justify-center' : 'md:justify-start md:pl-[50%]',
-                'justify-start pl-16 md:pl-0'
-              )}
-            >
-              {/* Mobile/Left Content */}
-              <div className={cn(
-                'flex-1',
-                alternating && !isLeft && 'md:text-right md:order-1',
-                !alternating && 'md:pl-8'
-              )}>
-                <TimelineItemContent item={item} variant={variant} align={alternating && !isLeft ? 'right' : 'left'} />
-              </div>
-
-              {/* Center Dot */}
-              <div className="absolute left-8 md:left-1/2 md:-translate-x-1/2 flex-shrink-0">
-                <TimelineIcon item={item} />
-              </div>
-
-              {/* Desktop Spacer (for alternating layout) */}
-              {alternating && (
-                <div className="hidden md:block flex-1" />
-              )}
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-/**
- * Horizontal Timeline Layout
- * Note: Becomes vertical on mobile for better UX
- */
-function HorizontalTimeline({
-  items,
-  showConnector,
-  variant,
-}: {
-  items: TimelineItem[]
-  showConnector: boolean
-  variant: 'default' | 'minimal' | 'cards'
-}) {
-  return (
-    <div className="relative">
-      {/* Mobile: Vertical Layout */}
-      <div className="md:hidden">
-        {showConnector && (
-          <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-border" />
-        )}
-        <div className="space-y-12">
-          {items.map((item, index) => (
-            <div key={index} className="relative pl-16">
-              <div className="absolute left-8 -translate-x-1/2">
-                <TimelineIcon item={item} />
-              </div>
-              <TimelineItemContent item={item} variant={variant} align="left" />
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Desktop: Horizontal Layout */}
-      <div className="hidden md:block overflow-x-auto pb-4">
-        <div className="relative min-w-max">
-          {/* Connector Line */}
-          {showConnector && (
-            <div className="absolute left-0 right-0 top-12 h-0.5 bg-border" />
-          )}
-
-          {/* Timeline Items */}
-          <div className="flex gap-8 pt-8">
-            {items.map((item, index) => (
-              <div key={index} className="relative flex flex-col items-center w-64 flex-shrink-0">
-                {/* Icon */}
-                <div className="relative z-10 mb-8">
-                  <TimelineIcon item={item} />
-                </div>
-
-                {/* Content */}
-                <TimelineItemContent item={item} variant={variant} align="center" />
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-/**
- * Timeline Icon Component
- */
-function TimelineIcon({ item }: { item: TimelineItem }) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const IconComponent = item.icon ? ((Icons as any)[item.icon] || Icons.Circle) : Icons.Circle
-
-  return (
-    <div className="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-primary-foreground border-4 border-background">
-      <IconComponent className="h-5 w-5" />
-    </div>
-  )
-}
-
-/**
- * Timeline Item Content
- */
-function TimelineItemContent({
-  item,
-  variant,
-  align,
-}: {
-  item: TimelineItem
-  variant: 'default' | 'minimal' | 'cards'
-  align: 'left' | 'right' | 'center'
-}) {
-  const alignClasses = {
-    left: 'text-left',
-    right: 'text-right',
-    center: 'text-center',
-  }
-
-  const contentClasses = cn(
-    alignClasses[align],
-    variant === 'cards' && 'p-6 rounded-lg border bg-card shadow-sm',
-    variant === 'default' && 'p-4 rounded-lg bg-muted/30',
-    variant === 'minimal' && 'p-2'
-  )
-
-  return (
-    <div className={contentClasses}>
-      {/* Date Badge */}
-      <div className={cn(
-        'inline-block mb-2 px-3 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary',
-        align === 'center' && 'mx-auto'
-      )}>
-        {item.date}
-      </div>
-
-      {/* Title */}
-      <h3 className="text-xl font-semibold mb-2">
-        {item.title}
-      </h3>
-
-      {/* Description */}
-      {item.description && (
-        <p className="text-muted-foreground">
-          {item.description}
-        </p>
-      )}
-    </div>
-  )
-}