view-contracts 0.4.0 → 0.4.2

package/renderers/swiftui/renderTheme.ts

@@ -72,8 +72,39 @@ function resolveVariantEntries(
       case 'radius':
       case 'fontSize':
       case 'minHeight':
-      case 'maxWidth':
-      case 'width':
+      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) });
@@ -88,14 +119,27 @@ function resolveVariantEntries(
         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', 'radius', 'fontSize', 'fontWeight', 'shadow', 'minHeight', 'maxWidth'];
+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()`;
@@ -133,16 +177,21 @@ export function renderSwiftTheme(theme: ThemeIR, tokens: TokenIR): string {
   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`);
@@ -151,14 +200,31 @@ export function renderSwiftTheme(theme: ThemeIR, tokens: TokenIR): string {
   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(`    }`);

package/src/dsl/index.ts

@@ -0,0 +1,16 @@
+export { screen, view } from './screen.js';
+export type {
+  ViewAction,
+  ActionHandlers,
+  ScreenContext,
+  ViewContract,
+  ViewPartial,
+  ViewScreenProps,
+  CommonProps,
+  Option,
+  Tone,
+  Align,
+  Justify,
+  ButtonVariant,
+  FieldSize,
+} from './types.js';

package/src/dsl/screen.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+import type { FC } from 'react';
+import type { ScreenContext, ViewContract, ViewPartial, ViewScreenProps } from './types.js';
+
+export type {
+  ViewAction,
+  ActionHandlers,
+  ScreenContext,
+  ViewContract,
+  ViewPartial,
+  ViewScreenProps,
+  CommonProps,
+  Option,
+  Tone,
+  Align,
+  Justify,
+  ButtonVariant,
+  FieldSize,
+} from './types.js';
+
+/**
+ * Wrap a restricted view-contract TSX definition.
+ *
+ * - **Preview runtime**: returns a React component (`vm` + `actions` props).
+ * - **Compiler**: statically extracts JSX from the render callback → View IR.
+ */
+export function screen<TViewModel>(
+  render: (ctx: ScreenContext<TViewModel>) => ReactNode,
+): FC<ViewScreenProps<TViewModel>> {
+  function ViewScreen({ vm, actions = {} }: ViewScreenProps<TViewModel>) {
+    return <>{render({ vm, actions })}</>;
+  }
+  return Object.assign(ViewScreen, {
+    __viewContract: true as const,
+    render,
+  }) as FC<ViewScreenProps<TViewModel>>;
+}
+
+/**
+ * Reusable view-contract sub-component (composable inside screen() or other view()).
+ *
+ * Compiled by inlining into the parent View IR; preview runtime renders as a normal React FC.
+ */
+export function view<TProps>(
+  render: (props: TProps) => ReactNode,
+): FC<TProps> & ViewPartial<TProps> {
+  function ViewComponent(props: TProps) {
+    return <>{render(props)}</>;
+  }
+  return Object.assign(ViewComponent, {
+    __viewPartial: true as const,
+    render,
+  }) as FC<TProps> & ViewPartial<TProps>;
+}

package/src/dsl/types.ts

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+
+/** Action descriptor referenced from view contracts (names must match OpenAPI operationId). */
+export interface ViewAction {
+  name: string;
+  params?: Record<string, unknown>;
+}
+
+export type ActionHandlers = Record<string, (params?: unknown) => void | Promise<void>>;
+
+export interface ScreenContext<TViewModel> {
+  vm: TViewModel;
+  actions: ActionHandlers;
+}
+
+export interface ViewContract<TViewModel> {
+  readonly __viewContract: true;
+  readonly render: (ctx: ScreenContext<TViewModel>) => ReactNode;
+}
+
+export type Tone = 'default' | 'muted' | 'primary' | 'success' | 'warning' | 'danger';
+export type Align = 'start' | 'center' | 'end' | 'stretch';
+export type Justify = 'start' | 'center' | 'end' | 'between' | 'around';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type FieldSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Shared layout/visual props.
+ * Dimension props (width, height, gap, padding, …) are numbers in logical units;
+ * the web preview maps them to px.
+ */
+export interface CommonProps {
+  id?: string;
+  testId?: string;
+  ariaLabel?: string;
+  children?: ReactNode;
+  hidden?: boolean;
+  width?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  height?: number;
+  minHeight?: number;
+  maxHeight?: number;
+  padding?: number;
+  margin?: number;
+  gap?: number;
+  radius?: number;
+  border?: boolean;
+  shadow?: boolean;
+  tone?: Tone;
+}
+
+export interface Option {
+  label: string;
+  value: string;
+}
+
+export interface ViewPartial<TProps> {
+  readonly __viewPartial: true;
+  readonly render: (props: TProps) => ReactNode;
+}
+
+export type ViewScreenProps<TViewModel> = {
+  vm: TViewModel;
+  actions?: ActionHandlers;
+  /** Optional theme id — propagated from App element for future multi-theme runtime. */
+  theme?: string;
+};

package/renderers/react/runtime/theme.css

@@ -1,57 +0,0 @@
-* { box-sizing: border-box; }
-body { margin: 0; background: var(--ui-bg); color: var(--ui-text); font-family: var(--ui-font); }
-button, input, textarea, select { font: inherit; }
-
-.vc-page { min-height: 100vh; }
-.vc-box { display: block; }
-.vc-column { display: flex; flex-direction: column; }
-.vc-stack { display: flex; flex-direction: column; }
-.vc-row { display: flex; flex-direction: row; }
-.vc-wrap { flex-wrap: wrap; }
-.vc-spacer { min-width: 0; min-height: 0; }
-.vc-divider { border: 0; border-top: 1px solid var(--ui-border); width: 100%; }
-
-.vc-heading { margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
-.vc-heading-1 { font-size: 32px; }
-.vc-heading-2 { font-size: 22px; }
-.vc-heading-3 { font-size: 18px; }
-.vc-heading-4 { font-size: 15px; }
-.vc-text { margin: 0; line-height: 1.6; }
-.vc-link { color: var(--ui-primary); text-decoration: none; }
-.vc-link:hover { text-decoration: underline; }
-
-.vc-button { border: 0; cursor: pointer; }
-
-.vc-form { display: flex; flex-direction: column; }
-.vc-field { display: flex; flex-direction: column; gap: 6px; }
-.vc-field-label { font-size: 13px; font-weight: 700; color: var(--ui-text); }
-.vc-field-help { font-size: 12px; color: var(--ui-text-muted); }
-.vc-field-error { font-size: 12px; color: var(--ui-danger); }
-.vc-text-input, .vc-text-area { width: 100%; outline: none; }
-.vc-text-input:focus, .vc-text-area:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-weak); }
-.vc-field-sm { min-height: 34px; padding: 6px 10px; }
-.vc-field-md { min-height: 42px; }
-.vc-field-lg { min-height: 50px; padding: 12px 14px; }
-.vc-select {
-  width: 100%;
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  cursor: pointer;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-  background-size: 16px;
-}
-.vc-select:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-weak); }
-.vc-text-area { resize: vertical; }
-.vc-checkbox { display: inline-flex; align-items: center; gap: 8px; }
-.vc-list { margin: 0; padding-left: 20px; }
-.vc-list-item { margin: 0; padding: 2px 0; }
-
-.vc-table { width: 100%; display: flex; flex-direction: column; }
-.vc-table-header { display: flex; background: var(--ui-surface-muted, #f8f9fa); }
-.vc-table-column { text-align: left; padding: 12px 14px; font-size: 12px; font-weight: 600; color: var(--ui-text-muted, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
-.vc-table-row { display: flex; align-items: center; border-top: 1px solid var(--ui-border, #e5e7eb); }
-.vc-table-cell { padding: 14px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }