view-contracts 0.3.5 → 0.4.0

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,91 @@
+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';
+
+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',
+    );
+  }
+
+  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})`);
+      }
+    }
+  }
+}

package/renderers/swiftui/renderTheme.ts

@@ -0,0 +1,208 @@
+/**
+ * Generate VcTheme.swift with variant style dictionary for runtime lookup.
+ * Enables dynamic variant resolution (IrConcat / IrBinding) in SwiftUI lowering.
+ */
+import type { ThemeIR, TokenIR, VariantPropertyRef } from '../../src/design/types.js';
+
+function resolveTokenValue(tokens: TokenIR, ref: string): string {
+  const entry = tokens.entries.find((item) => item.path === ref);
+  return entry?.value ?? '';
+}
+
+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).toFixed(3)}, green: ${(g / 255).toFixed(3)}, blue: ${(b / 255).toFixed(3)})`;
+}
+
+function parsePx(value: string): number | null {
+  const match = value.match(/^([\d.]+)px$/);
+  return match ? Number(match[1]) : null;
+}
+
+const FONT_WEIGHT_MAP: Record<string, string> = {
+  bold: '.bold', semibold: '.semibold', medium: '.medium', regular: '.regular',
+  '600': '.semibold', '700': '.bold', '500': '.medium', '400': '.regular',
+};
+
+function swiftColorLiteral(value: string): string | null {
+  return parseHexColor(value) ?? (value ? `Color(${JSON.stringify(value)})` : null);
+}
+
+interface ResolvedEntry {
+  property: string;
+  swiftValue: string;
+}
+
+function resolveVariantEntries(
+  props: Record<string, VariantPropertyRef>,
+  tokens: TokenIR,
+): ResolvedEntry[] {
+  const entries: ResolvedEntry[] = [];
+  for (const [property, binding] of Object.entries(props)) {
+    const value = resolveTokenValue(tokens, binding.ref);
+    if (!value) continue;
+
+    switch (property) {
+      case 'background':
+      case 'foreground': {
+        const color = swiftColorLiteral(value);
+        if (color) entries.push({ property, swiftValue: color });
+        break;
+      }
+      case 'padding': {
+        const px = parsePx(value);
+        if (px !== null) {
+          entries.push({ property, swiftValue: String(px) });
+        } else {
+          const parts = value.trim().split(/\s+/);
+          if (parts.length === 2) {
+            const v = parsePx(parts[0]!);
+            const h = parsePx(parts[1]!);
+            if (v !== null) entries.push({ property: 'paddingV', swiftValue: String(v) });
+            if (h !== null) entries.push({ property: 'paddingH', swiftValue: String(h) });
+          }
+        }
+        break;
+      }
+      case 'radius':
+      case 'fontSize':
+      case 'minHeight':
+      case 'maxWidth':
+      case 'width':
+      case 'margin': {
+        const px = parsePx(value);
+        if (px !== null) entries.push({ property, swiftValue: String(px) });
+        break;
+      }
+      case 'fontWeight': {
+        const mapped = FONT_WEIGHT_MAP[value];
+        if (mapped) entries.push({ property, swiftValue: mapped });
+        break;
+      }
+      case 'shadow': {
+        entries.push({ property, swiftValue: value === 'true' || value === 'none' ? 'false' : 'true' });
+        break;
+      }
+      default:
+        break;
+    }
+  }
+  return entries;
+}
+
+const STRUCT_FIELD_ORDER = ['foreground', 'background', 'padding', 'paddingH', 'paddingV', 'radius', 'fontSize', 'fontWeight', 'shadow', 'minHeight', 'maxWidth'];
+
+function emitVariantStyleInit(entries: ResolvedEntry[], indent: string): string {
+  if (entries.length === 0) return `${indent}VcVariantStyle()`;
+  const sorted = [...entries].sort(
+    (a, b) => STRUCT_FIELD_ORDER.indexOf(a.property) - STRUCT_FIELD_ORDER.indexOf(b.property),
+  );
+  const args = sorted.map(e => `${e.property}: ${e.swiftValue}`).join(', ');
+  return `${indent}VcVariantStyle(${args})`;
+}
+
+/**
+ * Merge base defaults into variant entries so the dictionary contains
+ * the full cascade: base < variant.  Variant values override base.
+ */
+function mergeBaseIntoVariant(
+  base: Record<string, VariantPropertyRef>,
+  variant: Record<string, VariantPropertyRef>,
+): Record<string, VariantPropertyRef> {
+  return { ...base, ...variant };
+}
+
+export function renderSwiftTheme(theme: ThemeIR, tokens: TokenIR): string {
+  const lines: string[] = [];
+  lines.push(`/**`);
+  lines.push(` * Auto-generated SwiftUI theme — variant style dictionary.`);
+  lines.push(` * Each entry is pre-merged: base theme defaults < variant overrides.`);
+  lines.push(` * DO NOT EDIT — regenerate with: view-contracts build`);
+  lines.push(` */`);
+  lines.push(`import SwiftUI`);
+  lines.push(``);
+
+  lines.push(`struct VcVariantStyle {`);
+  lines.push(`    var foreground: Color?`);
+  lines.push(`    var background: Color?`);
+  lines.push(`    var padding: CGFloat?`);
+  lines.push(`    var paddingH: CGFloat?`);
+  lines.push(`    var paddingV: CGFloat?`);
+  lines.push(`    var radius: CGFloat?`);
+  lines.push(`    var fontSize: CGFloat?`);
+  lines.push(`    var fontWeight: Font.Weight?`);
+  lines.push(`    var shadow: Bool?`);
+  lines.push(`    var minHeight: CGFloat?`);
+  lines.push(`    var maxWidth: CGFloat?`);
+  lines.push(`}`);
+  lines.push(``);
+
+  // Nil-transparent: only apply properties the style actually defines.
+  lines.push(`extension View {`);
+  lines.push(`    func applyVcStyle(_ s: VcVariantStyle) -> some View {`);
+  lines.push(`        self`);
+  lines.push(`            .ifSet(s.foreground) { $0.foregroundStyle($1) }`);
+  lines.push(`            .ifSet(s.fontSize) { $0.font(.system(size: $1, weight: s.fontWeight ?? .regular)) }`);
+  lines.push(`            .ifSet(s.padding) { $0.padding($1) }`);
+  lines.push(`            .ifSet(s.paddingH) { $0.padding(.horizontal, $1) }`);
+  lines.push(`            .ifSet(s.paddingV) { $0.padding(.vertical, $1) }`);
+  lines.push(`            .ifSet(s.background) { $0.background($1) }`);
+  lines.push(`            .ifSet(s.radius) { $0.clipShape(RoundedRectangle(cornerRadius: $1)) }`);
+  lines.push(`            .ifSet(s.shadow) { v, on in on ? AnyView(v.shadow(color: Color.black.opacity(0.08), radius: 4, x: 0, y: 2)) : AnyView(v) }`);
+  lines.push(`    }`);
+  lines.push(`}`);
+  lines.push(``);
+  lines.push(`extension View {`);
+  lines.push(`    @ViewBuilder`);
+  lines.push(`    func ifSet<T, V: View>(_ value: T?, _ transform: (Self, T) -> V) -> some View {`);
+  lines.push(`        if let value { transform(self, value) } else { self }`);
+  lines.push(`    }`);
+  lines.push(`}`);
+  lines.push(``);
+
+  lines.push(`enum VcTheme {`);
+
+  // Emit base defaults per element
+  lines.push(`    static let defaults: [String: VcVariantStyle] = [`);
+  for (const [elementName, baseProps] of Object.entries(theme.defaults)) {
+    if (Object.keys(baseProps).length === 0) continue;
+    const resolved = resolveVariantEntries(baseProps, tokens);
+    if (resolved.length === 0) continue;
+    lines.push(`        ${JSON.stringify(elementName)}: ${emitVariantStyleInit(resolved, '').trim()},`);
+  }
+  lines.push(`    ]`);
+  lines.push(``);
+
+  // Emit pre-merged (base + variant) dictionary
+  lines.push(`    static let variants: [String: [String: VcVariantStyle]] = [`);
+  for (const [elementName, elementVariants] of Object.entries(theme.variants)) {
+    const variantEntries = Object.entries(elementVariants);
+    if (variantEntries.length === 0) continue;
+
+    const baseProps = theme.defaults[elementName] ?? {};
+    lines.push(`        ${JSON.stringify(elementName)}: [`);
+    for (const [variantName, variantProps] of variantEntries) {
+      const merged = mergeBaseIntoVariant(baseProps, variantProps);
+      const resolved = resolveVariantEntries(merged, tokens);
+      const init = emitVariantStyleInit(resolved, '            ');
+      lines.push(`            ${JSON.stringify(variantName)}: ${init.trim()},`);
+    }
+    lines.push(`        ],`);
+  }
+  lines.push(`    ]`);
+  lines.push(``);
+
+  // resolve() falls back to base defaults, not empty style
+  lines.push(`    static func resolve(_ element: String, variant: String) -> VcVariantStyle {`);
+  lines.push(`        variants[element]?[variant] ?? defaults[element] ?? VcVariantStyle()`);
+  lines.push(`    }`);
+  lines.push(`}`);
+  lines.push(``);
+
+  return lines.join('\n');
+}

package/spec/ui-dsl.linter-rules.json

@@ -45,13 +45,6 @@
       "element": "Icon",
       "requiredProperties": ["name"]
     },
-    {
-      "id": "heading-level-required",
-      "severity": "error",
-      "description": "Heading requires headingLevel for semantic hierarchy",
-      "element": "Heading",
-      "requiredProperties": ["headingLevel"]
-    },
     {
       "id": "form-no-onclick",
       "severity": "error",

package/spec/ui-dsl.meta.json

@@ -52,6 +52,11 @@
           "type": "array",
           "items": { "type": "string" }
         },
+        "x-lowering": {
+          "type": "string",
+          "enum": ["inline-css", "class-name", "attribute", "none"],
+          "description": "How this property is lowered: inline-css → static style, class-name → CSS class, attribute → HTML attr, none → behavioral/semantic"
+        },
         "x-notes": { "type": "string" }
       }
     },