@elvora/react-native 1.0.0-rc.1

package/src/test/react-native-stub.tsx

@@ -0,0 +1,413 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Vitest-only stub for `react-native` that maps RN primitives to DOM
+ * elements so component logic can be exercised in jsdom. This is *not*
+ * an attempt to replicate React Native — it covers the surface the
+ * Elvora adapter uses (View, Text, Pressable, ScrollView, Modal, TextInput,
+ * FlatList, Image, Switch, useWindowDimensions, StyleSheet, Platform,
+ * PanResponder, Animated, Linking, Dimensions). Anything more exotic
+ * needs Detox-style real-device tests.
+ */
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+
+type Style = CSSProperties | Style[] | null | undefined | false;
+
+function flattenStyle(style: Style): CSSProperties {
+  if (!style) return {};
+  if (Array.isArray(style)) {
+    return style.reduce<CSSProperties>(
+      (acc, s) => (s ? { ...acc, ...flattenStyle(s) } : acc),
+      {},
+    );
+  }
+  return style as CSSProperties;
+}
+
+function dropRNOnly<T extends Record<string, unknown>>(props: T): T {
+  const {
+    accessibilityRole: _r,
+    accessibilityState: _s,
+    accessibilityLabel: _l,
+    accessibilityValue: _v,
+    accessibilityHint: _h,
+    accessibilityLiveRegion: _lr,
+    accessible: _accessible,
+    accessibilityViewIsModal: _avm,
+    showsHorizontalScrollIndicator: _shi,
+    showsVerticalScrollIndicator: _svi,
+    hitSlop: _hs,
+    pointerEvents: _pe,
+    testID: _tid,
+    nativeID: _nid,
+    contentContainerStyle: _ccs,
+    keyboardShouldPersistTaps: _ks,
+    underlayColor: _uc,
+    activeOpacity: _ao,
+    importantForAccessibility: _ifa,
+    needsOffscreenAlphaCompositing: _noac,
+    renderToHardwareTextureAndroid: _rthta,
+    onResponderTerminate: _ort,
+    onResponderRelease: _orr,
+    onResponderMove: _orm,
+    onResponderGrant: _org,
+    onStartShouldSetResponder: _ossr,
+    onMoveShouldSetResponder: _omssr,
+    collapsable: _col,
+    removeClippedSubviews: _rcs,
+    selectable: _sel,
+    allowFontScaling: _afs,
+    adjustsFontSizeToFit: _afsf,
+    numberOfLines: _nol,
+    ellipsizeMode: _em,
+    ...rest
+  } = props;
+  // Re-apply accessibility props as aria-*
+  const out = rest as Record<string, unknown>;
+  if (_r) out.role = String(_r);
+  if (_l) out['aria-label'] = String(_l);
+  if (_h) out['aria-describedby'] = undefined;
+  if (_lr) out['aria-live'] = String(_lr);
+  if (_tid) out['data-testid'] = String(_tid);
+  if (_nid) out.id = String(_nid);
+  const state = _s as Record<string, unknown> | undefined;
+  if (state) {
+    if (state.disabled) out['aria-disabled'] = true;
+    if (state.busy) out['aria-busy'] = true;
+    if (state.selected !== undefined) out['aria-selected'] = state.selected;
+    if (state.checked !== undefined) out['aria-checked'] = state.checked;
+    if (state.expanded !== undefined) out['aria-expanded'] = state.expanded;
+  }
+  return out as T;
+}
+
+export const View = forwardRef<HTMLDivElement, any>(function View({ style, children, ...props }, ref) {
+  return (
+    <div ref={ref} style={flattenStyle(style)} {...dropRNOnly(props)}>
+      {children}
+    </div>
+  );
+});
+
+export const Text = forwardRef<HTMLSpanElement, any>(function Text({ style, children, ...props }, ref) {
+  return (
+    <span ref={ref} style={flattenStyle(style)} {...dropRNOnly(props)}>
+      {children}
+    </span>
+  );
+});
+
+export const Pressable = forwardRef<HTMLButtonElement, any>(function Pressable(
+  { style, children, onPress, onPressIn, onPressOut, disabled, ...props },
+  ref,
+) {
+  const flat = typeof style === 'function' ? style({ pressed: false }) : style;
+  return (
+    <button
+      ref={ref}
+      type="button"
+      onClick={(e) => onPress?.(e)}
+      onMouseDown={(e) => onPressIn?.(e)}
+      onMouseUp={(e) => onPressOut?.(e)}
+      disabled={disabled}
+      style={{ all: 'unset', cursor: disabled ? 'not-allowed' : 'pointer', ...flattenStyle(flat) }}
+      {...dropRNOnly(props)}
+    >
+      {typeof children === 'function' ? children({ pressed: false }) : children}
+    </button>
+  );
+});
+
+export const TouchableOpacity = Pressable;
+export const TouchableWithoutFeedback = Pressable;
+export const TouchableHighlight = Pressable;
+
+export const ScrollView = forwardRef<HTMLDivElement, any>(function ScrollView(
+  { style, children, contentContainerStyle, horizontal, ...props },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      style={{
+        overflow: 'auto',
+        display: horizontal ? 'flex' : 'block',
+        flexDirection: horizontal ? 'row' : 'column',
+        ...flattenStyle(style),
+      }}
+      {...dropRNOnly(props)}
+    >
+      <div style={flattenStyle(contentContainerStyle)}>{children}</div>
+    </div>
+  );
+});
+
+export const FlatList = forwardRef<HTMLDivElement, any>(function FlatList(
+  { data = [], renderItem, keyExtractor, ListEmptyComponent, style, ...props },
+  ref,
+) {
+  return (
+    <div ref={ref} style={flattenStyle(style)} {...dropRNOnly(props)}>
+      {data.length === 0 && ListEmptyComponent
+        ? typeof ListEmptyComponent === 'function'
+          ? <ListEmptyComponent />
+          : ListEmptyComponent
+        : data.map((item: unknown, index: number) => {
+            const key = keyExtractor ? keyExtractor(item, index) : String(index);
+            return (
+              <div key={key} data-index={index}>
+                {renderItem?.({ item, index, separators: { highlight: () => {}, unhighlight: () => {}, updateProps: () => {} } })}
+              </div>
+            );
+          })}
+    </div>
+  );
+});
+
+export const SectionList = FlatList;
+
+export const Modal = function Modal({ visible, children, transparent: _t, animationType: _a, onRequestClose, ...props }: any) {
+  if (!visible) return null;
+  return (
+    <div role="dialog" aria-modal="true" {...dropRNOnly(props)}>
+      {children}
+      <button type="button" aria-label="close" onClick={onRequestClose} style={{ display: 'none' }} />
+    </div>
+  );
+};
+
+export const TextInput = forwardRef<HTMLInputElement, any>(function TextInput(
+  { style, value, defaultValue, onChangeText, onChange, multiline, numberOfLines, secureTextEntry, keyboardType, editable, placeholder, placeholderTextColor: _ptc, returnKeyType: _rk, autoCapitalize: _ac, autoCorrect: _acr, autoComplete: _aco, textAlignVertical: _tav, onSubmitEditing, onFocus, onBlur, ...props },
+  ref,
+) {
+  const handleChange = (e: any) => {
+    onChangeText?.(e.target.value);
+    onChange?.(e);
+  };
+  if (multiline) {
+    return (
+      <textarea
+        ref={ref as any}
+        value={value}
+        defaultValue={defaultValue}
+        rows={numberOfLines}
+        disabled={editable === false}
+        placeholder={placeholder}
+        onChange={handleChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        style={flattenStyle(style)}
+        {...dropRNOnly(props)}
+      />
+    );
+  }
+  return (
+    <input
+      ref={ref}
+      type={secureTextEntry ? 'password' : keyboardType === 'numeric' || keyboardType === 'number-pad' ? 'number' : keyboardType === 'email-address' ? 'email' : 'text'}
+      value={value}
+      defaultValue={defaultValue}
+      disabled={editable === false}
+      placeholder={placeholder}
+      onChange={handleChange}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') onSubmitEditing?.(e);
+      }}
+      style={flattenStyle(style)}
+      {...dropRNOnly(props)}
+    />
+  );
+});
+
+export const Switch = forwardRef<HTMLInputElement, any>(function Switch(
+  { value, onValueChange, disabled, style, trackColor: _tc, thumbColor: _thumbC, ios_backgroundColor: _iosbg, ...props },
+  ref,
+) {
+  return (
+    <input
+      ref={ref}
+      type="checkbox"
+      role="switch"
+      checked={Boolean(value)}
+      disabled={disabled}
+      onChange={(e) => onValueChange?.(e.target.checked)}
+      style={flattenStyle(style)}
+      {...dropRNOnly(props)}
+    />
+  );
+});
+
+export const Image = forwardRef<HTMLImageElement, any>(function Image({ source, style, alt, ...props }, ref) {
+  const src = typeof source === 'string' ? source : source?.uri;
+  return <img ref={ref} src={src} alt={alt ?? ''} style={flattenStyle(style)} {...dropRNOnly(props)} />;
+});
+
+export const ImageBackground = Image;
+export const KeyboardAvoidingView = View;
+export const SafeAreaView = View;
+export const StatusBar = function StatusBar() { return null; };
+export const RefreshControl = function RefreshControl() { return null; };
+export const ActivityIndicator = function ActivityIndicator({ size, color, style, ...props }: any) {
+  return <span role="progressbar" aria-busy="true" style={{ color, ...flattenStyle(style) }} {...dropRNOnly(props)}>spinner</span>;
+};
+
+function createStyles<T extends Record<string, unknown>>(styles: T): T {
+  return styles;
+}
+
+export const StyleSheet = {
+  create: createStyles,
+  flatten: flattenStyle,
+  absoluteFill: { position: 'absolute', inset: 0 },
+  absoluteFillObject: { position: 'absolute', inset: 0 },
+  hairlineWidth: 1,
+};
+
+function platformSelect<T>(specifics: {
+  ios?: T;
+  android?: T;
+  default?: T;
+  web?: T;
+  native?: T;
+}): T | undefined {
+  return specifics.web ?? specifics.default;
+}
+
+export const Platform = {
+  OS: 'web' as const,
+  Version: 0,
+  select: platformSelect,
+};
+
+export const Dimensions = {
+  get: () => ({ width: 1024, height: 768, scale: 1, fontScale: 1 }),
+  addEventListener: () => ({ remove: () => {} }),
+};
+
+export function useWindowDimensions() {
+  const [dims] = useState({ width: 1024, height: 768, scale: 1, fontScale: 1 });
+  useEffect(() => {}, []);
+  return dims;
+}
+
+export const PanResponder = {
+  create: (config: any) => ({
+    panHandlers: {
+      onMouseDown: (e: any) => config.onPanResponderGrant?.(e, { dx: 0, dy: 0 }),
+      onMouseMove: (e: any) => config.onPanResponderMove?.(e, { dx: 0, dy: 0 }),
+      onMouseUp: (e: any) => config.onPanResponderRelease?.(e, { dx: 0, dy: 0 }),
+    },
+  }),
+};
+
+export const Animated = {
+  View,
+  Text,
+  Image,
+  ScrollView,
+  Value: class {
+    private v: number;
+    constructor(v: number) { this.v = v; }
+    setValue(v: number) { this.v = v; }
+    interpolate() { return this; }
+  },
+  timing: () => ({ start: (cb?: () => void) => cb?.() }),
+  spring: () => ({ start: (cb?: () => void) => cb?.() }),
+  parallel: (anims: any[]) => ({ start: (cb?: () => void) => { anims.forEach(a => a.start?.()); cb?.(); } }),
+  sequence: (anims: any[]) => ({ start: (cb?: () => void) => { anims.forEach(a => a.start?.()); cb?.(); } }),
+  loop: (anim: any) => ({ start: (cb?: () => void) => anim.start?.(cb) }),
+  createAnimatedComponent: createAnimatedComponent,
+};
+
+function createAnimatedComponent<T>(C: T): T {
+  return C;
+}
+
+export const Linking = {
+  openURL: async () => true,
+  canOpenURL: async () => true,
+  getInitialURL: async () => null,
+  addEventListener: () => ({ remove: () => {} }),
+};
+
+export const I18nManager = {
+  isRTL: false,
+  forceRTL: () => {},
+  allowRTL: () => {},
+  swapLeftAndRightInRTL: () => {},
+};
+
+export const AccessibilityInfo = {
+  isScreenReaderEnabled: async () => false,
+  isReduceMotionEnabled: async () => false,
+  announceForAccessibility: () => {},
+  addEventListener: () => ({ remove: () => {} }),
+};
+
+export const NativeModules = {};
+export const findNodeHandle = () => null;
+export const UIManager = { measure: () => {}, measureInWindow: () => {} };
+
+export function processColor(c: string) { return c; }
+
+const RN = {
+  View,
+  Text,
+  Pressable,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  TouchableHighlight,
+  ScrollView,
+  FlatList,
+  SectionList,
+  Modal,
+  TextInput,
+  Switch,
+  Image,
+  ImageBackground,
+  KeyboardAvoidingView,
+  SafeAreaView,
+  StatusBar,
+  RefreshControl,
+  ActivityIndicator,
+  StyleSheet,
+  Platform,
+  Dimensions,
+  useWindowDimensions,
+  PanResponder,
+  Animated,
+  Linking,
+  I18nManager,
+  AccessibilityInfo,
+  NativeModules,
+  findNodeHandle,
+  UIManager,
+  processColor,
+};
+
+export default RN;
+
+// Convenience re-exports of types used by Elvora RN adapter
+export type GestureResponderEvent = any;
+export type LayoutChangeEvent = any;
+export type NativeSyntheticEvent<T> = { nativeEvent: T };
+export type TextInputProps = any;
+export type ViewProps = any;
+export type ViewStyle = CSSProperties;
+export type TextStyle = CSSProperties;
+export type ImageStyle = CSSProperties;
+export type StyleProp<T> = T | T[] | null | undefined | false;
+export type PressableProps = any;
+export type ListRenderItem<T> = (info: { item: T; index: number; separators: any }) => ReactNode;
+export type ImageSourcePropType = any;
+export type ColorValue = string;
+
+// Some components import `View` as a type—re-export the React component type
+export type ViewType = typeof View;

