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

package/src/utils/ApiClient.ts

@@ -0,0 +1,163 @@
+/**
+ * Unified API Client for BillDog React Native SDK
+ *
+ * Centralizes all `fetch()` calls to BillDog edge functions with:
+ * - Automatic `api_key` injection into every JSON body
+ * - Endpoint resolution via `BillDogConfiguration.resolveEndpoint()`
+ * - Consistent `Content-Type: application/json` header
+ * - Error handling with structured exceptions
+ *
+ * This eliminates the previous fragmentation where 7 files independently
+ * constructed URLs, resolved auth, and called `fetch()` with inconsistent
+ * header/body patterns.
+ */
+
+import { BillDogConfiguration } from '../BillDogConfiguration';
+
+export interface ApiClientResponse<T = any> {
+  data: T;
+  status: number;
+}
+
+export class ApiClientError extends Error {
+  public readonly status: number;
+  public readonly responseBody: any;
+
+  constructor(message: string, status: number, responseBody?: any) {
+    super(message);
+    this.name = 'ApiClientError';
+    this.status = status;
+    this.responseBody = responseBody;
+  }
+}
+
+/**
+ * Resolve endpoint URL — delegates to `BillDogConfiguration.resolveEndpoint()`
+ * (the single branded base, `https://api.billdog.io/v1`).
+ */
+function resolveEndpoint(functionName: string): string {
+  return BillDogConfiguration.resolveEndpoint(functionName);
+}
+
+/**
+ * Worker-less fallback endpoint — `direct.billdog.io/functions/v1/<fn>`.
+ * `direct.billdog.io` is a Supabase custom domain with NO Cloudflare Worker,
+ * so it uses the native Supabase `/functions/v1/` path (not the Worker's
+ * `/v1/` alias). Used when `api.billdog.io` is unreachable.
+ */
+function directEndpoint(functionName: string): string {
+  return `https://direct.billdog.io/functions/v1/${functionName}`;
+}
+
+/**
+ * Resolve the API key.
+ * If a deprecated `apiKey` override is provided, it takes precedence.
+ * Otherwise reads from `BillDogConfiguration`.
+ */
+function resolveApiKey(apiKeyOverride?: string): string | undefined {
+  if (apiKeyOverride) return apiKeyOverride;
+  if (BillDogConfiguration.isConfigured()) {
+    return BillDogConfiguration.getApiKey();
+  }
+  return undefined;
+}
+
+export const ApiClient = {
+  /**
+   * POST to a BillDog edge function.
+   *
+   * - Injects `api_key` into the JSON body (standard auth contract).
+   * - Resolves endpoint via configuration.
+   * - Throws `ApiClientError` on non-2xx responses.
+   *
+   * @param functionName - Edge function name (e.g. 'fetch-paywall')
+   * @param body - Request body (api_key will be injected automatically)
+   * @param options - Optional overrides for backward compatibility
+   */
+  async post<T = any>(
+    functionName: string,
+    body: Record<string, any> = {},
+    options?: {
+      /** @deprecated Use BillDogConfiguration.configure({ apiKey }) */
+      apiKey?: string;
+    }
+  ): Promise<T> {
+    const apiKey = resolveApiKey(options?.apiKey);
+
+    const fullBody = {
+      ...body,
+      ...(apiKey ? { api_key: apiKey } : {}),
+    };
+    const init: RequestInit = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(fullBody),
+    };
+
+    let response: Response;
+    try {
+      response = await fetch(resolveEndpoint(functionName), init);
+      // A gateway error means the api.billdog.io edge / Worker is unhealthy —
+      // retry once against the Worker-less direct path.
+      if (response.status === 502 || response.status === 503 || response.status === 504) {
+        try {
+          response = await fetch(directEndpoint(functionName), init);
+        } catch {
+          /* keep the gateway response — surfaced as the error below */
+        }
+      }
+    } catch {
+      // Transport failure — api.billdog.io is unreachable (Cloudflare Worker
+      // outage). Fall back to direct.billdog.io (plain DNS → Supabase, no Worker).
+      response = await fetch(directEndpoint(functionName), init);
+    }
+
+    if (!response.ok) {
+      const errorBody = await response.json().catch(() => ({ error: response.statusText }));
+      throw new ApiClientError(
+        errorBody.error || `Request to ${functionName} failed: ${response.statusText}`,
+        response.status,
+        errorBody
+      );
+    }
+
+    return response.json();
+  },
+
+  /**
+   * GET request to a raw URL (e.g. version check endpoints).
+   * Does NOT inject api_key — use only for unauthenticated endpoints.
+   */
+  async get<T = any>(url: string): Promise<T> {
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      const errorBody = await response.json().catch(() => ({ error: response.statusText }));
+      throw new ApiClientError(
+        `GET ${url} failed: ${response.statusText}`,
+        response.status,
+        errorBody
+      );
+    }
+
+    return response.json();
+  },
+
+  /**
+   * Convenience: resolve an API key for external use (e.g. hooks that need
+   * to check if a key is available before calling).
+   */
+  resolveApiKey,
+
+  /**
+   * Convenience: resolve an endpoint URL for external use.
+   */
+  resolveEndpoint,
+};

