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

Author: JeremyDolle

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:
 

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

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.
+:::

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>

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>

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',
 			{

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',
       {

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

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

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")