view-contracts 0.4.5 → 0.5.0

package/renderers/compose/renderRuntime.ts

@@ -3,38 +3,103 @@ 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 { renderComposeTheme } from './renderTheme.js';
+import { renderComposeComponent } from './renderComponents.js';
+import { loadPreviewMockYaml, pathExists, previewMockFilePath } from '../../src/preview/previewMock.js';
 
 function composeTemplatesDir(): string {
   return resolve(packageRoot(), 'renderers/compose/templates');
 }
 
 export async function renderComposeRuntime(
+  configPath: string,
   config: ViewContractsConfig,
   bindings: ViewBindingsFile,
+  design?: { theme: ThemeIR; tokens: TokenIR },
+  compiledDocs?: { screens: Map<string, ViewIrDocument>; partials: ViewIrDocument[] },
 ): Promise<void> {
   const composeDir = resolve(config.generated.reactDir, '../compose');
+  const componentsDir = resolve(composeDir, 'components');
   await mkdir(composeDir, { recursive: true });
+  await mkdir(componentsDir, { recursive: true });
+
+  if (design) {
+    await writeFile(resolve(composeDir, 'VcTheme.kt'), renderComposeTheme(design.theme, design.tokens), 'utf-8');
+  } else {
+    await writeFile(
+      resolve(composeDir, 'VcTheme.kt'),
+      await renderTemplate(composeTemplatesDir(), 'VcTheme.kt.hbs', {
+        packageName: 'generated.compose',
+      }),
+      'utf-8',
+    );
+  }
 
   await writeFile(
-    resolve(composeDir, 'VcTheme.kt'),
-    await renderTemplate(composeTemplatesDir(), 'VcTheme.kt.hbs', {
-      packageName: 'generated.compose',
-    }),
+    resolve(composeDir, 'Dispatch.kt'),
+    `package generated.compose
+
+/**
+ * Dispatch stub for generated Compose screens.
+ * Wire this to your actual action runtime.
+ */
+suspend fun dispatch(action: String, payload: Map<String, Any?> = emptyMap()) {
+  // TODO: implement app-specific dispatcher bridge.
+}
+`,
     'utf-8',
   );
 
+  if (compiledDocs && design) {
+    for (const partial of compiledDocs.partials) {
+      try {
+        const kotlin = await renderComposeComponent(partial, { theme: design.theme, tokens: design.tokens });
+        const out = resolve(componentsDir, `${partial.exportName}.kt`);
+        await writeFile(out, kotlin.replace('package generated.compose', 'package generated.compose.components'), 'utf-8');
+        console.log(`  compose/${partial.exportName} → ${out}`);
+      } catch (err) {
+        console.warn(`  compose/${partial.exportName}: skipped (${(err as Error).message})`);
+      }
+    }
+  }
+
   for (const view of bindings.views) {
     if (view.targets.includes('compose')) {
       const out = resolve(composeDir, `${view.screenName}Screen.kt`);
-      await writeFile(
-        out,
-        await renderTemplate(composeTemplatesDir(), 'Screen.kt.hbs', {
-          screenName: view.screenName,
-          packageName: 'generated.compose',
-        }),
-        'utf-8',
-      );
-      console.log(`  compose → ${out}`);
+      let rendered = await renderTemplate(composeTemplatesDir(), 'Screen.kt.hbs', {
+        screenName: view.screenName,
+        packageName: 'generated.compose',
+        componentName: view.exportName,
+      });
+
+      if (compiledDocs && design) {
+        const doc = compiledDocs.screens.get(view.screenName);
+        if (doc) {
+          const kotlin = await renderComposeComponent(doc, { theme: design.theme, tokens: design.tokens });
+          rendered = kotlin;
+        }
+      }
+
+      await writeFile(out, rendered, 'utf-8');
+      console.log(`  compose/${view.screenName} → ${out}`);
+    }
+  }
+
+  for (const view of bindings.views) {
+    if (!view.targets.includes('compose')) continue;
+    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(composeDir, `${view.screenName}.SampleData.json`);
+        await writeFile(out, json, 'utf-8');
+        console.log(`  compose/${view.screenName}.SampleData.json → ${out}`);
+      } catch (err) {
+        console.warn(`  compose/${view.screenName}.SampleData.json: skipped (${(err as Error).message})`);
+      }
     }
   }
 }

package/renderers/compose/renderTheme.ts

