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

package/templates/contents/themes/default/blocks/features-grid/fields.ts

@@ -1,97 +0,0 @@
-import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
-import {
-  baseContentFields,
-  baseDesignFields,
-  baseAdvancedFields,
-} from '@nextsparkjs/core/types/blocks'
-
-/**
- * Features Grid 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)
- */
-
-// Features-specific content fields
-const featuresContentFields: FieldDefinition[] = [
-  {
-    name: 'items',
-    label: 'Features',
-    type: 'array',
-    tab: 'content',
-    required: true,
-    description: 'List of features to display in the grid',
-    helpText: 'Add up to 12 features with icon, title, and description',
-    minItems: 1,
-    maxItems: 12,
-    itemFields: [
-      {
-        name: 'icon',
-        label: 'Icon Name',
-        type: 'text',
-        tab: 'content',
-        required: true,
-        placeholder: 'Zap',
-        helpText: 'Lucide icon name (e.g., Zap, Shield, Star, Check)',
-      },
-      {
-        name: 'title',
-        label: 'Feature Title',
-        type: 'text',
-        tab: 'content',
-        required: true,
-        placeholder: 'Lightning Fast',
-        maxLength: 100,
-      },
-      {
-        name: 'description',
-        label: 'Description',
-        type: 'textarea',
-        tab: 'content',
-        required: true,
-        placeholder: 'Describe this feature...',
-        maxLength: 300,
-        rows: 2,
-      },
-    ],
-  },
-]
-
-// Features-specific design fields
-const featuresDesignFields: 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' },
-      { label: '4 Columns', value: '4' },
-    ],
-  },
-]
-
-/**
- * Complete field definitions organized by tab
- */
-export const fieldDefinitions: FieldDefinition[] = [
-  // Content tab: base fields + features-specific
-  ...baseContentFields,
-  ...featuresContentFields,
-
-  // Design tab: base fields + features-specific
-  ...baseDesignFields,
-  ...featuresDesignFields,
-
-  // Advanced tab: base fields only
-  ...baseAdvancedFields,
-]
-
-// Alias for compatibility
-export const fields = fieldDefinitions

package/templates/contents/themes/default/blocks/features-grid/index.ts

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

package/templates/contents/themes/default/blocks/features-grid/schema.ts

@@ -1,40 +0,0 @@
-import { z } from 'zod'
-import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
-
-/**
- * Feature Item Schema
- * Individual feature in the grid
- */
-const featureItemSchema = z.object({
-  icon: z.string().min(1, 'Icon name is required'),
-  title: z.string().min(1, 'Feature title is required').max(100),
-  description: z.string().min(1, 'Description is required').max(300),
-})
-
-export type FeatureItem = z.infer<typeof featureItemSchema>
-
-/**
- * Features Grid Block Schema
- *
- * Extends base schema with:
- * - items: Array of feature items (icon, title, description)
- * - columns: Grid layout option (2, 3, 4 columns)
- *
- * Note: Uses base schema title, description, cta, backgroundColor, className, id
- */
-export const featuresGridSpecificSchema = z.object({
-  // Content: array of feature items
-  items: z.array(featureItemSchema)
-    .min(1, 'At least one feature is required')
-    .max(12, 'Maximum 12 features allowed'),
-
-  // Design: column layout
-  columns: z.enum(['2', '3', '4']).default('3'),
-})
-
-/**
- * Complete Features Grid Block Schema
- */
-export const schema = baseBlockSchema.merge(featuresGridSpecificSchema)
-
-export type FeaturesGridBlockProps = z.infer<typeof schema>

package/templates/contents/themes/default/blocks/features-grid/thumbnail.png

@@ -1 +0,0 @@
-Placeholder thumbnail for features-grid block

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

