Refactor code structure for improved readability and maintainability + update deps

Author: JeremyDolle

documentation/.eslintrc.js

@@ -1,10 +1,13 @@
 module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
   plugins: [
-    ['module-resolver', {
-      alias: {
-        'react-native': './mocks/react-native-mock',
+    [
+      'module-resolver',
+      {
+        alias: {
+          'react-native': './mocks/react-native-mock',
+        },
       },
-    }],
+    ],
   ],
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
 };

documentation/babel.config.js

@@ -0,0 +1,4 @@
+declare module '*.webp' {
+  const content: string;
+  export default content;
+}

documentation/declaration.d.ts

@@ -3,12 +3,15 @@ slug: /getting-started
 sidebar_label: Getting Started
 title: Introduction
 id: getting-started
-keywords: ['react-native', 'boilerplate', 'template', 'starter', 'getting started']
+keywords:
+  ['react-native', 'boilerplate', 'template', 'starter', 'getting started']
 ---
-import VersionReader from '../src/components/VersionReader'
-import Tom from '../src/components/Tom'
+
+import VersionReader from '../src/components/version-reader';
+import Tom from '../src/components/tom';
 
 Welcome to the React Native Boilerplate documentation!
+
 <Tom />
 
 This React Native template project is here to jumpstart your mobile app development journey.
@@ -28,6 +31,7 @@ If you find value in this boilerplate, consider giving us a star. It would brigh
 One of the most frequently requested features: **the boilerplate works with both TypeScript and Modern JavaScript (ESNext)!**
 
 During installation, you'll be prompted to choose:
+
 ```bash
 📘 Using typescript ? (Y/n)
 ```
@@ -42,18 +46,17 @@ Both options provide the **exact same architecture, features, and code organizat
 ## Features
 
 | Features                                                               | Description                                                                                                                                                                                                                                     |
