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

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

@@ -1,165 +0,0 @@
-import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
-import {
-  baseContentFields,
-  baseDesignFields,
-  baseAdvancedFields,
-} from '@nextsparkjs/core/types/blocks'
-
-/**
- * Post Content Block Field Definitions
- *
- * Organized into 3 tabs:
- * - Content: title, cta (from base) + content (rich-text, replaces base content)
- * - Design: backgroundColor (from base) + editorial typography options
- * - Advanced: className, id (from base)
- *
- * Note: The `content` field is overridden with a rich-text version for editorial content
- */
-
-// Filter out base content field (we'll replace it with rich-text version)
-const baseContentFieldsWithoutContent = baseContentFields.filter(
-  (field) => field.name !== 'content'
-)
-
-// Post-content-specific content fields (rich-text content)
-const postContentFields: FieldDefinition[] = [
-  {
-    name: 'content',
-    label: 'Article Content',
-    type: 'rich-text',
-    tab: 'content',
-    required: true,
-    placeholder: 'Write your article content here...',
-    helpText: 'Main article body with rich text formatting support',
-  },
-]
-
-// Post-content-specific design fields (editorial styling)
-const postDesignFields: FieldDefinition[] = [
-  // Drop cap section
-  {
-    name: 'showDropCap',
-    label: 'Show Drop Cap',
-    type: 'checkbox',
-    tab: 'design',
-    required: false,
-    default: false,
-    helpText: 'Display a decorative large first letter',
-  },
-  {
-    name: 'dropCapStyle',
-    label: 'Drop Cap Style',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'serif',
-    helpText: 'Visual style for the drop cap',
-    options: [
-      { label: 'Serif (Classic)', value: 'serif' },
-      { label: 'Sans-Serif (Modern)', value: 'sans-serif' },
-      { label: 'Decorative', value: 'decorative' },
-    ],
-  },
-
-  // Typography section
-  {
-    name: 'maxWidth',
-    label: 'Reading Width',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'narrow',
-    helpText: 'Optimal reading width for long-form content',
-    options: [
-      { label: 'Narrow (680px) - Optimal for reading', value: 'narrow' },
-      { label: 'Medium (768px)', value: 'medium' },
-      { label: 'Wide (900px)', value: 'wide' },
-    ],
-  },
-  {
-    name: 'fontSize',
-    label: 'Base Font Size',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'medium',
-    helpText: 'Base font size for article text',
-    options: [
-      { label: 'Small (16px)', value: 'small' },
-      { label: 'Medium (18px) - Recommended', value: 'medium' },
-      { label: 'Large (20px)', value: 'large' },
-    ],
-  },
-  {
-    name: 'lineHeight',
-    label: 'Line Spacing',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'relaxed',
-    helpText: 'Vertical spacing between lines',
-    options: [
-      { label: 'Compact (1.6)', value: 'compact' },
-      { label: 'Normal (1.7)', value: 'normal' },
-      { label: 'Relaxed (1.8) - Recommended', value: 'relaxed' },
-    ],
-  },
-  {
-    name: 'paragraphSpacing',
-    label: 'Paragraph Spacing',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'normal',
-    helpText: 'Vertical spacing between paragraphs',
-    options: [
-      { label: 'Tight', value: 'tight' },
-      { label: 'Normal', value: 'normal' },
-      { label: 'Loose', value: 'loose' },
-    ],
-  },
-
-  // Dividers section
-  {
-    name: 'showDividers',
-    label: 'Show Section Dividers',
-    type: 'checkbox',
-    tab: 'design',
-    required: false,
-    default: false,
-    helpText: 'Display subtle dividers between content sections',
-  },
-  {
-    name: 'dividerStyle',
-    label: 'Divider Style',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: 'line',
-    helpText: 'Visual style for section dividers',
-    options: [
-      { label: 'Line', value: 'line' },
-      { label: 'Dots (•••)', value: 'dots' },
-      { label: 'Asterisks (***)', value: 'asterisks' },
-    ],
-  },
-]
-
-/**
- * Complete field definitions organized by tab
- */
-export const fieldDefinitions: FieldDefinition[] = [
-  // Content tab: base fields (without content) + rich-text content
-  ...baseContentFieldsWithoutContent,
-  ...postContentFields,
-
-  // Design tab: base fields + editorial-specific
-  ...baseDesignFields,
-  ...postDesignFields,
-
-  // Advanced tab: base fields only (ALWAYS last)
-  ...baseAdvancedFields,
-]
-
-// Alias for compatibility
-export const fields = fieldDefinitions

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

@@ -1,4 +0,0 @@
-export { config } from './config'
-export { fieldDefinitions, fields } from './fields'
-export { schema, type PostContentBlockProps } from './schema'
-export { PostContentBlock } from './component'

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