@@ -1,100 +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 { HeroBlockProps } from './schema'
-
-/**
- * Hero Block Component
- *
- * Props from 3-tab structure:
- * - Content: title, content, cta
- * - Design: backgroundColor, backgroundImage, textColor
- * - Advanced: className, id
- */
-export function HeroBlock({
-  // Base content props
-  title,
-  content,
-  cta,
-  // Base design props
-  backgroundColor,
-  // Hero-specific design
-  backgroundImage,
-  textColor = 'light',
-  // Base advanced props
-  className,
-  id,
-  // Legacy props for backward compatibility
-  ...legacyProps
-}: HeroBlockProps & {
-  ctaText?: string
-  ctaLink?: string
-  subtitle?: string
-  description?: string
-}) {
-  // Handle legacy CTA format (ctaText, ctaLink) for backward compatibility
-  const ctaConfig = cta || (legacyProps.ctaText ? {
-    text: legacyProps.ctaText,
-    link: legacyProps.ctaLink || '#',
-    target: '_self' as const,
-  } : undefined)
-
-  // Handle legacy subtitle/description props for backward compatibility
-  const displayContent = content || legacyProps.subtitle || legacyProps.description
-
-  // Build section classes with background and custom className
-  const sectionClasses = buildSectionClasses(
-    cn(
-      'relative flex min-h-[600px] items-center justify-center overflow-hidden px-4 py-20',
-      textColor === 'light' ? 'text-white' : 'text-gray-900'
-    ),
-    { backgroundColor, className }
-  )
-
-  return (
-    <section id={id} className={sectionClasses} data-cy={sel('blocks.hero.container')}>
-      {/* Background Image */}
-      {backgroundImage && (
-        <div
-          className="absolute inset-0 z-0"
-          style={{
-            backgroundImage: `url(${backgroundImage})`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-          }}
-        >
-          <div className="absolute inset-0 bg-black/40" />
-        </div>
-      )}
-
-      {/* Content */}
-      <div className="container relative z-10 mx-auto max-w-4xl text-center">
-        {title && (
-          <h1 className="mb-6 text-5xl font-bold leading-tight md:text-6xl lg:text-7xl">
-            {title}
-          </h1>
-        )}
-
-        {displayContent && (
-          <p className="mb-8 text-xl md:text-2xl opacity-90">
-            {displayContent}
-          </p>
-        )}
-
-        {ctaConfig && (
-          <Button asChild size="lg" className="text-lg px-8 py-6">
-            <a
-              href={ctaConfig.link}
-              target={ctaConfig.target}
-              rel={ctaConfig.target === '_blank' ? 'noopener noreferrer' : undefined}
-            >
-              {ctaConfig.text}
-            </a>
-          </Button>
-        )}
-      </div>
-    </section>
-  )
-}

package/templates/contents/themes/default/blocks/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: 'hero',
-  name: 'Hero Section',
-  description: 'Full-width hero section with title, subtitle, CTA button, and background image',
-  category: 'hero',
-  icon: 'Rocket',
-  thumbnail: '/theme/blocks/hero/thumbnail.png',
-  scope: ['pages', 'posts']
-}

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

@@ -1,35 +0,0 @@
-import type { BlockExample } from '@nextsparkjs/core/types/blocks'
-
-export const examples: BlockExample[] = [
-  {
-    name: 'Default',
-    description: 'Standard hero with dark background',
-    props: {
-      title: 'Build Your Next Big Idea',
-      content: 'The complete platform for launching and scaling your SaaS application. From authentication to payments, we handle the infrastructure so you can focus on building features.',
-      cta: {
-        text: 'Get Started Free',
-        link: '/signup',
-        target: '_self',
-      },
-      backgroundColor: 'gray-900',
-      textColor: 'light',
-    },
-  },
-  {
-    name: 'With Background Image',
-    description: 'Hero with background image overlay',
-    props: {
-      title: 'Transform Your Business',
-      content: 'Join thousands of teams who trust our platform to power their most critical workflows.',
-      cta: {
-        text: 'Schedule Demo',
-        link: '/demo',
-        target: '_self',
-      },
-      backgroundColor: 'gray-900',
-      backgroundImage: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920',
-      textColor: 'light',
-    },
-  },
-]

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

@@ -1,60 +0,0 @@
-import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
-import {
-  baseContentFields,
-  baseDesignFields,
-  baseAdvancedFields,
-} from '@nextsparkjs/core/types/blocks'
-
-/**
- * Hero Block Field Definitions
- *
- * Organized into 3 tabs:
- * - Content: title, content, cta (from base)
- * - Design: backgroundColor (from base) + backgroundImage, textColor
- * - Advanced: className, id (from base)
- *
- * Note: The `content` field from base serves as the hero subtitle/description
- */
-
-// Hero-specific design fields
-const heroDesignFields: FieldDefinition[] = [
-  {
-    name: 'backgroundImage',
-    label: 'Background Image',
-    type: 'image',
-    tab: 'design',
-    required: false,
-    helpText: 'Optional background image (recommended: 1920x1080px minimum)',
-  },
-  {
-    name: 'textColor',
-    label: 'Text Color',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'light',
-    helpText: 'Choose text color based on background',
-    options: [
-      { label: 'Light (for dark backgrounds)', value: 'light' },
-      { label: 'Dark (for light backgrounds)', value: 'dark' },
-    ],
-  },
-]
-
-/**
- * Complete field definitions organized by tab
- */
-export const fieldDefinitions: FieldDefinition[] = [
-  // Content tab: base fields only (title, content, cta)
-  ...baseContentFields,
-
-  // Design tab: base fields + hero-specific
-  ...baseDesignFields,
-  ...heroDesignFields,
-
-  // Advanced tab: base fields only
-  ...baseAdvancedFields,
-]
-
-// Alias for compatibility
-export const fields = fieldDefinitions

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

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

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

