prev-cli 0.24.16 → 0.24.19

package/src/jsx/adapters/react.test.ts

@@ -0,0 +1,172 @@
+// src/jsx/adapters/react.test.ts
+import { describe, test, expect, beforeEach } from 'bun:test'
+import { toReact, setTokensConfig } from './react'
+import { resolveTokens } from '../../tokens/resolver'
+
+// Get default tokens once at module load for test stability
+const defaultTokens = resolveTokens({})
+
+describe('React adapter token resolution', () => {
+  beforeEach(() => {
+    // Explicitly set default tokens for test isolation
+    // This avoids relying on filesystem state during tests
+    setTokensConfig(defaultTokens)
+  })
+
+  test('Box resolves bg token to background value', () => {
+    const node = {
+      type: 'box' as const,
+      id: 'test-1',
+      props: { bg: 'primary' },
+      children: []
+    }
+    const element = toReact(node) as React.ReactElement
+    expect(element.props.style.background).toBe('#2563eb')
+  })
+
+  test('Box resolves padding token to spacing value', () => {
+    const node = {
+      type: 'box' as const,
+      id: 'test-2',
+      props: { padding: 'lg' },
+      children: []
+    }
+    const element = toReact(node) as React.ReactElement
+    expect(element.props.style.padding).toBe('24px')
+  })
+
+  test('Text resolves color token', () => {
+    const node = {
+      type: 'text' as const,
+      id: 'test-3',
+      props: { content: 'hi', color: 'muted-foreground' },
+      children: []
+    }
+    const element = toReact(node) as React.ReactElement
+    expect(element.props.style.color).toBe('#64748b')
+  })
+
+  test('Text resolves size token', () => {
+    const node = {
+      type: 'text' as const,
+      id: 'test-4',
+      props: { content: 'hi', size: 'lg' },
+      children: []
+    }
+    const element = toReact(node) as React.ReactElement
+    expect(element.props.style.fontSize).toBe('18px')
+  })
+
+  test('Text resolves weight token', () => {
+    const node = {
+      type: 'text' as const,
+      id: 'test-5',
+      props: { content: 'hi', weight: 'bold' },
+      children: []
+    }
+    const element = toReact(node) as React.ReactElement
+    expect(element.props.style.fontWeight).toBe(700)
+  })
+
+  test('Box resolves radius token', () => {
+    const node = {
+      type: 'box' as const,
+      id: 'test-6',
+      props: { radius: 'lg' },
+      children: []
+    }
+    const element = toReact(node) as React.ReactElement
+    expect(element.props.style.borderRadius).toBe('8px')
+  })
+
+  test('Row resolves gap token', () => {
+    const node = {
+      type: 'row' as const,
+      id: 'test-7',
+      props: { gap: 'md' },
+      children: []
+    }
+    const element = toReact(node) as React.ReactElement
+    expect(element.props.style.gap).toBe('16px')
+  })
+
+  test('uses custom tokens when set via setTokensConfig', () => {
+    // Import TokensConfig type
+    const customTokens = {
+      colors: {
+        foreground: '#000',
+        'card-foreground': '#000',
+        'popover-foreground': '#000',
+        primary: '#ff0000',  // Custom red
+        'primary-foreground': '#fff',
+        secondary: '#64748b',
+        'secondary-foreground': '#000',
+        muted: '#94a3b8',
+        'muted-foreground': '#64748b',
+        accent: '#2563eb',
+        'accent-foreground': '#fff',
+        destructive: '#ef4444',
+        'destructive-foreground': '#fff',
+        border: '#e2e8f0',
+        ring: '#2563eb',
+      },
+      backgrounds: {
+        transparent: 'transparent',
+        background: '#fff',
+        card: '#fff',
+        popover: '#fff',
+        primary: '#ff0000',  // Custom red
+        secondary: '#f1f5f9',
+        muted: '#f1f5f9',
+        accent: '#f1f5f9',
+        destructive: '#ef4444',
+        input: '#fff',
+      },
+      spacing: {
+        none: '0',
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+        '2xl': '48px',
+      },
+      typography: {
+        sizes: { xs: '12px', sm: '14px', base: '16px', lg: '18px', xl: '20px', '2xl': '24px' },
+        weights: { normal: 400, medium: 500, semibold: 600, bold: 700 },
+      },
+      radius: { none: '0', sm: '4px', md: '6px', lg: '8px', xl: '12px', full: '9999px' },
+      shadows: { none: 'none', sm: '0 1px 2px', md: '0 4px 6px', lg: '0 10px 15px', xl: '0 20px 25px' },
+    }
+
+    setTokensConfig(customTokens)
+
+    const node = {
+      type: 'box' as const,
+      id: 'test-8',
+      props: { bg: 'primary' },
+      children: []
+    }
+    const element = toReact(node) as React.ReactElement
+    expect(element.props.style.background).toBe('#ff0000')  // Custom red
+  })
+
+  test('throws error for missing token in custom config', () => {
+    const incompleteTokens = {
+      ...defaultTokens,
+      spacing: { ...defaultTokens.spacing }
+    }
+    delete (incompleteTokens.spacing as Record<string, unknown>)['lg']  // Remove lg
+
+    setTokensConfig(incompleteTokens as any)
+
+    const node = {
+      type: 'box' as const,
+      id: 'test-missing',
+      props: { padding: 'lg' },
+      children: []
+    }
+
+    expect(() => toReact(node)).toThrow(/Missing spacing token: "lg"/)
+  })
+})

package/src/jsx/adapters/react.tsx

@@ -0,0 +1,346 @@
+// src/jsx/adapters/react.tsx
+// React adapter - renders VNode tree to React elements
+import React from 'react'
+import type { VNodeType } from '../vnode'
+import type {
+  SpacingToken,
+  AlignToken,
+  BackgroundToken,
+  RadiusToken,
+  ColorToken,
+  SizeToken,
+  WeightToken,
+  FitToken,
+} from '../schemas/tokens'
+// TokensConfig type - must match resolver.ts
+// Duplicated here to avoid importing Node.js-only resolver in browser
+export interface TokensConfig {
+  colors: Record<string, string>
+  backgrounds: Record<string, string>
+  spacing: Record<string, string>
+  typography: {
+    sizes: Record<string, string>
+    weights: Record<string, number>
+  }
+  radius: Record<string, string>
+  shadows: Record<string, string>
+}
+
+// ============================================================
+// Token resolution with caching
+// ============================================================
+
+// Cached tokens - must be set via setTokensConfig() before rendering
+let cachedTokens: TokensConfig | null = null
+
+// Get cached tokens - throws if not initialized
+// In browser: setTokensConfig() must be called first
+// In Node.js tests: setTokensConfig() with resolved tokens
+function getTokens(): TokensConfig {
+  if (!cachedTokens) {
+    throw new Error(
+      'Tokens not initialized. Call setTokensConfig(tokens) before rendering. ' +
+      'In browser preview, this should be done automatically by the preview runtime.'
+    )
+  }
+  return cachedTokens
+}
+
+// Allow setting custom tokens (for testing and runtime override)
+export function setTokensConfig(tokens: TokensConfig | undefined): void {
+  cachedTokens = tokens || null
+}
+
+// Helper functions to get token values - throw on missing tokens to surface config bugs early
+function getSpacing(token: SpacingToken): string {
+  const value = getTokens().spacing[token]
+  if (value === undefined) {
+    throw new Error(`Missing spacing token: "${token}". Check your tokens.yaml configuration.`)
+  }
+  return value
+}
+
+function getBackground(token: BackgroundToken): string {
+  const value = getTokens().backgrounds[token]
+  if (value === undefined) {
+    throw new Error(`Missing background token: "${token}". Check your tokens.yaml configuration.`)
+  }
+  return value
+}
+
+function getRadius(token: RadiusToken): string {
+  const value = getTokens().radius[token]
+  if (value === undefined) {
+    throw new Error(`Missing radius token: "${token}". Check your tokens.yaml configuration.`)
+  }
+  return value
+}
+
+function getColor(token: ColorToken): string {
+  const value = getTokens().colors[token]
+  if (value === undefined) {
+    throw new Error(`Missing color token: "${token}". Check your tokens.yaml configuration.`)
+  }
+  return value
+}
+
+function getTypographySize(token: SizeToken): string {
+  const value = getTokens().typography.sizes[token]
+  if (value === undefined) {
+    throw new Error(`Missing typography.sizes token: "${token}". Check your tokens.yaml configuration.`)
+  }
+  return value
+}
+
+function getTypographyWeight(token: WeightToken): number {
+  const value = getTokens().typography.weights[token]
+  if (value === undefined) {
+    throw new Error(`Missing typography.weights token: "${token}". Check your tokens.yaml configuration.`)
+  }
+  return value
+}
+
+// ============================================================
+// Non-token style mappings (CSS values, not design tokens)
+// ============================================================
+
+const ALIGN_VALUES: Record<AlignToken, React.CSSProperties> = {
+  start: { alignItems: 'flex-start' },
+  center: { alignItems: 'center' },
+  end: { alignItems: 'flex-end' },
+  stretch: { alignItems: 'stretch' },
+  between: { justifyContent: 'space-between' },
+}
+
+const ICON_SIZE_VALUES: Record<SizeToken, string> = {
+  xs: '12px',
+  sm: '16px',
+  base: '20px',
+  lg: '24px',
+  xl: '28px',
+  '2xl': '32px',
+}
+
+const FIT_VALUES: Record<FitToken, React.CSSProperties['objectFit']> = {
+  cover: 'cover',
+  contain: 'contain',
+  fill: 'fill',
+}
+
+// ============================================================
+// Render context
+// ============================================================
+
+export interface ReactRenderContext {
+  /** Current state for slot resolution */
+  state?: string
+  /** Slots mapping: slotName -> stateName -> VNode */
+  slots?: Record<string, Record<string, VNodeType>>
+  /** Callback to render component nodes */
+  renderComponent?: (name: string, props: Record<string, unknown>, children?: React.ReactNode) => React.ReactNode
+}
+
+// ============================================================
+// Main render function
+// ============================================================
+
+/**
+ * Render a VNode tree to React elements
+ */
+export function toReact(node: VNodeType | VNodeType[], context: ReactRenderContext = {}): React.ReactNode {
+  if (Array.isArray(node)) {
+    return node.map((n, i) => <React.Fragment key={n.id || i}>{renderNode(n, context)}</React.Fragment>)
+  }
+  return renderNode(node, context)
+}
+
+function renderNode(node: VNodeType, context: ReactRenderContext): React.ReactNode {
+  switch (node.type) {
+    case 'col':
+      return renderCol(node, context)
+    case 'row':
+      return renderRow(node, context)
+    case 'box':
+      return renderBox(node, context)
+    case 'spacer':
+      return renderSpacer(node)
+    case 'slot':
+      return renderSlot(node, context)
+    case 'text':
+      return renderText(node)
+    case 'icon':
+      return renderIcon(node)
+    case 'image':
+      return renderImage(node)
+    case 'component':
+      return renderComponent(node, context)
+    default:
+      return null
+  }
+}
+
+function renderChildren(children: VNodeType[] | undefined, context: ReactRenderContext): React.ReactNode {
+  if (!children || children.length === 0) return null
+  return children.map((child) => (
+    <React.Fragment key={child.id}>{renderNode(child, context)}</React.Fragment>
+  ))
+}
+
+// ============================================================
+// Primitive renderers
+// ============================================================
+
+function renderCol(node: VNodeType, context: ReactRenderContext): React.ReactNode {
+  const { gap, align, padding } = node.props as { gap?: SpacingToken; align?: AlignToken; padding?: SpacingToken }
+
+  const style: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    ...(gap && { gap: getSpacing(gap) }),
+    ...(align && ALIGN_VALUES[align]),
+    ...(padding && { padding: getSpacing(padding) }),
+  }
+
+  return (
+    <div data-primitive="col" data-node-id={node.id} style={style}>
+      {renderChildren(node.children, context)}
+    </div>
+  )
+}
+
+function renderRow(node: VNodeType, context: ReactRenderContext): React.ReactNode {
+  const { gap, align, padding } = node.props as { gap?: SpacingToken; align?: AlignToken; padding?: SpacingToken }
+
+  const style: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center', // Row defaults to center
+    ...(gap && { gap: getSpacing(gap) }),
+    ...(align && ALIGN_VALUES[align]),
+    ...(padding && { padding: getSpacing(padding) }),
+  }
+
+  return (
+    <div data-primitive="row" data-node-id={node.id} style={style}>
+      {renderChildren(node.children, context)}
+    </div>
+  )
+}
+
+function renderBox(node: VNodeType, context: ReactRenderContext): React.ReactNode {
+  const { padding, bg, radius } = node.props as { padding?: SpacingToken; bg?: BackgroundToken; radius?: RadiusToken }
+
+  const style: React.CSSProperties = {
+    ...(padding && { padding: getSpacing(padding) }),
+    ...(bg && { background: getBackground(bg) }),
+    ...(radius && { borderRadius: getRadius(radius) }),
+  }
+
+  return (
+    <div data-primitive="box" data-node-id={node.id} style={style}>
+      {renderChildren(node.children, context)}
+    </div>
+  )
+}
+
+function renderSpacer(node: VNodeType): React.ReactNode {
+  const { size } = node.props as { size?: SpacingToken }
+
+  const style: React.CSSProperties = size
+    ? { width: getSpacing(size), height: getSpacing(size), flexShrink: 0 }
+    : { flex: 1 }
+
+  return <div data-primitive="spacer" data-node-id={node.id} style={style} />
+}
+
+function renderSlot(node: VNodeType, context: ReactRenderContext): React.ReactNode {
+  const { name } = node.props as { name: string }
+  const state = context.state || 'default'
+
+  if (context.slots && context.slots[name]) {
+    const stateMapping = context.slots[name]
+    const content = stateMapping[state] || stateMapping.default
+
+    if (content) {
+      return renderNode(content, context)
+    }
+  }
+
+  return <div data-primitive="slot" data-slot-name={name} data-node-id={node.id} />
+}
+
+function renderText(node: VNodeType): React.ReactNode {
+  const { content, size, weight, color } = node.props as {
+    content?: string
+    size?: SizeToken
+    weight?: WeightToken
+    color?: ColorToken
+  }
+
+  const style: React.CSSProperties = {
+    ...(size && { fontSize: getTypographySize(size) }),
+    ...(weight && { fontWeight: getTypographyWeight(weight) }),
+    ...(color && { color: getColor(color) }),
+  }
+
+  return (
+    <span data-primitive="text" data-node-id={node.id} style={style}>
+      {content || ''}
+    </span>
+  )
+}
+
+function renderIcon(node: VNodeType): React.ReactNode {
+  const { name, size, color } = node.props as { name: string; size?: SizeToken; color?: ColorToken }
+
+  const iconSize = size ? ICON_SIZE_VALUES[size] : ICON_SIZE_VALUES.base
+
+  const style: React.CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: iconSize,
+    height: iconSize,
+    ...(color && { color: getColor(color) }),
+  }
+
+  // Placeholder for icon - in real implementation, would use icon library
+  return (
+    <span data-primitive="icon" data-icon={name} data-node-id={node.id} style={style}>
+      {/* Icon placeholder */}
+    </span>
+  )
+}
+
+function renderImage(node: VNodeType): React.ReactNode {
+  const { src, alt, fit } = node.props as { src: string; alt?: string; fit?: FitToken }
+
+  const style: React.CSSProperties = {
+    maxWidth: '100%',
+    ...(fit && { objectFit: FIT_VALUES[fit] }),
+  }
+
+  return (
+    <img
+      data-primitive="image"
+      data-node-id={node.id}
+      src={src}
+      alt={alt || ''}
+      style={style}
+    />
+  )
+}
+
+function renderComponent(node: VNodeType, context: ReactRenderContext): React.ReactNode {
+  const componentName = node.componentName || 'Unknown'
+
+  if (context.renderComponent) {
+    return context.renderComponent(componentName, node.props, renderChildren(node.children, context))
+  }
+
+  return (
+    <div data-component={componentName} data-node-id={node.id}>
+      {renderChildren(node.children, context)}
+    </div>
+  )
+}