@@ -1,46 +0,0 @@
-import { z } from 'zod'
-import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
-
-/**
- * Post Content Block Schema
- *
- * Extends base schema with editorial-focused fields:
- * - content: Main article content (overrides base content with required)
- * - showDropCap: Display decorative drop cap on first letter
- * - dropCapStyle: Style variant for the drop cap
- * - maxWidth: Reading width control for optimal typography
- * - fontSize: Base font size for content
- * - lineHeight: Line spacing for readability
- * - paragraphSpacing: Vertical spacing between paragraphs
- * - showDividers: Show subtle section dividers
- * - dividerStyle: Visual style for dividers
- *
- * Note: Uses base schema title, cta, backgroundColor, className, id
- * The `content` field is overridden to be required and serves as the main article body
- */
-export const postContentSpecificSchema = z.object({
-  // Content: rich text body (overrides base optional content)
-  content: z.string().min(1, 'Content is required'),
-
-  // Design: drop cap styling
-  showDropCap: z.boolean().default(false),
-  dropCapStyle: z.enum(['serif', 'sans-serif', 'decorative']).default('serif'),
-
-  // Design: layout and typography
-  maxWidth: z.enum(['narrow', 'medium', 'wide']).default('narrow'),
-  fontSize: z.enum(['small', 'medium', 'large']).default('medium'),
-  lineHeight: z.enum(['compact', 'normal', 'relaxed']).default('relaxed'),
-  paragraphSpacing: z.enum(['tight', 'normal', 'loose']).default('normal'),
-
-  // Design: section dividers
-  showDividers: z.boolean().default(false),
-  dividerStyle: z.enum(['line', 'dots', 'asterisks']).default('line'),
-})
-
-/**
- * Complete Post Content Block Schema
- * Note: postContentSpecificSchema.content overrides baseBlockSchema.content
- */
-export const schema = baseBlockSchema.merge(postContentSpecificSchema)
-
-export type PostContentBlockProps = 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']
-}

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

@@ -1,96 +0,0 @@
-import type { BlockExample } from '@nextsparkjs/core/types/blocks'
-
-export const examples: BlockExample[] = [
-  {
-    name: 'Standard',
-    description: 'Three-tier pricing without highlight',
-    props: {
-      title: 'Simple, Transparent Pricing',
-      content: 'Choose the plan that fits your needs. All plans include 14-day free trial.',
-      backgroundColor: 'white',
-      columns: '3',
-      highlightPopular: false,
-      plans: [
-        {
-          name: 'Starter',
-          price: '$29',
-          period: 'per month',
-          description: 'Perfect for small teams',
-          features: 'Up to 5 team members\n10GB storage\nEmail support\nBasic analytics',
-          ctaText: 'Start Free Trial',
-          ctaUrl: '/signup?plan=starter',
-          isPopular: false,
-          isDisabled: false,
-        },
-        {
-          name: 'Professional',
-          price: '$99',
-          period: 'per month',
-          description: 'For growing businesses',
-          features: 'Up to 25 team members\n100GB storage\nPriority support\nAdvanced analytics\nCustom integrations',
-          ctaText: 'Start Free Trial',
-          ctaUrl: '/signup?plan=pro',
-          isPopular: false,
-          isDisabled: false,
-        },
-        {
-          name: 'Enterprise',
-          price: 'Custom',
-          period: '',
-          description: 'For large organizations',
-          features: 'Unlimited team members\nUnlimited storage\n24/7 dedicated support\nCustom analytics\nAPI access\nSSO & SAML',
-          ctaText: 'Contact Sales',
-          ctaUrl: '/contact',
-          isPopular: false,
-          isDisabled: false,
-        },
-      ],
-    },
-  },
-  {
-    name: 'With Highlight',
-    description: 'Pricing with highlighted popular plan',
-    props: {
-      title: 'Pricing That Grows With You',
-      content: 'Start free, upgrade when you need more',
-      backgroundColor: 'gray-50',
-      columns: '3',
-      highlightPopular: true,
-      plans: [
-        {
-          name: 'Basic',
-          price: '$0',
-          period: 'forever free',
-          description: 'Get started at no cost',
-          features: 'Up to 3 team members\n5GB storage\nCommunity support\nBasic features',
-          ctaText: 'Get Started',
-          ctaUrl: '/signup?plan=basic',
-          isPopular: false,
-          isDisabled: false,
-        },
-        {
-          name: 'Pro',
-          price: '$49',
-          period: 'per month',
-          description: 'Most popular choice',
-          features: 'Up to 15 team members\n50GB storage\nPriority support\nAll features\nAdvanced analytics\nIntegrations',
-          ctaText: 'Start Free Trial',
-          ctaUrl: '/signup?plan=pro',
-          isPopular: true,
-          isDisabled: false,
-        },
-        {
-          name: 'Business',
-          price: '$199',
-          period: 'per month',
-          description: 'For serious teams',
-          features: 'Unlimited team members\n500GB storage\n24/7 support\nAll Pro features\nCustom workflows\nDedicated manager',
-          ctaText: 'Start Free Trial',
-          ctaUrl: '/signup?plan=business',
-          isPopular: false,
-          isDisabled: false,
-        },
-      ],
-    },
-  },
-]

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