@@ -1,32 +0,0 @@
-import { z } from 'zod'
-import {
-  baseBlockSchema,
-  type BaseBlockProps,
-} from '@nextsparkjs/core/types/blocks'
-
-/**
- * Hero Block Schema
- *
- * Extends base schema with hero-specific fields:
- * - backgroundImage: Optional hero background
- * - textColor: Light/dark for contrast
- *
- * Note: Uses base schema title, content, cta, backgroundColor, className, id
- * The `content` field serves as the hero subtitle/description
- */
-export const heroSpecificSchema = z.object({
-  // Hero-specific design fields
-  backgroundImage: z.string().url('Must be a valid URL').optional(),
-  textColor: z.enum(['light', 'dark']).default('light'),
-})
-
-/**
- * Complete Hero Block Schema
- * Combines base fields + hero-specific fields
- */
-export const schema = baseBlockSchema.merge(heroSpecificSchema)
-
-export type HeroBlockProps = z.infer<typeof schema>
-
-// Also export for type-only imports
-export type { BaseBlockProps }

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

@@ -1 +0,0 @@
-Placeholder thumbnail for hero block

package/templates/contents/themes/default/blocks/hero/thumbnail.png.txt

@@ -1,6 +0,0 @@
-<!-- This is a placeholder. In production, replace with actual PNG image -->
-<!-- SVG placeholder for Hero block thumbnail -->
-<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
-  <rect width="400" height="300" fill="#6366f1"/>
-  <text x="200" y="150" font-family="Arial" font-size="24" fill="white" text-anchor="middle">Hero Section</text>
-</svg>

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

