feat: Paper example app, scripts refactor (#65)

## Description

This PR adds paper example app, refactors metro configs and scripts
included in package.json.

README.md

@@ -87,11 +87,12 @@ All dependencies should be installed with `yarn` in order to ensure that yarn wo
 
 The example app is located in the `example` directory. Inside, you'll find three subdirectories:
 
-- `app` - Where the example app source code is located.
-- `bare` - Sources necessary to run the bare react native app.
-- `expo` - Sources of the expo-managed app.
+- `app` - Where the example app source code is located
+- `fabric` - Sources necessary to run the bare React Native app on Fabric (the New Architecture)
+- `paper` - Sources necessary to run the paper React Native app on Paper (the Old Architecture)
+- `expo` - Sources of the expo-managed app
 
-If you don't need to include **expo** or a **bare** React Native app example, you can just remove the corresponding directory.
+If you don't need to include **expo** or **fabric**/**paper** React Native app example, you can just remove the corresponding directory.
 
 #### Useful Commands
 

bin/init.js

@@ -51,7 +51,7 @@ const init = (projectName, verbose = false, directory = '.') => {
       logger.info('Template files were copied.');
     }
     rename(projectPath, projectName, verbose);
-    logger.success('Temaplate was successfully cloned!');
+    logger.success('Template was successfully cloned!');
     initGitRepository(projectPath, verbose);
     installPackages(projectPath, verbose);
     logger.success('🎉 Project was successfully initialized!');
@@ -72,16 +72,18 @@ const init = (projectName, verbose = false, directory = '.') => {
     );
 
     logger.info('\n\n💻 Useful commands:');
-    logger.info('1. Bare example app:');
-    logger.info('   - yarn example:bare pod - install pods for iOS');
-    logger.info('   - yarn example:bare start - start the Metro bundler');
-    logger.info('   - yarn example:bare android - run the Android app');
-    logger.info('   - yarn example:bare ios - run the iOS app');
+    logger.info('1. Bare React Native example app:');
+    logger.info('   - cd examples/fabric or cd examples/paper');
+    logger.info('   - yarn pod - install pods for iOS');
+    logger.info('   - yarn start - start the Metro bundler');
+    logger.info('   - yarn android - run the Android app');
+    logger.info('   - yarn ios - run the iOS app');
 
     logger.info('\n2. Expo example app:');
-    logger.info('   - yarn example:expo start - start the Expo Go app');
-    logger.info('   - yarn example:expo android - run the Android app');
-    logger.info('   - yarn example:expo ios - run the iOS app');
+    logger.info('   - cd examples/expo');
+    logger.info('   - yarn start - start the Expo Go app');
+    logger.info('   - yarn android - run the Android app');
+    logger.info('   - yarn ios - run the iOS app');
 
     logger.info('\n3. Code quality:');
     logger.info('   - yarn lint - check code quality');

template/.prettierignore

@@ -7,3 +7,4 @@ android
 ios
 node_modules
 CHANGELOG.md
+vendor

template/example/expo/metro.config.js

@@ -1,15 +1,26 @@
 const path = require('path');
+const fs = require('fs');
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const getWorkspaces = require('get-yarn-workspaces');
-const { getDefaultConfig } = require('@expo/metro-config');
-const { mergeConfig } = require('@react-native/metro-config');
 
-const workspaces = getWorkspaces(__dirname).filter(
-  // Include all workspaces except bare in the expo example
-  workspaceDir => !workspaceDir.includes('bare')
+const exampleDir = path.resolve(__dirname, '..');
+const excludeRegex = new RegExp(
+  fs
+    .readdirSync(exampleDir, { withFileTypes: true })
+    .filter(dirent => dirent.isDirectory())
+    .map(dirent => dirent.name)
+    .filter(dirName => !['app', path.basename(__dirname)].includes(dirName))
+    .map(dirName => `${exampleDir}/${dirName}`)
+    .join('|')
 );
 
 const customConfig = {
-  watchFolders: [path.resolve(__dirname, '../../node_modules'), ...workspaces]
+  watchFolders: [
+    path.resolve(__dirname, '../../node_modules'),
+    ...getWorkspaces(__dirname).filter(
+      workspaceDir => !excludeRegex.test(workspaceDir)
+    )
+  ]
 };
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), customConfig);

template/example/fabric/metro.config.js

