@billdog.io/react-native 1.0.0-beta.2

package/src/LayoutEngine.ts

@@ -0,0 +1,459 @@
+/**
+ * Layout Engine - Converts JSON layout to React Native StyleSheet
+ * 
+ * PHASE 5 SIMPLIFIED: All colors are now pre-resolved to hex by the web exporter.
+ * Removed ThemeColorResolver, CSS variable resolution, and HSL parsing.
+ */
+
+import { ViewStyle, TextStyle, ImageStyle } from 'react-native';
+import { Layout, Appearance, Size, SizeValue, BorderConfig, Shadow, BorderSide } from './types';
+import { convertCSSToReactNative, validateCSSForNative } from './utils/CSSConverter';
+
+export interface CustomCSSConfig {
+  styles?: string;
+  transitions?: string;
+  animations?: string;
+}
+
+/**
+ * Normalize a size value from any format to { type, value }
+ */
+function normalizeSizeValue(size: any): { type: string; value?: number } {
+  // Already normalized format
+  if (size && typeof size === 'object' && 'type' in size) {
+    // Migrate 'hug' to 'fit' for consistency
+    const type = size.type === 'hug' ? 'fit' : size.type;
+    return { type, value: size.value };
+  }
+  
+  // Number value = fixed
+  if (typeof size === 'number') {
+    return { type: 'fixed', value: size };
+  }
+  
+  // String value
+  if (typeof size === 'string') {
+    const lower = size.toLowerCase();
+    if (lower === 'fill' || lower === '100%') return { type: 'fill' };
+    if (lower === 'fit' || lower === 'auto' || lower === 'hug') return { type: 'fit' };
+    
+    // Try to parse as number
+    const num = parseFloat(size);
+    if (!isNaN(num)) return { type: 'fixed', value: num };
+    
+    return { type: 'fit' };
+  }
+  
+  // Default
+  return { type: 'fit' };
+}
+
+export class LayoutEngine {
+  /**
+   * Normalize size value (exported for external use)
+   */
+  static normalizeSizeValue = normalizeSizeValue;
+
+  /**
+   * Convert JSON layout and size to React Native flex layout
+   */
+  static getFlexLayout(layout: Layout, size?: Size): ViewStyle {
+    const style: ViewStyle = {};
+
+    // Normalize size values
+    const normalizedWidth = size?.width ? normalizeSizeValue(size.width) : { type: 'fit' };
+    const normalizedHeight = size?.height ? normalizeSizeValue(size.height) : { type: 'fit' };
+
+    // Width handling
+    switch (normalizedWidth.type) {
+      case 'fill':
+        style.alignSelf = 'stretch';
+        style.width = '100%';
+        break;
+      case 'fixed':
+        if (normalizedWidth.value && normalizedWidth.value > 0) {
+          style.width = normalizedWidth.value;
+        }
+        break;
+      case 'fit':
+      default:
+        break;
+    }
+
+    // Height handling
+    switch (normalizedHeight.type) {
+      case 'fill':
+        style.flex = 1;
+        break;
+      case 'fixed':
+        if (normalizedHeight.value && normalizedHeight.value > 0) {
+          style.height = normalizedHeight.value;
+        }
+        break;
+      case 'fit':
+      default:
+        break;
+    }
+
+    // Padding
+    if (layout.padding) {
+      if (layout.padding.top !== undefined) style.paddingTop = layout.padding.top;
+      if (layout.padding.right !== undefined) style.paddingRight = layout.padding.right;
+      if (layout.padding.bottom !== undefined) style.paddingBottom = layout.padding.bottom;
+      if (layout.padding.left !== undefined) style.paddingLeft = layout.padding.left;
+    }
+
+    // Margin
+    if (layout.margin) {
+      if (layout.margin.top !== undefined) style.marginTop = layout.margin.top;
+      if (layout.margin.right !== undefined) style.marginRight = layout.margin.right;
+      if (layout.margin.bottom !== undefined) style.marginBottom = layout.margin.bottom;
+      if (layout.margin.left !== undefined) style.marginLeft = layout.margin.left;
+    }
+
+    return style;
+  }
+
+  /**
+   * Convert size to React Native dimensions
+   * @deprecated Use getFlexLayout with size parameter instead
+   */
+  static getSize(size: Size, layout: Layout): ViewStyle {
+    const style: ViewStyle = {};
+    
+    const normalizedWidth = normalizeSizeValue(size.width);
+    const normalizedHeight = normalizeSizeValue(size.height);
+
+    // Width
+    if (normalizedWidth.type === 'fixed' && normalizedWidth.value) {
+      style.width = normalizedWidth.value;
+    } else if (normalizedWidth.type === 'fill') {
+      style.width = '100%';
+    }
+
+    // Height
+    if (normalizedHeight.type === 'fixed' && normalizedHeight.value) {
+      style.height = normalizedHeight.value;
+    }
+
+    return style;
+  }
+
+  /**
+   * Parse a color value - PHASE 5 SIMPLIFIED
+   * All colors are now pre-resolved to hex by the web exporter
+   */
+  private static parseColorValue(color: any): string | undefined {
+    if (!color) return undefined;
+    
+    if (typeof color === 'string') {
+      // Handle 8-character hex colors (#RRGGBBAA format)
+      if (color.length === 9 && color.startsWith('#')) {
+        // Convert RRGGBBAA to rgba for React Native
+        const r = parseInt(color.substring(1, 3), 16);
+        const g = parseInt(color.substring(3, 5), 16);
+        const b = parseInt(color.substring(5, 7), 16);
+        const a = parseInt(color.substring(7, 9), 16) / 255;
+        return `rgba(${r}, ${g}, ${b}, ${a.toFixed(2)})`;
+      }
+      
+      return color;
+    }
+    
+    // Handle object format { type: 'color'|'gradient', color?: string, gradient?: {...} }
+    if (typeof color === 'object') {
+      // Check resolvedColor first (pre-computed hex from web exporter)
+      if (color.resolvedColor) return this.parseColorValue(color.resolvedColor);
+      
+      // Direct color type with nested color
+      if (color.type === 'color' && color.color) {
+        return this.parseColorValue(color.color);
+      }
+      
+      // Gradient type - fallback to first stop color
+      if (color.type === 'gradient' && color.gradient?.stops?.length) {
+        const firstStop = color.gradient.stops[0];
+        if (firstStop?.color) {
+          return this.parseColorValue(firstStop.color);
+        }
+      }
+      
+      // Fallback fields
+      if (color.color && typeof color.color === 'string') return this.parseColorValue(color.color);
+      if (color.hex) return color.hex;
+      if (color.value) return color.value;
+    }
+    
+    return undefined;
+  }
+
+  /**
+   * Convert JSON appearance to React Native ViewStyle
+   */
+  static getAppearanceStyle(appearance: Appearance): ViewStyle {
+    const style: ViewStyle = {};
+
+    // Background color - check resolvedColor first.
+    // `fill` may be a plain color string or a structured fill object; only the
+    // object branch carries resolvedColor/color, so narrow before accessing.
+    const fillObj = typeof appearance.fill === 'object' ? appearance.fill : undefined;
+    const bgColor = this.parseColorValue(fillObj?.resolvedColor)
+      || this.parseColorValue(fillObj?.color)
+      || this.parseColorValue(typeof appearance.fill === 'string' ? appearance.fill : undefined)
+      || this.parseColorValue(appearance.backgroundColor);
+    
+    if (bgColor) {
+      style.backgroundColor = bgColor;
+    }
+
+    // Border radius
+    const borderRadius = appearance.cornerRadius ?? appearance.borderRadius;
+    if (borderRadius !== undefined && borderRadius > 0) {
+      style.borderRadius = borderRadius;
+    }
+
+    // Opacity
+    if (appearance.opacity !== undefined) {
+      style.opacity = appearance.opacity;
+    }
+
+    // Border
+    if (appearance.borderWidth !== undefined && appearance.borderWidth > 0) {
+      style.borderWidth = appearance.borderWidth;
+      
+      const borderColor = this.parseColorValue(appearance.borderColorResolved)
+        || this.parseColorValue(appearance.borderColor);
+      if (borderColor) {
+        style.borderColor = borderColor;
+      }
+    }
+
+    return style;
+  }
+
+  /**
+   * Get appearance style with border config support
+   */
+  static getAppearanceStyleWithBorder(appearance: Appearance, border?: BorderConfig): ViewStyle {
+    const style = this.getAppearanceStyle(appearance);
+
+    if (border) {
+      if (border.width !== undefined && border.width > 0) {
+        style.borderWidth = border.width;
+      }
+      
+      // Use resolvedColor first (pre-computed hex)
+      const borderColor = border.resolvedColor || border.color;
+      if (borderColor) {
+        style.borderColor = this.parseColorValue(borderColor);
+      }
+      
+      if (border.radius?.uniform !== undefined) {
+        style.borderRadius = border.radius.uniform;
+      }
+    }
+
+    return style;
+  }
+
+  /**
+   * Apply shadow to style
+   */
+  static applyShadow(style: ViewStyle, shadow: Shadow): ViewStyle {
+    const result = { ...style };
+    
+    const shadowColor = this.parseColorValue(shadow.color);
+    if (shadowColor) {
+      result.shadowColor = shadowColor;
+    }
+    
+    result.shadowOffset = {
+      width: shadow.x ?? 0,
+      height: shadow.y ?? 0,
+    };
+    result.shadowOpacity = 1;
+    result.shadowRadius = shadow.blur ?? 0;
+    
+    // Android elevation
+    (result as any).elevation = Math.max(shadow.blur ?? 0, 1);
+    
+    return result;
+  }
+
+  /**
+   * Apply border sides (top, right, bottom, left individual borders)
+   */
+  static applyBorderSides(style: ViewStyle, appearance: Appearance): ViewStyle {
+    const result = { ...style };
+
+    const applyBorderSide = (side: BorderSide | undefined, prefix: 'Top' | 'Right' | 'Bottom' | 'Left') => {
+      if (!side) return;
+      
+      if (side.width !== undefined && side.width > 0) {
+        (result as any)[`border${prefix}Width`] = side.width;
+      }
+      
+      const color = side.resolvedColor || side.color;
+      if (color) {
+        (result as any)[`border${prefix}Color`] = this.parseColorValue(color);
+      }
+    };
+
+    applyBorderSide(appearance.borderTop, 'Top');
+    applyBorderSide(appearance.borderRight, 'Right');
+    applyBorderSide(appearance.borderBottom, 'Bottom');
+    applyBorderSide(appearance.borderLeft, 'Left');
+
+    return result;
+  }
+
+  /**
+   * Apply custom CSS styles (for native rendering)
+   */
+  static applyCustomCSS(style: ViewStyle, customCSS?: CustomCSSConfig): { style: ViewStyle; warnings: string[] } {
+    if (!customCSS?.styles) {
+      return { style, warnings: [] };
+    }
+
+    const result = convertCSSToReactNative(customCSS.styles);
+    
+    return {
+      style: { ...style, ...result.style },
+      warnings: result.warnings,
+    };
+  }
+
+  /**
+   * Validate if custom CSS can be rendered natively
+   */
+  static validateCustomCSSForNative(customCSS?: CustomCSSConfig): { isValid: boolean; warnings: string[] } {
+    if (!customCSS?.styles) {
+      return { isValid: true, warnings: [] };
+    }
+
+    const warnings = validateCSSForNative(customCSS.styles);
+    return { isValid: warnings.length === 0, warnings };
+  }
+
+  /**
+   * Get container style for stack/group components
+   */
+  static getContainerStyle(
+    layout: Layout,
+    size: Size,
+    appearance: Appearance,
+    containerLayout?: { direction?: string; distribution?: string; alignment?: string; gap?: number }
+  ): ViewStyle {
+    const style: ViewStyle = {
+      ...this.getFlexLayout(layout, size),
+      ...this.getAppearanceStyle(appearance),
+    };
+
+    if (containerLayout) {
+      // Flex direction - uses canonical 'direction' property
+      style.flexDirection = containerLayout.direction === 'horizontal' ? 'row' : 'column';
+      
+      // Distribution (justify-content)
+      switch (containerLayout.distribution) {
+        case 'start':
+          style.justifyContent = 'flex-start';
+          break;
+        case 'center':
+          style.justifyContent = 'center';
+          break;
+        case 'end':
+          style.justifyContent = 'flex-end';
+          break;
+        case 'space-between':
+          style.justifyContent = 'space-between';
+          break;
+        case 'space-around':
+          style.justifyContent = 'space-around';
+          break;
+        case 'space-evenly':
+          style.justifyContent = 'space-evenly';
+          break;
+      }
+      
+      // Alignment (align-items)
+      switch (containerLayout.alignment) {
+        case 'start':
+          style.alignItems = 'flex-start';
+          break;
+        case 'center':
+          style.alignItems = 'center';
+          break;
+        case 'end':
+          style.alignItems = 'flex-end';
+          break;
+        case 'stretch':
+          style.alignItems = 'stretch';
+          break;
+      }
+      
+      // Gap
+      if (containerLayout.gap !== undefined) {
+        style.gap = containerLayout.gap;
+      }
+    }
+
+    return style;
+  }
+
+  /**
+   * Build a combined ViewStyle for a single rendered component.
+   *
+   * Composes flex layout + appearance + optional custom CSS, then layers on
+   * absolute positioning and z-index when present. This delegates to the
+   * existing helpers so runtime behavior matches the per-helper output the
+   * renderer previously relied on.
+   */
+  static getComponentStyle(
+    layout: Layout,
+    appearance: Appearance,
+    size: Size,
+    _type?: string,
+    _properties?: Record<string, any>,
+    absolutePosition?: { x: number; y: number },
+    zIndex?: number,
+    customCSS?: CustomCSSConfig
+  ): ViewStyle {
+    let style: ViewStyle = {
+      ...this.getFlexLayout(layout, size),
+      ...this.getAppearanceStyle(appearance),
+    };
+
+    if (customCSS) {
+      style = this.applyCustomCSS(style, customCSS).style;
+    }
+
+    if (absolutePosition) {
+      style.position = 'absolute';
+      style.left = absolutePosition.x;
+      style.top = absolutePosition.y;
+    }
+
+    if (zIndex !== undefined) {
+      style.zIndex = zIndex;
+    }
+
+    return style;
+  }
+}
+
+// Export for backward compatibility
+export const ThemeColorResolver = {
+  setTheme: (_config: any) => {
+    console.log('[ThemeColorResolver] Phase 5: Colors pre-resolved, theme setup skipped');
+  },
+  setResolvedColors: (_colors: any) => {},
+  clearTheme: () => {},
+  isThemingEnabled: () => false,
+  getThemingMode: () => 'disabled' as const,
+  // Phase 5: colors are pre-resolved upstream, so this runtime stub performs no
+  // variable resolution. resolveVariable returns undefined (caller falls through
+  // to its own fallback) and getDefaultVariableColor returns a neutral
+  // transparent default to keep the renderer's string-typed color pipeline valid.
+  resolveVariable: (_name: string): string | undefined => undefined,
+  getDefaultVariableColor: (_name: string): string => 'transparent',
+};