view-contracts 0.3.5 → 0.4.1

package/renderers/swiftui/lowering/modifiers.ts

@@ -0,0 +1,221 @@
+import type { VisualPropSet } from '../../../src/renderer/style/mergeVisualProps.js';
+
+function parsePx(value: string | number | boolean): number | null {
+  if (typeof value === 'number') return value;
+  if (typeof value === 'boolean') return null;
+  const match = value.match(/^([\d.]+)px$/);
+  return match ? Number(match[1]) : null;
+}
+
+function parseHexColor(value: string): string | null {
+  const match = value.match(/^#([0-9a-fA-F]{6})$/);
+  if (!match) return null;
+  const hex = match[1]!;
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return `Color(red: ${r / 255}, green: ${g / 255}, blue: ${b / 255})`;
+}
+
+type PaddingResult =
+  | { kind: 'uniform'; value: number }
+  | { kind: 'shorthand'; vertical: number; horizontal: number };
+
+function parsePaddingShorthand(value: string | number | boolean): PaddingResult | null {
+  const single = parsePx(value);
+  if (single !== null) return { kind: 'uniform', value: single };
+  if (typeof value !== 'string') return null;
+  const parts = value.trim().split(/\s+/);
+  if (parts.length === 2) {
+    const v = parsePx(parts[0]!);
+    const h = parsePx(parts[1]!);
+    if (v !== null && h !== null) return { kind: 'shorthand', vertical: v, horizontal: h };
+  }
+  return null;
+}
+
+function swiftFontSize(value: string | number | boolean): string | null {
+  if (value === '' || value === null || value === undefined) return null;
+  const px = parsePx(value);
+  if (px !== null) return `.font(.system(size: ${px}))`;
+  if (typeof value === 'string' && !value.endsWith('px')) return `.font(.system(size: ${JSON.stringify(value)}))`;
+  return null;
+}
+
+function swiftFontWeight(value: string | number | boolean): string | null {
+  if (typeof value !== 'string') return null;
+  const map: Record<string, string> = {
+    bold: '.fontWeight(.bold)',
+    semibold: '.fontWeight(.semibold)',
+    medium: '.fontWeight(.medium)',
+    regular: '.fontWeight(.regular)',
+    '700': '.fontWeight(.bold)',
+    '600': '.fontWeight(.semibold)',
+    '500': '.fontWeight(.medium)',
+    '400': '.fontWeight(.regular)',
+  };
+  return map[value] ?? null;
+}
+
+/**
+ * Convert merged DSL visual props to a single SwiftUI modifier chain.
+ *
+ * SwiftUI modifier order for fill elements:
+ *   foreground / font → padding → frame(fill) → background → clipShape → shadow → overlay → frame(fixed) → opacity
+ *
+ * For non-fill elements:
+ *   foreground / font → padding → background → clipShape → shadow → overlay → frame → opacity
+ *
+ * The key insight: .frame(maxWidth: .infinity) MUST come BEFORE .background()
+ * so the background fills the expanded area. Otherwise the background only
+ * covers the natural content width.
+ */
+export function visualPropSetToModifiers(merged: VisualPropSet): string[] {
+  const modifiers: string[] = [];
+
+  // 1. Text appearance (inherited, applies to child Text views)
+  const foreground = merged.foreground;
+  if (typeof foreground === 'string') {
+    const color = parseHexColor(foreground);
+    modifiers.push(color ? `.foregroundStyle(${color})` : `.foregroundStyle(Color(${JSON.stringify(foreground)}))`);
+  }
+
+  const sizeValue = merged.size ?? merged.fontSize;
+  if (sizeValue !== undefined && sizeValue !== '') {
+    const fontSize = swiftFontSize(sizeValue);
+    if (fontSize) modifiers.push(fontSize);
+  }
+
+  const fontWeight = swiftFontWeight(merged.fontWeight ?? merged.weight ?? '');
+  if (fontWeight) modifiers.push(fontWeight);
+
+  // 2. Padding (expands the "content area" that background fills)
+  const paddingRaw = merged.padding ?? '';
+  const paddingParsed = parsePaddingShorthand(paddingRaw);
+  if (paddingParsed) {
+    if (paddingParsed.kind === 'uniform') {
+      modifiers.push(`.padding(${paddingParsed.value})`);
+    } else {
+      modifiers.push(`.padding(.vertical, ${paddingParsed.vertical})`);
+      modifiers.push(`.padding(.horizontal, ${paddingParsed.horizontal})`);
+    }
+  }
+
+  // Pre-compute frame/size values needed to determine fill vs fixed
+  const width = merged.width;
+  const height = merged.height;
+  const minHeight = merged.minHeight;
+  const maxWidth = merged.maxWidth;
+  const maxHeight = merged.maxHeight;
+  const margin = merged.margin;
+  const hasCenteringMargin = margin === '0 auto';
+
+  const needsFillWidth = width === '100%' || width === 'fill' || maxWidth === 'fill';
+  const needsFillHeight = height === '100%' || height === 'fill' || minHeight === '100vh';
+
+  // 2.5. Fill frame constraints — BEFORE background so bg fills the expanded area
+  // alignment: .leading/.top/.topLeading ensures content stays at top-left (matching CSS block behavior)
+  const maxWidthPx = maxWidth === 'fill' ? null : (maxWidth !== undefined ? parsePx(maxWidth) : null);
+
+  if (needsFillWidth && needsFillHeight) {
+    if (maxWidthPx !== null) {
+      modifiers.push(`.frame(maxWidth: ${maxWidthPx}, maxHeight: .infinity, alignment: .topLeading)`);
+    } else {
+      modifiers.push('.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)');
+    }
+  } else if (needsFillWidth) {
+    if (maxWidthPx !== null) {
+      modifiers.push(`.frame(maxWidth: ${maxWidthPx}, alignment: .leading)`);
+    } else {
+      modifiers.push('.frame(maxWidth: .infinity, alignment: .leading)');
+    }
+  } else if (needsFillHeight) {
+    modifiers.push('.frame(maxHeight: .infinity, alignment: .top)');
+  }
+
+  if (!needsFillHeight && minHeight === '100vh') {
+    modifiers.push('.frame(maxHeight: .infinity, alignment: .top)');
+  }
+
+  // 3. Background (fills the frame area — now expanded for fill elements)
+  const background = merged.background;
+  if (typeof background === 'string' && background !== 'transparent') {
+    const color = parseHexColor(background);
+    modifiers.push(color ? `.background(${color})` : `.background(Color(${JSON.stringify(background)}))`);
+  }
+
+  // 4. Clip shape (clips background + content to rounded rect)
+  const radius = parsePx(merged.radius ?? '');
+  if (radius !== null) modifiers.push(`.clipShape(RoundedRectangle(cornerRadius: ${radius}))`);
+
+  // 5. Shadow (rendered on the clipped shape)
+  if (merged.shadow === true || merged.shadow === 'true') {
+    modifiers.push('.shadow(color: Color.black.opacity(0.08), radius: 4, x: 0, y: 2)');
+  }
+
+  // 6. Border overlay
+  const border = merged.border;
+  const borderColor = merged.borderColor;
+  if (border || borderColor) {
+    const borderWidth = parsePx(border ?? '1px') ?? 1;
+    const colorExpr = typeof borderColor === 'string' ? parseHexColor(borderColor) ?? 'Color.gray' : 'Color.gray';
+    modifiers.push(`.overlay(RoundedRectangle(cornerRadius: ${radius ?? 0}).stroke(${colorExpr}, lineWidth: ${borderWidth}))`);
+  }
+
+  // 7. Non-fill frame constraints (fixed sizes, maxWidth cap without fill)
+  if (!needsFillWidth) {
+    if (typeof width === 'number') {
+      modifiers.push(`.frame(width: ${width})`);
+    } else if (width !== undefined && width !== 'wrap') {
+      const px = parsePx(width);
+      if (px !== null) modifiers.push(`.frame(width: ${px})`);
+    }
+    if (maxWidth !== undefined && maxWidth !== 'fill') {
+      const px = parsePx(maxWidth);
+      if (px !== null) modifiers.push(`.frame(maxWidth: ${px})`);
+    }
+  }
+
+  if (!needsFillHeight) {
+    if (typeof height === 'number') {
+      modifiers.push(`.frame(height: ${height})`);
+    } else if (height !== undefined && height !== 'wrap') {
+      const px = parsePx(height);
+      if (px !== null) modifiers.push(`.frame(height: ${px})`);
+    }
+    if (minHeight !== undefined && minHeight !== '100vh') {
+      if (typeof minHeight === 'number') {
+        modifiers.push(`.frame(minHeight: ${minHeight})`);
+      } else {
+        const px = parsePx(minHeight);
+        if (px !== null) modifiers.push(`.frame(minHeight: ${px})`);
+      }
+    }
+    if (maxHeight !== undefined && maxHeight !== 'fill') {
+      const px = parsePx(maxHeight);
+      if (px !== null) modifiers.push(`.frame(maxHeight: ${px})`);
+    }
+  }
+
+  // margin: 0 auto → center within parent by expanding outer frame (positioning, not sizing)
+  if (hasCenteringMargin) {
+    modifiers.push('.frame(maxWidth: .infinity, alignment: .center)');
+  } else if (typeof margin === 'number') {
+    modifiers.push(`.padding(${margin})`);
+  } else if (margin !== undefined) {
+    const px = parsePx(margin);
+    if (px !== null) modifiers.push(`.padding(${px})`);
+  }
+
+  // 8. Opacity (last — affects everything)
+  const opacity = merged.opacity;
+  if (typeof opacity === 'number' && opacity < 1) modifiers.push(`.opacity(${opacity})`);
+
+  return modifiers;
+}
+
+export function applyModifiers(body: string, modifiers: string[], indent: number): string {
+  if (modifiers.length === 0) return body;
+  const pad = '  '.repeat(indent);
+  return `${body}\n${modifiers.map((mod) => `${pad}${mod}`).join('\n')}`;
+}

package/renderers/swiftui/renderComponents.ts

@@ -0,0 +1,79 @@
+import type { ViewIrDocument } from '../../src/ir/types.js';
+import type { ThemeIR, TokenIR } from '../../src/design/types.js';
+import { loadSwiftUIElementMap } from './elementMap.js';
+import { lowerIrToSwiftBody, type SwiftUIRenderContext } from './lowering/lowerToSwiftUI.js';
+
+export interface RenderSwiftOptions {
+  theme: ThemeIR;
+  tokens: TokenIR;
+  allowlistExtra?: string[];
+  elementMapPath?: string;
+}
+
+function tsTypeToSwift(type: string): string {
+  const arrayMatch = type.match(/^(\w+)\[\]$/);
+  if (arrayMatch) return `[${tsTypeToSwift(arrayMatch[1]!)}]`;
+  if (type === 'string') return 'String';
+  if (type === 'number') return 'Double';
+  if (type === 'boolean') return 'Bool';
+  return type;
+}
+
+function partialPropsLines(doc: ViewIrDocument): string {
+  if (!doc.propsType) return '';
+  const match = doc.propsType.match(/^\{\s*([^}]+)\s*\}$/);
+  if (!match) return `  let props: ${doc.propsType}\n`;
+  const inner = match[1].trim();
+  const lines = inner.split(',').map((part) => {
+    const colon = part.indexOf(':');
+    const name = colon >= 0 ? part.slice(0, colon).trim() : part.trim();
+    const rawType = colon >= 0 ? part.slice(colon + 1).trim() : 'Any';
+    const type = tsTypeToSwift(rawType);
+    return `  let ${name}: ${type}`;
+  });
+  return `${lines.join('\n')}\n`;
+}
+
+function propsRootFromDoc(doc: ViewIrDocument): string | undefined {
+  if (!doc.propsType) return undefined;
+  const match = doc.propsType.match(/^\{\s*([^}]+)\s*\}$/);
+  if (!match) return undefined;
+  const first = match[1].split(',')[0]!.split(':')[0]!.trim();
+  return first;
+}
+
+export async function renderSwiftComponent(
+  doc: ViewIrDocument,
+  options: RenderSwiftOptions,
+): Promise<string> {
+  const map = await loadSwiftUIElementMap(options.elementMapPath);
+  const allowlistExtra = options.allowlistExtra ?? [];
+  const structName = doc.isPartial ? doc.exportName : doc.exportName.replace(/View$/, '') || doc.exportName;
+
+  const ctx: SwiftUIRenderContext = {
+    map,
+    theme: options.theme,
+    tokens: options.tokens,
+    allowlistExtra,
+    propsRoot: propsRootFromDoc(doc),
+  };
+
+  const body = lowerIrToSwiftBody(doc.root, ctx, 4);
+  const propsLines = partialPropsLines(doc);
+  const vmLine = !doc.isPartial && doc.viewModel ? `  let vm: ${doc.viewModel}\n` : '';
+
+  const header = `/**
+ * Auto-generated SwiftUI view from ${doc.source}
+ * DO NOT EDIT — prototype SwiftUI lowering (#21)
+ */
+import SwiftUI
+
+struct ${structName}: View {
+${vmLine}${propsLines}  var body: some View {
+${body}
+  }
+}
+`;
+
+  return header;
+}

package/renderers/swiftui/renderRuntime.ts

@@ -0,0 +1,139 @@
+import { mkdir, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import type { ViewBindingsFile, ViewContractsConfig } from '../../src/config.js';
+import { packageRoot } from '../../src/lib/packageRoot.js';
+import { renderTemplate } from '../../src/renderer/template.js';
+import type { ThemeIR, TokenIR } from '../../src/design/types.js';
+import type { ViewIrDocument } from '../../src/ir/types.js';
+import { renderSwiftTheme } from './renderTheme.js';
+import { renderSwiftComponent } from './renderComponents.js';
+import { loadPreviewMockYaml, previewMockFilePath, pathExists } from '../../src/preview/previewMock.js';
+
+const FLOW_LAYOUT_SWIFT = `import SwiftUI
+
+/// CSS flex-wrap equivalent: wraps children to next line when horizontal space runs out.
+struct FlowLayout: Layout {
+    var spacing: CGFloat = 8
+
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
+        let containerWidth = proposal.width ?? .infinity
+        var x: CGFloat = 0
+        var y: CGFloat = 0
+        var rowHeight: CGFloat = 0
+
+        for subview in subviews {
+            let size = subview.sizeThatFits(.unspecified)
+            if x + size.width > containerWidth && x > 0 {
+                y += rowHeight + spacing
+                x = 0
+                rowHeight = 0
+            }
+            x += size.width + spacing
+            rowHeight = max(rowHeight, size.height)
+        }
+        return CGSize(width: containerWidth, height: y + rowHeight)
+    }
+
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
+        var x = bounds.minX
+        var y = bounds.minY
+        var rowHeight: CGFloat = 0
+
+        for subview in subviews {
+            let size = subview.sizeThatFits(.unspecified)
+            if x + size.width > bounds.maxX && x > bounds.minX {
+                y += rowHeight + spacing
+                x = bounds.minX
+                rowHeight = 0
+            }
+            subview.place(at: CGPoint(x: x, y: y), proposal: ProposedViewSize(size))
+            x += size.width + spacing
+            rowHeight = max(rowHeight, size.height)
+        }
+    }
+}
+`;
+
+function swiftuiTemplatesDir(): string {
+  return resolve(packageRoot(), 'renderers/swiftui/templates');
+}
+
+export async function renderSwiftUIRuntime(
+  configPath: string,
+  config: ViewContractsConfig,
+  bindings: ViewBindingsFile,
+  design?: { theme: ThemeIR; tokens: TokenIR },
+  compiledDocs?: { screens: Map<string, ViewIrDocument>; partials: ViewIrDocument[] },
+): Promise<void> {
+  const swiftuiDir = resolve(config.generated.reactDir, '../swiftui');
+  await mkdir(swiftuiDir, { recursive: true });
+
+  if (design) {
+    await writeFile(resolve(swiftuiDir, 'VcTheme.swift'), renderSwiftTheme(design.theme, design.tokens), 'utf-8');
+  } else {
+    await writeFile(
+      resolve(swiftuiDir, 'VcTheme.swift'),
+      await renderTemplate(swiftuiTemplatesDir(), 'VcTheme.swift.hbs', {}),
+      'utf-8',
+    );
+  }
+
+  // FlowLayout helper (CSS flex-wrap equivalent)
+  await writeFile(resolve(swiftuiDir, 'FlowLayout.swift'), FLOW_LAYOUT_SWIFT, 'utf-8');
+
+  if (compiledDocs && design) {
+    for (const partial of compiledDocs.partials) {
+      try {
+        const swift = await renderSwiftComponent(partial, { theme: design.theme, tokens: design.tokens });
+        const out = resolve(swiftuiDir, `${partial.exportName}.generated.swift`);
+        await writeFile(out, swift, 'utf-8');
+        console.log(`  swiftui/${partial.exportName} → ${out}`);
+      } catch (err) {
+        console.warn(`  swiftui/${partial.exportName}: skipped (${(err as Error).message})`);
+      }
+    }
+
+    for (const view of bindings.views) {
+      const doc = compiledDocs.screens.get(view.screenName);
+      if (doc) {
+        try {
+          const swift = await renderSwiftComponent(doc, { theme: design.theme, tokens: design.tokens });
+          const out = resolve(swiftuiDir, `${view.screenName}.generated.swift`);
+          await writeFile(out, swift, 'utf-8');
+          console.log(`  swiftui/${view.screenName} → ${out}`);
+        } catch (err) {
+          console.warn(`  swiftui/${view.screenName}: skipped (${(err as Error).message})`);
+        }
+      }
+    }
+  }
+
+  for (const view of bindings.views) {
+    if (view.targets.includes('swiftui')) {
+      const out = resolve(swiftuiDir, `${view.screenName}.swift`);
+      await writeFile(
+        out,
+        await renderTemplate(swiftuiTemplatesDir(), 'Screen.swift.hbs', {
+          screenName: view.screenName,
+        }),
+        'utf-8',
+      );
+    }
+  }
+
+  // Generate SampleData JSON from mock.yaml (SSoT)
+  for (const view of bindings.views) {
+    const mockPath = previewMockFilePath(configPath, config, view.screenName);
+    if (await pathExists(mockPath)) {
+      try {
+        const mockData = await loadPreviewMockYaml(mockPath);
+        const json = JSON.stringify(mockData, null, 2) + '\n';
+        const out = resolve(swiftuiDir, `${view.screenName}.SampleData.json`);
+        await writeFile(out, json, 'utf-8');
+        console.log(`  swiftui/${view.screenName}.SampleData.json → ${out}`);
+      } catch (err) {
+        console.warn(`  swiftui/${view.screenName}.SampleData.json: skipped (${(err as Error).message})`);
+      }
+    }
+  }
+}