package/src/test/react-native-svg-stub.tsx

@@ -0,0 +1,33 @@
+import { forwardRef, type ReactNode, type SVGProps } from 'react';
+
+interface SvgProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {
+  children?: ReactNode;
+}
+
+const Svg = forwardRef<SVGSVGElement, SvgProps>(function Svg(props, ref) {
+  return <svg ref={ref} {...props} />;
+});
+
+export default Svg;
+
+export const Circle = (props: SVGProps<SVGCircleElement>) => <circle {...props} />;
+export const Rect = (props: SVGProps<SVGRectElement>) => <rect {...props} />;
+export const Path = (props: SVGProps<SVGPathElement>) => <path {...props} />;
+export const Polygon = (props: SVGProps<SVGPolygonElement>) => <polygon {...props} />;
+export const Polyline = (props: SVGProps<SVGPolylineElement>) => <polyline {...props} />;
+export const Line = (props: SVGProps<SVGLineElement>) => <line {...props} />;
+export const Ellipse = (props: SVGProps<SVGEllipseElement>) => <ellipse {...props} />;
+export const G = (props: SVGProps<SVGGElement>) => <g {...props} />;
+export const Text = (props: SVGProps<SVGTextElement>) => <text {...props} />;
+export const TSpan = (props: SVGProps<SVGTSpanElement>) => <tspan {...props} />;
+export const Defs = (props: SVGProps<SVGDefsElement>) => <defs {...props} />;
+export const ClipPath = (props: SVGProps<SVGClipPathElement>) => <clipPath {...props} />;
+export const Use = (props: SVGProps<SVGUseElement>) => <use {...props} />;
+export const Image = (props: SVGProps<SVGImageElement>) => <image {...props} />;
+export const Symbol = (props: SVGProps<SVGSymbolElement>) => <symbol {...props} />;
+export const Pattern = (props: SVGProps<SVGPatternElement>) => <pattern {...props} />;
+export const Mask = (props: SVGProps<SVGMaskElement>) => <mask {...props} />;
+export const LinearGradient = (props: SVGProps<SVGLinearGradientElement>) => <linearGradient {...props} />;
+export const RadialGradient = (props: SVGProps<SVGRadialGradientElement>) => <radialGradient {...props} />;
+export const Stop = (props: SVGProps<SVGStopElement>) => <stop {...props} />;
+export const ForeignObject = (props: SVGProps<SVGForeignObjectElement>) => <foreignObject {...props} />;

package/src/test/setup.ts

@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom/vitest';
+import { afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+afterEach(() => {
+  cleanup();
+});