prev-cli 0.24.18 → 0.24.19

package/src/primitives/types.ts

@@ -0,0 +1,248 @@
+// src/primitives/types.ts
+// Type definitions for layout and content primitives
+
+/**
+ * Design token types for consistent spacing, sizing, and styling
+ * Using shadcn/ui-compatible naming conventions
+ */
+export type SpacingToken = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+export type AlignToken = 'start' | 'center' | 'end' | 'stretch' | 'between'
+
+// Background tokens - shadcn-compatible
+export type BackgroundToken =
+  | 'transparent'
+  | 'background'
+  | 'card'
+  | 'primary'
+  | 'secondary'
+  | 'muted'
+  | 'accent'
+  | 'destructive'
+  | 'input'
+
+export type RadiusToken = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
+
+// Color tokens - shadcn-compatible (foreground colors for text)
+export type ColorToken =
+  | 'foreground'
+  | 'card-foreground'
+  | 'primary'
+  | 'primary-foreground'
+  | 'secondary'
+  | 'secondary-foreground'
+  | 'muted'
+  | 'muted-foreground'
+  | 'accent'
+  | 'accent-foreground'
+  | 'destructive'
+  | 'destructive-foreground'
+  | 'border'
+  | 'ring'
+
+// Typography size tokens
+export type SizeToken = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl'
+
+export type WeightToken = 'normal' | 'medium' | 'semibold' | 'bold'
+export type FitToken = 'cover' | 'contain' | 'fill'
+
+/**
+ * All primitive type names
+ */
+export type PrimitiveType =
+  | '$col'
+  | '$row'
+  | '$box'
+  | '$spacer'
+  | '$slot'
+  | '$text'
+  | '$icon'
+  | '$image'
+
+/**
+ * Layout primitive: $col - Vertical stack
+ */
+export interface ColPrimitive {
+  type: '$col'
+  gap?: SpacingToken
+  align?: AlignToken
+  padding?: SpacingToken
+}
+
+/**
+ * Layout primitive: $row - Horizontal stack
+ */
+export interface RowPrimitive {
+  type: '$row'
+  gap?: SpacingToken
+  align?: AlignToken
+  padding?: SpacingToken
+}
+
+/**
+ * Layout primitive: $box - Container with styling
+ */
+export interface BoxPrimitive {
+  type: '$box'
+  padding?: SpacingToken
+  bg?: BackgroundToken
+  radius?: RadiusToken
+}
+
+/**
+ * Layout primitive: $spacer - Whitespace
+ */
+export interface SpacerPrimitive {
+  type: '$spacer'
+  size?: SpacingToken // If absent, flex grow
+}
+
+/**
+ * Layout primitive: $slot - State-dependent placeholder
+ */
+export interface SlotPrimitive {
+  type: '$slot'
+  name: string
+}
+
+/**
+ * Content primitive: $text - Text content
+ */
+export interface TextPrimitive {
+  type: '$text'
+  content: string // Prop reference or quoted literal
+  size?: SizeToken
+  weight?: WeightToken
+  color?: ColorToken
+}
+
+/**
+ * Content primitive: $icon - Icon
+ */
+export interface IconPrimitive {
+  type: '$icon'
+  name: string // Prop reference or string
+  size?: SizeToken
+  color?: ColorToken
+}
+
+/**
+ * Content primitive: $image - Image
+ */
+export interface ImagePrimitive {
+  type: '$image'
+  src: string // Prop reference or URL
+  alt?: string
+  fit?: FitToken
+}
+
+/**
+ * Union of all primitives
+ */
+export type Primitive =
+  | ColPrimitive
+  | RowPrimitive
+  | BoxPrimitive
+  | SpacerPrimitive
+  | SlotPrimitive
+  | TextPrimitive
+  | IconPrimitive
+  | ImagePrimitive
+
+/**
+ * Parsed primitive with original string
+ */
+export interface ParsedPrimitive<T extends Primitive = Primitive> {
+  primitive: T
+  raw: string
+}
+
+/**
+ * Template node - container or leaf
+ */
+export interface TemplateContainerNode {
+  type: string // Primitive string like "$col(gap:lg)"
+  children?: Record<string, TemplateNode>
+}
+
+export interface TemplateLeafNode {
+  value: string // Primitive or ref like "$text(label)" or "components/button"
+}
+
+export type TemplateNode = TemplateContainerNode | string
+
+/**
+ * Template root structure
+ */
+export interface Template {
+  root: TemplateNode
+}
+
+/**
+ * Slots mapping: state name -> content ref
+ */
+export type Slots = Record<string, Record<string, string>>
+
+/**
+ * Screen v2 config with template and slots
+ */
+export interface ScreenV2Config {
+  kind: 'screen'
+  id: string
+  title: string
+  schemaVersion: '2.0'
+  states?: Record<string, { description?: string }>
+  template: Template
+  slots?: Slots
+  // Legacy field for backwards compatibility
+  layoutByRenderer?: Record<string, unknown>
+}
+
+/**
+ * Component v2 config with props and template
+ */
+export interface ComponentV2Config {
+  kind: 'component'
+  id: string
+  title: string
+  schemaVersion: '2.0'
+  props?: Record<string, {
+    type?: string
+    required?: boolean
+    default?: unknown
+    values?: unknown[]
+  }>
+  template?: Template
+}
+
+/**
+ * Check if a string is a primitive (starts with $)
+ */
+export function isPrimitive(value: string): boolean {
+  return value.startsWith('$')
+}
+
+/**
+ * Check if a string is a component/screen/flow ref (contains /)
+ */
+export function isRef(value: string): boolean {
+  return value.includes('/') && !value.startsWith('$')
+}
+
+/**
+ * Check if a template node is a container (has type and children)
+ */
+export function isContainerNode(node: unknown): node is TemplateContainerNode {
+  return (
+    typeof node === 'object' &&
+    node !== null &&
+    'type' in node &&
+    typeof (node as Record<string, unknown>).type === 'string'
+  )
+}
+
+/**
+ * Check if a template node is a leaf (string value)
+ */
+export function isLeafNode(node: unknown): node is string {
+  return typeof node === 'string'
+}