package/src/jsx/define-component.ts

@@ -0,0 +1,129 @@
+// src/jsx/define-component.ts
+// API for defining custom components with typed props and states
+import { z } from 'zod'
+import { createComponentVNode, type VNodeType } from './vnode'
+import { validateProps } from './validation'
+
+/**
+ * Render context passed to component render function
+ */
+export interface ComponentContext<TProps, TState> {
+  props: TProps
+  state: TState
+}
+
+/**
+ * Component definition options
+ */
+export interface ComponentDefinition<
+  TProps extends z.ZodType,
+  TStates extends z.ZodType,
+> {
+  /** Component name (used in VNode tree) */
+  name: string
+  /** Zod schema for props */
+  props: TProps
+  /** Zod schema for states */
+  states: TStates
+  /** Default state value */
+  defaultState: z.infer<TStates>
+  /** Render function that returns a VNode tree */
+  render: (ctx: ComponentContext<z.infer<TProps>, z.infer<TStates>>) => VNodeType
+}
+
+/**
+ * Component function type returned by defineComponent
+ */
+export type ComponentFunction<TProps, TState> = {
+  (props: TProps, state?: TState): VNodeType
+  componentName: string
+  propsSchema: z.ZodType<TProps>
+  statesSchema: z.ZodType<TState>
+  defaultState: TState
+}
+
+/**
+ * Define a reusable component with typed props and states
+ *
+ * @example
+ * ```tsx
+ * const Button = defineComponent({
+ *   name: 'Button',
+ *   props: z.object({
+ *     label: z.string(),
+ *     variant: z.enum(['primary', 'secondary']).optional(),
+ *   }),
+ *   states: z.enum(['idle', 'loading', 'disabled']),
+ *   defaultState: 'idle',
+ *   render: ({ props, state }) => (
+ *     <Box bg={state === 'loading' ? 'muted' : 'primary'} padding="md" radius="md">
+ *       <Text>{props.label}</Text>
+ *     </Box>
+ *   ),
+ * })
+ *
+ * // Usage
+ * <Button label="Click me" />
+ * <Button label="Processing..." state="loading" />
+ * ```
+ */
+export function defineComponent<
+  TProps extends z.ZodType,
+  TStates extends z.ZodType,
+>(
+  definition: ComponentDefinition<TProps, TStates>
+): ComponentFunction<z.infer<TProps>, z.infer<TStates>> {
+  const { name, props: propsSchema, states: statesSchema, defaultState, render } = definition
+
+  // Validate default state at definition time
+  statesSchema.parse(defaultState)
+
+  const Component = function (
+    props: z.infer<TProps>,
+    state?: z.infer<TStates>
+  ): VNodeType {
+    // Validate props based on current validation mode
+    validateProps(propsSchema, props, name)
+
+    // Use provided state or default
+    const resolvedState = state !== undefined ? state : defaultState
+
+    // Validate state if provided
+    if (state !== undefined) {
+      validateProps(statesSchema, state, `${name}[state]`)
+    }
+
+    // Render the component
+    const rendered = render({ props, state: resolvedState })
+
+    // Wrap in component VNode
+    return createComponentVNode(name, props as Record<string, unknown>, [rendered])
+  }
+
+  // Attach metadata
+  Component.componentName = name
+  Component.propsSchema = propsSchema
+  Component.statesSchema = statesSchema
+  Component.defaultState = defaultState
+
+  return Component as ComponentFunction<z.infer<TProps>, z.infer<TStates>>
+}
+
+/**
+ * Helper to create a simple component without states
+ */
+export function defineStatelessComponent<TProps extends z.ZodType>(definition: {
+  name: string
+  props: TProps
+  render: (props: z.infer<TProps>) => VNodeType
+}): (props: z.infer<TProps>) => VNodeType {
+  const NoState = z.literal('default')
+
+  return defineComponent({
+    name: definition.name,
+    props: definition.props,
+    states: NoState,
+    defaultState: 'default',
+    render: ({ props }) => definition.render(props),
+  })
+}

package/src/jsx/index.ts

@@ -0,0 +1,47 @@
+// src/jsx/index.ts
+// Main entry point for JSX primitives
+
+// Schemas
+export * from './schemas'
+
+// VNode
+export {
+  createVNode,
+  createComponentVNode,
+  normalizeChildren,
+  vnodeEquals,
+  resetIdCounter,
+  VNode,
+  type VNodeType,
+} from './vnode'
+
+// JSX runtime (for direct use)
+export {
+  Col,
+  Row,
+  Box,
+  Spacer,
+  Slot,
+  Text,
+  Icon,
+  Image,
+  Fragment,
+} from './jsx-runtime'
+
+// defineComponent API
+export {
+  defineComponent,
+  defineStatelessComponent,
+  type ComponentContext,
+  type ComponentDefinition,
+  type ComponentFunction,
+} from './define-component'
+
+// HTML adapter
+export { renderToHtml, type RenderContext } from './adapters/html'
+
+// React adapter
+export { toReact, setTokensConfig, type ReactRenderContext, type TokensConfig } from './adapters/react'
+
+// Migration tool
+export { migrateYamlToJsx, type MigrationResult, type YamlConfig } from './migrate'