package/src/utils/CSSConverter.ts

@@ -0,0 +1,552 @@
+/**
+ * CSS to React Native Style Converter
+ * Converts CSS strings to React Native StyleSheet-compatible objects
+ * Enhanced with gradient detection and unified style generation
+ */
+
+import { ViewStyle, TextStyle, ImageStyle, DimensionValue } from 'react-native';
+
+export interface GradientStop {
+  color: string;
+  position: number;
+}
+
+export interface GradientConfig {
+  type: 'linear' | 'radial';
+  angle?: number;
+  stops: GradientStop[];
+}
+
+export interface CSSConversionResult {
+  style: ViewStyle | TextStyle | ImageStyle;
+  warnings: string[];
+  /** If true, the component requires a LinearGradient wrapper */
+  requiresGradient?: boolean;
+  /** Gradient configuration for LinearGradient component */
+  gradient?: GradientConfig;
+  /** Fallback solid color if gradient can't be rendered */
+  fallbackColor?: string;
+}
+
+/**
+ * Properties that only work in WebView, not native React Native
+ */
+const WEBVIEW_ONLY_PROPERTIES = [
+  'backdrop-filter',
+  'box-shadow', // Partially supported via shadow* props
+  'text-shadow',
+  'background-image',
+  'clip-path',
+  'mask',
+  'filter',
+  'mix-blend-mode',
+  'background-blend-mode',
+];
+
+/**
+ * Parse gradient from CSS background property
+ */
+function parseGradientFromCSS(value: string): GradientConfig | null {
+  // Match linear-gradient(angle, color1 pos1, color2 pos2, ...)
+  const linearMatch = value.match(/linear-gradient\(([^)]+)\)/);
+  if (linearMatch) {
+    const parts = linearMatch[1].split(',').map(p => p.trim());
+    let angle = 180;
+    let colorStops: string[] = [];
+    
+    // First part might be angle
+    if (parts[0].includes('deg')) {
+      angle = parseFloat(parts[0].replace('deg', ''));
+      colorStops = parts.slice(1);
+    } else if (parts[0].startsWith('to ')) {
+      // Handle direction keywords
+      const dir = parts[0].replace('to ', '');
+      if (dir === 'right') angle = 90;
+      else if (dir === 'left') angle = 270;
+      else if (dir === 'bottom') angle = 180;
+      else if (dir === 'top') angle = 0;
+      colorStops = parts.slice(1);
+    } else {
+      colorStops = parts;
+    }
+    
+    const stops: GradientStop[] = colorStops.map((stop, index) => {
+      const match = stop.match(/(.+?)\s+(\d+)%?$/);
+      if (match) {
+        return { color: match[1].trim(), position: parseFloat(match[2]) };
+      }
+      // Default position based on index
+      return { 
+        color: stop.trim(), 
+        position: (index / Math.max(colorStops.length - 1, 1)) * 100 
+      };
+    });
+    
+    return { type: 'linear', angle, stops };
+  }
+  
+  // Match radial-gradient
+  const radialMatch = value.match(/radial-gradient\(([^)]+)\)/);
+  if (radialMatch) {
+    const parts = radialMatch[1].split(',').map(p => p.trim());
+    // Skip shape/size specification, get color stops
+    const colorStops = parts.filter(p => !p.includes('circle') && !p.includes('ellipse'));
+    
+    const stops: GradientStop[] = colorStops.map((stop, index) => {
+      const match = stop.match(/(.+?)\s+(\d+)%?$/);
+      if (match) {
+        return { color: match[1].trim(), position: parseFloat(match[2]) };
+      }
+      return { 
+        color: stop.trim(), 
+        position: (index / Math.max(colorStops.length - 1, 1)) * 100 
+      };
+    });
+    
+    return { type: 'radial', stops };
+  }
+  
+  return null;
+}
+
+/**
+ * Convert CSS string to React Native styles
+ * Now with gradient detection and extraction
+ */
+export function convertCSSToReactNative(css: string): CSSConversionResult {
+  const style: ViewStyle = {};
+  const warnings: string[] = [];
+  let requiresGradient = false;
+  let gradient: GradientConfig | undefined;
+  let fallbackColor: string | undefined;
+  
+  if (!css || css.trim() === '') {
+    return { style, warnings };
+  }
+  
+  const properties = parseCSSProperties(css);
+  
+  for (const [property, value] of Object.entries(properties)) {
+    // Check for gradient in background property
+    if (property === 'background' || property === 'background-image') {
+      const gradientConfig = parseGradientFromCSS(value);
+      if (gradientConfig) {
+        requiresGradient = true;
+        gradient = gradientConfig;
+        fallbackColor = gradientConfig.stops[0]?.color || 'transparent';
+        style.backgroundColor = fallbackColor; // Fallback
+        continue;
+      }
+    }
+    
+    // Check for unsupported properties
+    if (WEBVIEW_ONLY_PROPERTIES.some(p => property.includes(p))) {
+      warnings.push(`'${property}' is not supported in native rendering`);
+      continue;
+    }
+    
+    processProperty(property, value, style, warnings);
+  }
+  
+  return { style, warnings, requiresGradient, gradient, fallbackColor };
+}
+
+/**
+ * Parse CSS string into property map
+ */
+function parseCSSProperties(css: string): Record<string, string> {
+  const properties: Record<string, string> = {};
+  
+  const declarations = css.split(';').filter(d => d.trim());
+  for (const decl of declarations) {
+    const colonIndex = decl.indexOf(':');
+    if (colonIndex > 0) {
+      const prop = decl.substring(0, colonIndex).trim();
+      const value = decl.substring(colonIndex + 1).trim();
+      properties[prop] = value;
+    }
+  }
+  
+  return properties;
+}
+
+/**
+ * Process a single CSS property
+ */
+function processProperty(
+  property: string, 
+  value: string, 
+  style: ViewStyle, 
+  warnings: string[]
+): void {
+  const numericValue = parseNumericValue(value);
+  
+  switch (property) {
+    // Background
+    case 'background-color':
+      style.backgroundColor = value;
+      break;
+    
+    // Opacity
+    case 'opacity':
+      style.opacity = parseFloat(value);
+      break;
+    
+    // Border radius
+    case 'border-radius':
+      style.borderRadius = numericValue;
+      break;
+    case 'border-top-left-radius':
+      style.borderTopLeftRadius = numericValue;
+      break;
+    case 'border-top-right-radius':
+      style.borderTopRightRadius = numericValue;
+      break;
+    case 'border-bottom-left-radius':
+      style.borderBottomLeftRadius = numericValue;
+      break;
+    case 'border-bottom-right-radius':
+      style.borderBottomRightRadius = numericValue;
+      break;
+    
+    // Border
+    case 'border-width':
+      style.borderWidth = numericValue;
+      break;
+    case 'border-color':
+      style.borderColor = value;
+      break;
+    case 'border-style':
+      style.borderStyle = value as 'solid' | 'dotted' | 'dashed';
+      break;
+    case 'border-top-width':
+      style.borderTopWidth = numericValue;
+      break;
+    case 'border-right-width':
+      style.borderRightWidth = numericValue;
+      break;
+    case 'border-bottom-width':
+      style.borderBottomWidth = numericValue;
+      break;
+    case 'border-left-width':
+      style.borderLeftWidth = numericValue;
+      break;
+    
+    // Padding
+    case 'padding':
+      applySpacingShorthand(value, style, 'padding');
+      break;
+    case 'padding-top':
+      style.paddingTop = numericValue;
+      break;
+    case 'padding-right':
+      style.paddingRight = numericValue;
+      break;
+    case 'padding-bottom':
+      style.paddingBottom = numericValue;
+      break;
+    case 'padding-left':
+      style.paddingLeft = numericValue;
+      break;
+    
+    // Margin
+    case 'margin':
+      applySpacingShorthand(value, style, 'margin');
+      break;
+    case 'margin-top':
+      style.marginTop = numericValue;
+      break;
+    case 'margin-right':
+      style.marginRight = numericValue;
+      break;
+    case 'margin-bottom':
+      style.marginBottom = numericValue;
+      break;
+    case 'margin-left':
+      style.marginLeft = numericValue;
+      break;
+    
+    // Dimensions
+    case 'width':
+      style.width = parseNumericOrPercent(value);
+      break;
+    case 'height':
+      style.height = parseNumericOrPercent(value);
+      break;
+    case 'min-width':
+      style.minWidth = parseNumericOrPercent(value);
+      break;
+    case 'min-height':
+      style.minHeight = parseNumericOrPercent(value);
+      break;
+    case 'max-width':
+      style.maxWidth = parseNumericOrPercent(value);
+      break;
+    case 'max-height':
+      style.maxHeight = parseNumericOrPercent(value);
+      break;
+    
+    // Transform
+    case 'transform':
+      // parseTransform returns a dynamically-built array of single-key transform
+      // objects from parsed CSS. RN's transform union (RotateTransform | ... |
+      // MatrixTransform) is impractical to satisfy from dynamic parsing, so cast.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      style.transform = parseTransform(value) as any;
+      break;
+    
+    // Flexbox
+    case 'flex':
+      style.flex = parseFloat(value);
+      break;
+    case 'flex-direction':
+      style.flexDirection = value as 'row' | 'column' | 'row-reverse' | 'column-reverse';
+      break;
+    case 'justify-content':
+      style.justifyContent = mapJustifyContent(value);
+      break;
+    case 'align-items':
+      style.alignItems = mapAlignItems(value);
+      break;
+    case 'align-self':
+      style.alignSelf = mapAlignItems(value);
+      break;
+    case 'flex-wrap':
+      style.flexWrap = value as 'wrap' | 'nowrap' | 'wrap-reverse';
+      break;
+    
+    // Shadow (partial support)
+    case 'box-shadow':
+      applyBoxShadow(value, style);
+      break;
+    
+    // Position
+    case 'position':
+      style.position = value as 'absolute' | 'relative';
+      break;
+    case 'top':
+      style.top = numericValue;
+      break;
+    case 'right':
+      style.right = numericValue;
+      break;
+    case 'bottom':
+      style.bottom = numericValue;
+      break;
+    case 'left':
+      style.left = numericValue;
+      break;
+    case 'z-index':
+      style.zIndex = parseInt(value);
+      break;
+    
+    // Overflow
+    case 'overflow':
+      style.overflow = value as 'visible' | 'hidden' | 'scroll';
+      break;
+    
+    default:
+      // Unknown property - add warning
+      if (!property.startsWith('-webkit') && !property.startsWith('-moz')) {
+        warnings.push(`Unknown CSS property: '${property}'`);
+      }
+  }
+}
+
+/**
+ * Parse numeric value from CSS
+ */
+function parseNumericValue(value: string): number {
+  return parseFloat(value.replace(/px|dp|pt|rem|em/g, '')) || 0;
+}
+
+/**
+ * Parse numeric or percentage value
+ */
+function parseNumericOrPercent(value: string): DimensionValue {
+  if (value.includes('%')) {
+    // RN's DimensionValue percent type is the template literal `${number}%`;
+    // a runtime-parsed CSS string can't be statically proven to match, so cast.
+    return value.trim() as DimensionValue;
+  }
+  return parseNumericValue(value);
+}
+
+/**
+ * Apply spacing shorthand (padding/margin)
+ */
+function applySpacingShorthand(
+  value: string, 
+  style: ViewStyle, 
+  prefix: 'padding' | 'margin'
+): void {
+  const parts = value.split(/\s+/).map(parseNumericValue);
+  
+  switch (parts.length) {
+    case 1:
+      (style as any)[prefix] = parts[0];
+      break;
+    case 2:
+      (style as any)[`${prefix}Vertical`] = parts[0];
+      (style as any)[`${prefix}Horizontal`] = parts[1];
+      break;
+    case 3:
+      (style as any)[`${prefix}Top`] = parts[0];
+      (style as any)[`${prefix}Horizontal`] = parts[1];
+      (style as any)[`${prefix}Bottom`] = parts[2];
+      break;
+    case 4:
+      (style as any)[`${prefix}Top`] = parts[0];
+      (style as any)[`${prefix}Right`] = parts[1];
+      (style as any)[`${prefix}Bottom`] = parts[2];
+      (style as any)[`${prefix}Left`] = parts[3];
+      break;
+  }
+}
+
+/**
+ * Parse CSS transform to React Native transform array
+ */
+function parseTransform(value: string): Array<{ [key: string]: number | string }> {
+  const transforms: Array<{ [key: string]: number | string }> = [];
+  
+  // translateX
+  const translateXMatch = value.match(/translateX\(([^)]+)\)/);
+  if (translateXMatch) {
+    transforms.push({ translateX: parseNumericValue(translateXMatch[1]) });
+  }
+  
+  // translateY
+  const translateYMatch = value.match(/translateY\(([^)]+)\)/);
+  if (translateYMatch) {
+    transforms.push({ translateY: parseNumericValue(translateYMatch[1]) });
+  }
+  
+  // translate(x, y)
+  const translateMatch = value.match(/translate\(([^,)]+)(?:,\s*([^)]+))?\)/);
+  if (translateMatch) {
+    transforms.push({ translateX: parseNumericValue(translateMatch[1]) });
+    if (translateMatch[2]) {
+      transforms.push({ translateY: parseNumericValue(translateMatch[2]) });
+    }
+  }
+  
+  // scale
+  const scaleMatch = value.match(/scale\(([^)]+)\)/);
+  if (scaleMatch) {
+    transforms.push({ scale: parseFloat(scaleMatch[1]) });
+  }
+  
+  // scaleX
+  const scaleXMatch = value.match(/scaleX\(([^)]+)\)/);
+  if (scaleXMatch) {
+    transforms.push({ scaleX: parseFloat(scaleXMatch[1]) });
+  }
+  
+  // scaleY
+  const scaleYMatch = value.match(/scaleY\(([^)]+)\)/);
+  if (scaleYMatch) {
+    transforms.push({ scaleY: parseFloat(scaleYMatch[1]) });
+  }
+  
+  // rotate
+  const rotateMatch = value.match(/rotate\(([^)]+)\)/);
+  if (rotateMatch) {
+    const deg = rotateMatch[1].replace('deg', '');
+    transforms.push({ rotate: `${deg}deg` });
+  }
+  
+  return transforms;
+}
+
+/**
+ * Apply box-shadow (partial React Native support)
+ */
+function applyBoxShadow(value: string, style: ViewStyle): void {
+  // Parse: offsetX offsetY blurRadius color
+  const match = value.match(/(-?\d+)px\s+(-?\d+)px\s+(-?\d+)px(?:\s+(-?\d+)px)?\s+(.+)/);
+  if (match) {
+    const [, x, y, blur, _spread, color] = match;
+    
+    style.shadowColor = color.trim();
+    style.shadowOffset = { width: parseInt(x), height: parseInt(y) };
+    style.shadowOpacity = 1;
+    style.shadowRadius = parseInt(blur);
+    // Android elevation
+    (style as any).elevation = Math.max(parseInt(blur), 1);
+  }
+}
+
+/**
+ * Map CSS justify-content to React Native
+ */
+function mapJustifyContent(value: string): ViewStyle['justifyContent'] {
+  const map: Record<string, ViewStyle['justifyContent']> = {
+    'flex-start': 'flex-start',
+    'flex-end': 'flex-end',
+    'center': 'center',
+    'space-between': 'space-between',
+    'space-around': 'space-around',
+    'space-evenly': 'space-evenly',
+  };
+  return map[value] || 'flex-start';
+}
+
+/**
+ * Map CSS align-items to React Native
+ */
+function mapAlignItems(value: string): ViewStyle['alignItems'] {
+  const map: Record<string, ViewStyle['alignItems']> = {
+    'flex-start': 'flex-start',
+    'flex-end': 'flex-end',
+    'center': 'center',
+    'stretch': 'stretch',
+    'baseline': 'baseline',
+  };
+  return map[value] || 'stretch';
+}
+
+/**
+ * Validate CSS for native compatibility
+ */
+export function validateCSSForNative(css: string): string[] {
+  const warnings: string[] = [];
+  
+  for (const prop of WEBVIEW_ONLY_PROPERTIES) {
+    if (css.includes(prop)) {
+      warnings.push(`'${prop}' is only supported in WebView mode`);
+    }
+  }
+  
+  // Check for gradients (now supported with LinearGradient component)
+  if (css.includes('linear-gradient') || css.includes('radial-gradient')) {
+    warnings.push('Gradients require LinearGradient component wrapper');
+  }
+  
+  return warnings;
+}
+
+/**
+ * Convert gradient angle to LinearGradient start/end points
+ * CSS angle: 0deg = bottom to top, 90deg = left to right
+ * LinearGradient: start/end are {x, y} where 0,0 is top-left
+ */
+export function angleToGradientPoints(angle: number): {
+  start: { x: number; y: number };
+  end: { x: number; y: number };
+} {
+  const radians = ((angle - 90) * Math.PI) / 180;
+  
+  const startX = 0.5 - Math.cos(radians) * 0.5;
+  const startY = 0.5 + Math.sin(radians) * 0.5;
+  const endX = 0.5 + Math.cos(radians) * 0.5;
+  const endY = 0.5 - Math.sin(radians) * 0.5;
+  
+  return {
+    start: { x: startX, y: startY },
+    end: { x: endX, y: endY },
+  };
+}
+
+// GradientStop and GradientConfig are already exported at their `export interface`
+// declarations above; the redundant re-export was removed to avoid a conflict.