package/src/tokens/defaults.test.ts

@@ -0,0 +1,137 @@
+// src/tokens/defaults.test.ts
+import { describe, test, expect, beforeAll } from 'bun:test'
+import { load as parse } from 'js-yaml'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+
+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>
+}
+
+describe('defaults.yaml', () => {
+  let tokens: TokensConfig
+
+  beforeAll(() => {
+    const content = readFileSync(join(import.meta.dir, 'defaults.yaml'), 'utf-8')
+    tokens = parse(content) as TokensConfig
+  })
+
+  test('is valid YAML', () => {
+    const content = readFileSync(join(import.meta.dir, 'defaults.yaml'), 'utf-8')
+    expect(() => parse(content)).not.toThrow()
+  })
+
+  test('has all shadcn color tokens', () => {
+    expect(tokens.colors).toHaveProperty('primary')
+    expect(tokens.colors).toHaveProperty('secondary')
+    expect(tokens.colors).toHaveProperty('muted-foreground')
+    expect(tokens.colors).toHaveProperty('destructive')
+  })
+
+  test('has spacing scale', () => {
+    expect(Object.keys(tokens.spacing)).toEqual(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'])
+  })
+
+  test('spacing values match Tailwind scale', () => {
+    expect(tokens.spacing.none).toBe('0')
+    expect(tokens.spacing.xs).toBe('4px')
+    expect(tokens.spacing.sm).toBe('8px')
+    expect(tokens.spacing.md).toBe('16px')
+    expect(tokens.spacing.lg).toBe('24px')
+    expect(tokens.spacing.xl).toBe('32px')
+    expect(tokens.spacing['2xl']).toBe('48px')
+  })
+
+  test('has all shadcn foreground tokens', () => {
+    expect(tokens.colors).toHaveProperty('foreground')
+    expect(tokens.colors).toHaveProperty('card-foreground')
+    expect(tokens.colors).toHaveProperty('primary-foreground')
+    expect(tokens.colors).toHaveProperty('secondary-foreground')
+    expect(tokens.colors).toHaveProperty('accent-foreground')
+    expect(tokens.colors).toHaveProperty('destructive-foreground')
+    expect(tokens.colors).toHaveProperty('popover-foreground')
+  })
+
+  test('has border and ring tokens', () => {
+    expect(tokens.colors).toHaveProperty('border')
+    expect(tokens.colors).toHaveProperty('ring')
+  })
+
+  test('primary color is blue', () => {
+    expect(tokens.colors.primary).toBe('#2563eb')
+  })
+
+  test('destructive color is red', () => {
+    expect(tokens.colors.destructive).toBe('#ef4444')
+  })
+
+  test('has typography sizes', () => {
+    expect(Object.keys(tokens.typography.sizes)).toEqual(['xs', 'sm', 'base', 'lg', 'xl', '2xl'])
+  })
+
+  test('typography size values are correct', () => {
+    expect(tokens.typography.sizes.xs).toBe('12px')
+    expect(tokens.typography.sizes.sm).toBe('14px')
+    expect(tokens.typography.sizes.base).toBe('16px')
+    expect(tokens.typography.sizes.lg).toBe('18px')
+    expect(tokens.typography.sizes.xl).toBe('20px')
+    expect(tokens.typography.sizes['2xl']).toBe('24px')
+  })
+
+  test('has typography weights', () => {
+    expect(Object.keys(tokens.typography.weights)).toEqual(['normal', 'medium', 'semibold', 'bold'])
+  })
+
+  test('typography weight values are correct', () => {
+    expect(tokens.typography.weights.normal).toBe(400)
+    expect(tokens.typography.weights.medium).toBe(500)
+    expect(tokens.typography.weights.semibold).toBe(600)
+    expect(tokens.typography.weights.bold).toBe(700)
+  })
+
+  test('has radius scale', () => {
+    expect(Object.keys(tokens.radius)).toEqual(['none', 'sm', 'md', 'lg', 'xl', 'full'])
+  })
+
+  test('radius values are correct', () => {
+    expect(tokens.radius.none).toBe('0')
+    expect(tokens.radius.sm).toBe('4px')
+    expect(tokens.radius.md).toBe('6px')
+    expect(tokens.radius.lg).toBe('8px')
+    expect(tokens.radius.xl).toBe('12px')
+    expect(tokens.radius.full).toBe('9999px')
+  })
+
+  test('has shadow scale', () => {
+    expect(Object.keys(tokens.shadows)).toEqual(['none', 'sm', 'md', 'lg', 'xl'])
+  })
+
+  test('has background tokens', () => {
+    expect(tokens.backgrounds).toHaveProperty('transparent')
+    expect(tokens.backgrounds).toHaveProperty('background')
+    expect(tokens.backgrounds).toHaveProperty('card')
+    expect(tokens.backgrounds).toHaveProperty('primary')
+    expect(tokens.backgrounds).toHaveProperty('secondary')
+    expect(tokens.backgrounds).toHaveProperty('muted')
+    expect(tokens.backgrounds).toHaveProperty('accent')
+    expect(tokens.backgrounds).toHaveProperty('destructive')
+    expect(tokens.backgrounds).toHaveProperty('input')
+    expect(tokens.backgrounds).toHaveProperty('popover')
+  })
+
+  test('background values are correct', () => {
+    expect(tokens.backgrounds.transparent).toBe('transparent')
+    expect(tokens.backgrounds.background).toBe('#ffffff')
+    expect(tokens.backgrounds.card).toBe('#ffffff')
+    expect(tokens.backgrounds.popover).toBe('#ffffff')
+    expect(tokens.backgrounds.primary).toBe('#2563eb')
+  })
+})

package/src/tokens/defaults.ts

@@ -0,0 +1,77 @@
+// src/tokens/defaults.ts
+// Default shadcn design tokens for prev-cli
+// Users can override these in their project's tokens.yaml
+
+import type { TokensConfig } from './resolver'
+
+export const DEFAULT_TOKENS: TokensConfig = {
+  colors: {
+    foreground: "#0f172a",
+    "card-foreground": "#0f172a",
+    "popover-foreground": "#0f172a",
+    primary: "#2563eb",
+    "primary-foreground": "#ffffff",
+    secondary: "#64748b",
+    "secondary-foreground": "#0f172a",
+    muted: "#94a3b8",
+    "muted-foreground": "#64748b",
+    accent: "#2563eb",
+    "accent-foreground": "#ffffff",
+    destructive: "#ef4444",
+    "destructive-foreground": "#ffffff",
+    border: "#e2e8f0",
+    ring: "#2563eb",
+  },
+  backgrounds: {
+    transparent: "transparent",
+    background: "#ffffff",
+    card: "#ffffff",
+    popover: "#ffffff",
+    primary: "#2563eb",
+    secondary: "#f1f5f9",
+    muted: "#f1f5f9",
+    accent: "#f1f5f9",
+    destructive: "#ef4444",
+    input: "#ffffff",
+  },
+  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 0 rgb(0 0 0 / 0.05)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+  },
+}

package/src/tokens/defaults.yaml

@@ -0,0 +1,76 @@
+# src/tokens/defaults.yaml
+# Default shadcn design tokens for prev-cli
+# Users can override these in their project's tokens.yaml
+
+# Semantic color tokens
+colors:
+  foreground: "#0f172a"
+  card-foreground: "#0f172a"
+  popover-foreground: "#0f172a"
+  primary: "#2563eb"
+  primary-foreground: "#ffffff"
+  secondary: "#64748b"
+  secondary-foreground: "#0f172a"
+  muted: "#94a3b8"
+  muted-foreground: "#64748b"
+  accent: "#2563eb"
+  accent-foreground: "#ffffff"
+  destructive: "#ef4444"
+  destructive-foreground: "#ffffff"
+  border: "#e2e8f0"
+  ring: "#2563eb"
+
+# Background tokens
+backgrounds:
+  transparent: transparent
+  background: "#ffffff"
+  card: "#ffffff"
+  popover: "#ffffff"
+  primary: "#2563eb"
+  secondary: "#f1f5f9"
+  muted: "#f1f5f9"
+  accent: "#f1f5f9"
+  destructive: "#ef4444"
+  input: "#ffffff"
+
+# Spacing scale
+spacing:
+  none: "0"
+  xs: "4px"
+  sm: "8px"
+  md: "16px"
+  lg: "24px"
+  xl: "32px"
+  2xl: "48px"
+
+# Typography
+typography:
+  sizes:
+    xs: "12px"
+    sm: "14px"
+    base: "16px"
+    lg: "18px"
+    xl: "20px"
+    2xl: "24px"
+  weights:
+    normal: 400
+    medium: 500
+    semibold: 600
+    bold: 700
+
+# Border radius scale
+radius:
+  none: "0"
+  sm: "4px"
+  md: "6px"
+  lg: "8px"
+  xl: "12px"
+  full: "9999px"
+
+# Shadow scale
+shadows:
+  none: none
+  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
+  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"