Update boilerplate dependencies (#427)

* chore(version): bump template deps and react native to 0.74 * feat(debug): add reactotron debugger * fix(theme): improve and fix theming * chore(app): improve code structure * chore(doc): update docs on theme improvement and debugger * chore(deps): update locks
thecodingmachine · May 28, 2024 · c8c6a69 · c8c6a69
1 parent 3380a0a
commit c8c6a69
Show file tree

Hide file tree

Showing 45 changed files with 2,685 additions and 2,936 deletions.
diff --git a/documentation/docs/04-Guides/04-Theming/03-Generated styles/01-Gutters.mdx b/documentation/docs/04-Guides/04-Theming/03-Generated styles/01-Gutters.mdx
@@ -3,7 +3,7 @@ slug: /theming/generated-styles/gutters
 sidebar_label: Gutters
 title: Gutters
 id: theming-generated-styles_gutters
-keywords: [padding, margin, paddings, margins, gutters, spacings]
+keywords: [padding, margin, paddings, margins, gutters, spacings, gap]
 ---
 import Gutters from "../../../../src/components/Gutters";
 
@@ -45,6 +45,7 @@ Where `value` is an array of numbers, the generated keys available through the `
 - `paddingLeft_${value}`,
 - `paddingVertical_${value}`,
 - `paddingHorizontal_${value}`,
+- `gap_${value}`,
 
 The corresponding values behind these keys will be:
 

diff --git a/documentation/docs/04-Guides/04-Theming/03-Generated styles/04-Borders.mdx b/documentation/docs/04-Guides/04-Theming/03-Generated styles/04-Borders.mdx
@@ -38,11 +38,17 @@ export const config = {
 Where `widthsValues` and `radiusValues` are arrays of numbers, `widthValue` is an item of `widthsValues`, `radiusValue` is an item of `radiusValues`, and `colorsValues` is an object with
 `colorsKey` keys and `colorsValue` values, the generated styles are as follows:
 
-| font name                     | Generated style                   |
-|-------------------------------|-----------------------------------|
-| borders.w__widthValue_        | \{ borderWidth: _widthValue_ \}   |
-| borders.rounded__radiusValue_ | \{ borderRadius: _radiusValue_ \} |
-| borders._colorsKey_           | \{ borderColor: _colorsValue_ \}  |
+| border name                    | Generated style                   |
+|--------------------------------|-----------------------------------|
+| borders.w__widthValue_         | \{ borderWidth: _widthValue_ \}   |
+| borders.wTop__widthValue_      | \{ borderWidth: _widthValue_ \}   |
+| borders.wBottom__widthValue_   | \{ borderWidth: _widthValue_ \}   |
+| borders.wLeft__widthValue_     | \{ borderWidth: _widthValue_ \}   |
+| borders.wRight__widthValue_    | \{ borderWidth: _widthValue_ \}   |
+| borders.rounded__radiusValue_  | \{ borderRadius: _radiusValue_ \} |
+| borders.roundedTop__radiusValue_  | \{ borderRadius: _radiusValue_ \} |
+| borders.roundedBottom__radiusValue_  | \{ borderRadius: _radiusValue_ \} |
+| borders._colorsKey_            | \{ borderColor: _colorsValue_ \}  |
 
 
 ## Static borders styles

diff --git a/documentation/docs/04-Guides/07-Debugging.md b/documentation/docs/04-Guides/07-Debugging.md
@@ -0,0 +1,62 @@
+---
+slug: /debugging
+sidebar_label: Debugging
+title: Debugging
+id: debugging
+keywords: [debugging, reactotron]
+---
+
+Found a bug in your app? It can be difficult to identify, especially if you're unsure whether it's related to the network or not.
+In our boilerplate, we've seamlessly integrated [Reactotron](https://github.com/infinitered/reactotron), a powerful desktop app for inspecting React Native projects. 
+Reactotron is invaluable during development, offering an easy way to view your application's logs, async storage, network calls, and state.
+
+### Setup
+By default, the boilerplate comes with Reactotron already configured, saving you time and effort.
+However, if you ever need to fine-tune your Reactotron settings to better suit your
+project's requirements, rest assured that it's a breeze to do so.
+
+Simply navigate to the `./ReactotronConfig.js` file, where you'll find
+the Reactotron configuration. By default, we've set it up to use the configuration suitable for development environment, ensuring a smooth and hassle-free experience from the get-go.
+
+
+```typescript
+import Reactotron from 'reactotron-react-native';
+import mmkvPlugin from 'reactotron-react-native-mmkv';
+import {
+  QueryClientManager,
+  reactotronReactQuery,
+} from 'reactotron-react-query';
+
+import { storage, queryClient } from './src/App';
+import config from './app.json';
+
+const queryClientManager = new QueryClientManager({
+  queryClient,
+});
+
+// highlight-next-line
+// You can change the storage configuration here
+Reactotron.configure({
+  name: config.name,
+  onDisconnect: () => {
+    queryClientManager.unsubscribe();
+  },
+})
+  .useReactNative()
+  // highlight-next-line
+  .use(mmkvPlugin({ storage })) // We use the mmkv plugin to store the Reactotron state
+  // highlight-next-line
+  .use(reactotronReactQuery(queryClientManager)) // We use the react-query plugin to store the Reactotron state
+  .connect();
+```
+
+### Going Further
+For a deeper dive into the world of debugging with
+[Reactotron](https://github.com/infinitered/reactotron),
+we invite you to explore its comprehensive documentation.
+There, you'll find valuable insights and detailed guidance on harnessing the full potential
+of this tool to enhance your app's debugging process.
+
+:::info
+    We use Reactotron while the official React-Native Debugger is not stable. We recommend using Reactotron for debugging purposes.
+:::
diff --git a/documentation/src/components/Borders.tsx b/documentation/src/components/Borders.tsx
@@ -87,18 +87,46 @@ function Borders() {
           <tbody>
             {
                 sizeValues.map((value) => (
-                  <tr>
-                    <td>{`borders.w_${value}`}</td>
-                    <td><code>{`{ borderWidth: ${value} }`}</code></td>
-                  </tr>
+                  <>
+                    <tr>
+                      <td>{`borders.w_${value}`}</td>
+                      <td><code>{`{ borderWidth: ${value} }`}</code></td>
+                    </tr>
+                    <tr>
+                      <td>{`borders.wTop_${value}`}</td>
+                      <td><code>{`{ borderTopWidth: ${value} }`}</code></td>
+                    </tr>
+                    <tr>
+                      <td>{`borders.wRight_${value}`}</td>
+                      <td><code>{`{ borderRightWidth: ${value} }`}</code></td>
+                    </tr>
+                    <tr>
+                      <td>{`borders.wBottom_${value}`}</td>
+                      <td><code>{`{ borderBottomWidth: ${value} }`}</code></td>
+                    </tr>
+                    <tr>
+                      <td>{`borders.wLeft_${value}`}</td>
+                      <td><code>{`{ borderLeftWidth: ${value} }`}</code></td>
+                    </tr>
+                  </>
                 ))
             }
             {
                 radiusValues.map((value) => (
-                  <tr>
-                    <td>{`borders.rounded_${value}`}</td>
-                    <td><code>{`{ borderRadius: ${value} }`}</code></td>
-                  </tr>
+                  <>
+                    <tr>
+                      <td>{`borders.rounded_${value}`}</td>
+                      <td><code>{`{ borderRadius: ${value} }`}</code></td>
+                    </tr>
+                    <tr>
+                      <td>{`borders.roundedTop_${value}`}</td>
+                      <td><code>{`{ borderRadius: ${value} }`}</code></td>
+                    </tr>
+                    <tr>
+                      <td>{`borders.roundedBottom_${value}`}</td>
+                      <td><code>{`{ borderRadius: ${value} }`}</code></td>
+                    </tr>
+                  </>
                 ))
             }
             <tr>

diff --git a/documentation/src/components/Gutters.tsx b/documentation/src/components/Gutters.tsx
@@ -50,6 +50,10 @@ function Gutters() {
             {
                 values.map((value) => (
                   <>
+                    <tr>
+                      <td>{`gap_${value}`}</td>
+                      <td><code>{`{ gap: ${value} }`}</code></td>
+                    </tr>
                     <tr>
                       <td>{`margin_${value}`}</td>
                       <td><code>{`{ margin: ${value} }`}</code></td>

diff --git a/template/.eslintrc.js b/template/.eslintrc.js
@@ -45,7 +45,12 @@ module.exports = {
 		quotes: ['error', 'single'],
 		'object-curly-spacing': ['error', 'always'],
 		'array-bracket-spacing': ['error', 'never'],
-		'react/require-default-props': ['error'],
+		'react/require-default-props': [
+			'error',
+			{
+				functions: 'defaultArguments',
+			},
+		],
 		'react/default-props-match-prop-types': ['error'],
 		'react/sort-prop-types': ['error'],
 		'react/no-array-index-key': 'off',
@@ -55,6 +60,7 @@ module.exports = {
 		'import/prefer-default-export': 'off',
 		'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
 		'react/display-name': 'off',
+		'no-console': ['error', { allow: ['error'] }],
 		'prettier/prettier': [
 			'error',
 			{

diff --git a/template/.eslintrcJsVersion.js b/template/.eslintrcJsVersion.js
@@ -53,6 +53,7 @@ module.exports = {
     'import/prefer-default-export': 'off',
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     'react/display-name': 'off',
+    'no-console': ['error', { allow: ['error'] }],
     'prettier/prettier': [
       'error',
       {

diff --git a/template/.gitignore b/template/.gitignore
@@ -20,12 +20,12 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-template/ios/.xcode.env.local
+**/.xcode.env.local
 
 # Android/IntelliJ
 #
 build/
-../.idea
+.idea
 .gradle
 local.properties
 *.iml
@@ -56,11 +56,19 @@ yarn-error.log
 *.jsbundle
 
 # Ruby / CocoaPods
-/ios/Pods/
+**/Pods/
 /vendor/bundle/
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
 
 # testing
 /coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
diff --git a/template/_gitignore b/template/_gitignore
@@ -20,12 +20,12 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-template/ios/.xcode.env.local
+**/.xcode.env.local
 
 # Android/IntelliJ
 #
 build/
-../.idea
+.idea
 .gradle
 local.properties
 *.iml
@@ -56,11 +56,19 @@ yarn-error.log
 *.jsbundle
 
 # Ruby / CocoaPods
-/ios/Pods/
+**/Pods/
 /vendor/bundle/
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
 
 # testing
 /coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
diff --git a/template/android/app/build.gradle b/template/android/app/build.gradle
@@ -107,7 +107,6 @@ android {
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
-    implementation("com.facebook.react:flipper-integration")
 
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")

diff --git a/template/android/app/src/main/java/com/boilerplate/MainApplication.kt b/template/android/app/src/main/java/com/boilerplate/MainApplication.kt
@@ -9,7 +9,6 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
-import com.facebook.react.flipper.ReactNativeFlipper
 import com.facebook.soloader.SoLoader
 
 class MainApplication : Application(), ReactApplication {
@@ -31,7 +30,7 @@ class MainApplication : Application(), ReactApplication {
       }
 
   override val reactHost: ReactHost
-    get() = getDefaultReactHost(this.applicationContext, reactNativeHost)
+    get() = getDefaultReactHost(applicationContext, reactNativeHost)
 
   override fun onCreate() {
     super.onCreate()
@@ -40,6 +39,5 @@ class MainApplication : Application(), ReactApplication {
       // If you opted-in for the New Architecture, we load the native entry point for this app.
       load()
     }
-    ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
   }
 }
diff --git a/template/android/app/src/main/res/drawable/rn_edit_text_material.xml b/template/android/app/src/main/res/drawable/rn_edit_text_material.xml
@@ -17,7 +17,8 @@
        android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
        android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
        android:insetTop="@dimen/abc_edit_text_inset_top_material"
-       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
+       >
 
     <selector>
         <!--

diff --git a/template/android/build.gradle b/template/android/build.gradle
@@ -1,11 +1,11 @@
 buildscript {
     ext {
         buildToolsVersion = "34.0.0"
-        minSdkVersion = 21
+        minSdkVersion = 23
         compileSdkVersion = 34
         targetSdkVersion = 34
-        ndkVersion = "25.1.8937393"
-        kotlinVersion = "1.8.0"
+        ndkVersion = "26.1.10909125"
+        kotlinVersion = "1.9.22"
     }
     repositories {
         google()

diff --git a/template/android/gradle/wrapper/gradle-wrapper.properties b/template/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.3-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

diff --git a/template/android/gradlew b/template/android/gradlew
@@ -145,15 +145,15 @@ if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
     case $MAX_FD in #(
       max*)
         # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
-        # shellcheck disable=SC3045
+        # shellcheck disable=SC2039,SC3045
         MAX_FD=$( ulimit -H -n ) ||
             warn "Could not query maximum file descriptor limit"
     esac
     case $MAX_FD in  #(
       '' | soft) :;; #(
       *)
         # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
-        # shellcheck disable=SC3045
+        # shellcheck disable=SC2039,SC3045
         ulimit -n "$MAX_FD" ||
             warn "Could not set maximum file descriptor limit to $MAX_FD"
     esac
@@ -202,11 +202,11 @@ fi
 # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 
-# Collect all arguments for the java command;
-#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
-#     shell script including quotes and variable substitutions, so put them in
-#     double quotes to make sure that they get re-expanded; and
-#   * put everything else in single quotes, so that it's not re-expanded.
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
 
 set -- \
         "-Dorg.gradle.appname=$APP_BASE_NAME" \