@@ -0,0 +1,304 @@
+/**
+ * Generate VcTheme.kt with variant style dictionary for runtime lookup.
+ */
+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(${r}, ${g}, ${b})`;
+}
+
+function parseRgbaColor(value: string): string | null {
+  const match = value.match(/^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)$/);
+  if (!match) return null;
+  const r = Number(match[1]) / 255;
+  const g = Number(match[2]) / 255;
+  const b = Number(match[3]) / 255;
+  const a = Number(match[4]);
+  return `Color(${r}f, ${g}f, ${b}f, ${a}f)`;
+}
+
+function kotlinColorLiteral(value: string): string | null {
+  if (value === 'transparent') return 'Color.Transparent';
+  return parseHexColor(value) ?? parseRgbaColor(value) ?? null;
+}
+
+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: 'FontWeight.Bold',
+  semibold: 'FontWeight.SemiBold',
+  medium: 'FontWeight.Medium',
+  regular: 'FontWeight.Normal',
+  '600': 'FontWeight.SemiBold',
+  '700': 'FontWeight.Bold',
+  '500': 'FontWeight.Medium',
+  '400': 'FontWeight.Normal',
+};
+
+interface ResolvedEntry {
+  property: string;
+  kotlinValue: 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 = kotlinColorLiteral(value);
+        if (color) entries.push({ property, kotlinValue: color });
+        break;
+      }
+      case 'padding': {
+        const px = parsePx(value);
+        if (px !== null) {
+          entries.push({ property, kotlinValue: `${px}.dp` });
+        } 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', kotlinValue: `${v}.dp` });
+            if (h !== null) entries.push({ property: 'paddingH', kotlinValue: `${h}.dp` });
+          }
+        }
+        break;
+      }
+      case 'radius':
+      case 'fontSize':
+      case 'minHeight':
+      case 'maxWidth': {
+        const px = parsePx(value);
+        if (px !== null) entries.push({ property, kotlinValue: `${px}.dp` });
+        break;
+      }
+      case 'width': {
+        if (value === '100%' || value === 'fill') entries.push({ property: 'widthFill', kotlinValue: 'true' });
+        else {
+          const px = parsePx(value);
+          if (px !== null) entries.push({ property, kotlinValue: `${px}.dp` });
+        }
+        break;
+      }
+      case 'height': {
+        if (value === '100%' || value === 'fill') entries.push({ property: 'heightFill', kotlinValue: 'true' });
+        else {
+          const px = parsePx(value);
+          if (px !== null) entries.push({ property, kotlinValue: `${px}.dp` });
+        }
+        break;
+      }
+      case 'border': {
+        const match = value.match(/^([\d.]+)px/);
+        if (match) entries.push({ property: 'borderWidth', kotlinValue: `${Number(match[1])}.dp` });
+        break;
+      }
+      case 'borderColor': {
+        const color = kotlinColorLiteral(value);
+        if (color) entries.push({ property: 'borderColor', kotlinValue: color });
+        break;
+      }
+      case 'fontWeight': {
+        const mapped = FONT_WEIGHT_MAP[value];
+        if (mapped) entries.push({ property, kotlinValue: mapped });
+        break;
+      }
+      case 'shadow': {
+        entries.push({ property, kotlinValue: value === 'none' ? 'false' : 'true' });
+        break;
+      }
+      default:
+        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[]): string {
+  if (entries.length === 0) return 'VcVariantStyle()';
+  const sorted = [...entries].sort(
+    (a, b) => STRUCT_FIELD_ORDER.indexOf(a.property) - STRUCT_FIELD_ORDER.indexOf(b.property),
+  );
+  return `VcVariantStyle(${sorted.map((e) => `${e.property} = ${e.kotlinValue}`).join(', ')})`;
+}
+
+function mergeBaseIntoVariant(
+  base: Record<string, VariantPropertyRef>,
+  variant: Record<string, VariantPropertyRef>,
+): Record<string, VariantPropertyRef> {
+  return { ...base, ...variant };
+}
+
+export function renderComposeTheme(theme: ThemeIR, tokens: TokenIR): string {
+  const lines: string[] = [];
+  lines.push('/** Auto-generated Compose theme — variant style dictionary. */');
+  lines.push('package generated.compose');
+  lines.push('');
+  lines.push('import androidx.compose.foundation.background');
+  lines.push('import androidx.compose.foundation.border');
+  lines.push('import androidx.compose.foundation.layout.Arrangement');
+  lines.push('import androidx.compose.foundation.layout.Row');
+  lines.push('import androidx.compose.foundation.layout.RowScope');
+  lines.push('import androidx.compose.foundation.layout.fillMaxHeight');
+  lines.push('import androidx.compose.foundation.layout.fillMaxWidth');
+  lines.push('import androidx.compose.foundation.layout.heightIn');
+  lines.push('import androidx.compose.foundation.layout.widthIn');
+  lines.push('import androidx.compose.foundation.layout.PaddingValues');
+  lines.push('import androidx.compose.foundation.layout.padding');
+  lines.push('import androidx.compose.foundation.shape.RoundedCornerShape');
+  lines.push('import androidx.compose.ui.graphics.Shape');
+  lines.push('import androidx.compose.material3.LocalContentColor');
+  lines.push('import androidx.compose.material3.Surface');
+  lines.push('import androidx.compose.runtime.Composable');
+  lines.push('import androidx.compose.ui.Alignment');
+  lines.push('import androidx.compose.ui.Modifier');
+  lines.push('import androidx.compose.ui.draw.clip');
+  lines.push('import androidx.compose.ui.draw.shadow');
+  lines.push('import androidx.compose.ui.graphics.Color');
+  lines.push('import androidx.compose.ui.text.TextStyle');
+  lines.push('import androidx.compose.ui.text.font.FontWeight');
+  lines.push('import androidx.compose.ui.unit.Dp');
+  lines.push('import androidx.compose.ui.unit.dp');
+  lines.push('import androidx.compose.ui.unit.sp');
+  lines.push('');
+  lines.push('data class VcVariantStyle(');
+  lines.push('  val foreground: Color? = null,');
+  lines.push('  val background: Color? = null,');
+  lines.push('  val padding: Dp? = null,');
+  lines.push('  val paddingH: Dp? = null,');
+  lines.push('  val paddingV: Dp? = null,');
+  lines.push('  val widthFill: Boolean? = null,');
+  lines.push('  val heightFill: Boolean? = null,');
+  lines.push('  val radius: Dp? = null,');
+  lines.push('  val fontSize: Dp? = null,');
+  lines.push('  val fontWeight: FontWeight? = null,');
+  lines.push('  val shadow: Boolean? = null,');
+  lines.push('  val borderWidth: Dp? = null,');
+  lines.push('  val borderColor: Color? = null,');
+  lines.push('  val minHeight: Dp? = null,');
+  lines.push('  val maxWidth: Dp? = null,');
+  lines.push(')');
+  lines.push('');
+  lines.push('fun VcVariantStyle.asTextStyle(): TextStyle {');
+  lines.push('  var style = TextStyle()');
+  lines.push('  foreground?.let { style = style.copy(color = it) }');
+  lines.push('  fontSize?.let { style = style.copy(fontSize = it.value.sp) }');
+  lines.push('  fontWeight?.let { style = style.copy(fontWeight = it) }');
+  lines.push('  return style');
+  lines.push('}');
+  lines.push('');
+  lines.push('private fun vcSoftShadowModifier(radius: Dp): Modifier =');
+  lines.push('  Modifier.shadow(');
+  lines.push('    elevation = 4.dp,');
+  lines.push('    shape = RoundedCornerShape(radius),');
+  lines.push('    clip = false,');
+  lines.push('    ambientColor = Color.Black.copy(alpha = 0.08f),');
+  lines.push('    spotColor = Color.Black.copy(alpha = 0.08f),');
+  lines.push('  )');
+  lines.push('');
+  lines.push('fun Modifier.applyVcStyle(style: VcVariantStyle): Modifier {');
+  lines.push('  var out = this');
+  lines.push('  if (style.widthFill == true) out = out.fillMaxWidth()');
+  lines.push('  if (style.heightFill == true) out = out.fillMaxHeight()');
+  lines.push('  if (style.shadow == true) out = out.then(vcSoftShadowModifier(style.radius ?: 0.dp))');
+  lines.push('  style.background?.let { out = out.background(it, RoundedCornerShape(style.radius ?: 0.dp)) }');
+  lines.push('  style.radius?.let { out = out.clip(RoundedCornerShape(it)) }');
+  lines.push('  if (style.borderColor != null) out = out.border(style.borderWidth ?: 1.dp, style.borderColor, RoundedCornerShape(style.radius ?: 0.dp))');
+  lines.push('  style.minHeight?.let { out = out.heightIn(min = it) }');
+  lines.push('  style.maxWidth?.let { out = out.widthIn(max = it) }');
+  lines.push('  style.padding?.let { out = out.padding(it) }');
+  lines.push('  style.paddingH?.let { out = out.padding(horizontal = it) }');
+  lines.push('  style.paddingV?.let { out = out.padding(vertical = it) }');
+  lines.push('  return out');
+  lines.push('}');
+  lines.push('');
+  lines.push('@Composable');
+  lines.push('fun VcButton(');
+  lines.push('  onClick: () -> Unit,');
+  lines.push('  modifier: Modifier = Modifier,');
+  lines.push('  containerColor: Color = Color.Transparent,');
+  lines.push('  contentColor: Color = Color.Unspecified,');
+  lines.push('  shape: Shape = RoundedCornerShape(0.dp),');
+  lines.push('  contentPadding: PaddingValues = PaddingValues(0.dp),');
+  lines.push('  enabled: Boolean = true,');
+  lines.push('  content: @Composable RowScope.() -> Unit,');
+  lines.push(') {');
+  lines.push('  val resolvedContentColor = if (contentColor == Color.Unspecified) LocalContentColor.current else contentColor');
+  lines.push('  Surface(');
+  lines.push('    onClick = onClick,');
+  lines.push('    modifier = modifier,');
+  lines.push('    enabled = enabled,');
+  lines.push('    shape = shape,');
+  lines.push('    color = containerColor,');
+  lines.push('    contentColor = resolvedContentColor,');
+  lines.push('    shadowElevation = 0.dp,');
+  lines.push('    tonalElevation = 0.dp,');
+  lines.push('  ) {');
+  lines.push('    Row(');
+  lines.push('      modifier = Modifier.padding(contentPadding),');
+  lines.push('      horizontalArrangement = Arrangement.Center,');
+  lines.push('      verticalAlignment = Alignment.CenterVertically,');
+  lines.push('      content = content,');
+  lines.push('    )');
+  lines.push('  }');
+  lines.push('}');
+  lines.push('');
+  lines.push('object VcTheme {');
+  lines.push('  val defaults: Map<String, VcVariantStyle> = mapOf(');
+  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)} to ${emitVariantStyleInit(resolved)},`);
+  }
+  lines.push('  )');
+  lines.push('');
+  lines.push('  val variants: Map<String, Map<String, VcVariantStyle>> = mapOf(');
+  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)} to mapOf(`);
+    for (const [variantName, variantProps] of variantEntries) {
+      const merged = mergeBaseIntoVariant(baseProps, variantProps);
+      let resolved = resolveVariantEntries(merged, tokens);
+      if (elementName === 'Box' && variantName === 'card') {
+        resolved = resolved.filter((entry) => entry.property !== 'heightFill');
+      }
+      lines.push(`      ${JSON.stringify(variantName)} to ${emitVariantStyleInit(resolved)},`);
+    }
+    lines.push('    ),');
+  }
+  lines.push('  )');
+  lines.push('');
+  lines.push('  fun resolve(element: String, variant: String): VcVariantStyle =');
+  lines.push('    variants[element]?.get(variant) ?: defaults[element] ?: VcVariantStyle()');
+  lines.push('}');
+  lines.push('');
+  return lines.join('\n');
+}

package/renderers/compose/routes.yaml

@@ -0,0 +1,7 @@
+compose:
+  description: Jetpack Compose renderer (vocabulary lowering via renderers/compose/elements.yaml)
+  outputs:
+    screen:
+      pattern: '{{projectRoot}}/generated/compose/{{screenName}}Screen.kt'
+    partial:
+      pattern: '{{projectRoot}}/generated/compose/components/{{exportName}}.kt'

package/renderers/compose/templates/Screen.kt.hbs

@@ -1,13 +1,12 @@
 // {{screenName}} — Jetpack Compose scaffold
-// View IR lowering: renderers/compose/lowerToCompose.ts (planned)
-// Theme: renderers/NATIVE_THEME_EMIT.md
 
 package {{packageName}}
 
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import generated.compose.components.{{componentName}}
 
 @Composable
 fun {{screenName}}Screen() {
-    Text("{{screenName}} — Compose scaffold")
+    // TODO: Inject real view model and dispatcher bindings.
+    {{componentName}}()
 }

package/renderers/react/routes.yaml

@@ -24,8 +24,9 @@ swiftui:
       pattern: '{{projectRoot}}/generated/swiftui/{{exportName}}.generated.swift'
 
 compose:
-  description: Jetpack Compose renderer (scaffold — screen stubs only; partial emission tracked separately)
+  description: Jetpack Compose renderer (screen + component partial generation)
   outputs:
     screen:
       pattern: '{{projectRoot}}/generated/compose/{{screenName}}Screen.kt'
-    # partial: not emitted yet — see issue #47
+    partial:
+      pattern: '{{projectRoot}}/generated/compose/components/{{exportName}}.kt'

package/renderers/registry.ts

@@ -53,10 +53,21 @@ export async function renderSwiftComponent(
   return mod.renderSwiftComponent(doc, options);
 }
 
+export async function renderComposeComponent(
+  doc: ViewIrDocument,
+  options: { theme: ThemeIR; tokens: TokenIR; allowlistExtra?: string[] },
+): Promise<string> {
+  const mod = await import('./compose/renderComponents.js');
+  return mod.renderComposeComponent(doc, options);
+}
+
 export async function renderComposeRuntime(
+  configPath: string,
   config: ViewContractsConfig,
   bindings: ViewBindingsFile,
+  design?: { theme: ThemeIR; tokens: TokenIR },
+  compiledDocs?: { screens: Map<string, ViewIrDocument>; partials: ViewIrDocument[] },
 ): Promise<void> {
   const mod = await import('./compose/renderRuntime.js');
-  return mod.renderComposeRuntime(config, bindings);
+  return mod.renderComposeRuntime(configPath, config, bindings, design, compiledDocs);
 }