view-contracts 0.3.5 → 0.4.1

package/renderers/swiftui/renderTheme.ts

@@ -0,0 +1,274 @@
+/**
+ * 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': {
+        const px = parsePx(value);
+        if (px !== null) entries.push({ property, swiftValue: String(px) });
+        break;
+      }
+      case 'width': {
+        if (value === '100%' || value === 'fill') {
+          entries.push({ property: 'widthFill', swiftValue: 'true' });
+        } else {
+          const px = parsePx(value);
+          if (px !== null) entries.push({ property, swiftValue: String(px) });
+        }
+        break;
+      }
+      case 'height': {
+        if (value === '100%' || value === 'fill') {
+          entries.push({ property: 'heightFill', swiftValue: 'true' });
+        } else {
+          const px = parsePx(value);
+          if (px !== null) entries.push({ property, swiftValue: String(px) });
+        }
+        break;
+      }
+      case 'border': {
+        const match = value.match(/^([\d.]+)px/);
+        if (match) entries.push({ property: 'borderWidth', swiftValue: String(Number(match[1])) });
+        break;
+      }
+      case 'borderColor': {
+        const color = swiftColorLiteral(value);
+        if (color) entries.push({ property: 'borderColor', swiftValue: color });
+        break;
+      }
+      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;
+      }
+      case 'display':
+      case 'flexDirection':
+      case 'gridTemplateColumns':
+      case 'alignItems':
+      case 'justifyContent':
+      case 'typography':
+        // Consumed at compile time by lowerToSwiftUI.ts (container type / alignment selection).
+        // Not representable as a runtime VcVariantStyle field.
+        break;
+      default:
+        console.warn(
+          `[view-contracts] SwiftUI theme: variant property "${property}" is not handled ` +
+          `(value: "${value}"). Add a case to renderTheme.ts resolveVariantEntries().`,
+        );
+        break;
+    }
+  }
+  return entries;
+}
+
+const STRUCT_FIELD_ORDER = ['foreground', 'background', 'padding', 'paddingH', 'paddingV', 'widthFill', 'heightFill', 'radius', 'fontSize', 'fontWeight', 'shadow', 'borderWidth', 'borderColor', '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 widthFill: Bool?`);
+  lines.push(`    var heightFill: Bool?`);
+  lines.push(`    var radius: CGFloat?`);
+  lines.push(`    var fontSize: CGFloat?`);
+  lines.push(`    var fontWeight: Font.Weight?`);
+  lines.push(`    var shadow: Bool?`);
+  lines.push(`    var borderWidth: CGFloat?`);
+  lines.push(`    var borderColor: Color?`);
+  lines.push(`    var minHeight: CGFloat?`);
+  lines.push(`    var maxWidth: CGFloat?`);
+  lines.push(`}`);
+  lines.push(``);
+
+  // Nil-transparent: only apply properties the style actually defines.
+  // frame(maxWidth/maxHeight: .infinity) MUST come BEFORE background so bg fills expanded area.
+  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(`            .vcFillFrame(widthFill: s.widthFill ?? false, heightFill: s.heightFill ?? false)`);
+  lines.push(`            .ifSet(s.background) { $0.background($1) }`);
+  lines.push(`            .ifSet(s.radius) { $0.clipShape(RoundedRectangle(cornerRadius: $1)) }`);
+  lines.push(`            .ifSet(s.borderColor) { $0.overlay(RoundedRectangle(cornerRadius: s.radius ?? 0).stroke($1, lineWidth: s.borderWidth ?? 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 vcFillFrame(widthFill: Bool, heightFill: Bool) -> some View {`);
+  lines.push(`        if widthFill && heightFill {`);
+  lines.push(`            self.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)`);
+  lines.push(`        } else if widthFill {`);
+  lines.push(`            self.frame(maxWidth: .infinity, alignment: .leading)`);
+  lines.push(`        } else if heightFill {`);
+  lines.push(`            self.frame(maxHeight: .infinity, alignment: .top)`);
+  lines.push(`        } else {`);
+  lines.push(`            self`);
+  lines.push(`        }`);
+  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" }
       }
     },