merge main

Author: s77rt

.claude/agents/code-inline-reviewer.md

@@ -825,6 +825,156 @@ async function submitForm(data: FormData) {
 
 ---
 
+### [CLEAN-REACT-PATTERNS-1] Favor composition over configuration
+
+- **Search patterns**: `shouldShow`, `shouldEnable`, `canSelect`, `enable`, `disable`, configuration props patterns
+
+- **Condition**: Flag ONLY when ALL of these are true:
+
+  - A **new feature** is being introduced OR an **existing component's API is being expanded with new props**
+  - The change adds configuration properties (flags, conditional logic)
+  - These configuration options control feature presence or behavior within the component
+  - These features could instead be expressed as composable child components
+
+  **Features that should be expressed as child components:**
+  - Optional UI elements that could be composed in
+  - New behavior that could be introduced as new children
+  - Features that currently require parent component code changes
+
+  **DO NOT flag if:**
+  - Props are narrow, stable values needed for coordination between composed parts (e.g., `reportID`, `data`, `columns`)
+  - The component uses composition and child components for features
+  - Parent components stay stable as features are added
+
+- **Reasoning**: When new features are implemented by adding configuration (props, flags, conditional logic) to existing components, if requirements change, then those components must be repeatedly modified, increasing coupling, surface area, and regression risk. Composition ensures features scale horizontally, limits the scope of changes, and prevents components from becoming configuration-driven "mega components".
+
+Good (composition):
+
+- Features expressed as composable children
+- Parent stays stable; add features by adding children
+
+```tsx
+<Table data={items} columns={columns}>
+  <Table.SearchBar />
+  <Table.Header />
+  <Table.Body />
+</Table>
+```
+
+```tsx
+<SelectionList data={items}>
+  <SelectionList.TextInput />
+  <SelectionList.Body />
+</SelectionList>
+```
+
+Bad (configuration):
+
+- Features controlled by boolean flags
+- Adding a new feature requires modifying the Table component's API
+
+```tsx
+<Table
+  data={items}
+  columns={columns}
+  shouldShowSearchBar
+  shouldShowHeader
+  shouldEnableSorting
+  shouldShowPagination
+  shouldHighlightOnHover
+/>
+
+type TableProps = {
+  data: Item[];
+  columns: Column[];
+  shouldShowSearchBar?: boolean;    // ❌ Could be <Table.SearchBar />
+  shouldShowHeader?: boolean;       // ❌ Could be <Table.Header />
+  shouldEnableSorting?: boolean;    // ❌ Configuration for header behavior
+  shouldShowPagination?: boolean;   // ❌ Could be <Table.Pagination />
+  shouldHighlightOnHover?: boolean; // ❌ Configuration for styling behavior
+};
+```
+
+```tsx
+<SelectionList
+  data={items}
+  shouldShowTextInput
+  shouldShowTooltips
+  shouldScrollToFocusedIndex
+  shouldDebounceScrolling
+  shouldUpdateFocusedIndex
+  canSelectMultiple
+  disableKeyboardShortcuts
+/>
+
+type SelectionListProps = {
+  shouldShowTextInput?: boolean;      // ❌ Could be <SelectionList.TextInput />
+  shouldShowConfirmButton?: boolean;  // ❌ Could be <SelectionList.ConfirmButton />
+  textInputOptions?: {...};           // ❌ Configuration object for the above
+};
+```
+
+Good (children manage their own state):
+
+```tsx
+// Children are self-contained and manage their own state
+// Parent only passes minimal data (IDs)
+// Adding new features doesn't require changing the parent
+function ReportScreen({ params: { reportID }}) {
+  return (
+    <>
+      <ReportActionsView reportID={reportID} />
+      // other features
+      <Composer />
+    </>
+  );
+}
+
+// Component accesses stores and calculates its own state
+// Parent doesn't know the internals
+function ReportActionsView({ reportID }) {
+  const [reportOnyx] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
+  const reportActions = getFilteredReportActionsForReportView(unfilteredReportActions);
+  // ...
+}
+```
+
+Bad (parent manages child state):
+
+```tsx
+// Parent fetches and manages state for its children
+// Parent has to know child implementation details
+function ReportScreen({ params: { reportID }}) {
+  const [reportOnyx] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {allowStaleData: true, canBeMissing: true});
+  const reportActions = useMemo(() => getFilteredReportActionsForReportView(unfilteredReportActions), [unfilteredReportActions]);
+  const [reportMetadata = defaultReportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportIDFromRoute}`, {canBeMissing: true, allowStaleData: true});
+  const {reportActions: unfilteredReportActions, linkedAction, sortedAllReportActions, hasNewerActions, hasOlderActions} = usePaginatedReportActions(reportID, reportActionIDFromRoute);
+  const parentReportAction = useParentReportAction(reportOnyx);
+  const transactionThreadReportID = getOneTransactionThreadReportID(report, chatReport, reportActions ?? [], isOffline, reportTransactionIDs);
+  const isTransactionThreadView = isReportTransactionThread(report);
+  // other onyx connections etc
+  
+  return (
+    <>
+      <ReportActionsView
+        report={report}
+        reportActions={reportActions}
+        isLoadingInitialReportActions={reportMetadata?.isLoadingInitialReportActions}
+        hasNewerActions={hasNewerActions}
+        hasOlderActions={hasOlderActions}
+        parentReportAction={parentReportAction}
+        transactionThreadReportID={transactionThreadReportID}
+        isReportTransactionThread={isTransactionThreadView}
+      />
+      // other features
+      <Composer />
+    </>
+  );
+}
+```
+
+---
+
 ## Instructions
 
 1. **First, get the list of changed files and their diffs:**

.github/ISSUE_TEMPLATE/Exploratory.md

@@ -0,0 +1,46 @@
+---
+name: Exploratory issue template
+about: A template to follow when creating a new issue in this repository that was found during Exploratory testing by QA
+labels: Monthly, Not a priority
+---
+
+If you haven’t already, check out our [contributing guidelines](https://github.com/Expensify/ReactNativeChat/blob/main/contributingGuides/CONTRIBUTING.md) for onboarding and email contributors@expensify.com to request to join our Slack channel!
+___
+**For all Exploratory issues, start the title of the issue with `[Exploratory]`** (and, do **not** add the `External` label.
+
+**Version Number:**
+**Reproducible in staging?:**
+**Reproducible in production?:**
+**If this was caught during regression testing, add the test name, ID and link from BrowserStack:**
+**Email or phone of affected tester (no customers):**
+**Logs:** https://stackoverflow.com/c/expensify/questions/4856
+**Expensify/Expensify Issue URL:**
+**Issue reported by:**
+**Slack conversation** (hyperlinked to channel name):
+
+## Action Performed:
+Break down in numbered steps
+
+## Expected Result:
+Describe what you think should've happened
+
+## Actual Result:
+Describe what actually happened
+
+## Workaround:
+Can the user still use Expensify without this being fixed? Have you informed them of the workaround?
+
+## Platforms:
+Select the officially supported platforms where the issue was reproduced:
+- [ ] Android: App
+- [ ] Android: mWeb Chrome
+- [ ] iOS: App
+- [ ] iOS: mWeb Safari
+- [ ] iOS: mWeb Chrome
+- [ ] Windows: Chrome
+- [ ] MacOS: Chrome / Safari
+
+## Screenshots/Videos
+
+
+[View all open jobs on GitHub](https://github.com/Expensify/App/issues?q=is%3Aopen+is%3Aissue+label%3A%22Help+Wanted%22)

Mobile-Expensify

@@ -0,0 +1,111 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line no-restricted-imports
+import React, {forwardRef, useRef} from 'react';
+import type {ForwardedRef} from 'react';
+import {View} from 'react-native';
+import type {ViewProps} from 'react-native';
+
+type MutedChangeEventPayload = {
+    isMuted: boolean;
+};
+
+type PlayingChangeEventPayload = {
+    isPlaying: boolean;
+};
+
+type StatusChangeEventPayload = {
+    status: string;
+};
+
+type TimeUpdateEventPayload = {
+    currentTime: number;
+};
+
+type VideoPlayer = {
+    /** lightweight “state” */
+    isPlaying: boolean;
+    isMuted: boolean;
+    currentTime: number;
+
+    /** controls */
+    play: jest.Mock<void, []>;
+    pause: jest.Mock<void, []>;
+    replace: jest.Mock<void, [unknown?]>;
+    seekTo: jest.Mock<void, [number]>;
+    setIsMuted: jest.Mock<void, [boolean]>;
+
+    /** simple event API */
+    addListener: jest.Mock<{remove: () => void}, [string, (payload: unknown) => void]>;
+};
+
+function createMockPlayer(): VideoPlayer {
+    let _isPlaying = false;
+    let _isMuted = false;
+    let _currentTime = 0;
+
+    return {
+        get isPlaying() {
+            return _isPlaying;
+        },
+        get isMuted() {
+            return _isMuted;
+        },
+        get currentTime() {
+            return _currentTime;
+        },
+
+        play: jest.fn(() => {
+            _isPlaying = true;
+        }),
+        pause: jest.fn(() => {
+            _isPlaying = false;
+        }),
+        replace: jest.fn((_opts?: unknown) => {
+            // no-op; exist to satisfy code that calls it
+        }),
+        seekTo: jest.fn((time: number) => {
+            _currentTime = time;
+        }),
+        setIsMuted: jest.fn((muted: boolean) => {
+            _isMuted = muted;
+        }),
+
+        addListener: jest.fn((_event: string, _cb: (payload: unknown) => void) => {
+            // minimal, enough for code that calls .remove()
+            return {remove: () => {}};
+        }),
+    };
+}
+
+/**
+ * Mocked hook – returns a stable mock player instance.
+ * Signature accepts any args to match real API calls.
+ */
+function useVideoPlayer(..._args: unknown[]): VideoPlayer {
+    const ref = useRef<VideoPlayer | null>(null);
+    if (!ref.current) {
+        ref.current = createMockPlayer();
+    }
+    return ref.current;
+}
+
+/**
+ * Simple stand-in for the native VideoView.
+ * Accepts a `player` prop to mirror the real component.
+ */
+type VideoViewProps = ViewProps & {player?: VideoPlayer};
+
+const VideoView = forwardRef((props: VideoViewProps, ref: ForwardedRef<View>) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <View
+        ref={ref}
+        accessibilityLabel="MockVideoView"
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    />
+));
+
+export {useVideoPlayer, VideoView};
+export type {MutedChangeEventPayload, PlayingChangeEventPayload, StatusChangeEventPayload, TimeUpdateEventPayload};

__mocks__/expo-video.tsx

@@ -114,8 +114,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1009030800
-        versionName "9.3.8-0"
+        versionCode 1009030901
+        versionName "9.3.9-1"
         // Supported language variants must be declared here to avoid from being removed during the compilation.
         // This also helps us to not include unnecessary language variants in the APK.
         resConfigs "en", "es"

android/app/build.gradle

@@ -56,6 +56,7 @@ const includeModules = [
     '@react-native/assets',
     'expo',
     'expo-av',
+    'expo-video',
     'expo-image-manipulator',
     'expo-modules-core',
 ].join('|');

config/webpack/webpack.common.ts

@@ -132,9 +132,9 @@ Additionally, if you want to discuss an idea with the open source community with
 * You'll need a Mac to test the iOS and MacOS app.
 * In case you don't have one, here's a helpful [document](https://github.com/Expensify/App/blob/main/contributingGuides/TESTING_MACOS_AND_IOS.md) on how you might test all platforms on a Windows/Linux device.
 
-### Check GitHub for existing proposals from other users
+### Check GitHub for existing proposals
 
-1. Expensify reviews all solution proposals on a first come first serve basis. If you see other contributors have already proposed a solution, you can still provide a solution proposal and we will review it. We look for the earliest provided, best proposed solution that addresses the job.
+1. Expensify reviews all solution proposals on a first come first serve basis. If you see proposals are already posted on an issue, you can still provide a solution proposal and we will review it. We look for the earliest provided, best proposed solution that addresses the job.
 
 ### Make sure you can reproduce the problem
 2. Use your test account(s) to reproduce the problem by following the steps in the GitHub issue.