@@ -1,232 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Button } from '@nextsparkjs/core/components/ui/button'
-import { Input } from '@nextsparkjs/core/components/ui/input'
-import { Checkbox } from '@nextsparkjs/core/components/ui/checkbox'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@nextsparkjs/core/components/ui/select'
-import { cn } from '@nextsparkjs/core/lib/utils'
-import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
-import { sel } from '../../lib/selectors'
-import type { HeroWithFormBlockProps } from './schema'
-
-/**
- * Hero With Form Block Component
- *
- * Props from 3-tab structure:
- * - Content: title, subtitle, backgroundImage, form fields
- * - Design: backgroundColor, overlayOpacity
- * - Advanced: className, id
- */
-export function HeroWithFormBlock({
-  // Base content props
-  title,
-  subtitle,
-  backgroundImage,
-  // Form content props
-  formTitle = 'Get Started',
-  formSubtitle,
-  firstNamePlaceholder = 'First Name',
-  lastNamePlaceholder = 'Last Name',
-  emailPlaceholder = 'Email',
-  phonePlaceholder = 'Phone',
-  areaOfInterestPlaceholder = 'Area of Interest',
-  areaOfInterestOptions,
-  consentCheckboxLabel,
-  submitButtonText = 'Submit',
-  legalDisclaimer,
-  termsLinkText = 'Terms of Service',
-  termsLinkUrl,
-  privacyLinkText = 'Privacy Policy',
-  privacyLinkUrl,
-  formAction,
-  // Design props
-  backgroundColor,
-  overlayOpacity = '40',
-  // Advanced props
-  className,
-  id,
-}: HeroWithFormBlockProps) {
-  // Build section classes with background and custom className
-  const sectionClasses = buildSectionClasses(
-    'relative min-h-screen',
-    { backgroundColor, className }
-  )
-
-  // Calculate overlay opacity class
-  const overlayClass = overlayOpacity === '0'
-    ? 'bg-transparent'
-    : `bg-black/${overlayOpacity}`
-
-  // Parse area of interest options (handle both \n and actual newlines)
-  const areaOptions = areaOfInterestOptions
-    ? areaOfInterestOptions
-        .split(/\\n|\n/)
-        .map((opt: string) => opt.trim())
-        .filter(Boolean)
-    : []
-
-  return (
-    <section id={id} className={sectionClasses} data-cy={sel('blocks.heroWithForm.container')}>
-      {/* Background Image with overlay - full coverage */}
-      <div className="absolute inset-0">
-        <div
-          className="h-full w-full"
-          style={{
-            backgroundImage: `url(${backgroundImage})`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-          }}
-        />
-        <div className={cn('absolute inset-0', overlayClass)} />
-      </div>
-
-      {/* Content Container */}
-      <div className="container relative z-10 mx-auto px-4 py-12 lg:py-0">
-        <div className="grid lg:grid-cols-2 gap-8 lg:gap-16 min-h-screen items-center">
-
-          {/* Left: Title/Subtitle - vertically centered, bottom aligned on mobile */}
-          <div className="text-white order-2 lg:order-1 flex flex-col justify-end lg:justify-center pb-8 lg:pb-0">
-            {title && (
-              <h1 className="text-4xl lg:text-5xl xl:text-6xl font-bold italic mb-4 leading-tight">
-                {title}
-              </h1>
-            )}
-            {subtitle && (
-              <p className="text-lg lg:text-xl xl:text-2xl opacity-90 max-w-lg">
-                {subtitle}
-              </p>
-            )}
-          </div>
-
-          {/* Right: Form Card - centered vertically */}
-          <div className="order-1 lg:order-2 flex justify-center lg:justify-end items-start lg:items-center pt-8 lg:pt-0">
-            <div className="bg-white rounded-lg shadow-2xl p-6 sm:p-8 w-full max-w-md">
-              {/* Form Header */}
-              {formTitle && (
-                <h2 className="text-xl font-bold text-center text-primary mb-2">
-                  {formTitle}
-                </h2>
-              )}
-              {formSubtitle && (
-                <p className="text-sm text-center text-muted-foreground mb-6">
-                  {formSubtitle}
-                </p>
-              )}
-
-              {/* Form */}
-              <form action={formAction} method="POST" className="space-y-4">
-                <Input
-                  placeholder={firstNamePlaceholder}
-                  name="firstName"
-                  required
-                  data-cy={sel('blocks.heroWithForm.form.firstname')}
-                />
-
-                <Input
-                  placeholder={lastNamePlaceholder}
-                  name="lastName"
-                  required
-                  data-cy={sel('blocks.heroWithForm.form.lastname')}
-                />
-
-                <Input
-                  type="email"
-                  placeholder={emailPlaceholder}
-                  name="email"
-                  required
-                  data-cy={sel('blocks.heroWithForm.form.email')}
-                />
-
-                <Input
-                  type="tel"
-                  placeholder={phonePlaceholder}
-                  name="phone"
-                  data-cy={sel('blocks.heroWithForm.form.phone')}
-                />
-
-                {areaOptions.length > 0 && (
-                  <Select name="areaOfInterest">
-                    <SelectTrigger data-cy={sel('blocks.heroWithForm.form.area')}>
-                      <SelectValue placeholder={areaOfInterestPlaceholder} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {areaOptions.map((option: string, index: number) => (
-                        <SelectItem key={index} value={option}>
-                          {option}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
-
-                {consentCheckboxLabel && (
-                  <div className="flex items-start gap-3">
-                    <Checkbox
-                      id="consent"
-                      name="consent"
-                      className="mt-0.5"
-                      data-cy={sel('blocks.heroWithForm.form.consent')}
-                    />
-                    <label
-                      htmlFor="consent"
-                      className="text-sm text-muted-foreground leading-tight cursor-pointer"
-                    >
-                      {consentCheckboxLabel}
-                    </label>
-                  </div>
-                )}
-
-                <Button
-                  type="submit"
-                  className="w-full"
-                  size="lg"
-                  data-cy={sel('blocks.heroWithForm.form.submit')}
-                >
-                  {submitButtonText}
-                </Button>
-              </form>
-
-              {/* Legal Disclaimer */}
-              {(legalDisclaimer || termsLinkUrl || privacyLinkUrl) && (
-                <p className="text-xs text-muted-foreground mt-4 leading-relaxed">
-                  {legalDisclaimer && <span>{legalDisclaimer} </span>}
-                  {termsLinkUrl && (
-                    <>
-                      <a
-                        href={termsLinkUrl}
-                        className="underline hover:text-primary"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        {termsLinkText}
-                      </a>
-                      {privacyLinkUrl && <span> y </span>}
-                    </>
-                  )}
-                  {privacyLinkUrl && (
-                    <a
-                      href={privacyLinkUrl}
-                      className="underline hover:text-primary"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {privacyLinkText}
-                    </a>
-                  )}
-                </p>
-              )}
-            </div>
-          </div>
-
-        </div>
-      </div>
-    </section>
-  )
-}

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

@@ -1,11 +0,0 @@
-import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
-
-export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
-  slug: 'hero-with-form',
-  name: 'Hero With Form',
-  description: 'Full-width hero section with background image, title/subtitle on the left, and a lead capture form card on the right',
-  category: 'hero',
-  icon: 'FileText',
-  thumbnail: '/theme/blocks/hero-with-form/thumbnail.png',
-  scope: ['pages']
-}

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

@@ -1,16 +0,0 @@
-import type { BlockExample } from '@nextsparkjs/core/types/blocks'
-
-export const examples: BlockExample[] = [
-  {
-    name: 'Default',
-    description: 'Hero with email signup form',
-    props: {
-      title: 'Start Growing Your Business Today',
-      content: 'Join over 10,000 businesses using our platform to streamline their operations and boost productivity.',
-      formPlaceholder: 'Enter your email',
-      formButtonText: 'Get Started',
-      backgroundColor: 'primary',
-      textColor: 'light',
-    },
-  },
-]