-| ---------------------------------------------------------------------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [`Javascript or TypeScript`](/docs/installation#using-the-boilerplate) | Every project, developer, team, and experience is unique. That's why you have the freedom to select either a Modern JavaScript (ESNext) or TypeScript codebase. [The choice is yours!](/docs/installation#using-the-boilerplate)                                |
+| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`Javascript or TypeScript`](/docs/installation#using-the-boilerplate) | Every project, developer, team, and experience is unique. That's why you have the freedom to select either a Modern JavaScript (ESNext) or TypeScript codebase. [The choice is yours!](/docs/installation#using-the-boilerplate)                |
 | [`Navigation`](/docs/navigate)                                         | With [React Navigation](https://reactnavigation.org/), we offer a swift start to your navigation structure through a robust dependency. Check out the details in our [navigation structure documentation](/docs/navigate#navigation-structure). |
 | [`Data fetching`](/docs/data-fetching)️                                 | Leveraging [TanStack Query](https://tanstack.com/query/latest), data fetching has never been this effortless, with a clean domain-based architecture.                                                                                           |
 | [`Internationalization`](/docs/internationalization)                   | Our application is fully prepared for multilingual support, all thanks to [React i18next](https://react.i18next.com/).                                                                                                                          |
 | [`Multi theming`](/docs/theming/how-to-use)                            | Without any extra dependencies, we offer an easy-to-use and maintainable theme configuration                                                                                                                                                    |
 | [`Safe synchronous storage`](/docs/storage)                            | With [React Native MMKV](https://github.com/mrousavy/react-native-mmkv), storing data becomes a breeze, and it can be done securely.                                                                                                            |
 | [`Environment`](/docs/environment)                                     | The app comes pre-installed with all the necessary tools for handling simple environment variables                                                                                                                                              |
-| [`Project Structure Enforcement`](/docs/eslint-project-structure)      | Powerful ESLint rules ensure consistent architecture, preventing common mistakes and enforcing best practices automatically.                                                                                                                     |
+| [`Project Structure Enforcement`](/docs/eslint-project-structure)      | Powerful ESLint rules ensure consistent architecture, preventing common mistakes and enforcing best practices automatically.                                                                                                                    |
 | [`Testing`](/docs/testing)                                             | Pre-configured [Jest](https://jestjs.io/) and [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) setup with organized mocks and test utilities.                                                          |
 
-
 ## Dependencies
 
 As previously mentioned, this boilerplate is intentionally designed to be straightforward and lightweight, steering clear of unnecessary dependencies. It relies on the following key dependencies:

documentation/docs/01-Getting Started.mdx

@@ -5,28 +5,30 @@ title: Gutters
 id: theming-generated-styles_gutters
 keywords: [padding, margin, paddings, margins, gutters, spacings, gap]
 ---
-import Gutters from "../../../../src/components/Gutters";
+
+import Gutters from '../../../../src/components/gutters';
 
 ## How to use ?
 
 Generated styles provided by the `gutters` section of the theme configuration assist in applying margin and padding to your components.
 You can access these styles using the following code:
 
 ```javascript
-const { gutters } = useTheme()
+const { gutters } = useTheme();
 ```
 
 For more details, refer to the `gutters` [section](/docs/theming/api-reference#guttersconfig) of the theme configuration.
 
 ## Generated gutters
+
 Here's the representation of the generated styles for a given `GuttersConfig` like the one below:
 
 ```typescript
 export const config = {
-    // ...
-    gutters: [...value],
-    // ...
-}
+  // ...
+  gutters: [...value],
+  // ...
+};
 ```
 
 Where `value` is an array of numbers, the generated keys available through the `gutters` key will be the concatenation of the gutter name and the value, including:
@@ -58,14 +60,15 @@ The corresponding values behind these keys will be:
 This structure simplifies the process of accessing and applying margin and padding styles with various gutter values.
 
 ## Static gutter styles
+
 Some gutter styles, don't require dynamic generation.
 To accommodate this, we offer the `staticGuttersStyles` object that houses static styles for gutters.
 You can use this file as-is or customize it to your preferences.
 These styles will be seamlessly merged with the generated ones,
 making them accessible through the `gutters` object of the `useTheme` hook.
 
 ## Playground
-Here's a simple playground that provides a visual representation of the objects generated from a given `gutters` configuration:
 
-<Gutters/>
+Here's a simple playground that provides a visual representation of the objects generated from a given `gutters` configuration:
 
+<Gutters />

documentation/docs/04-Guides/04-Theming/03-Generated styles/01-Gutters.mdx

@@ -4,17 +4,17 @@ sidebar_label: Fonts
 title: Fonts
 id: theming-generated-styles_fonts
 keywords: [fonts, fontsize, fontcolor, textcolor, textsize, text]
-
 ---
-import Fonts from "../../../../src/components/Fonts";
+
+import Fonts from '../../../../src/components/fonts';
 
 ## How to use ?
 
 Generated styles provided by the `fonts` section of the theme configuration assist in applying font sizes and text colors to your components.
 You can access these styles using the following code:
 
 ```javascript
-const { fonts } = useTheme()
+const { fonts } = useTheme();
 ```
 
 For more details, refer to the `fonts` [section](/docs/theming/api-reference#fontconfig) of the theme configuration.
@@ -26,31 +26,33 @@ Here is the representation of the generated styles for a given
 
 ```ts title=/src/theme/theme.config.ts
 export const config = {
-    //...
-    fonts: {
-        sizes: sizesValues,
-        colors: colorsValues,
-    },
-    //...
-}
+  //...
+  fonts: {
+    sizes: sizesValues,
+    colors: colorsValues,
+  },
+  //...
+};
 ```
 
 Where `sizesValues` is an array of numbers, `sizeValue` is an item of `sizeValues`, and `colorsValues` is an object with
 `colorsKey` keys and `colorsValue` values, the generated styles are as follows:
 
-| font name                  | Generated style              |
-|----------------------------|------------------------------|
-| fonts.size__sizesValue_ | \{ fontSize: _sizeValue_ \}  |
-| fonts._colorsKey_       | \{ color: _colorsValue_ \}   |
+| font name                | Generated style             |
+| ------------------------ | --------------------------- |
+| fonts.size\__sizesValue_ | \{ fontSize: _sizeValue_ \} |
+| fonts._colorsKey_        | \{ color: _colorsValue_ \}  |
 
 ## Static fonts
+
 Some fonts styles, such as the `fontWeight` property of a text style, don't require dynamic generation.
 To accommodate this, we offer the `staticFontStyles` object that houses static styles for fonts.
 You can use this file as-is or customize it to your preferences.
 These styles will be seamlessly merged with the generated ones,
 making them accessible through the `fonts` object of the `useTheme` hook.
 
 ## Playground
+
 Here's a simple playground that provides a visual representation of the objects generated from a given `fonts` configuration:
 
 <Fonts />

documentation/docs/04-Guides/04-Theming/03-Generated styles/02-Fonts.mdx

@@ -5,15 +5,16 @@ title: Backgrounds
 id: theming-generated-styles_backgrounds
 keywords: [background, backgrounds, colors, color]
 ---
-import Backgrounds from "../../../../src/components/Backgrounds";
+
+import Backgrounds from '../../../../src/components/backgrounds';
 
 ## How to use ?
 
 The styles generated by the `backgrounds` section of the theme configuration are designed to apply background colors to your components.
 To access these styles, you can use the following code:
 
 ```javascript
-const { backgrounds } = useTheme()
+const { backgrounds } = useTheme();
 ```
 
 ## Generated backgrounds
@@ -23,31 +24,33 @@ Here is the representation of the generated styles for a given
 
 ```ts title=/src/theme/theme.config.ts
 export const config = {
+  //...
+  backgrounds: {
+    [colorName]: colorValue,
     //...
-    backgrounds: {
-        [colorName]: colorValue,
-        //...
-    },
-    //...
-}
+  },
+  //...
+};
 ```
 
 The generated styles take the following form:
 
-| background name           | Generated style                     |
-|---------------------------|-------------------------------------|
-| backgrounds._colorName_   | \{ backgroundColor: _colorValue_ \} |
+| background name         | Generated style                     |
+| ----------------------- | ----------------------------------- |
+| backgrounds._colorName_ | \{ backgroundColor: _colorValue_ \} |
 
 These styles enable you to easily apply background colors to your components as needed.
 
 ## Static backgrounds styles
+
 Some background styles, don't require dynamic generation.
 To accommodate this, we offer the `staticBackgroundStyles` object that houses static styles for background.
 You can use this file as-is or customize it to your preferences.
 These styles will be seamlessly merged with the generated ones,
 making them accessible through the `backgrounds` object of the `useTheme` hook.
 
 ## Playground
+
 Here's a simple playground that provides a visual representation of the objects generated from a given `backgrounds` configuration:
 
 <Backgrounds />

documentation/docs/04-Guides/04-Theming/03-Generated styles/03-Backgrounds.mdx

@@ -5,15 +5,16 @@ title: Borders
 id: theming-generated-styles_borders
 keywords: [border, borders, radius, width, color, colors]
 ---
-import Borders from "../../../../src/components/Borders";
+
+import Borders from '../../../../src/components/borders';
 
 ## How to use ?
 
 Generated styles provided by the `borders` section of the theme configuration assist in applying border radius, width and color to your components.
 You can access these styles using the following code:
 
 ```javascript
-const { borders } = useTheme()
+const { borders } = useTheme();
 ```
 
 For more details, refer to the [`borders` section](/docs/theming/api-reference#bordersconfig) of the theme configuration.
@@ -25,40 +26,41 @@ Here is the representation of the generated styles for a given
 
 ```ts title=/src/theme/theme.config.ts
 export const config = {
-    //...
-    borders: {
-        widths: widthsValues,
-        radius: radiusValues,
-        colors: colorsValues,
-    },
-    //...
-}
+  //...
+  borders: {
+    widths: widthsValues,
+    radius: radiusValues,
+    colors: colorsValues,
+  },
+  //...
+};
 ```
 
 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:
 
-| 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_ \}  |
-
+| 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
+
 Some border styles, don't require dynamic generation.
 To accommodate this, we offer the `staticBorderStyles` object that houses static styles for border.
 You can use this file as-is or customize it to your preferences.
 These styles will be seamlessly merged with the generated ones,
 making them accessible through the `borders` object of the `useTheme` hook.
 
 ## Playground
+
 Here's a simple playground that provides a visual representation of the objects generated from a given `borders` configuration:
 
 <Borders />