feat: move examples to ./apps (#2507)

# Summary

Due to the large number of example apps in the repository, I decided to
change the structure and move all applications into an "apps" folder to
maintain a clear structure.

.eslintignore

@@ -1,9 +1,9 @@
 **/node_modules/
-example/examples/
+apps/**/node_modules/
-example/android/
+apps/**/android/
-example/ios/
+apps/**/ios/
-example/windows/
+apps/**/windows/
-macos-example/macos/
+apps/**/macos/
 screenshots/
 android/
 apple/

.github/workflows/android-build-test.yml

@@ -6,10 +6,10 @@ on:
       - 'android/**'
       - 'src/fabric/**'
       - 'package.json'
-      - 'example/android/**'
+      - 'apps/example/android/**'
-      - 'example/package.json'
+      - 'apps/example/package.json'
-      - 'fabric-example/android/**'
+      - 'apps/fabric-example/android/**'
-      - 'fabric-example/package.json'
+      - 'apps/fabric-example/package.json'
   push:
     branches:
       - main
@@ -48,12 +48,12 @@ jobs:
       - name: Get app node_modules cache
         uses: actions/cache@v4
         with:
-          path: ${{ matrix.working-directory }}/node_modules
+          path: apps/${{ matrix.working-directory }}/node_modules
           key: ${{ runner.os }}-node-modules-${{ matrix.working-directory }}-${{ hashFiles(format('{0}/yarn.lock', matrix.working-directory)) }}
           restore-keys: ${{ runner.os }}-node-modules-${{ matrix.working-directory }}-
 
       - name: Install app node_modules
-        working-directory: ${{ matrix.working-directory }}
+        working-directory: apps/${{ matrix.working-directory }}
         run: yarn install --frozen-lockfile
 
       - name: Get build cache
@@ -67,5 +67,5 @@ jobs:
             ${{ runner.os }}-gradle-${{matrix.working-directory}}-
 
       - name: Build app
-        working-directory: ${{ matrix.working-directory }}/android
+        working-directory: apps/${{ matrix.working-directory }}/android
         run: ./gradlew assembleDebug --build-cache --console=plain -PreactNativeArchitectures=arm64-v8a

.github/workflows/e2e-android.yml

@@ -3,8 +3,7 @@ on:
   pull_request:
     paths:
       - .github/workflows/e2e-android.yml
-      - apps/examples/**
+      - apps/example/**
-      - example/**
       - android/**
       - src/**
       - e2e/**
@@ -81,7 +80,7 @@ jobs:
         timeout-minutes: 10
 
       - name: Reverse TCP
-        working-directory: ${{ env.WORKING_DIRECTORY }}
+        working-directory: apps/${{ env.WORKING_DIRECTORY }}
         run: adb devices | grep '\t' | awk '{print $1}' | sed 's/\\s//g' | xargs -I {} adb -s {} reverse tcp:8081 tcp:8081
 
       - name: Install root node dependencies
@@ -89,18 +88,18 @@ jobs:
 
       - name: Install example app node dependencies
         run: yarn
-        working-directory: ${{ env.WORKING_DIRECTORY }}
+        working-directory: apps/${{ env.WORKING_DIRECTORY }}
 
       - name: Build Android app
-        working-directory: ${{ env.WORKING_DIRECTORY }}/android
+        working-directory: apps/${{ env.WORKING_DIRECTORY }}/android
         run: ./gradlew assembleDebug
 
       - name: Start Metro server
-        working-directory: ${{ env.WORKING_DIRECTORY }}
+        working-directory: apps/${{ env.WORKING_DIRECTORY }}
         run: E2E=true yarn start &> output.log &
 
       - name: Install APK
-        run: adb install -r ${{ env.WORKING_DIRECTORY }}/android/app/build/outputs/apk/debug/app-debug.apk
+        run: adb install -r apps/${{ env.WORKING_DIRECTORY }}/android/app/build/outputs/apk/debug/app-debug.apk
 
       - name: Launch APK
         run: 'while ! (adb shell monkey -p com.example 1 | grep -q "Events injected: 1"); do sleep 1; echo "Retrying due to errors in previous run..."; done'

.github/workflows/e2e-ios.yml

@@ -3,7 +3,7 @@ on:
   pull_request:
     paths:
       - .github/workflows/ios-e2e.yml
-      - apps/examples/**
+      - apps/common/example/**
       - apple/**
       - src/**
       - e2e/**
@@ -45,40 +45,40 @@ jobs:
       - name: Get app node_modules cache
         uses: actions/cache@v4
         with:
-          path: ${{ matrix.working-directory }}/node_modules
+          path: apps/${{ matrix.working-directory }}/node_modules
-          key: ${{ runner.os }}-node-modules-${{ matrix.working-directory }}-${{ hashFiles(format('{0}/yarn.lock', matrix.working-directory)) }}
+          key: ${{ runner.os }}-node-modules-${{ matrix.working-directory }}-${{ hashFiles(format('apps/{0}/yarn.lock', matrix.working-directory)) }}
           restore-keys: ${{ runner.os }}-node-modules-${{ matrix.working-directory }}-
 
       - name: Install app node_modules
-        working-directory: ${{ matrix.working-directory }}
+        working-directory: apps/${{ matrix.working-directory }}
         run: yarn install --frozen-lockfile
 
       - name: Get Pods cache
         uses: actions/cache@v4
         with:
-          path: ${{ matrix.working-directory }}/ios/Pods
+          path: apps/${{ matrix.working-directory }}/ios/Pods
-          key: ${{ runner.os }}-pods-${{ matrix.working-directory }}-${{ hashFiles(format('{0}/ios/Podfile.lock', matrix.working-directory)) }}
+          key: ${{ runner.os }}-pods-${{ matrix.working-directory }}-${{ hashFiles(format('apps/{0}/ios/Podfile.lock', matrix.working-directory)) }}
           restore-keys: |
             ${{ runner.os }}-pods-${{ matrix.working-directory }}-
 
       - name: Install Pods
-        working-directory: ${{ matrix.working-directory }}/ios
+        working-directory: apps/${{ matrix.working-directory }}/ios
         run: bundle install && bundle exec pod install
 
       - name: Get build artifacts cache
         uses: actions/cache@v4
         with:
           path: ~/Library/Developer/Xcode/DerivedData
-          key: ${{ runner.os }}-ios-derived-data-${{ matrix.working-directory }}-${{ hashFiles(format('{0}/ios/Podfile.lock', matrix.working-directory)) }}
+          key: ${{ runner.os }}-ios-derived-data-${{ matrix.working-directory }}-${{ hashFiles(format('apps/{0}/ios/Podfile.lock', matrix.working-directory)) }}
           restore-keys: |
             ${{ runner.os }}-ios-derived-data-${{ matrix.working-directory }}-
 
       - name: Start Metro server
-        working-directory: ${{ matrix.working-directory }}
+        working-directory: apps/${{ matrix.working-directory }}
         run: E2E=true yarn start &> output.log &
 
       - name: Build app
-        working-directory: ${{ matrix.working-directory }}
+        working-directory: apps/${{ matrix.working-directory }}
         run: E2E=true npx react-native@latest run-ios --simulator="${{ env.DEVICE }}" --mode Debug --verbose
 
       - name: Run e2e Tests

.github/workflows/ios-build-test.yml

@@ -7,10 +7,10 @@ on:
       - apple/**
       - src/fabric/**
       - package.json
-      - example/package.json
+      - apps/example/package.json
-      - example/ios/**
+      - apps/example/ios/**
-      - fabric-example/package.json
+      - apps/fabric-example/package.json
-      - fabric-example/ios/**
+      - apps/fabric-example/ios/**
   push:
     branches:
       - main
@@ -48,34 +48,34 @@ jobs:
       - name: Get app node_modules cache
         uses: actions/cache@v4
         with:
-          path: ${{ matrix.working-directory }}/node_modules
+          path: apps/${{ matrix.working-directory }}/node_modules
-          key: ${{ runner.os }}-node-modules-${{ matrix.working-directory }}-${{ hashFiles(format('{0}/yarn.lock', matrix.working-directory)) }}
+          key: ${{ runner.os }}-node-modules-${{ matrix.working-directory }}-${{ hashFiles(format('apps/{0}/yarn.lock', matrix.working-directory)) }}
           restore-keys: ${{ runner.os }}-node-modules-${{ matrix.working-directory }}-
 
       - name: Install app node_modules
-        working-directory: ${{ matrix.working-directory }}
+        working-directory: apps/${{ matrix.working-directory }}
         run: yarn install --frozen-lockfile
 
       - name: Get Pods cache
         uses: actions/cache@v4
         with:
-          path: ${{ matrix.working-directory }}/ios/Pods
+          path: apps/${{ matrix.working-directory }}/ios/Pods
-          key: ${{ runner.os }}-pods-${{ matrix.working-directory }}-${{ hashFiles(format('{0}/ios/Podfile.lock', matrix.working-directory)) }}
+          key: ${{ runner.os }}-pods-${{ matrix.working-directory }}-${{ hashFiles(format('apps/{0}/ios/Podfile.lock', matrix.working-directory)) }}
           restore-keys: |
             ${{ runner.os }}-pods-${{ matrix.working-directory }}-
 
       - name: Install Pods
-        working-directory: ${{ matrix.working-directory }}/ios
+        working-directory: apps/${{ matrix.working-directory }}/ios
         run: bundle install && bundle exec pod install
 
       - name: Get build artifacts cache
         uses: actions/cache@v4
         with:
           path: ~/Library/Developer/Xcode/DerivedData
-          key: ${{ runner.os }}-ios-derived-data-${{ matrix.working-directory }}-${{ hashFiles(format('{0}/ios/Podfile.lock', matrix.working-directory)) }}
+          key: ${{ runner.os }}-ios-derived-data-${{ matrix.working-directory }}-${{ hashFiles(format('apps/{0}/ios/Podfile.lock', matrix.working-directory)) }}
           restore-keys: |
             ${{ runner.os }}-ios-derived-data-${{ matrix.working-directory }}-
 
       - name: Build app
-        working-directory: ${{ matrix.working-directory }}
+        working-directory: apps/${{ matrix.working-directory }}
         run: npx react-native run-ios --simulator="iPhone 15 Pro" --mode Debug --verbose --no-packager

.github/workflows/macos-build-test.yml

@@ -7,10 +7,10 @@ on:
       - apple/**
       - src/fabric/**
       - package.json
-      - paper-macos-example/package.json
+      - apps/paper-macos-example/package.json
-      - paper-macos-example/ios/**
+      - apps/paper-macos-example/ios/**
-      - fabric-macos-example/package.json
+      - apps/fabric-macos-example/package.json
-      - fabric-macos-example/ios/**
+      - apps/fabric-macos-example/ios/**
   push:
     branches:
       - main
@@ -48,32 +48,32 @@ jobs:
       - name: Get app node_modules cache
         uses: actions/cache@v4
         with:
-          path: ${{ matrix.working-directory }}/node_modules
+          path: apps/${{ matrix.working-directory }}/node_modules
-          key: ${{ runner.os }}-node-modules-${{ matrix.working-directory }}-${{ hashFiles(format('{0}/yarn.lock', matrix.working-directory)) }}
+          key: ${{ runner.os }}-node-modules-${{ matrix.working-directory }}-${{ hashFiles(format('apps/{0}/yarn.lock', matrix.working-directory)) }}
           restore-keys: ${{ runner.os }}-node-modules-${{ matrix.working-directory }}-
 
       - name: Install app node_modules
-        working-directory: ${{ matrix.working-directory }}
+        working-directory: apps/${{ matrix.working-directory }}
         run: yarn install --frozen-lockfile
 
       - name: Get Pods cache
         uses: actions/cache@v4
         with:
-          path: ${{ matrix.working-directory }}/macos/Pods
+          path: apps/${{ matrix.working-directory }}/macos/Pods
-          key: ${{ runner.os }}-pods-${{ matrix.working-directory }}-${{ hashFiles(format('{0}/macos/Podfile.lock', matrix.working-directory)) }}
+          key: ${{ runner.os }}-pods-${{ matrix.working-directory }}-${{ hashFiles(format('apps/{0}/macos/Podfile.lock', matrix.working-directory)) }}
           restore-keys: |
             ${{ runner.os }}-pods-${{ matrix.working-directory }}-
 
       - name: Install Pods
-        working-directory: ${{ matrix.working-directory }}/macos
+        working-directory: apps/${{ matrix.working-directory }}/macos
         run: bundle install && bundle exec pod install
 
       - name: Get build artifacts cache
         uses: actions/cache@v4
         with:
           path: ~/Library/Developer/Xcode/DerivedData
-          key: ${{ runner.os }}-macos-derived-data-${{ matrix.working-directory }}-${{ hashFiles(format('{0}/macos/Podfile.lock', matrix.working-directory)) }}
+          key: ${{ runner.os }}-macos-derived-data-${{ matrix.working-directory }}-${{ hashFiles(format('apps/{0}/macos/Podfile.lock', matrix.working-directory)) }}
 
       - name: Build app
-        working-directory: ${{ matrix.working-directory }}
+        working-directory: apps/${{ matrix.working-directory }}
         run: yarn macos

.github/workflows/windows-build-test.yml

@@ -6,10 +6,10 @@ on:
       - 'windows/**'
       - 'src/fabric/**'
       - 'package.json'
-      - 'paper-windows-example/windows/**'
+      - 'apps/paper-windows-example/windows/**'
-      - 'paper-windows-example/package.json'
+      - 'apps/paper-windows-example/package.json'
-      - 'fabric-windows-example/windows/**'
+      - 'apps/fabric-windows-example/windows/**'
-      - 'fabric-windows-example/package.json'
+      - 'apps/fabric-windows-example/package.json'
   push:
     branches:
       - main
@@ -49,14 +49,14 @@ jobs:
       - name: Restore app node_modules from cache
         uses: actions/cache@v3
         with:
-          path: ${{ matrix.working-directory }}/node_modules
+          path: apps/${{ matrix.working-directory }}/node_modules
-          key: ${{ runner.os }}-node-modules-${{ matrix.working-directory }}-${{ hashFiles(format('{0}/yarn.lock', matrix.working-directory)) }}
+          key: ${{ runner.os }}-node-modules-${{ matrix.working-directory }}-${{ hashFiles(format('apps/{0}/yarn.lock', matrix.working-directory)) }}
           restore-keys: ${{ runner.os }}-node-modules-${{ matrix.working-directory }}-
 
       - name: Install app node_modules
-        working-directory: ${{ matrix.working-directory }}
+        working-directory: apps/${{ matrix.working-directory }}
         run: yarn --frozen-lockfile
 
       - name: Build app
-        working-directory: ${{ matrix.working-directory }}/windows
+        working-directory: apps/${{ matrix.working-directory }}/windows
         run: npx react-native run-windows --logging --no-packager --no-deploy --no-autolink

.gitignore

@@ -51,5 +51,6 @@ experimental/
 # VS Code
 .vscode/
 
+# E2E reports
 jest-html-reporters-attach/
 report.html

.npmignore

@@ -1,2 +1,2 @@
 screenshots/
-idl/
+apps/

apps/common/example/index.tsx

@@ -10,21 +10,20 @@ import {createStackNavigator} from '@react-navigation/stack';
 import React from 'react';
 import {ActivityIndicator, Platform, View} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
-import {allScreens, allScreensKeys} from './src';
+import {ListScreen} from './ListScreen';
-import {ListScreen} from './src/ListScreen';
+import * as E2e from './e2e/index.macos';
-import * as E2e from './src/e2e';
+import {examples} from './examples';
-import {examples} from './src/examples';
+import * as FilterImage from './examples/FilterImage';
-import * as FilterImage from './src/examples/FilterImage';
+import * as Filters from './examples/Filters';
-import * as Filters from './src/examples/Filters';
+import {commonStyles} from './utils/commonStyles';
-import {commonStyles} from './src/utils/commonStyles';
+import composeComponents from './utils/composeComponent';
-import composeComponents from './src/utils/composeComponent';
 import {
   Example,
   Examples,
   NavigationProp,
   RootStackParamList,
-} from './src/utils/types';
+} from './utils/types';
-import {usePersistNavigation} from './src/utils/usePersistNavigation';
+import {usePersistNavigation} from './utils/usePersistNavigation';
 
 export default function App() {
   const {isReady, initialState, persistNavigationState} =
@@ -91,3 +90,11 @@ const Stack =
   Platform.OS === 'macos'
     ? createStackNavigator<RootStackParamList>()
     : createNativeStackNavigator<RootStackParamList>();
+
+const allScreens = {
+  ...examples,
+  ...Filters.samples,
+  ...FilterImage.samples,
+};
+
+const allScreensKeys = Object.keys(allScreens) as (keyof typeof allScreens)[];

apps/common/index.tsx

@@ -0,0 +1,3 @@
+import App from './example';
+
+export default App;

apps/common/test/Test1442.tsx

@@ -73,7 +73,7 @@ const PNGImageFromFile = () => {
         opacity="1"
         width={100}
         height={100}
-        href={require('../assets/arrow.png')}
+        href={require('./assets/arrow.png')}
         onLoad={e =>
           console.log(`${Platform.OS} load png image from file`, e.nativeEvent)
         }
@@ -107,7 +107,7 @@ const JPEGImageFromFile = () => {
         opacity="1"
         width={'100%'}
         height={'100%'}
-        href={require('../assets/earth.jpg')}
+        href={require('./assets/earth.jpg')}
         onLoad={e =>
           console.log(`${Platform.OS} load JPEG image from file`, e.nativeEvent)
         }

apps/common/test/Test1813.tsx

@@ -9,7 +9,7 @@ import {
   LocalSvg,
 } from 'react-native-svg/css';
 
-const asset = require('../assets/ruby.svg');
+const asset = require('./assets/ruby.svg');
 const normalUri =
   'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg';
 const uriWithCss = 'http://thenewcode.com/assets/svg/accessibility.svg';