@@ -1,161 +0,0 @@
-import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
-import {
-  baseContentFields,
-  baseDesignFields,
-  baseAdvancedFields,
-} from '@nextsparkjs/core/types/blocks'
-
-/**
- * Pricing Table Block Field Definitions
- *
- * Organized into 3 tabs:
- * - Content: title, content (from base) + plans array
- * - Design: backgroundColor (from base) + columns + highlightPopular
- * - Advanced: className, id (from base)
- */
-
-// Pricing-specific content fields
-const pricingContentFields: FieldDefinition[] = [
-  {
-    name: 'plans',
-    label: 'Pricing Plans',
-    type: 'array',
-    tab: 'content',
-    required: true,
-    description: 'List of pricing plans to display',
-    helpText: 'Add up to 4 pricing plans with features and CTA',
-    minItems: 1,
-    maxItems: 4,
-    itemFields: [
-      {
-        name: 'name',
-        label: 'Plan Name',
-        type: 'text',
-        tab: 'content',
-        required: true,
-        placeholder: 'Starter',
-        maxLength: 50,
-      },
-      {
-        name: 'price',
-        label: 'Price',
-        type: 'text',
-        tab: 'content',
-        required: true,
-        placeholder: '$29',
-        maxLength: 50,
-        helpText: 'Price display (e.g., "$29", "Free", "$99")',
-      },
-      {
-        name: 'period',
-        label: 'Billing Period',
-        type: 'text',
-        tab: 'content',
-        required: false,
-        placeholder: '/month',
-        maxLength: 50,
-        helpText: 'Billing period (e.g., "/month", "/year", "one-time")',
-      },
-      {
-        name: 'description',
-        label: 'Plan Description',
-        type: 'text',
-        tab: 'content',
-        required: false,
-        placeholder: 'Perfect for getting started',
-        maxLength: 200,
-      },
-      {
-        name: 'features',
-        label: 'Features (one per line)',
-        type: 'textarea',
-        tab: 'content',
-        required: false,
-        placeholder: 'Unlimited projects\n24/7 support\nAPI access',
-        rows: 4,
-        helpText: 'Enter each feature on a new line',
-      },
-      {
-        name: 'ctaText',
-        label: 'Button Text',
-        type: 'text',
-        tab: 'content',
-        required: false,
-        placeholder: 'Get Started',
-        maxLength: 50,
-      },
-      {
-        name: 'ctaUrl',
-        label: 'Button Link',
-        type: 'url',
-        tab: 'content',
-        required: false,
-        placeholder: '/signup',
-      },
-      {
-        name: 'isPopular',
-        label: 'Mark as "Popular"',
-        type: 'checkbox',
-        tab: 'content',
-        required: false,
-        default: false,
-        helpText: 'Show "Popular" badge on this plan',
-      },
-      {
-        name: 'isDisabled',
-        label: 'Disable this plan',
-        type: 'checkbox',
-        tab: 'content',
-        required: false,
-        default: false,
-        helpText: 'Gray out this plan (coming soon, unavailable)',
-      },
-    ],
-  },
-]
-
-// Pricing-specific design fields
-const pricingDesignFields: FieldDefinition[] = [
-  {
-    name: 'columns',
-    label: 'Grid Columns',
-    type: 'select',
-    tab: 'design',
-    required: false,
-    default: '3',
-    description: 'Number of columns in the pricing table',
-    options: [
-      { label: '2 Columns', value: '2' },
-      { label: '3 Columns', value: '3' },
-      { label: '4 Columns', value: '4' },
-    ],
-  },
-  {
-    name: 'highlightPopular',
-    label: 'Highlight Popular Plan',
-    type: 'checkbox',
-    tab: 'design',
-    required: false,
-    default: true,
-    description: 'Add border and shadow to popular plan',
-  },
-]
-
-/**
- * Complete field definitions organized by tab
- */
-export const fieldDefinitions: FieldDefinition[] = [
-  // Content tab: base fields + pricing-specific
-  ...baseContentFields,
-  ...pricingContentFields,
-
-  // Design tab: base fields + pricing-specific
-  ...baseDesignFields,
-  ...pricingDesignFields,
-
-  // Advanced tab: base fields only
-  ...baseAdvancedFields,
-]
-
-// Alias for compatibility
-export const fields = fieldDefinitions

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

@@ -1,4 +0,0 @@
-export { config } from './config'
-export { fieldDefinitions, fields } from './fields'
-export { schema, type PricingTableBlockProps, type PlanItem } from './schema'
-export { PricingTableBlock } from './component'