@@ -0,0 +1,26 @@
+const path = require('path');
+const fs = require('fs');
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const getWorkspaces = require('get-yarn-workspaces');
+
+const exampleDir = path.resolve(__dirname, '..');
+const excludeRegex = new RegExp(
+  fs
+    .readdirSync(exampleDir, { withFileTypes: true })
+    .filter(dirent => dirent.isDirectory())
+    .map(dirent => dirent.name)
+    .filter(dirName => !['app', path.basename(__dirname)].includes(dirName))
+    .map(dirName => `${exampleDir}/${dirName}`)
+    .join('|')
+);
+
+const customConfig = {
+  watchFolders: [
+    path.resolve(__dirname, '../../node_modules'),
+    ...getWorkspaces(__dirname).filter(
+      workspaceDir => !excludeRegex.test(workspaceDir)
+    )
+  ]
+};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), customConfig);

template/example/fabric/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "example-fabric",
+  "version": "1.0.0",
+  "dependencies": {
+    "react-native": "*"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "pod": "cd ios && bundle install && bundle exec pod install && rm -f .xcode.env.local && cd ..",
+    "postinstall": "yarn watchman:clear",
+    "start": "react-native start",
+    "watchman:clear": "command -v watchman >/dev/null 2>&1 && watchman watch-del-all || echo 'Watchman not found, skipping...'"
+  }
+}

template/example/paper/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

template/example/paper/.gitignore

@@ -0,0 +1,66 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+**/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+**/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage

template/example/paper/.watchmanconfig

@@ -0,0 +1 @@
+{}

template/example/paper/Gemfile

@@ -0,0 +1,9 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'

template/example/paper/Gemfile.lock

@@ -0,0 +1,100 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    CFPropertyList (3.0.6)
+      rexml
+    activesupport (7.0.8)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+    addressable (2.8.6)
+      public_suffix (>= 2.0.2, < 6.0)
+    algoliasearch (1.27.5)
+      httpclient (~> 2.8, >= 2.8.3)
+      json (>= 1.5.1)
+    atomos (0.1.3)
+    claide (1.1.0)
+    cocoapods (1.14.3)
+      addressable (~> 2.8)
+      claide (>= 1.0.2, < 2.0)
+      cocoapods-core (= 1.14.3)
+      cocoapods-deintegrate (>= 1.0.3, < 2.0)
+      cocoapods-downloader (>= 2.1, < 3.0)
+      cocoapods-plugins (>= 1.0.0, < 2.0)
+      cocoapods-search (>= 1.0.0, < 2.0)
+      cocoapods-trunk (>= 1.6.0, < 2.0)
+      cocoapods-try (>= 1.1.0, < 2.0)
+      colored2 (~> 3.1)
+      escape (~> 0.0.4)
+      fourflusher (>= 2.3.0, < 3.0)
+      gh_inspector (~> 1.0)
+      molinillo (~> 0.8.0)
+      nap (~> 1.0)
+      ruby-macho (>= 2.3.0, < 3.0)
+      xcodeproj (>= 1.23.0, < 2.0)
+    cocoapods-core (1.14.3)
+      activesupport (>= 5.0, < 8)
+      addressable (~> 2.8)
+      algoliasearch (~> 1.0)
+      concurrent-ruby (~> 1.1)
+      fuzzy_match (~> 2.0.4)
+      nap (~> 1.0)
+      netrc (~> 0.11)
+      public_suffix (~> 4.0)
+      typhoeus (~> 1.0)
+    cocoapods-deintegrate (1.0.5)
+    cocoapods-downloader (2.1)
+    cocoapods-plugins (1.0.0)
+      nap
+    cocoapods-search (1.0.1)
+    cocoapods-trunk (1.6.0)
+      nap (>= 0.8, < 2.0)
+      netrc (~> 0.11)
+    cocoapods-try (1.2.0)
+    colored2 (3.1.2)
+    concurrent-ruby (1.2.2)
+    escape (0.0.4)
+    ethon (0.16.0)
+      ffi (>= 1.15.0)
+    ffi (1.16.3)
+    fourflusher (2.3.1)
+    fuzzy_match (2.0.4)
+    gh_inspector (1.1.3)
+    httpclient (2.8.3)
+    i18n (1.14.1)
+      concurrent-ruby (~> 1.0)
+    json (2.7.1)
+    minitest (5.20.0)
+    molinillo (0.8.0)
+    nanaimo (0.3.0)
+    nap (1.1.0)
+    netrc (0.11.0)
+    public_suffix (4.0.7)
+    rexml (3.2.6)
+    ruby-macho (2.5.1)
+    typhoeus (1.4.1)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    xcodeproj (1.23.0)
+      CFPropertyList (>= 2.3.3, < 4.0)
+      atomos (~> 0.1.3)
+      claide (>= 1.0.2, < 2.0)
+      colored2 (~> 3.1)
+      nanaimo (~> 0.3.0)
+      rexml (~> 3.2.4)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  activesupport (>= 6.1.7.5, != 7.1.0)
+  cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
+  xcodeproj (< 1.26.0)
+
+RUBY VERSION
+   ruby 3.2.2p53
+
+BUNDLED WITH
+   2.5.1