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

package/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/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/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/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/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/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/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/templates/contents/themes/default/blocks/pricing-table/component.tsx

@@ -1,154 +0,0 @@
-import React from 'react'
-import { Button } from '@nextsparkjs/core/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
-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 { PricingTableBlockProps, PlanItem } from './schema'
-
-/**
- * Pricing Table Block Component
- *
- * Props from 3-tab structure:
- * - Content: title, content, plans
- * - Design: backgroundColor, columns, highlightPopular
- * - Advanced: className, id
- */
-export function PricingTableBlock({
-  // Base content props
-  title,
-  content,
-  // Pricing-specific content
-  plans,
-  // Base design props
-  backgroundColor,
-  // Pricing-specific design
-  columns = '3',
-  highlightPopular = true,
-  // Base advanced props
-  className,
-  id,
-}: PricingTableBlockProps) {
-  // Parse features from newline-separated string
-  const parseFeatures = (features?: string): string[] => {
-    if (!features) return []
-    return features.split('\n').map(f => f.trim()).filter(Boolean)
-  }
-
-  // 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',
-  }
-
-  // Build section classes with background and custom className
-  const sectionClasses = buildSectionClasses(
-    'py-16 px-4 md:py-24',
-    { backgroundColor, className }
-  )
-
-  // Safe plans array (fallback to empty array)
-  const safePlans = Array.isArray(plans) ? plans : []
-
-  return (
-    <section id={id} className={sectionClasses} data-cy={sel('blocks.pricingTable.container')}>
-      <div className="container mx-auto max-w-7xl">
-        {/* 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>
-        )}
-
-        {/* Pricing Plans Grid */}
-        <div className={cn('grid gap-8', columnClasses[columns] || columnClasses['3'])}>
-          {safePlans.map((plan: PlanItem, index: number) => {
-            const features = parseFeatures(plan.features)
-            const isHighlighted = highlightPopular && plan.isPopular
-
-            return (
-              <Card
-                key={index}
-                className={cn(
-                  'relative flex flex-col',
-                  isHighlighted && 'border-primary shadow-lg scale-105',
-                  plan.isDisabled && 'opacity-60'
-                )}
-                data-cy={sel('blocks.pricingTable.plan', { index: String(index) })}
-              >
-                {/* Popular Badge */}
-                {isHighlighted && (
-                  <div className="absolute -top-3 left-1/2 -translate-x-1/2">
-                    <span className="bg-primary text-primary-foreground text-xs font-semibold px-3 py-1 rounded-full">
-                      Popular
-                    </span>
-                  </div>
-                )}
-
-                {/* Card Header */}
-                <CardHeader className="text-center pb-8">
-                  <CardTitle className="text-2xl mb-2">{plan.name}</CardTitle>
-                  <div className="flex items-baseline justify-center gap-1">
-                    <span className="text-4xl font-bold">{plan.price}</span>
-                    {plan.period && (
-                      <span className="text-muted-foreground">{plan.period}</span>
-                    )}
-                  </div>
-                  {plan.description && (
-                    <CardDescription className="mt-2">{plan.description}</CardDescription>
-                  )}
-                </CardHeader>
-
-                {/* Card Content */}
-                <CardContent className="flex-1 flex flex-col">
-                  {/* Features List */}
-                  {features.length > 0 && (
-                    <ul className="space-y-3 mb-6 flex-1" data-cy={sel('blocks.pricingTable.features')}>
-                      {features.map((feature: string, i: number) => (
-                        <li key={i} className="flex items-start gap-2">
-                          <Check className="h-5 w-5 text-primary shrink-0 mt-0.5" />
-                          <span className="text-sm text-muted-foreground">{feature}</span>
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-
-                  {/* CTA Button */}
-                  {plan.ctaText && plan.ctaUrl && (
-                    <Button
-                      asChild
-                      className="w-full"
-                      variant={isHighlighted ? 'default' : 'outline'}
-                      disabled={plan.isDisabled}
-                      data-cy={sel('blocks.pricingTable.cta', { index: String(index) })}
-                    >
-                      <a href={plan.ctaUrl}>{plan.ctaText}</a>
-                    </Button>
-                  )}
-
-                  {/* Disabled State Message */}
-                  {plan.isDisabled && !plan.ctaText && (
-                    <div className="text-center text-sm text-muted-foreground">
-                      Coming Soon
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
-            )
-          })}
-        </div>
-      </div>
-    </section>
-  )
-}

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

@@ -1,11 +0,0 @@
-import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
-
-export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
-  slug: 'pricing-table',
-  name: 'Pricing Table',
-  description: 'A pricing comparison table showing different plans with features list, price, CTA button, and optional "Popular" badge',
-  category: 'pricing',
-  icon: 'DollarSign',
-  thumbnail: '/theme/blocks/pricing-table/thumbnail.png',
-  scope: ['pages']
-}